apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[FIX] render popover to other side on RTL (#10428)

Browse Source 
[FIX] Wrong positioning of popover when using RTL languages
pull/10496/head
Guilherme Gazzo 8 years ago committed by Rodrigo Nascimento
parent cb34777455
commit ddcaa5bf24
11 changed files with 90 additions and 137 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 32
      packages/rocketchat-emoji/client/lib/EmojiPicker.js
  2. 12
      packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
  3. 9
      packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css
  4. 15
      packages/rocketchat-ui-flextab/client/flexTabBar.js
  5. 12
      packages/rocketchat-ui-flextab/client/tabs/membersList.js
  6. 15
      packages/rocketchat-ui-flextab/client/tabs/userInfo.js
  7. 14
      packages/rocketchat-ui-message/client/messageBox.js
  8. 43
      packages/rocketchat-ui-sidenav/client/sidebarHeader.js
  9. 8
      packages/rocketchat-ui-sidenav/client/sidebarItem.js
  10. 58
      packages/rocketchat-ui/client/views/app/popover.js
  11. 9
      packages/rocketchat-ui/client/views/app/room.js

32
packages/rocketchat-emoji/client/lib/EmojiPicker.js
Unescape View File

@ -2,8 +2,8 @@
import _ from 'underscore';
RocketChat.EmojiPicker = {
width: 390,
height: 238,
width: 365,
height: 290,
initiated: false,
input: null,
source: null,
@ -54,27 +54,23 @@ RocketChat.EmojiPicker = {
return this.recent;
},
setPosition() {
const windowHeight = window.innerHeight;
const windowBorder = 10;
const sourcePos = $(this.source).offset();
const left = sourcePos.left;
const top = sourcePos.top - this.height - 60;
const cssProperties = {
top,
left
};
if (top < 0) {
cssProperties.top = 10;
const top = sourcePos.top;
const cssProperties = {top, left};
if (top + this.height >= windowHeight) {
cssProperties.top = windowHeight - this.height - windowBorder;
}
if (left < 35) {
cssProperties.left = 0;
} else {
const windowSize = $(window).width();
const pickerWidth = $('.emoji-picker').outerWidth();
if (left < windowBorder) {
cssProperties.left = windowBorder;
}
if (left + pickerWidth > windowSize) {
cssProperties.left = left - pickerWidth;
}
if (left + this.width >= window.innerWidth) {
cssProperties.left = left - this.width - windowBorder;
}
return $('.emoji-picker').css(cssProperties);

12
packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
Unescape View File

@ -309,21 +309,15 @@ Template.pushNotificationsFlexTab.events({
const config = {
popoverClass: 'notifications-preferences',
template: 'pushNotificationsPopover',
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().left,
y: e.currentTarget.getBoundingClientRect().bottom + 50
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
}),
data: {
change : (value) => {
return instance.form[key].set(key === 'desktopNotificationDuration' ? parseInt(value) : value);
},
value: instance.form[key].get(),
options
}
},
currentTarget: e.currentTarget,
offsetVertical: e.currentTarget.clientHeight + 10
};
popover.open(config);
}

9
packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css
Unescape View File

@ -1,5 +1,6 @@
.sidebar__header {
position: relative;
display: flex;
margin: 0 -10px;
@ -31,11 +32,11 @@
width: var(--sidebar-account-status-bullet-size);
height: var(--sidebar-account-status-bullet-size);
border-width: 2px;
pointer-events: none;
border-width: 2px;
border-style: solid;
border-color: var(--sidebar-background);
border-radius: var(--sidebar-account-status-bullet-radius);
&--online {
@ -77,9 +78,11 @@
&-search {
position: absolute;
right: calc(10px + var(--sidebar-default-padding));
width: 200px;
display: none;
width: 200px;
& .rc-input__element {
background-color: var(--sidebar-background);
}

15
packages/rocketchat-ui-flextab/client/flexTabBar.js
Unescape View File

@ -1,4 +1,4 @@
/* globals popover, isRtl */
/* globals popover */
import _ from 'underscore';
const commonHelpers = {
@ -149,22 +149,15 @@ Template.RoomsActionTab.events({
columns[0] = {groups};
const config = {
columns,
// template: 'RoomsActionMore',
popoverClass: 'message-box',
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().right + 10,
y: e.currentTarget.getBoundingClientRect().bottom + 100
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: isRtl() ? `${ e.currentTarget.getBoundingClientRect().left - 10 }px` : undefined
}),
data: {
rid: this._id,
buttons: instance.small.get() ? buttons : buttons.slice(4),
tabBar: instance.tabBar
},
activeElement: e.currentTarget
currentTarget: e.currentTarget,
offsetHorizontal: -e.currentTarget.clientWidth,
offsetVertical: e.currentTarget.clientHeight + 10
};
popover.open(config);

12
packages/rocketchat-ui-flextab/client/tabs/membersList.js
Unescape View File

@ -1,4 +1,4 @@
/* globals WebRTC popover isRtl */
/* globals WebRTC popover */
import _ from 'underscore';
import {getActions} from './userActions';
@ -216,20 +216,12 @@ Template.membersList.events({
e.preventDefault();
const config = {
columns,
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().right + 10,
y: e.currentTarget.getBoundingClientRect().bottom + 100
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: isRtl() ? `${ e.currentTarget.getBoundingClientRect().left - 10 }px` : undefined
}),
data: {
rid: this._id,
username: instance.data.username,
instance
},
activeElement: e.currentTarget,
currentTarget: e.currentTarget,
onDestroyed:() => {
e.currentTarget.parentElement.classList.remove('active');
}

15
packages/rocketchat-ui-flextab/client/tabs/userInfo.js
Unescape View File

@ -1,4 +1,4 @@
/* globals RoomRoles, UserRoles*/
/* globals RoomRoles UserRoles popover */
import _ from 'underscore';
import s from 'underscore.string';
import moment from 'moment';
@ -168,7 +168,7 @@ Template.userInfo.helpers({
return RocketChat.settings.get('Accounts_ManuallyApproveNewUsers') && user.active === false && user.reason;
}
});
/* globals isRtl popover */
Template.userInfo.events({
'click .js-more'(e, instance) {
const actions = more.call(this);
@ -193,20 +193,13 @@ Template.userInfo.events({
e.preventDefault();
const config = {
columns,
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().right + 10,
y: e.currentTarget.getBoundingClientRect().bottom + 100
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: isRtl() ? `${ e.currentTarget.getBoundingClientRect().left - 10 }px` : undefined
}),
data: {
rid: this._id,
username: instance.data.username,
instance
},
activeElement: e.currentTarget
currentTarget: e.currentTarget,
offsetVertical: e.currentTarget.clientHeight + 10
};
popover.open(config);
},

14
packages/rocketchat-ui-message/client/messageBox.js
Unescape View File

@ -1,4 +1,4 @@
/* globals fileUpload KonchatNotification chatMessages popover isRtl AudioRecorder chatMessages fileUploadHandler*/
/* globals fileUpload KonchatNotification chatMessages popover AudioRecorder chatMessages fileUploadHandler*/
import toastr from 'toastr';
import moment from 'moment';
import _ from 'underscore';
@ -449,8 +449,6 @@ Template.messageBox.events({
},
'click .rc-message-box__action-menu'(e) {
const groups = RocketChat.messageBox.actions.get();
const textArea = document.querySelector('.rc-message-box__textarea');
const config = {
popoverClass: 'message-box',
columns: [
@ -472,13 +470,9 @@ Template.messageBox.events({
})
}
],
mousePosition: {
x: document.querySelector('.rc-message-box__textarea').getBoundingClientRect().right + 40,
y: document.querySelector('.rc-message-box__textarea').getBoundingClientRect().top
},
customCSSProperties: {
left: isRtl() ? `${ textArea.getBoundingClientRect().left - 10 }px` : undefined
},
offsetVertical: 10,
direction: 'top-inverted',
currentTarget: e.currentTarget.firstElementChild.firstElementChild,
data: {
rid: this._id
},

43
packages/rocketchat-ui-sidenav/client/sidebarHeader.js
Unescape View File

@ -105,14 +105,8 @@ const toolbarButtons = (user) => {
]
}
],
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().left,
y: e.currentTarget.getBoundingClientRect().bottom + 50
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
})
currentTarget: e.currentTarget,
offsetVertical: e.currentTarget.clientHeight + 10
};
popover.open(config);
@ -125,18 +119,11 @@ const toolbarButtons = (user) => {
const options = [];
const config = {
template: 'sortlist',
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().left,
y: e.currentTarget.getBoundingClientRect().bottom + 50
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
}),
currentTarget: e.currentTarget,
data: {
// value: instance.form[key].get(),
options
}
},
offsetVertical: e.currentTarget.clientHeight + 10
};
popover.open(config);
}
@ -209,14 +196,8 @@ const toolbarButtons = (user) => {
]
}
],
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().left,
y: e.currentTarget.getBoundingClientRect().bottom + 50
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
})
currentTarget: e.currentTarget,
offsetVertical: e.currentTarget.clientHeight + 10
};
popover.open(config);
@ -323,14 +304,8 @@ Template.sidebarHeader.events({
]
}
],
mousePosition: () => ({
x: e.currentTarget.getBoundingClientRect().left,
y: e.currentTarget.getBoundingClientRect().bottom + 50
}),
customCSSProperties: () => ({
top: `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
})
currentTarget: e.currentTarget,
offsetVertical: e.currentTarget.clientHeight + 10
};
popover.open(config);

8
packages/rocketchat-ui-sidenav/client/sidebarItem.js
Unescape View File

@ -159,15 +159,13 @@ Template.sidebarItem.events({
]
}
],
mousePosition: {
x: e.clientX,
y: e.clientY
},
data: {
template: this.t,
rid: this.rid,
name: this.name
}
},
currentTarget: e.currentTarget,
offsetHorizontal: -e.currentTarget.clientWidth
};
popover.open(config);

58
packages/rocketchat-ui/client/views/app/popover.js
Unescape View File

@ -38,40 +38,62 @@ Template.popover.onRendered(function() {
popover.close();
}
});
const { offsetVertical = 0, offsetHorizontal = 0 } = this.data;
const activeElement = this.data.activeElement;
const popoverContent = this.firstNode.children[0];
const position = _.throttle(() => {
const direction = typeof this.data.direction === 'function' ? this.data.direction() : this.data.direction;
const verticalDirection = /top/.test(direction) ? 'top' : 'bottom';
const horizontalDirection = /left/.test(direction) ? 'left' : /right/.test(direction) ? 'right' : isRtl() ^ /inverted/.test(direction) ? 'left' : 'right';
const position = typeof this.data.position === 'function' ? this.data.position() : this.data.position;
const customCSSProperties = typeof this.data.customCSSProperties === 'function' ? this.data.customCSSProperties() : this.data.customCSSProperties;
const mousePosition = typeof this.data.mousePosition === 'function' ? this.data.mousePosition() : this.data.mousePosition;
const mousePosition = typeof this.data.mousePosition === 'function' ? this.data.mousePosition() : this.data.mousePosition || {
x: this.data.currentTarget.getBoundingClientRect()[horizontalDirection === 'left'? 'right' : 'left'],
y: this.data.currentTarget.getBoundingClientRect()[verticalDirection]
};
const offsetWidth = offsetHorizontal * (horizontalDirection === 'left' ? 1 : -1);
const offsetHeight = offsetVertical * (verticalDirection === 'bottom' ? 1 : -1);
if (position) {
popoverContent.style.top = `${ position.top }px`;
popoverContent.style.left = `${ position.left }px`;
} else {
const clientHeight = this.data.currentTarget.clientHeight;
const popoverWidth = popoverContent.offsetWidth;
const popoverHeight = popoverContent.offsetHeight;
const popoverHeightHalf = popoverHeight / 2;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let top;
if (mousePosition.y <= popoverHeightHalf) {
top = 10;
} else if (mousePosition.y + popoverHeightHalf > windowHeight) {
top = windowHeight - popoverHeight - 10;
} else {
top = mousePosition.y - popoverHeightHalf;
let top = mousePosition.y - clientHeight + offsetHeight;
if (verticalDirection === 'top') {
top = mousePosition.y - popoverHeight + offsetHeight;
if (top < 0) {
top = 10 + offsetHeight;
}
}
if (top + popoverHeight > windowHeight) {
top = windowHeight - 10 - popoverHeight - offsetHeight;
}
let left = mousePosition.x - popoverWidth + offsetWidth;
if (horizontalDirection === 'right') {
left = mousePosition.x + offsetWidth;
}
if (left + popoverWidth >= windowWidth) {
left = mousePosition.x - popoverWidth + offsetWidth;
}
let left;
if (mousePosition.x + popoverWidth >= windowWidth) {
left = mousePosition.x - popoverWidth;
} else if (mousePosition.x <= popoverWidth) {
left = isRtl() ? mousePosition.x + 10 : 10;
} else if (mousePosition.x <= windowWidth / 2) {
left = mousePosition.x;
} else {
left = mousePosition.x - popoverWidth;
if (left <= 0) {
left = mousePosition.x + offsetWidth;
}
popoverContent.style.top = `${ top }px`;

9
packages/rocketchat-ui/client/views/app/room.js
Unescape View File

@ -112,10 +112,6 @@ const mountPopover = (e, i, outerContext) => {
],
instance: i,
data: outerContext,
mousePosition: {
x: e.clientX,
y: e.clientY
},
activeElement: $(e.currentTarget).parents('.message')[0],
onRendered: () => new Clipboard('.rc-popover__item')
};
@ -582,10 +578,7 @@ Template.room.events({
],
instance: i,
data: this,
mousePosition: {
x: e.clientX,
y: e.clientY
},
currentTarget: e.currentTarget,
activeElement: $(e.currentTarget).parents('.message')[0],
onRendered: () => new Clipboard('.rc-popover__item')
};

Write Preview
Loading…
Cancel
Save