From 88bea8dd9c7f8c1d54e6e0533d7a26e35300f1eb Mon Sep 17 00:00:00 2001 From: Karl Prieb Date: Thu, 22 Feb 2018 15:03:16 -0300 Subject: [PATCH] Avatar now open account related options --- .../components/sidebar/sidebar-header.css | 4 + .../client/sidebarHeader.js | 168 ++++++++++-------- 2 files changed, 99 insertions(+), 73 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 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..23e92f7fea76 100644 --- a/packages/rocketchat-ui-sidenav/client/sidebarHeader.js +++ b/packages/rocketchat-ui-sidenav/client/sidebarHeader.js @@ -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); + } } });