diff --git a/packages/rocketchat-theme/client/imports/components/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar.css index fca85930457..505f7e763e0 100644 --- a/packages/rocketchat-theme/client/imports/components/sidebar.css +++ b/packages/rocketchat-theme/client/imports/components/sidebar.css @@ -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; + } } diff --git a/packages/rocketchat-theme/server/variables.js b/packages/rocketchat-theme/server/variables.js index f86ddc7318d..e18b56e6586 100644 --- a/packages/rocketchat-theme/server/variables.js +++ b/packages/rocketchat-theme/server/variables.js @@ -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'], diff --git a/packages/rocketchat-ui-account/client/accountFlex.html b/packages/rocketchat-ui-account/client/accountFlex.html index 53373e3a065..1a46bf3a985 100644 --- a/packages/rocketchat-ui-account/client/accountFlex.html +++ b/packages/rocketchat-ui-account/client/accountFlex.html @@ -9,43 +9,20 @@ Back to chat +
+
diff --git a/packages/rocketchat-ui-account/client/accountFlex.js b/packages/rocketchat-ui-account/client/accountFlex.js index b580b495033..f48fd3084ad 100644 --- a/packages/rocketchat-ui-account/client/accountFlex.js +++ b/packages/rocketchat-ui-account/client/accountFlex.js @@ -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 + }; } }); diff --git a/packages/rocketchat-ui-admin/client/adminFlex.html b/packages/rocketchat-ui-admin/client/adminFlex.html index 1eb8c60c7f7..ab6556609f3 100644 --- a/packages/rocketchat-ui-admin/client/adminFlex.html +++ b/packages/rocketchat-ui-admin/client/adminFlex.html @@ -1,58 +1,47 @@ diff --git a/packages/rocketchat-ui-admin/client/adminFlex.js b/packages/rocketchat-ui-admin/client/adminFlex.js index ce1d6bce5b7..3b4e039c313 100644 --- a/packages/rocketchat-ui-admin/client/adminFlex.js +++ b/packages/rocketchat-ui-admin/client/adminFlex.js @@ -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 + }; } }); diff --git a/packages/rocketchat-ui-sidenav/client/chatRoomItem.html b/packages/rocketchat-ui-sidenav/client/chatRoomItem.html index e4d0b3a2d2b..2716db47769 100644 --- a/packages/rocketchat-ui-sidenav/client/chatRoomItem.html +++ b/packages/rocketchat-ui-sidenav/client/chatRoomItem.html @@ -1,23 +1,3 @@ diff --git a/packages/rocketchat-ui-sidenav/client/chatRoomItem.js b/packages/rocketchat-ui-sidenav/client/chatRoomItem.js index ab68db6cb1e..d380043a1c9 100644 --- a/packages/rocketchat-ui-sidenav/client/chatRoomItem.js +++ b/packages/rocketchat-ui-sidenav/client/chatRoomItem.js @@ -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(); - } - }); - } -}); diff --git a/packages/rocketchat-ui-sidenav/client/roomList.html b/packages/rocketchat-ui-sidenav/client/roomList.html index fe836bf07bf..3cf39352ff4 100644 --- a/packages/rocketchat-ui-sidenav/client/roomList.html +++ b/packages/rocketchat-ui-sidenav/client/roomList.html @@ -14,7 +14,7 @@