apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

sidebarItem

Browse Source
pull/7748/head
Karl Prieb 9 years ago
parent 00524d3527
commit a106deafe1
13 changed files with 150 additions and 248 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 23
      packages/rocketchat-theme/client/imports/components/sidebar.css
  2. 10
      packages/rocketchat-theme/server/variables.js
  3. 41
      packages/rocketchat-ui-account/client/accountFlex.html
  4. 10
      packages/rocketchat-ui-account/client/accountFlex.js
  5. 63
      packages/rocketchat-ui-admin/client/adminFlex.html
  6. 9
      packages/rocketchat-ui-admin/client/adminFlex.js
  7. 22
      packages/rocketchat-ui-sidenav/client/chatRoomItem.html
  8. 182
      packages/rocketchat-ui-sidenav/client/chatRoomItem.js
  9. 2
      packages/rocketchat-ui-sidenav/client/roomList.html
  10. 8
      packages/rocketchat-ui-sidenav/client/roomList.js
  11. 20
      packages/rocketchat-ui-sidenav/client/sidebarItem.html
  12. 7
      packages/rocketchat-ui-sidenav/client/sidebarItem.js
  13. 1
      packages/rocketchat-ui-sidenav/package.js

23
packages/rocketchat-theme/client/imports/components/sidebar.css
Unescape View File

