Merge pull request #9843 from RocketChat/avatar-menu

Regression: Avatar now open account related options
RocketChat · Feb 22, 2018 · 2ef6942 · 2ef6942
2 parents 1e5450d + 5d41a67
commit 2ef6942
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 77 deletions.
diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css
@@ -14,6 +14,10 @@
 		width: var(--sidebar-account-thumb-size);
 		height: var(--sidebar-account-thumb-size);
 		margin: 0 10px;
+
+		& .avatar {
+			cursor: pointer;
+		}
 	}
 
 	&-status-bullet {

diff --git a/packages/rocketchat-ui-sidenav/client/sidebarHeader.js b/packages/rocketchat-ui-sidenav/client/sidebarHeader.js
@@ -1,4 +1,4 @@
-/* globals popover isRtl menu */
+/* globals popover menu */
 const setStatus = status => {
 	AccountBox.setStatus(status);
 	RocketChat.callbacks.run('userStatusManuallySet', status);
@@ -153,10 +153,10 @@ const toolbarButtons = (user) => {
 	{
 		name: t('Options'),
 		icon: 'menu',
-		condition: () => !(Meteor.userId() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead')),
-		action: () => {
+		condition: () => AccountBox.getItems().length || RocketChat.authz.hasAtLeastOnePermission(['view-statistics', 'view-room-administration', 'view-user-administration', 'view-privileged-setting' ]),
+		action: (e) => {
 			let adminOption;
-			if (RocketChat.authz.hasAtLeastOnePermission(['view-statistics', 'view-room-administration', 'view-user-administration', 'view-privileged-setting' ]) || (RocketChat.AdminBox.getOptions().length > 0)) {
+			if (RocketChat.authz.hasAtLeastOnePermission(['view-statistics', 'view-room-administration', 'view-user-administration', 'view-privileged-setting' ])) {
 				adminOption = {
 					icon: 'customize',
 					name: t('Administration'),
@@ -171,44 +171,11 @@ const toolbarButtons = (user) => {
 				};
 			}
 
-			const sidebarHeader = document.querySelector('.sidebar__header');
-			const sidebarHeaderPadding = parseInt(getComputedStyle(sidebarHeader)['padding-left'].replace('px', '')) * 2;
-			const sidebarHeaderMargin = parseInt(getComputedStyle(sidebarHeader)['margin-left'].replace('px', '')) * 2;
-
 			const config = {
 				popoverClass: 'sidebar-header',
 				columns: [
 					{
 						groups: [
-							{
-								title: t('User'),
-								items: [
-									{
-										icon: 'circle',
-										name: t('Online'),
-										modifier: 'online',
-										action: () => setStatus('online')
-									},
-									{
-										icon: 'circle',
-										name: t('Away'),
-										modifier: 'away',
-										action: () => setStatus('away')
-									},
-									{
-										icon: 'circle',
-										name: t('Busy'),
-										modifier: 'busy',
-										action: () => setStatus('busy')
-									},
-									{
-										icon: 'circle',
-										name: t('Invisible'),
-										modifier: 'offline',
-										action: () => setStatus('offline')
-									}
-								]
-							},
 							{
 								items: AccountBox.getItems().map(item => {
 									let action;
@@ -237,47 +204,19 @@ const toolbarButtons = (user) => {
 										sideNav: item.sideNav,
 										action
 									};
-								}).concat([
-									adminOption,
-									{
-										icon: 'user',
-										name: t('My_Account'),
-										type: 'open',
-										id: 'account',
-										action: () => {
-											SideNav.setFlex('accountFlex');
-											SideNav.openFlex();
-											FlowRouter.go('account');
-											popover.close();
-										}
-									},
-									{
-										icon: 'sign-out',
-										name: t('Logout'),
-										type: 'open',
-										id: 'logout',
-										action: () => {
-											Meteor.logout(() => {
-												RocketChat.callbacks.run('afterLogoutCleanUp', user);
-												Meteor.call('logoutCleanUp', user);
-												FlowRouter.go('home');
-												popover.close();
-											});
-										}
-									}
-								])
+								}).concat([adminOption])
 							}
 						]
 					}
 				],
-				position: {
-					top: sidebarHeader.offsetHeight
-				},
-				customCSSProperties: {
-					width: `${ sidebarHeader.offsetWidth - sidebarHeaderPadding + sidebarHeaderMargin }px`,
-					left: isRtl() ? 'auto' : getComputedStyle(sidebarHeader)['padding-left'],
-					right: isRtl() ? getComputedStyle(sidebarHeader)['padding-left'] : 'auto'
-				}
+				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`
+				})
 			};
 
 			popover.open(config);
@@ -313,5 +252,88 @@ Template.sidebarHeader.events({
 			e.currentTarget.blur();
 		}
 		return this.action && this.action.apply(this, [e]);
+	},
+	'click .sidebar__header .avatar'(e) {
+		if (!(Meteor.userId() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead'))) {
+			const user = Meteor.user();
+			const config = {
+				popoverClass: 'sidebar-header',
+				columns: [
+					{
+						groups: [
+							{
+								title: t('User'),
+								items: [
+									{
+										icon: 'circle',
+										name: t('Online'),
+										modifier: 'online',
+										action: () => setStatus('online')
+									},
+									{
+										icon: 'circle',
+										name: t('Away'),
+										modifier: 'away',
+										action: () => setStatus('away')
+									},
+									{
+										icon: 'circle',
+										name: t('Busy'),
+										modifier: 'busy',
+										action: () => setStatus('busy')
+									},
+									{
+										icon: 'circle',
+										name: t('Invisible'),
+										modifier: 'offline',
+										action: () => setStatus('offline')
+									}
+								]
+							},
+							{
+								items: [
+									{
+										icon: 'user',
+										name: t('My_Account'),
+										type: 'open',
+										id: 'account',
+										action: () => {
+											SideNav.setFlex('accountFlex');
+											SideNav.openFlex();
+											FlowRouter.go('account');
+											popover.close();
+										}
+									},
+									{
+										icon: 'sign-out',
+										name: t('Logout'),
+										type: 'open',
+										id: 'logout',
+										action: () => {
+											Meteor.logout(() => {
+												RocketChat.callbacks.run('afterLogoutCleanUp', user);
+												Meteor.call('logoutCleanUp', user);
+												FlowRouter.go('home');
+												popover.close();
+											});
+										}
+									}
+								]
+							}
+						]
+					}
+				],
+				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`
+				})
+			};
+
+			popover.open(config);
+		}
 	}
 });
diff --git a/tests/end-to-end/ui/11-admin.js b/tests/end-to-end/ui/11-admin.js
@@ -24,7 +24,7 @@ describe('[Administration]', () => {
 
 	describe('[Admin View]', () => {
 		before(() => {
-			sideNav.sidebarUserMenu.click();
+			sideNav.sidebarMenu.click();
 			sideNav.admin.waitForVisible(5000);
 		});
 

diff --git a/tests/end-to-end/ui/12-settings.js b/tests/end-to-end/ui/12-settings.js
@@ -474,7 +474,7 @@ describe('[Api Settings Change]', () => {
 
 		it('login as admin and go to users', () => {
 			checkIfUserIsAdmin(adminUsername, adminEmail, adminPassword);
-			sideNav.sidebarUserMenu.click();
+			sideNav.sidebarMenu.click();
 			sideNav.admin.waitForVisible(5000);
 			sideNav.admin.click();
 			admin.usersLink.waitForVisible(5000);

diff --git a/tests/pageobjects/side-nav.page.js b/tests/pageobjects/side-nav.page.js
@@ -13,7 +13,8 @@ class SideNav extends Page {
 	get accountBoxUserAvatar() { return browser.element('.sidebar__account .avatar-image'); }
 	get accountMenu() { return browser.element('.sidebar__account'); }
 	get sidebarHeader() { return browser.element('.sidebar__header'); }
-	get sidebarUserMenu() { return browser.element('.sidebar__toolbar-button-icon--menu'); }
+	get sidebarUserMenu() { return browser.element('.sidebar__header .avatar'); }
+	get sidebarMenu() { return browser.element('.sidebar__toolbar-button-icon--menu'); }
 	get popOverContent() { return browser.element('.rc-popover__content'); }
 	get statusOnline() { return browser.element('.rc-popover__item--online'); }
 	get statusAway() { return browser.element('.rc-popover__item--away'); }