sidenav viewmode

packages/rocketchat-livechat/client/views/sideNav/livechat.html

@@ -15,8 +15,6 @@
 				<ul class="rooms-list__list inquiries">
 					{{#each room in inquiries}}
 						{{> chatRoomItem room }}
-					{{else}}
-						<p class="rooms-list__empty-room">{{_ "No_livechats" }}</p>
 					{{/each}}
 				</ul>
 			{{/if}}
@@ -32,8 +30,6 @@
 			{{/if}}
 			{{#each room in rooms}}
 				{{> chatRoomItem room }}
-			{{else}}
-				<p class="rooms-list__empty-room">{{_ "No_livechats" }}</p>
 			{{/each}}
 		</ul>
 	</div>

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-header.css

@@ -71,7 +71,7 @@
 }
 
 .rc-popover--sidebar-header {
-	& .rc-icon {
+	& .rc-popover__icon-element--circle {
 		font-size: var(--sidebar-account-status-bullet-size);
 	}
 

packages/rocketchat-theme/client/imports/components/sidebar/sidebar-item.css

@@ -12,7 +12,7 @@
 	}
 }
 
-.sidebar--big {
+.sidebar--extended {
 	& > .rooms-list,
 	& .rooms-list__toolbar-search {
 		& .sidebar-item {

packages/rocketchat-ui-sidenav/client/sideNav.html

@@ -1,5 +1,5 @@
 <template name="sideNav">
-		<aside class="sidebar {{#if isLastMessageActive}}sidebar--big{{/if}}" role="navigation">
+		<aside class="sidebar sidebar--{{sideNavViewMode}} {{#if sideNavHideAvatar}}sidebar--hide-avatar{{/if}}" role="navigation">
 			{{> sidebarHeader }}
 
 			{{#if loggedInUser}}

packages/rocketchat-ui-sidenav/client/sideNav.js

@@ -31,8 +31,13 @@ Template.sideNav.helpers({
 		return !!Meteor.userId();
 	},
 
-	isLastMessageActive() {
-		return RocketChat.settings.get('Store_Last_Message');
+	sideNavViewMode() {
+		const viewMode = RocketChat.getUserPreference(Meteor.user(), 'sidenavViewMode');
+		return viewMode ? viewMode : 'condensed';
+	},
+
+	sideNavHideAvatar() {
+		return RocketChat.getUserPreference(Meteor.user(), 'sidenavHideAvatar');
 	}
 });
 

packages/rocketchat-ui-sidenav/client/sidebarHeader.js

@@ -1,4 +1,5 @@
-/* globals popover isRtl */
+/* globals popover isRtl menu */
+import toastr from 'toastr';
 
 const setStatus = status => {
 	AccountBox.setStatus(status);
@@ -6,6 +7,31 @@ const setStatus = status => {
 	popover.close();
 };
 
+const viewModeIcon = {
+	extended: 'th-list',
+	medium: 'list',
+	condensed: 'list-alt'
+};
+
+const extendedViewOption = () => {
+	if (RocketChat.settings.get('Store_Last_Message')) {
+		return {
+			icon: viewModeIcon.extended,
+			name: t('Extended'),
+			action: () => {
+				Meteor.call('saveUserPreferences', {sidenavViewMode: 'extended'}, function(error) {
+					if (error) {
+						return handleError(error);
+					}
+				});
+			}
+		};
+	}
+
+	return;
+};
+
+
 const toolbarButtons = [
 	{
 		name: t('Search'),
@@ -17,7 +43,73 @@ const toolbarButtons = [
 	},
 	{
 		name: t('View_mode'),
-		icon: 'th-list'
+		icon: () => viewModeIcon[RocketChat.getUserPreference(Meteor.user(), 'sidenavViewMode')],
+		action: (e) => {
+			const hideAvatarSetting = RocketChat.getUserPreference(Meteor.user(), 'sidenavHideAvatar');
+			const config = {
+				columns: [
+					{
+						groups: [
+							{
+								items: [
+									extendedViewOption(),
+									{
+										icon: viewModeIcon.medium,
+										name: t('Medium'),
+										action: () => {
+											Meteor.call('saveUserPreferences', {sidenavViewMode: 'medium'}, function(error) {
+												if (error) {
+													return handleError(error);
+												}
+											});
+										}
+									},
+									{
+										icon: viewModeIcon.condensed,
+										name: t('Condensed'),
+										action: () => {
+											Meteor.call('saveUserPreferences', {sidenavViewMode: 'condensed'}, function(error) {
+												if (error) {
+													return handleError(error);
+												}
+											});
+										}
+									}
+								]
+							},
+							{
+								items: [
+									{
+										icon: 'user-rounded',
+										name: hideAvatarSetting ? t('Unhide_Avatar') : t('Hide_Avatar'),
+										action: () => {
+											Meteor.call('saveUserPreferences', {sidenavHideAvatar: !hideAvatarSetting}, function(error, results) {
+												if (results) {
+													toastr.success(t('Preferences_saved'));
+												}
+												if (error) {
+													return handleError(error);
+												}
+											});
+										}
+									}
+								]
+							}
+						]
+					}
+				],
+				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);
+		}
 	},
 	{
 		name: t('Sort'),
@@ -51,7 +143,11 @@ const toolbarButtons = [
 	{
 		name: t('Create_A_New_Channel'),
 		icon: 'plus',
-		condition: () => !(Meteor.userId() == null && RocketChat.settings.get('Accounts_AllowAnonymousRead'))
+		condition: () => RocketChat.authz.hasAtLeastOnePermission(['create-c', 'create-p']),
+		action: () => {
+			menu.close();
+			FlowRouter.go('create-channel');
+		}
 	},
 	{
 		name: t('Options'),

server/methods/saveUserPreferences.js

@@ -29,7 +29,9 @@ Meteor.methods({
 			// sidebarMergeChannels: Match.Optional(Boolean),
 			sidebarShowFavorites: Match.Optional(Boolean),
 			sidebarShowUnread: Match.Optional(Boolean),
-			sidebarSortby: Match.Optional(String)
+			sidebarSortby: Match.Optional(String),
+			sidenavViewMode: Match.Optional(String),
+			sidenavHideAvatar: Match.Optional(Boolean)
 		};
 		check(settings, Match.ObjectIncluding(keys));
 		if (settings.mergeChannels) {