Karl Prieb
7 years ago
parent
42f2306bdb
commit
d782ce6bb8
@ -1,221 +0,0 @@ |
||||
.sidebar-light { |
||||
& .sidebar__account-username { |
||||
color: var(--color-dark); |
||||
} |
||||
|
||||
& .sidebar__account-menu { |
||||
fill: var(--color-dark); |
||||
} |
||||
|
||||
& .sidebar__account.active:hover { |
||||
background-color: var(--sidebar-background-light-hover); |
||||
} |
||||
} |
||||
|
||||
.sidebar__account { |
||||
display: flex; |
||||
|
||||
margin: 0 0 var(--sidebar-extra-small-default-padding); |
||||
|
||||
padding: var(--sidebar-extra-small-default-padding) var(--sidebar-default-padding); |
||||
|
||||
transition: background-color 0.3s; |
||||
|
||||
align-items: center; |
||||
|
||||
&.active:hover { |
||||
cursor: pointer; |
||||
|
||||
background-color: var(--sidebar-item-hover-background); |
||||
} |
||||
|
||||
&-thumb { |
||||
|
||||
flex: 0 0 var(--sidebar-account-thumb-size); |
||||
|
||||
width: var(--sidebar-account-thumb-size); |
||||
height: var(--sidebar-account-thumb-size); |
||||
margin: 0 0.5rem 0 0; |
||||
} |
||||
|
||||
&-data { |
||||
position: relative; |
||||
|
||||
display: flex; |
||||
overflow: hidden; |
||||
flex-direction: column; |
||||
flex: 1; |
||||
|
||||
margin: 0 0.5rem; |
||||
} |
||||
|
||||
&-username { |
||||
overflow: hidden; |
||||
flex: 1; |
||||
|
||||
max-width: fit-content; |
||||
height: calc(var(--sidebar-account-username-size) + 0.1rem); |
||||
|
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
|
||||
color: var(--sidebar-account-username-color); |
||||
|
||||
font-size: var(--sidebar-account-username-size); |
||||
font-weight: var(--sidebar-account-username-weight); |
||||
line-height: calc(var(--sidebar-account-username-size) + 0.1rem); |
||||
} |
||||
|
||||
&-visual-status { |
||||
max-width: 124px; |
||||
margin-right: 8px; |
||||
|
||||
user-select: none; |
||||
|
||||
font-size: var(--sidebar-account-status-font-size); |
||||
} |
||||
|
||||
&-status { |
||||
display: flex; |
||||
|
||||
margin: 0 -0.25rem; |
||||
|
||||
color: var(--sidebar-account-status-color); |
||||
|
||||
align-items: center; |
||||
} |
||||
|
||||
&-status-bullet { |
||||
display: block; |
||||
|
||||
width: var(--sidebar-account-status-bullet-size); |
||||
height: var(--sidebar-account-status-bullet-size); |
||||
margin: 0.25rem; |
||||
|
||||
border-radius: var(--sidebar-account-status-bullet-radius); |
||||
|
||||
&--online { |
||||
background-color: var(--status-online); |
||||
} |
||||
|
||||
&--away { |
||||
background-color: var(--status-away); |
||||
} |
||||
|
||||
&--busy { |
||||
background-color: var(--status-busy); |
||||
} |
||||
|
||||
&--invisible { |
||||
background-color: var(--status-invisible); |
||||
} |
||||
|
||||
&--offline { |
||||
background-color: var(--status-invisible); |
||||
} |
||||
} |
||||
|
||||
&-label { |
||||
|
||||
position: relative; |
||||
|
||||
padding: 0; |
||||
|
||||
cursor: pointer; |
||||
|
||||
&:hover .sidebar__account-menu { |
||||
fill: var(--sidebar-account-status-color); |
||||
} |
||||
} |
||||
|
||||
&-menu { |
||||
transition: fill 0.2s; |
||||
|
||||
font-size: 1.375rem; |
||||
|
||||
fill: var(--sidebar-account-username-color); |
||||
} |
||||
|
||||
& .rc-popover { |
||||
top: 40px; |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
.rtl .sidebar__account .rc-popover { |
||||
right: 0; |
||||
left: initial; |
||||
} |
||||
|
||||
@media (width <= 400px) { |
||||
.sidebar__account { |
||||
margin: 0 0 5px; |
||||
padding: var(--sidebar-extra-small-default-padding) calc(var(--sidebar-small-default-padding) - 8px) var(--sidebar-extra-small-default-padding); |
||||
|
||||
&-thumb { |
||||
|
||||
flex: 0 0 var(--sidebar-small-account-thumb-size); |
||||
|
||||
width: var(--sidebar-small-account-thumb-size); |
||||
height: var(--sidebar-small-account-thumb-size); |
||||
} |
||||
|
||||
&-data { |
||||
flex-direction: row; |
||||
|
||||
margin: 0; |
||||
align-items: center; |
||||
} |
||||
|
||||
&-username { |
||||
width: auto; |
||||
margin: 0 0.65rem; |
||||
|
||||
font-weight: var(--sidebar-small-account-username-weight); |
||||
} |
||||
|
||||
&-visual-status { |
||||
display: none; |
||||
} |
||||
|
||||
&-status-bullet { |
||||
width: var(--sidebar-small-account-status-bullet-size); |
||||
height: var(--sidebar-small-account-status-bullet-size); |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rc-popover--account { |
||||
& [data-type="set-state"] { |
||||
& .rc-icon { |
||||
font-size: var(--sidebar-account-status-bullet-size); |
||||
} |
||||
|
||||
&.rc-popover__item { |
||||
&--online { |
||||
& .rc-icon { |
||||
color: var(--status-online); |
||||
} |
||||
} |
||||
|
||||
&--away { |
||||
& .rc-icon { |
||||
color: var(--status-away); |
||||
} |
||||
} |
||||
|
||||
&--busy { |
||||
& .rc-icon { |
||||
color: var(--status-busy); |
||||
} |
||||
} |
||||
|
||||
&--offline { |
||||
& .rc-icon { |
||||
color: var(--status-invisible); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,105 @@ |
||||
.sidebar__header { |
||||
display: flex; |
||||
|
||||
margin: 0 -10px; |
||||
padding: var(--sidebar-default-padding); |
||||
align-items: center; |
||||
|
||||
&-thumb { |
||||
position: relative; |
||||
|
||||
flex: 0 0 var(--sidebar-account-thumb-size); |
||||
|
||||
width: var(--sidebar-account-thumb-size); |
||||
height: var(--sidebar-account-thumb-size); |
||||
margin: 0 10px; |
||||
} |
||||
|
||||
&-status-bullet { |
||||
position: absolute; |
||||
|
||||
right: -2px; |
||||
bottom: -1px; |
||||
|
||||
display: block; |
||||
|
||||
width: var(--sidebar-account-status-bullet-size); |
||||
height: var(--sidebar-account-status-bullet-size); |
||||
|
||||
border-width: 2px; |
||||
|
||||
border-style: solid; |
||||
border-color: var(--sidebar-background); |
||||
|
||||
border-radius: var(--sidebar-account-status-bullet-radius); |
||||
|
||||
&--online { |
||||
background-color: var(--status-online); |
||||
} |
||||
|
||||
&--away { |
||||
background-color: var(--status-away); |
||||
} |
||||
|
||||
&--busy { |
||||
background-color: var(--status-busy); |
||||
} |
||||
|
||||
&--invisible { |
||||
background-color: var(--status-invisible); |
||||
} |
||||
|
||||
&--offline { |
||||
background-color: var(--status-invisible); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sidebar__toolbar { |
||||
display: flex; |
||||
flex: 1 1 100%; |
||||
|
||||
margin: 0 10px; |
||||
justify-content: space-between; |
||||
|
||||
&-button { |
||||
color: var(--sidebar-item-text-color); |
||||
|
||||
font-size: 18px; |
||||
fill: var(--sidebar-item-text-color); |
||||
} |
||||
} |
||||
|
||||
.rc-popover--sidebar-header { |
||||
& [data-type="set-state"] { |
||||
& .rc-icon { |
||||
font-size: var(--sidebar-account-status-bullet-size); |
||||
} |
||||
|
||||
&.rc-popover__item { |
||||
&--online { |
||||
& .rc-icon { |
||||
color: var(--status-online); |
||||
} |
||||
} |
||||
|
||||
&--away { |
||||
& .rc-icon { |
||||
color: var(--status-away); |
||||
} |
||||
} |
||||
|
||||
&--busy { |
||||
& .rc-icon { |
||||
color: var(--status-busy); |
||||
} |
||||
} |
||||
|
||||
&--offline { |
||||
& .rc-icon { |
||||
color: var(--status-invisible); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 46 KiB |
@ -1,27 +0,0 @@ |
||||
<template name="accountBox"> |
||||
<div class="sidebar__account {{#unless isAnonymous}}active{{/unless}}" aria-label="{{_ "Account"}}" role="region"> |
||||
{{#with myUserInfo}} |
||||
{{#if username}} |
||||
<div class="sidebar__account-thumb" data-status='{{visualStatus}}'> |
||||
{{> avatar username=username}} |
||||
</div> |
||||
<div class="sidebar__account-data"> |
||||
{{#if fname}} |
||||
<h3 class="sidebar__account-username" data-username="{{username}}">{{fname}}</h3> |
||||
{{else}} |
||||
<h3 class="sidebar__account-username" data-username="{{username}}">@{{username}}</h3> |
||||
{{/if}} |
||||
<div class="sidebar__account-status"> |
||||
<div class="sidebar__account-status-bullet sidebar__account-status-bullet--{{bullet}}" title="{{visualStatus}}"></div> |
||||
<div class="sidebar__account-visual-status">{{visualStatus}}</div> |
||||
</div> |
||||
</div> |
||||
{{#unless isAnonymous}} |
||||
<label class="sidebar__account-label"> |
||||
{{> icon block="sidebar__account-menu" icon="menu"}} |
||||
</label> |
||||
{{/unless}} |
||||
{{/if}} |
||||
{{/with}} |
||||
</div> |
||||
</template> |
||||
@ -1,134 +0,0 @@ |
||||
/* globals popover isRtl */ |
||||
|
||||
Template.accountBox.helpers({ |
||||
myUserInfo() { |
||||
if (Meteor.user() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead')) { |
||||
return { |
||||
name: t('Anonymous'), |
||||
fname: RocketChat.settings.get('UI_Use_Real_Name') && t('Anonymous'), |
||||
status: 'online', |
||||
visualStatus: t('online'), |
||||
bullet: 'general-success-background', |
||||
username: 'anonymous' |
||||
}; |
||||
} |
||||
|
||||
const user = Meteor.user() || {}; |
||||
const { name, username } = user; |
||||
const userStatus = Session.get(`user_${ username }_status`); |
||||
|
||||
return { |
||||
name: Session.get(`user_${ username }_name`) || username, |
||||
status: Session.get(`user_${ username }_status`), |
||||
visualStatus: t(userStatus.charAt(0).toUpperCase() + userStatus.slice(1)), |
||||
bullet: userStatus, |
||||
_id: Meteor.userId(), |
||||
username, |
||||
fname: RocketChat.settings.get('UI_Use_Real_Name') && name |
||||
}; |
||||
}, |
||||
|
||||
isAnonymous() { |
||||
if (Meteor.userId() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead')) { |
||||
return 'disabled'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
Template.accountBox.events({ |
||||
'click .sidebar__account.active'() { |
||||
let adminOption; |
||||
if (RocketChat.authz.hasAtLeastOnePermission(['view-statistics', 'view-room-administration', 'view-user-administration', 'view-privileged-setting' ]) || (RocketChat.AdminBox.getOptions().length > 0)) { |
||||
adminOption = { |
||||
icon: 'customize', |
||||
name: t('Administration'), |
||||
type: 'open', |
||||
id: 'administration' |
||||
}; |
||||
} |
||||
|
||||
const accountBox = document.querySelector('.sidebar__account'); |
||||
|
||||
const config = { |
||||
popoverClass: 'account', |
||||
columns: [ |
||||
{ |
||||
groups: [ |
||||
{ |
||||
title: t('User'), |
||||
items: [ |
||||
{ |
||||
icon: 'circle', |
||||
name: t('Online'), |
||||
type: 'set-state', |
||||
id: 'online', |
||||
modifier: 'online' |
||||
}, |
||||
{ |
||||
icon: 'circle', |
||||
name: t('Away'), |
||||
type: 'set-state', |
||||
id: 'away', |
||||
modifier: 'away' |
||||
}, |
||||
{ |
||||
icon: 'circle', |
||||
name: t('Busy'), |
||||
type: 'set-state', |
||||
id: 'busy', |
||||
modifier: 'busy' |
||||
}, |
||||
{ |
||||
icon: 'circle', |
||||
name: t('Invisible'), |
||||
type: 'set-state', |
||||
id: 'offline', |
||||
modifier: 'offline' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
items: AccountBox.getItems().map(item => { |
||||
return { |
||||
icon: item.icon, |
||||
name: t(item.name), |
||||
type: 'open', |
||||
id: item.name, |
||||
href: item.href, |
||||
sideNav: item.sideNav |
||||
}; |
||||
}).concat([ |
||||
adminOption, |
||||
{ |
||||
icon: 'user', |
||||
name: t('My_Account'), |
||||
type: 'open', |
||||
id: 'account' |
||||
}, |
||||
{ |
||||
icon: 'sign-out', |
||||
name: t('Logout'), |
||||
type: 'open', |
||||
id: 'logout' |
||||
} |
||||
]) |
||||
} |
||||
|
||||
] |
||||
} |
||||
], |
||||
position: { |
||||
top: accountBox.offsetHeight |
||||
}, |
||||
customCSSProperties: { |
||||
width: `${ accountBox.offsetWidth - parseInt(getComputedStyle(accountBox)['padding-left'].replace('px', '')) * 2 }px`, |
||||
left: isRtl() ? 'auto' : getComputedStyle(accountBox)['padding-left'], |
||||
right: 'auto' |
||||
} |
||||
}; |
||||
|
||||
popover.open(config); |
||||
} |
||||
}); |
||||
|
||||
Template.accountBox.onRendered(() => AccountBox.init()); |
||||
@ -0,0 +1,21 @@ |
||||
<template name="sidebarHeader"> |
||||
<header class="sidebar__header"> |
||||
{{#with myUserInfo}} |
||||
<div class="sidebar__header-thumb"> |
||||
{{> avatar username=username}} |
||||
<div class="sidebar__header-status-bullet sidebar__header-status-bullet--{{status}}"></div> |
||||
</div> |
||||
<div class="sidebar__toolbar"> |
||||
{{#each button in toolbarButtons}} |
||||
{{> sidebarHeaderButton button}} |
||||
{{/each}} |
||||
</div> |
||||
{{/with}} |
||||
</header> |
||||
</template> |
||||
|
||||
<template name="sidebarHeaderButton"> |
||||
<button class="sidebar__toolbar-button rc-tooltip rc-tooltip--down js-button" aria-label="{{name}}"> |
||||
{{> icon block="sidebar__toolbar-button-icon" icon=icon }} |
||||
</button> |
||||
</template> |
||||
@ -0,0 +1,189 @@ |
||||
/* globals popover isRtl */ |
||||
const toolbarButtons = [ |
||||
{ |
||||
name: t('Search'), |
||||
icon: 'magnifier' |
||||
}, |
||||
{ |
||||
name: t('Browse_channels'), |
||||
icon: 'globe' |
||||
}, |
||||
{ |
||||
name: t('View_mode'), |
||||
icon: 'th-list' |
||||
}, |
||||
{ |
||||
name: t('Sort'), |
||||
icon: 'sort' |
||||
}, |
||||
{ |
||||
name: t('Create_A_New_Channel'), |
||||
icon: 'plus', |
||||
condition: () => !(Meteor.userId() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead')) |
||||
}, |
||||
{ |
||||
name: t('Options'), |
||||
icon: 'menu', |
||||
condition: () => !(Meteor.userId() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead')), |
||||
action: () => { |
||||
let adminOption; |
||||
if (RocketChat.authz.hasAtLeastOnePermission(['view-statistics', 'view-room-administration', 'view-user-administration', 'view-privileged-setting' ]) || (RocketChat.AdminBox.getOptions().length > 0)) { |
||||
adminOption = { |
||||
icon: 'customize', |
||||
name: t('Administration'), |
||||
type: 'open', |
||||
id: 'administration', |
||||
action: () => { |
||||
SideNav.setFlex('adminFlex'); |
||||
SideNav.openFlex(); |
||||
FlowRouter.go('admin-info'); |
||||
popover.close(); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
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'), |
||||
type: 'set-state', |
||||
id: 'online', |
||||
modifier: 'online' |
||||
}, |
||||
{ |
||||
icon: 'circle', |
||||
name: t('Away'), |
||||
type: 'set-state', |
||||
id: 'away', |
||||
modifier: 'away' |
||||
}, |
||||
{ |
||||
icon: 'circle', |
||||
name: t('Busy'), |
||||
type: 'set-state', |
||||
id: 'busy', |
||||
modifier: 'busy' |
||||
}, |
||||
{ |
||||
icon: 'circle', |
||||
name: t('Invisible'), |
||||
type: 'set-state', |
||||
id: 'offline', |
||||
modifier: 'offline' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
items: AccountBox.getItems().map(item => { |
||||
let action; |
||||
|
||||
if (item.href) { |
||||
action = () => { |
||||
FlowRouter.go(item.href); |
||||
popover.close(); |
||||
}; |
||||
} |
||||
|
||||
if (item.sideNav) { |
||||
action = () => { |
||||
SideNav.setFlex(item.sideNav); |
||||
SideNav.openFlex(); |
||||
popover.close(); |
||||
}; |
||||
} |
||||
|
||||
return { |
||||
icon: item.icon, |
||||
name: t(item.name), |
||||
type: 'open', |
||||
id: item.name, |
||||
href: item.href, |
||||
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: () => { |
||||
const user = Meteor.user(); |
||||
Meteor.logout(() => { |
||||
RocketChat.callbacks.run('afterLogoutCleanUp', user); |
||||
Meteor.call('logoutCleanUp', user); |
||||
FlowRouter.go('home'); |
||||
popover.close(); |
||||
}); |
||||
} |
||||
} |
||||
]) |
||||
} |
||||
] |
||||
} |
||||
], |
||||
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' |
||||
} |
||||
}; |
||||
|
||||
popover.open(config); |
||||
} |
||||
}]; |
||||
Template.sidebarHeader.helpers({ |
||||
myUserInfo() { |
||||
if (Meteor.user() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead')) { |
||||
return { |
||||
username: 'anonymous', |
||||
status: 'online' |
||||
}; |
||||
} |
||||
|
||||
const user = Meteor.user() || {}; |
||||
const { username } = user; |
||||
const userStatus = Session.get(`user_${ username }_status`); |
||||
|
||||
return { |
||||
username, |
||||
status: userStatus |
||||
}; |
||||
}, |
||||
toolbarButtons() { |
||||
return toolbarButtons.filter(button => !button.condition || button.condition()); |
||||
} |
||||
}); |
||||
|
||||
Template.sidebarHeaderButton.events({ |
||||
'click .js-button'(e) { |
||||
return this.action && this.action.apply(this); |
||||
} |
||||
}); |
||||
Loading…
Reference in new issue