@ -2,6 +2,7 @@
--account-thumb-size: 56px;
--account-status-bullet-size: 12px;
--room-item-height: 32px;
--room-item-thumb-size: 20px;
--sidebar-header-height: 190px;
--sidebar-header-padding: 24px;
--sidebar-footer-height: 125px;
@ -231,7 +232,7 @@
}
/* room item */
.room-item {
.sidebar-item {
cursor: pointer;
height: var(--room-item-height);
display: flex;
@ -244,7 +245,6 @@
font-size: 1rem;
flex: 1;
line-height: var(--room-item-height);
transition: color 0.3s linear;
display: flex;
align-items: center;
}
@ -253,13 +253,9 @@
margin: 0 8px 0 3px;
}
&__room-icon,
&__user-thumb {
margin-right: 6px;
}
&__room-icon {
&__icon {
stroke: currentColor;
margin: 0 auto;
&--hashtag {
width: 14px;
@ -288,8 +284,8 @@
}
&__user-thumb {
width: 20px;
height: 20px;
width: var(--room-item-thumb-size);
height: var(--room-item-thumb-size);
}
&__user-status {
@ -299,4 +295,11 @@
margin-left: -16px;
margin-right: 10px;
}
&__picture {
width: var(--room-item-thumb-size);
display: flex;
align-items: center;
margin-right: 6px;
}
}

10
packages/rocketchat-theme/server/variables.js
Unescape View File

@ -101,6 +101,16 @@ const sidebar = [
properties: ['color'],
value: '#ffffff'
},
{
name: 'sidebar-preferenes-content-hover:hover',
properties: ['background-color'],
value: '#e1e5e8'
},
{
name: 'sidebar-preferenes-link-hover:hover',
properties: ['color'],
value: '#2f343d'
},
{
name: 'sidebar-content-hover:hover',
properties: ['background-color'],

41
packages/rocketchat-ui-account/client/accountFlex.html
Unescape View File

@ -9,43 +9,20 @@
<span>Back to chat</span>
</button>
</header>
<div class="rooms-list">
<ul class="rooms-list__list">
<li class="room-item">
<a class="room-item__link sidebar-content" href="{{pathFor 'account' group='preferences'}}">
<svg class="room-item__room-icon room-item__room-icon--customize">
<use xlink:href="/images/icons.svg#customize"></use>
</svg>
<span class='room-item__name'>{{_ "Preferences"}}</span>
</a>
</li>
{{> sidebarItem menuItem "Preferences" "customize" "account" "preferences" }}
{{#if allowUserProfileChange}}
<li class="room-item">
<a class="room-item__link sidebar-content" href="{{pathFor 'account' group='profile'}}">
<svg class="room-item__room-icon room-item__room-icon--user">
<use xlink:href="/images/icons.svg#user"></use>
</svg>
<span class='room-item__name'>{{_ "Profile"}}</span>
</a>
</li>
{{> sidebarItem menuItem "Profile" "user" "account" "profile" }}
{{/if}}
{{#if allowUserAvatarChange}}
<li class="room-item">
<a class="room-item__link sidebar-content" href="{{pathFor 'changeAvatar'}}">
<svg class="room-item__room-icon room-item__room-icon--user-rounded">
<use xlink:href="/images/icons.svg#user-rounded"></use>
</svg>
<span class='room-item__name'>{{_ "Avatar"}}</span>
</a>
</li>
{{> sidebarItem menuItem "Avatar" "user-rounded" "changeAvatar" "" }}
{{/if}}
<li class="room-item">
<a class="room-item__link sidebar-content" href="{{pathFor 'account' group='security'}}">
<svg class="room-item__room-icon room-item__room-icon--lock">
<use xlink:href="/images/icons.svg#lock"></use>
</svg>
<span class='room-item__name'>{{_ "Security"}}</span>
</a>
</li>
{{> sidebarItem menuItem "Security" "lock" "account" "security" }}
</ul>
</div>
</aside>
</template>

10
packages/rocketchat-ui-account/client/accountFlex.js
Unescape View File

@ -23,5 +23,15 @@ Template.accountFlex.helpers({
},
allowUserAvatarChange() {
return RocketChat.settings.get('Accounts_AllowUserAvatarChange');
},
menuItem(name, icon, section, group) {
return {
name: t(name),
icon,
pathSection: section,
pathGroup: group,
darken: true
};
}
});

63
packages/rocketchat-ui-admin/client/adminFlex.html
Unescape View File

@ -1,58 +1,47 @@
<template name="adminFlex">
<header>
<div>
<aside class="sidebar sidebar--flex sidebar-flex-background" role="navigation">
<header class="sidebar__header">
{{> accountBox lighten=true }}
<button class="sidebar-flex__back-button sidebar-flex-content-active" data-action="back">
<svg class="sidebar-flex__back-icon">
<use xlink:href="/images/icons.svg#arrow-back"></use>
</svg>
<span>Back to chat</span>
</button>
</header>
<div class="rooms-list" aria-label="{{_ "Administration"}}">
<h4>{{_ "Administration"}}</h4>
</div>
</header>
<div class="content">
<div class="wrapper">
<ul>
<li>
<a href="{{pathFor 'admin-info'}}" class="admin-link">{{_ "Info"}}</a>
</li>
<ul class="rooms-list__list">
{{> sidebarItem menuItem "Info" "customize" "admin-info" "" }}
{{#if hasPermission 'run-import'}}
<li>
<a href="{{pathFor 'admin-import'}}" class="admin-link">Import</a>
</li>
{{> sidebarItem menuItem "Import" "customize" "admin-import" "" }}
{{/if}}
{{#if hasPermission 'view-room-administration'}}
<li>
<a href="{{pathFor 'admin-rooms'}}" class="admin-link">{{_ "Rooms"}}</a>
</li>
{{> sidebarItem menuItem "Rooms" "customize" "admin-rooms" "" }}
{{/if}}
{{#if hasPermission 'view-user-administration'}}
<li>
<a href="{{pathFor 'admin-users'}}" class="admin-link">{{_ "Users"}}</a>
</li>
{{> sidebarItem menuItem "Users" "customize" "admin-users" "" }}
{{/if}}
{{#each adminBoxOptions}}
{{#if permissionGranted}}
<li>
<a href="{{pathFor href}}" class="admin-link">{{label}}</a>
</li>
{{> sidebarItem menuItem label "customize" href "" }}
{{/if}}
{{/each}}
</ul>
{{#if hasPermission 'view-privileged-setting'}}
<h3 class="add-room">
{{_ "Settings"}}
</h3>
<li>
<input type="text" name="settings-search" placeholder="{{_ 'Search'}}">
</li>
{{#if hasPermission 'view-privileged-setting'}}
<h4>{{_ "Settings"}}</h4>
<input type="text" name="settings-search" placeholder="{{_ 'Search'}}">
<ul class="rooms-list__list">
{{#each groups}}
<li>
<a href="{{pathFor 'admin' group=_id}}" class="admin-link">{{label}}</a>
</li>
{{> sidebarItem menuItem label "customize" "admin" _id }}
{{/each}}
{{/if}}
</ul>
</ul>
{{/if}}
</div>
</div>
</aside>
</template>

9
packages/rocketchat-ui-admin/client/adminFlex.js
Unescape View File

@ -51,6 +51,15 @@ Template.adminFlex.helpers({
label,
adminBoxOptions() {
return RocketChat.AdminBox.getOptions();
},
menuItem(name, icon, section, group) {
return {
name: t(name),
icon,
pathSection: section,
pathGroup: group,
darken: true
};
}
});

22
packages/rocketchat-ui-sidenav/client/chatRoomItem.html
Unescape View File

@ -1,23 +1,3 @@
<template name="chatRoomItem">
{{#let route=route}}
<li class="room-item{{#if active}} sidebar-content-active-background{{else}} sidebar-content-hover-background{{/if}}{{#if toolbar}} popup-item{{/if}}" data-id="{{rid}}">
<a class="room-item__link sidebar-content {{alert}} {{#if active}}sidebar-content-unread{{/if}}" href="{{route}}" title="{{name}}">
{{#if roomIcon}}
<svg class="room-item__room-icon room-item__room-icon--{{roomIcon}}">
<use xlink:href="/images/icons.svg#{{roomIcon}}"></use>
</svg>
{{else}}
<div class="room-item__user-status {{userStatus}}"></div>
<div class="room-item__user-thumb">
{{> avatar username=name}}
</div>
{{/if}}
<span class='room-item__name {{archived}}'>{{name}}</span>
</a>
{{#if unread}}
<span class="badge sidebar-category-badge-content sidebar-room-badge-background">{{unread}}</span>
{{/if}}
</li>
{{/let}}
{{> sidebarItem data }}
</template>

182
packages/rocketchat-ui-sidenav/client/chatRoomItem.js
Unescape View File

@ -1,47 +1,58 @@
/* globals KonchatNotification, menu */
/* globals KonchatNotification */
Template.chatRoomItem.helpers({
alert() {
if (!this.hideUnreadStatus && (FlowRouter.getParam('_id') !== this.rid || !document.hasFocus()) && this.alert) {
return 'sidebar-content-unread';
data() {
let name = this.name;
if (RocketChat.settings.get('UI_Use_Real_Name') && this.fname) {
name = this.fname;
}
},
unread() {
let unread = false;
if (((FlowRouter.getParam('_id') !== this.rid) || !document.hasFocus()) && (this.unread > 0)) {
return this.unread;
unread = this.unread;
}
},
userStatus() {
switch (RocketChat.roomTypes.getUserStatus(this.t, this.rid)) {
case 'online': return 'general-success-background';
case 'away': return 'general-pending-background';
case 'busy': return 'general-error-background';
case 'offline': return 'general-inactive-background';
default: return 'general-inactive-background';
}
},
name() {
if (RocketChat.settings.get('UI_Use_Real_Name') && this.fname) {
return this.fname;
let active = false;
if (Session.get('openedRoom') && Session.get('openedRoom') === this.rid || Session.get('openedRoom') === this._id) {
active = true;
}
return this.name;
},
const archivedClass = this.archived ? 'archived' : false;
roomIcon() {
return RocketChat.roomTypes.getIcon(this.t);
},
active() {
if (Session.get('openedRoom') && Session.get('openedRoom') === this.rid || Session.get('openedRoom') === this._id) {
return true;
let alertClass = false;
if (!this.hideUnreadStatus && (FlowRouter.getParam('_id') !== this.rid || !document.hasFocus()) && this.alert) {
alertClass = 'sidebar-content-unread';
}
return false;
let statusClass = false;
if (this.t === 'd') {
switch (RocketChat.roomTypes.getUserStatus(this.t, this.rid)) {
case 'online':
statusClass = 'general-success-background';
break;
case 'away':
statusClass = 'general-pending-background';
break;
case 'busy':
statusClass = 'general-error-background';
break;
case 'offline':
statusClass = 'general-inactive-background';
break;
default:
statusClass = 'general-inactive-background';
}
}
return {
...this,
name,
unread,
active,
archivedClass,
alertClass,
statusClass
};
},
canLeave() {
@ -54,116 +65,11 @@ Template.chatRoomItem.helpers({
} else {
return true;
}
},
route() {
return RocketChat.roomTypes.getRouteLink(this.t, this);
},
archived() {
return this.archived ? 'archived' : undefined;
}
});
Template.chatRoomItem.rendered = function() {
Template.chatRoomItem.onRendered = function() {
if (!(FlowRouter.getParam('_id') && (FlowRouter.getParam('_id') === this.data.rid)) && !this.data.ls && (this.data.alert === true)) {
return KonchatNotification.newRoom(this.data.rid);
}
};
Template.chatRoomItem.events({
'click [data-id]'() {
return menu.close();
},
'click .hide-room'(e) {
e.stopPropagation();
e.preventDefault();
const { rid } = this;
const { name } = this;
const warnText = (() => {
switch (this.t) {
case 'c': return 'Hide_Room_Warning';
case 'p': return 'Hide_Group_Warning';
case 'd': return 'Hide_Private_Warning';
}
})();
return swal({
title: t('Are_you_sure'),
text: warnText ? t(warnText, name) : '',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: t('Yes_hide_it'),
cancelButtonText: t('Cancel'),
closeOnConfirm: true,
html: false
}, function() {
if (['channel', 'group', 'direct'].includes(FlowRouter.getRouteName()) && (Session.get('openedRoom') === rid)) {
FlowRouter.go('home');
}
return Meteor.call('hideRoom', rid, function(err) {
if (err) {
return handleError(err);
} else if (rid === Session.get('openedRoom')) {
return Session.delete('openedRoom');
}
});
});
},
'click .leave-room'(e) {
e.stopPropagation();
e.preventDefault();
const { rid } = this;
const { name } = this;
const warnText = (() => {
switch (false) {
case this.t !== 'c': return 'Leave_Room_Warning';
case this.t !== 'p': return 'Leave_Group_Warning';
case this.t !== 'd': return 'Leave_Private_Warning';
}
})();
return swal({
title: t('Are_you_sure'),
text: t(warnText, name),
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: t('Yes_leave_it'),
cancelButtonText: t('Cancel'),
closeOnConfirm: false,
html: false
}, function(isConfirm) {
if (isConfirm) {
return Meteor.call('leaveRoom', rid, function(err) {
if (err) {
return swal({
title: t('Warning'),
text: handleError(err, false),
type: 'warning',
html: false
});
} else {
swal.close();
if (['channel', 'group', 'direct'].includes(FlowRouter.getRouteName()) && (Session.get('openedRoom') === rid)) {
FlowRouter.go('home');
}
return RoomManager.close(rid);
}
});
} else {
return swal.close();
}
});
}
});

2
packages/rocketchat-ui-sidenav/client/roomList.html
Unescape View File

@ -14,7 +14,7 @@
</h3>
<ul class="rooms-list__list">
{{#each room in this}}
{{> chatRoomItem room }}
{{> chatRoomItem roomData room }}
{{else}}
<p class="rooms-list__empty-room sidebar-content">{{_ "No_channels_yet" }}</p>
{{/each}}

8
packages/rocketchat-ui-sidenav/client/roomList.js
Unescape View File

@ -37,6 +37,14 @@ Template.roomList.helpers({
return ChatSubscription.find(query, { sort: { 't': 1, 'name': 1 }});
},
roomData(room) {
return {
...room,
icon: RocketChat.roomTypes.getIcon(room.t),
route: RocketChat.roomTypes.getRouteLink(room.t, room)
};
},
isLivechat() {
return this.identifier === 'l';
},

20
packages/rocketchat-ui-sidenav/client/sidebarItem.html
Unescape View File

@ -1,19 +1,21 @@
<template name="sidebarItem">
<li class="sidebar-item" data-id="{{rid}}">
<a class="sidebar-item__link" href="{{route}}" title="{{name}}">
<div class="sidebar-item__icon">
{{#if roomIcon}}
<svg class="room-item__room-icon room-item__room-icon--{{roomIcon}}">
<use xlink:href="/images/icons.svg#{{roomIcon}}"></use>
<li class="sidebar-item {{#if active}}sidebar-content-active-background{{else}}{{#if darken}}sidebar-preferenes-content-hover-background{{else}}sidebar-content-hover-background{{/if}}{{/if}} {{#if toolbar}}popup-item{{/if}}" data-id="{{rid}}">
<a class="sidebar-item__link sidebar-content {{alertClass}} {{#if active}}sidebar-content-unread{{/if}} {{#if darken}}sidebar-preferenes-link-hover{{/if}}" href="{{#if route}}{{route}}{{else}}{{pathFor pathSection group=pathGroup}}{{/if}}" title="{{name}}">
{{#if statusClass}}
<div class="sidebar-item__user-status {{statusClass}}"></div>
{{/if}}
<div class="sidebar-item__picture">
{{#if icon}}
<svg class="sidebar-item__icon sidebar-item__icon--{{icon}}">
<use xlink:href="/images/icons.svg#{{icon}}"></use>
</svg>
{{else}}
<div class="room-item__user-status {{userStatus}}"></div>
<div class="room-item__user-thumb">
<div class="sidebar-item__user-thumb">
{{> avatar username=name}}
</div>
{{/if}}
</div>
<div class='sidebar-item__name'>{{name}}</div>
<div class='sidebar-item__name {{archivedClass}}'>{{name}}</div>
</a>
{{#if unread}}

7
packages/rocketchat-ui-sidenav/client/sidebarItem.js
Unescape View File

@ -0,0 +1,7 @@
/* globals menu */
Template.sidebarItem.events({
'click [data-id]'() {
return menu.close();
}
});

1
packages/rocketchat-ui-sidenav/package.js
Unescape View File

@ -37,6 +37,7 @@ Package.onUse(function(api) {
api.addFiles('client/listChannelsFlex.js', 'client');
api.addFiles('client/listCombinedFlex.js', 'client');
api.addFiles('client/listPrivateGroupsFlex.js', 'client');
api.addFiles('client/sidebarItem.js', 'client');
api.addFiles('client/sideNav.js', 'client');
api.addFiles('client/roomList.js', 'client');
api.addFiles('client/toolbar.js', 'client');

Write Preview
Loading…
Cancel
Save