[FIX] Display Modes

app/api/server/v1/users.js

@@ -616,17 +616,16 @@ API.v1.addRoute('users.setPreferences', { authRequired: true }, {
 				showMessageInMainThread: Match.Maybe(Boolean),
 				hideUsernames: Match.Maybe(Boolean),
 				hideRoles: Match.Maybe(Boolean),
-				hideAvatars: Match.Maybe(Boolean),
+				displayAvatars: Match.Maybe(Boolean),
 				hideFlexTab: Match.Maybe(Boolean),
 				sendOnEnter: Match.Maybe(String),
 				language: Match.Maybe(String),
 				sidebarShowFavorites: Match.Optional(Boolean),
 				sidebarShowUnread: Match.Optional(Boolean),
 				sidebarSortby: Match.Optional(String),
 				sidebarViewMode: Match.Optional(String),
-				sidebarHideAvatar: Match.Optional(Boolean),
+				sidebarDisplayAvatar: Match.Optional(Boolean),
 				sidebarGroupByType: Match.Optional(Boolean),
-				sidebarShowDiscussion: Match.Optional(Boolean),
 				muteFocusedConversations: Match.Optional(Boolean),
 			}),
 		});

app/discussion/server/config.js

@@ -14,14 +14,6 @@ Meteor.startup(() => {
 		});
 	});
 
