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

[FIX] Wrong positioning of popover when using RTL languages
RocketChat · Apr 17, 2018 · ddcaa5b · ddcaa5b
1 parent cb34777
commit ddcaa5b
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 137 deletions.
diff --git a/packages/rocketchat-emoji/client/lib/EmojiPicker.js b/packages/rocketchat-emoji/client/lib/EmojiPicker.js
@@ -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);

diff --git a/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js b/packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js
@@ -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);
 	}

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css
@@ -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);
 		}

diff --git a/packages/rocketchat-ui-flextab/client/flexTabBar.js b/packages/rocketchat-ui-flextab/client/flexTabBar.js
@@ -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);

diff --git a/packages/rocketchat-ui-flextab/client/tabs/membersList.js b/packages/rocketchat-ui-flextab/client/tabs/membersList.js
@@ -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');
 			}

diff --git a/packages/rocketchat-ui-flextab/client/tabs/userInfo.js b/packages/rocketchat-ui-flextab/client/tabs/userInfo.js
@@ -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);
 	},

diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
@@ -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
 			},

diff --git a/packages/rocketchat-ui-sidenav/client/sidebarHeader.js b/packages/rocketchat-ui-sidenav/client/sidebarHeader.js
@@ -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);

diff --git a/packages/rocketchat-ui-sidenav/client/sidebarItem.js b/packages/rocketchat-ui-sidenav/client/sidebarItem.js
@@ -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);