render popover to other side on rtl

RocketChat · Apr 11, 2018 · 190cd4b · 190cd4b
1 parent eb12969
commit 190cd4b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 25 deletions.
diff --git a/packages/rocketchat-ui-sidenav/client/sidebarHeader.js b/packages/rocketchat-ui-sidenav/client/sidebarHeader.js
@@ -105,13 +105,9 @@ const toolbarButtons = (user) => {
 						]
 					}
 				],
-				mousePosition: () => ({
-					x: e.currentTarget.getBoundingClientRect().left,
-					y: e.currentTarget.getBoundingClientRect().bottom + 50
-				}),
+				currentTarget: e.currentTarget,
 				customCSSProperties: () => ({
-					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
-					left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
+					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`
 				})
 			};
 
@@ -125,13 +121,9 @@ const toolbarButtons = (user) => {
 			const options = [];
 			const config = {
 				template: 'sortlist',
-				mousePosition: () => ({
-					x: e.currentTarget.getBoundingClientRect().left,
-					y: e.currentTarget.getBoundingClientRect().bottom + 50
-				}),
+				currentTarget: e.currentTarget,
 				customCSSProperties: () => ({
-					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
-					left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
+					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`
 				}),
 				data: {
 					// value: instance.form[key].get(),
@@ -209,13 +201,9 @@ const toolbarButtons = (user) => {
 						]
 					}
 				],
-				mousePosition: () => ({
-					x: e.currentTarget.getBoundingClientRect().left,
-					y: e.currentTarget.getBoundingClientRect().bottom + 50
-				}),
+				currentTarget: e.currentTarget,
 				customCSSProperties: () => ({
-					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
-					left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
+					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`
 				})
 			};
 
@@ -323,13 +311,9 @@ Template.sidebarHeader.events({
 						]
 					}
 				],
-				mousePosition: () => ({
-					x: e.currentTarget.getBoundingClientRect().left,
-					y: e.currentTarget.getBoundingClientRect().bottom + 50
-				}),
+				currentTarget: e.currentTarget,
 				customCSSProperties: () => ({
-					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`,
-					left: `${ e.currentTarget.getBoundingClientRect().left - 10 }px`
+					top:  `${ e.currentTarget.getBoundingClientRect().bottom + 10 }px`
 				})
 			};
 

diff --git a/packages/rocketchat-ui/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
@@ -43,7 +43,10 @@ Template.popover.onRendered(function() {
 	const position = _.throttle(() => {
 		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()[isRtl() ? 'right': 'left'],
+			y: this.data.currentTarget.getBoundingClientRect().bottom + 50
+		};
 		if (position) {
 			popoverContent.style.top = `${ position.top }px`;
 			popoverContent.style.left = `${ position.left }px`;