diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css index 0cd9757e75dc..b5cacef8ef19 100644 --- 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 index d633e6403a51..a85a76a0e3df 100644 --- 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 index 4db35c992377..422b14504644 100644 --- 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 index e27af333e535..56876fb62218 100644 --- 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 index c87c6e6f7359..2d5dcac2c93f 100644 --- 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'); }