changed the way how popover works

RocketChat · Apr 12, 2018 · 540c0e9 · 540c0e9
1 parent 190cd4b
commit 540c0e9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
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/client/views/app/popover.js b/packages/rocketchat-ui/client/views/app/popover.js
@@ -38,15 +38,26 @@ 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';
+		console.log(horizontalDirection);
+
 		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 || {
-			x: this.data.currentTarget.getBoundingClientRect()[isRtl() ? 'right': 'left'],
-			y: this.data.currentTarget.getBoundingClientRect().bottom + 50
+			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`;
@@ -57,24 +68,30 @@ Template.popover.onRendered(function() {
 			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 - popoverHeight + offsetHeight;
+
+			if (verticalDirection === 'top') {
+				top = mousePosition.y - popoverHeight + offsetHeight;
+			}
+			if (top <= popoverHeightHalf) {
+				top = 10 + offsetHeight;
+			}
+			if (top > windowHeight) {
+				top = windowHeight - 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`;

diff --git a/packages/rocketchat-ui/client/views/app/room.js b/packages/rocketchat-ui/client/views/app/room.js
@@ -576,10 +576,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')
 		};