Add ability to force sidebar width (#1170)

sindresorhus · Nov 22, 2019 · a6c914e · a6c914e
1 parent b1d3d7a
commit a6c914e
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 32 deletions.
diff --git a/css/browser.css b/css/browser.css
@@ -87,6 +87,16 @@ html.hide-dropdowns .uiContextualLayerPositioner {
 /* SIDEBAR                       */
 /* ***************************** */
 
+/* Narrow view */
+@media (max-width: 900px) {
+	/* Icons area */
+	html:not(.sidebar-force-wide) ._6-xk {
+		height: auto;
+		padding-top: 36px;
+		flex-direction: column;
+	}
+}
+
 /* Hide sidebar (optionally) */
 html.sidebar-hidden ._1enh {
 	visibility: hidden;
@@ -95,6 +105,88 @@ html.sidebar-hidden ._1enh {
 	width: 0;
 	height: 0;
 }
+html.sidebar-hidden.os-darwin ._6ynl {
+	padding-left: 76px;
+}
+
+/* Forced narrow sidebar (copied from @media (max-width: 900px) blocks) */
+
+html.sidebar-force-narrow ._1ht5 ._1qt4._7vuo,
+html.sidebar-force-narrow ._6-xk ._6-xo,
+html.sidebar-force-narrow ._6-xv,
+html.sidebar-force-narrow ._6-xl,
+html.sidebar-force-narrow ._7sta._87u_,
+html.sidebar-force-narrow ._1nq2._7vup,
+html.sidebar-force-narrow ._6ymu,
+html.sidebar-force-narrow ._1ht1 ._2j6._6zkg {
+	display: none;
+}
+html.sidebar-force-narrow ._1enh._7q1s {
+	flex-basis: 74px;
+	min-width: 80px;
+}
+html.sidebar-force-narrow ._6-xk {
+	justify-content: center;
+}
+html.sidebar-force-narrow ._6-xp {
+	margin-left: 0;
+}
+html.sidebar-force-narrow ._6zkc {
+	padding-left: 4px;
+	padding-right: 4px;
+}
+html.sidebar-force-narrow ._7t1l {
+	justify-content: center;
+}
+html.sidebar-force-narrow ._1ht1 ._1qt3._6-5k {
+	margin-right: 0;
+}
+html.sidebar-force-narrow ._1ht3._1ht1._6zk9 {
+	background-color: rgba(0, 132, 255, 0.2);
+	transition: background-color 0.5s;
+}
+html.sidebar-force-narrow ._1ht1._6zk9._1ht2 {
+	transition: background-color 0.5s;
+}
+html.sidebar-force-narrow ._7vuq {
+	display: block;
+}
+/* Copied from "Narrow view" block above */
+html.sidebar-force-narrow ._6-xk {
+	height: auto;
+	padding-top: 36px;
+	flex-direction: column;
+}
+
+/* Forced wide sidebar (restores default styles overwritten by media query) */
+html.sidebar-force-wide ._1nq2._7vup,
+html.sidebar-force-wide ._1ht1 ._2j6._6zkg {
+	display: block;
+}
+html.sidebar-force-wide ._1enh._7q1s {
+	flex-basis: 25%;
+	min-width: 285px;
+}
+html.sidebar-force-wide ._6-xp {
+	margin-left: auto;
+}
+html.sidebar-force-wide ._6zkc {
+	padding-left: 8px;
+	padding-right: 8px;
+}
+html.sidebar-force-wide ._7t1l {
+	justify-content: normal;
+}
+html.sidebar-force-wide ._1ht1 ._1qt3._6-5k {
+	margin-right: 12px;
+}
+html.sidebar-force-wide ._1ht3._1ht1._6zk9 {
+	background: none;
+}
+html.sidebar-force-wide ._1ht5 ._1qt4._7vuo,
+html.sidebar-force-wide ._7vuq {
+	display: flex;
+}
 
 /* Hide sidebar title */
 ._1tqi, /* legacy  */
@@ -127,16 +219,6 @@ html.sidebar-hidden ._1enh {
 	margin-left: 65px !important;
 }
 
-/* Narrow view */
-@media (max-width: 900px) {
-	/* Icons area */
-	._6-xk {
-		height: auto !important;
-		padding-top: 36px !important;
-		flex-direction: column;
-	}
-}
-
 /* ***************************** */
 
 /* Moves text to the left when window width < 473px */

diff --git a/source/browser.ts b/source/browser.ts
@@ -184,12 +184,6 @@ ipc.on('hide-conversation', async () => {
 	}
 });
 
-function setSidebarVisibility(): void {
-	document.documentElement.classList.toggle('sidebar-hidden', config.get('sidebarHidden'));
-
-	ipc.send('set-sidebar-visibility');
-}
-
 async function openHiddenPreferences(): Promise<boolean> {
 	if (!isPreferencesOpen()) {
 		const style = document.createElement('style');
@@ -313,6 +307,27 @@ function updateVibrancy(): void {
 	ipc.send('set-vibrancy');
 }
 
+function updateSidebar(): void {
+	const {classList} = document.documentElement;
+
+	classList.remove('sidebar-hidden', 'sidebar-force-narrow', 'sidebar-force-wide');
+
+	switch (config.get('sidebar')) {
+		case 'hidden':
+			classList.add('sidebar-hidden');
+			break;
+		case 'narrow':
+			classList.add('sidebar-force-narrow');
+			break;
+		case 'wide':
+			classList.add('sidebar-force-wide');
+			break;
+		default:
+	}
+
+	ipc.send('set-sidebar');
+}
+
 async function updateDoNotDisturb(): Promise<void> {
 	const shouldClosePreferences = await openHiddenPreferences();
 	const soundsCheckbox = document.querySelector<HTMLInputElement>(messengerSoundsSelector)!;
@@ -343,9 +358,8 @@ function renderOverlayIcon(messageCount: number): HTMLCanvasElement {
 	return canvas;
 }
 
-ipc.on('toggle-sidebar', () => {
-	config.set('sidebarHidden', !config.get('sidebarHidden'));
-	setSidebarVisibility();
+ipc.on('update-sidebar', () => {
+	updateSidebar();
 });
 
 ipc.on('set-dark-mode', setDarkMode);
@@ -544,8 +558,8 @@ document.addEventListener('DOMContentLoaded', async () => {
 	// Enable OS specific styles
 	document.documentElement.classList.add(`os-${process.platform}`);
 
-	// Hide sidebar if it was hidden before quitting
-	setSidebarVisibility();
+	// Restore sidebar view state to what is was set before quitting
+	updateSidebar();
 
 	// Activate Dark Mode if it was set before quitting
 	setDarkMode();

diff --git a/source/config.ts b/source/config.ts
@@ -30,7 +30,7 @@ type StoreType = {
 	};
 	emojiStyle: 'native' | 'facebook-3-0' | 'messenger-1-0' | 'facebook-2-2';
 	useWorkChat: boolean;
-	sidebarHidden: boolean;
+	sidebar: 'default' | 'hidden' | 'narrow' | 'wide';
 	autoHideMenuBar: boolean;
 	notificationsMuted: boolean;
 	hardwareAcceleration: boolean;
@@ -153,9 +153,10 @@ const schema: {[Key in keyof StoreType]: Store.Schema} = {
 		type: 'boolean',
 		default: false
 	},
-	sidebarHidden: {
-		type: 'boolean',
-		default: false
+	sidebar: {
+		type: 'string',
+		enum: ['default', 'hidden', 'narrow', 'wide'],
+		default: 'default'
 	},
 	autoHideMenuBar: {
 		type: 'boolean',
@@ -195,8 +196,17 @@ function updateVibrancySetting(store: Store): void {
 	}
 }
 
+function updateSidebarSetting(store: Store): void {
+	if (store.get('sidebarHidden')) {
+		store.set('sidebar', 'hidden');
+	} else {
+		store.set('sidebar', 'default');
+	}
+}
+
 function migrate(store: Store): void {
 	updateVibrancySetting(store);
+	updateSidebarSetting(store);
 }
 
 const store = new Store<StoreType>({schema});

diff --git a/source/menu.ts b/source/menu.ts
@@ -86,6 +86,51 @@ export default async function updateMenu(): Promise<Menu> {
 		}
 	];
 
+	const sidebarSubmenu: MenuItemConstructorOptions[] = [
+		{
+			label: 'Adaptive Sidebar',
+			type: 'checkbox',
+			checked: config.get('sidebar') === 'default',
+			async click() {
+				config.set('sidebar', 'default');
+				sendAction('update-sidebar');
+				await updateMenu();
+			}
+		},
+		{
+			label: 'Hide Sidebar',
+			type: 'checkbox',
+			checked: config.get('sidebar') === 'hidden',
+			accelerator: 'CommandOrControl+Shift+S',
+			async click() {
+				// Toggle between default and hidden
+				config.set('sidebar', config.get('sidebar') === 'hidden' ? 'default' : 'hidden');
+				sendAction('update-sidebar');
+				await updateMenu();
+			}
+		},
+		{
+			label: 'Narrow Sidebar',
+			type: 'checkbox',
+			checked: config.get('sidebar') === 'narrow',
+			async click() {
+				config.set('sidebar', 'narrow');
+				sendAction('update-sidebar');
+				await updateMenu();
+			}
+		},
+		{
+			label: 'Wide Sidebar',
+			type: 'checkbox',
+			checked: config.get('sidebar') === 'wide',
+			async click() {
+				config.set('sidebar', 'wide');
+				sendAction('update-sidebar');
+				await updateMenu();
+			}
+		}
+	];
+
 	const privacySubmenu: MenuItemConstructorOptions[] = [
 		{
 			label: 'Block Seen Indicator',
@@ -409,13 +454,8 @@ Press Command/Ctrl+R in Caprine to see your changes.
 			type: 'separator'
 		},
 		{
-			label: 'Show Sidebar',
-			type: 'checkbox',
-			checked: !config.get('sidebarHidden'),
-			accelerator: 'CommandOrControl+Shift+S',
-			click() {
-				sendAction('toggle-sidebar');
-			}
+			label: 'Sidebar',
+			submenu: sidebarSubmenu
 		},
 		{
 			label: 'Show Message Buttons',