-	settings.add('Accounts_Default_User_Preferences_sidebarShowDiscussion', true, {
-		group: 'Accounts',
-		section: 'Accounts_Default_User_Preferences',
-		type: 'boolean',
-		public: true,
-		i18nLabel: 'Group_discussions',
-	});
-
 	const globalQuery = {
 		_id: 'RetentionPolicy_Enabled',
 		value: true,

app/lib/server/startup/settings.js

@@ -355,10 +355,10 @@ settings.addGroup('Accounts', function() {
 			public: true,
 			i18nLabel: 'Hide_flextab',
 		});
-		this.add('Accounts_Default_User_Preferences_hideAvatars', false, {
+		this.add('Accounts_Default_User_Preferences_displayAvatars', true, {
 			type: 'boolean',
 			public: true,
-			i18nLabel: 'Hide_Avatars',
+			i18nLabel: 'Display_avatars',
 		});
 		this.add('Accounts_Default_User_Preferences_sidebarGroupByType', true, {
 			type: 'boolean',
@@ -384,10 +384,10 @@ settings.addGroup('Accounts', function() {
 			public: true,
 			i18nLabel: 'Sidebar_list_mode',
 		});
-		this.add('Accounts_Default_User_Preferences_sidebarHideAvatar', false, {
+		this.add('Accounts_Default_User_Preferences_sidebarDisplayAvatar', true, {
 			type: 'boolean',
 			public: true,
-			i18nLabel: 'Hide_Avatars_Sidebar',
+			i18nLabel: 'Display_Avatars_Sidebar',
 		});
 
 		this.add('Accounts_Default_User_Preferences_sidebarShowUnread', false, {

app/ui-sidenav/client/roomList.js

@@ -24,7 +24,6 @@ Template.roomList.helpers({
 				'settings.preferences.sidebarSortby': 1,
 				'settings.preferences.sidebarShowFavorites': 1,
 				'settings.preferences.sidebarShowUnread': 1,
-				'settings.preferences.sidebarShowDiscussion': 1,
 				'services.tokenpass': 1,
 				messageViewMode: 1,
 			},
@@ -79,11 +78,6 @@ Template.roomList.helpers({
 				query.tokens = { $exists: true };
 			}
 
-			// if we display discussions as a separate group, we should hide them from the other lists
-			if (getUserPreference(user, 'sidebarShowDiscussion')) {
-				query.prid = { $exists: false };
-			}
-
 			if (getUserPreference(user, 'sidebarShowUnread')) {
 				query.$or = [
 					{ alert: { $ne: true } },

app/ui-sidenav/client/sideNav.js

@@ -44,7 +44,7 @@ Template.sideNav.helpers({
 	},
 
 	sidebarHideAvatar() {
-		return getUserPreference(Meteor.userId(), 'sidebarHideAvatar');
+		return !getUserPreference(Meteor.userId(), 'sidebarDisplayAvatar');
 	},
 });
 

app/ui/client/views/app/room.js

@@ -351,7 +351,7 @@ Template.roomOld.helpers({
 	},
 
 	hideAvatar() {
-		return getUserPreference(Meteor.userId(), 'hideAvatars') ? 'hide-avatars' : undefined;
+		return getUserPreference(Meteor.userId(), 'displayAvatars') ? undefined : 'hide-avatars';
 	},
 	canPreview() {
 		const { room, state } = Template.instance();

client/components/SortList/GroupingList.js

@@ -2,7 +2,6 @@ import { Box, Margins, CheckBox } from '@rocket.chat/fuselage';
 import React, { useCallback } from 'react';
 
 import { useMethod } from '../../contexts/ServerContext';
-import { useSetting } from '../../contexts/SettingsContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useUserPreference } from '../../contexts/UserContext';
 import SortListItem from './SortListItem';
@@ -12,8 +11,6 @@ const style = {
 };
 
 function GroupingList() {
-	const isDiscussionEnabled = useSetting('Discussion_enabled');
-	const sidebarShowDiscussion = useUserPreference('sidebarShowDiscussion');
 	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
 	const sidebarShowFavorites = useUserPreference('sidebarShowFavorites');
 	const sidebarShowUnread = useUserPreference('sidebarShowUnread');
@@ -23,10 +20,6 @@ function GroupingList() {
 	const useHandleChange = (key, value) =>
 		useCallback(() => saveUserPreferences({ [key]: value }), [key, value]);
 
-	const handleChangeShowDicussion = useHandleChange(
-		'sidebarShowDiscussion',
-		!sidebarShowDiscussion,
-	);
 	const handleChangeGroupByType = useHandleChange('sidebarGroupByType', !sidebarGroupByType);
 	const handleChangeShoFavorite = useHandleChange('sidebarShowFavorites', !sidebarShowFavorites);
 	const handleChangeShowUnread = useHandleChange('sidebarShowUnread', !sidebarShowUnread);
@@ -41,27 +34,14 @@ function GroupingList() {
 			</Margins>
 			<ul className='rc-popover__list'>
 				<Margins block='x8'>
-					{isDiscussionEnabled && (
-						<SortListItem
-							icon={'discussion'}
-							text={t('Discussions')}
-							input={
-								<CheckBox
-									onChange={handleChangeShowDicussion}
-									name='sidebarShowDiscussion'
-									checked={sidebarShowDiscussion}
-								/>
-							}
-						/>
-					)}
 					<SortListItem
-						icon={'group-by-type'}
-						text={t('Type')}
+						icon={'flag'}
+						text={t('Unread')}
 						input={
 							<CheckBox
-								onChange={handleChangeGroupByType}
-								name='sidebarGroupByType'
-								checked={sidebarGroupByType}
+								onChange={handleChangeShowUnread}
+								name='sidebarShowUnread'
+								checked={sidebarShowUnread}
 							/>
 						}
 					/>
@@ -77,13 +57,13 @@ function GroupingList() {
 						}
 					/>
 					<SortListItem
-						icon={'eye-off'}
-						text={t('Unread_on_top')}
+						icon={'group-by-type'}
+						text={t('Types')}
 						input={
 							<CheckBox
-								onChange={handleChangeShowUnread}
-								name='sidebarShowUnread'
-								checked={sidebarShowUnread}
+								onChange={handleChangeGroupByType}
+								name='sidebarGroupByType'
+								checked={sidebarGroupByType}
 							/>
 						}
 					/>

client/components/SortList/SortModeList.js

@@ -31,24 +31,24 @@ function SortModeList() {
 			<ul className='rc-popover__list'>
 				<Margins block='x8'>
 					<SortListItem
-						icon={'sort-az'}
-						text={t('Alphabetical')}
+						icon={'clock'}
+						text={t('Activity')}
 						input={
 							<RadioButton
 								name='sidebarSortby'
-								onChange={setToAlphabetical}
-								checked={sidebarSortBy === 'alphabetical'}
+								onChange={setToActivity}
+								checked={sidebarSortBy === 'activity'}
 							/>
 						}
 					/>
 					<SortListItem
-						icon={'clock'}
-						text={t('Activity')}
+						icon={'sort-az'}
+						text={t('Name')}
 						input={
 							<RadioButton
 								name='sidebarSortby'
-								onChange={setToActivity}
-								checked={sidebarSortBy === 'activity'}
+								onChange={setToAlphabetical}
+								checked={sidebarSortBy === 'alphabetical'}
 							/>
 						}
 					/>

client/components/SortList/ViewModeList.js

@@ -19,28 +19,28 @@ function ViewModeList() {
 		useCallback(() => saveUserPreferences({ sidebarViewMode: value }), [value]);
 
 	const sidebarViewMode = useUserPreference('sidebarViewMode', 'extended');
-	const sidebarHideAvatar = useUserPreference('sidebarHideAvatar', false);
+	const sidebarDisplayAvatar = useUserPreference('sidebarDisplayAvatar', false);
 
 	const setToExtended = useHandleChange('extended');
 	const setToMedium = useHandleChange('medium');
 	const setToCondensed = useHandleChange('condensed');
 
-	const handleChangeSidebarHideAvatar = useCallback(
-		() => saveUserPreferences({ sidebarHideAvatar: !sidebarHideAvatar }),
-		[saveUserPreferences, sidebarHideAvatar],
+	const handleChangeSidebarDisplayAvatar = useCallback(
+		() => saveUserPreferences({ sidebarDisplayAvatar: !sidebarDisplayAvatar }),
+		[saveUserPreferences, sidebarDisplayAvatar],
 	);
 
 	return (
 		<>
 			<Margins block='x8'>
 				<Box is='p' style={style} fontScale='micro'>
-					{t('View_mode')}
+					{t('Display')}
 				</Box>
 			</Margins>
 			<ul className='rc-popover__list'>
 				<Margins block='x8'>
 					<SortListItem
-						icon={'th-list'}
+						icon={'extended-view'}
 						text={t('Extended')}
 						input={
 							<RadioButton
@@ -52,7 +52,7 @@ function ViewModeList() {
 						}
 					/>
 					<SortListItem
-						icon={'list'}
+						icon={'medium-view'}
 						text={t('Medium')}
 						input={
 							<RadioButton
@@ -64,7 +64,7 @@ function ViewModeList() {
 						}
 					/>
 					<SortListItem
-						icon={'list-alt'}
+						icon={'condensed-view'}
 						text={t('Condensed')}
 						input={
 							<RadioButton
@@ -77,12 +77,12 @@ function ViewModeList() {
 					/>
 					<SortListItem
 						icon={'user-rounded'}
-						text={t('Hide_Avatars')}
+						text={t('Avatars')}
 						input={
 							<ToggleSwitch
-								onChange={handleChangeSidebarHideAvatar}
-								name='sidebarHideAvatar'
-								checked={sidebarHideAvatar}
+								onChange={handleChangeSidebarDisplayAvatar}
+								name='sidebarDisplayAvatar'
+								checked={sidebarDisplayAvatar}
 							/>
 						}
 					/>

client/contexts/ServerContext/methods/saveUserPreferences.ts

@@ -19,17 +19,16 @@ type UserPreferences = {
 	messageViewMode: number;
 	hideUsernames: boolean;
 	hideRoles: boolean;
-	hideAvatars: boolean;
+	displayAvatars: boolean;
 	hideFlexTab: boolean;
 	sendOnEnter: string;
 	idleTimeLimit: number;
 	sidebarShowFavorites: boolean;
 	sidebarShowUnread: boolean;
 	sidebarSortby: string;
 	sidebarViewMode: string;
-	sidebarHideAvatar: boolean;
+	sidebarDisplayAvatar: boolean;
 	sidebarGroupByType: boolean;
-	sidebarShowDiscussion: boolean;
 	muteFocusedConversations: boolean;
 	dontAskAgainList: { action: string; label: string }[];
 };

client/sidebar/Sidebar.stories.js

@@ -4,56 +4,12 @@ import { SettingsContext } from '../contexts/SettingsContext';
 import { UserContext } from '../contexts/UserContext';
 import RoomList from './RoomList/index';
 import Header from './header';
-// import Extended from './Item/Extended';
-// import RoomAvatar from '../avatar/RoomAvatar';
 
 export default {
 	title: 'Sidebar',
 	component: '',
 };
 
-// const viewModes = ['extended', 'medium', 'condensed'];
-// const sortBy = ['activity', 'alphabetical'];
-
-/*
-	[] extended
-		[] com avatar
-		[] sem avatar
-		[] unread
-			[] sem badge
-		[] badges
-			[] normal
-			[] mention grupo
-			[] mention direta
-		[] last message
-			[] `You:`
-			[] No messages yet
-			[] Fulano:
-			[] yesterday
-			[] day month
-	[] medium
-		[] sem avatar
-		[] com avatar
-			[] sem avatar
-			[] unread
-				[] sem badge
-			[] badges
-				[] normal
-				[] mention grupo
-				[] mention direta
-	[] condensed
-		[] sem avatar
-		[] com avatar
-			[] sem avatar
-			[] unread
-				[] sem badge
-			[] badges
-				[] normal
-				[] mention grupo
-				[] mention direta
-
-*/
-
 const subscriptions = [
 	{
 		_id: '3Bysd8GrmkWBdS9RT',
@@ -101,10 +57,9 @@ const subscriptions = [
 
 const userPreferences = {
 	sidebarViewMode: 'medium',
-	sidebarHideAvatar: false,
+	sidebarDisplayAvatar: true,
 	sidebarGroupByType: true,
 	sidebarShowFavorites: true,
-	sidebarShowDiscussion: true,
 	sidebarShowUnread: true,
 	sidebarSortby: 'activity',
 };

client/sidebar/header/index.js

@@ -26,8 +26,8 @@ const HeaderWithData = () => {
 					{user && (
 						<>
 							<Directory title={t('Directory')} />
-							<Sort title={t('Filters')} />
-							<CreateRoom title={t('Create_A_New_Channel')} data-qa='sidebar-create' />
+							<Sort title={t('Display')} />
+							<CreateRoom title={t('Create_new')} data-qa='sidebar-create' />
 						</>
 					)}
 					{!user && <Login title={t('Login')} />}