fix: Enable Change View Mode in PWA

shubhsherl · Feb 16, 2020 · 6036f00 · 6036f00
1 parent f830891
commit 6036f00
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 25 deletions.
diff --git a/app/ui-sidenav/client/sideNav.js b/app/ui-sidenav/client/sideNav.js
@@ -7,7 +7,7 @@ import { Tracker } from 'meteor/tracker';
 import { lazyloadtick } from '../../lazy-load';
 import { SideNav, menu } from '../../ui-utils';
 import { settings } from '../../settings';
-import { roomTypes, getUserPreference, isMobile } from '../../utils';
+import { roomTypes, getUserPreference } from '../../utils';
 import { Users } from '../../models';
 
 Template.sideNav.helpers({
@@ -40,11 +40,8 @@ Template.sideNav.helpers({
 	},
 
 	sidebarViewMode() {
-		if (isMobile()) {
-			return 'extended';
-		}
 		const viewMode = getUserPreference(Meteor.userId(), 'sidebarViewMode');
-		return viewMode || 'condensed';
+		return viewMode || 'extended';
 	},
 
 	sidebarHideAvatar() {

diff --git a/app/ui-sidenav/client/sidebarHeader.js b/app/ui-sidenav/client/sidebarHeader.js
@@ -27,11 +27,8 @@ const extendedViewOption = (user) => {
 		return {
 			icon: viewModeIcon.extended,
 			name: t('Extended'),
-			modifier: isMobile() || getUserPreference(user, 'sidebarViewMode') === 'extended' ? 'bold' : null,
+			modifier: getUserPreference(user, 'sidebarViewMode') === 'extended' ? 'bold' : null,
 			action: () => {
-				if (isMobile()) {
-					return;
-				}
 				Meteor.call('saveUserPreferences', { sidebarViewMode: 'extended' }, function(error) {
 					if (error) {
 						return handleError(error);
@@ -100,7 +97,7 @@ const toolbarButtons = (user) => [{
 },
 {
 	name: t('View_mode'),
-	icon: () => viewModeIcon[getUserPreference(user, 'sidebarViewMode') || 'condensed'],
+	icon: () => viewModeIcon[getUserPreference(user, 'sidebarViewMode') || 'extended'],
 	condition: () => !isMobile(),
 	hasPopup: true,
 	action: (e) => {
@@ -115,11 +112,8 @@ const toolbarButtons = (user) => [{
 								{
 									icon: viewModeIcon.medium,
 									name: t('Medium'),
-									modifier: !isMobile() && getUserPreference(user, 'sidebarViewMode') === 'medium' ? 'bold' : null,
+									modifier: getUserPreference(user, 'sidebarViewMode') === 'medium' ? 'bold' : null,
 									action: () => {
-										if (isMobile()) {
-											return;
-										}
 										Meteor.call('saveUserPreferences', { sidebarViewMode: 'medium' }, function(error) {
 											if (error) {
 												return handleError(error);
@@ -130,11 +124,8 @@ const toolbarButtons = (user) => [{
 								{
 									icon: viewModeIcon.condensed,
 									name: t('Condensed'),
-									modifier: !isMobile() && getUserPreference(user, 'sidebarViewMode') === 'condensed' ? 'bold' : null,
+									modifier: getUserPreference(user, 'sidebarViewMode') === 'condensed' ? 'bold' : null,
 									action: () => {
-										if (isMobile()) {
-											return;
-										}
 										Meteor.call('saveUserPreferences', { sidebarViewMode: 'condensed' }, function(error) {
 											if (error) {
 												return handleError(error);
@@ -286,6 +277,12 @@ const toolbarButtons = (user) => [{
 			type: 'sort-action',
 		};
 
+		const viewModeOption = {
+			name: t('View_mode'),
+			icon: () => viewModeIcon[getUserPreference(user, 'sidebarViewMode') || 'extended'],
+			type: 'view-mode-action',
+		};
+
 		const shareOption = {
 			name: t('Share'),
 			icon: 'share',
@@ -334,7 +331,7 @@ const toolbarButtons = (user) => [{
 			offsetVertical: e.currentTarget.clientHeight + 10,
 		};
 		if (isMobile()) {
-			config.columns[0].groups[0].items = config.columns[0].groups[0].items.concat([sortOption]);
+			config.columns[0].groups[0].items = config.columns[0].groups[0].items.concat([viewModeOption, sortOption]);
 		}
 		config.columns[0].groups[0].items = config.columns[0].groups[0].items.concat([shareOption]);
 

diff --git a/app/ui-sidenav/client/sidebarItem.js b/app/ui-sidenav/client/sidebarItem.js
@@ -3,7 +3,7 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Session } from 'meteor/session';
 import { Template } from 'meteor/templating';
 
-import { t, getUserPreference, roomTypes, isMobile } from '../../utils';
+import { t, getUserPreference, roomTypes } from '../../utils';
 import { popover, renderMessageBody, menu } from '../../ui-utils';
 import { Users, ChatSubscription } from '../../models';
 import { settings } from '../../settings';
@@ -18,9 +18,6 @@ Template.sidebarItem.helpers({
 		return this.rid || this._id;
 	},
 	isExtendedViewMode() {
-		if (isMobile()) {
-			return true;
-		}
 		return getUserPreference(Meteor.userId(), 'sidebarViewMode') === 'extended';
 	},
 	lastMessage() {

diff --git a/app/ui-utils/client/lib/popover.js b/app/ui-utils/client/lib/popover.js
@@ -5,7 +5,8 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
 import _ from 'underscore';
 
-import { share, isShareAvailable } from '../../../utils';
+import { t, getUserPreference, share, isShareAvailable } from '../../../utils';
+import { settings } from '../../../settings';
 import { hide, leave } from './ChannelActions';
 import { messageBox } from './messageBox';
 import { MessageAction } from './MessageAction';
@@ -37,6 +38,30 @@ export const popover = {
 	},
 };
 
+
+const viewModeIcon = {
+	extended: 'th-list',
+	medium: 'list',
+	condensed: 'list-alt',
+};
+
+const extendedViewOption = (user) => {
+	if (settings.get('Store_Last_Message')) {
+		return {
+			icon: viewModeIcon.extended,
+			name: t('Extended'),
+			modifier: getUserPreference(user, 'sidebarViewMode') === 'extended' ? 'bold' : null,
+			action: () => {
+				Meteor.call('saveUserPreferences', { sidebarViewMode: 'extended' }, function(error) {
+					if (error) {
+						return handleError(error);
+					}
+				});
+			},
+		};
+	}
+};
+
 Template.popover.helpers({
 	hasAction() {
 		return !!this.action;
@@ -180,7 +205,6 @@ Template.popover.events({
 	},
 	'click [data-type="sort-action"]'(e) {
 		popover.close();
-		console.log('works');
 		const options = [];
 		const config = {
 			template: 'sortlist',
@@ -192,6 +216,66 @@ Template.popover.events({
 		};
 		popover.open(config);
 	},
+	'click [data-type="view-mode-action"]'(e) {
+		popover.close();
+		const user = Meteor.userId();
+		const hideAvatarSetting = getUserPreference(user, 'sidebarHideAvatar');
+		const config = {
+			columns: [
+				{
+					groups: [
+						{
+							items: [
+								extendedViewOption(user),
+								{
+									icon: viewModeIcon.medium,
+									name: t('Medium'),
+									modifier: getUserPreference(user, 'sidebarViewMode') === 'medium' ? 'bold' : null,
+									action: () => {
+										Meteor.call('saveUserPreferences', { sidebarViewMode: 'medium' }, function(error) {
+											if (error) {
+												return handleError(error);
+											}
+										});
+									},
+								},
+								{
+									icon: viewModeIcon.condensed,
+									name: t('Condensed'),
+									modifier: getUserPreference(user, 'sidebarViewMode') === 'condensed' ? 'bold' : null,
+									action: () => {
+										Meteor.call('saveUserPreferences', { sidebarViewMode: 'condensed' }, function(error) {
+											if (error) {
+												return handleError(error);
+											}
+										});
+									},
+								},
+							],
+						},
+						{
+							items: [
+								{
+									icon: 'user-rounded',
+									name: hideAvatarSetting ? t('Show_Avatars') : t('Hide_Avatars'),
+									action: () => {
+										Meteor.call('saveUserPreferences', { sidebarHideAvatar: !hideAvatarSetting }, function(error) {
+											if (error) {
+												return handleError(error);
+											}
+										});
+									},
+								},
+							],
+						},
+					],
+				},
+			],
+			currentTarget: e.currentTarget,
+			offsetVertical: e.currentTarget.clientHeight + 10,
+		};
+		popover.open(config);
+	},
 	'click [data-type="share-action"]'(e) {
 		if (isShareAvailable()) {
 			share();