From f86f87fe77795ef87a042b26af04447d53890be6 Mon Sep 17 00:00:00 2001 From: Florian Date: Wed, 6 Nov 2019 20:57:09 -0600 Subject: [PATCH 1/2] Add ability to force sidebar width --- css/browser.css | 102 +++++++++++++++++++++++++++++++++++++++++----- source/browser.ts | 36 +++++++++++----- source/config.ts | 9 ++-- source/menu.ts | 54 ++++++++++++++++++++---- 4 files changed, 169 insertions(+), 32 deletions(-) diff --git a/css/browser.css b/css/browser.css index 871c50be9..f651b540b 100644 --- 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 slim sidebar (copied from @media (max-width: 900px) blocks) */ + +html.sidebar-force-slim ._1ht5 ._1qt4._7vuo, +html.sidebar-force-slim ._6-xk ._6-xo, +html.sidebar-force-slim ._6-xv, +html.sidebar-force-slim ._6-xl, +html.sidebar-force-slim ._7sta._87u_, +html.sidebar-force-slim ._1nq2._7vup, +html.sidebar-force-slim ._6ymu, +html.sidebar-force-slim ._1ht1 ._2j6._6zkg { + display: none; +} +html.sidebar-force-slim ._1enh._7q1s { + flex-basis: 74px; + min-width: 80px; +} +html.sidebar-force-slim ._6-xk { + justify-content: center; +} +html.sidebar-force-slim ._6-xp { + margin-left: 0; +} +html.sidebar-force-slim ._6zkc { + padding-left: 4px; + padding-right: 4px; +} +html.sidebar-force-slim ._7t1l { + justify-content: center; +} +html.sidebar-force-slim ._1ht1 ._1qt3._6-5k { + margin-right: 0; +} +html.sidebar-force-slim ._1ht3._1ht1._6zk9 { + background-color: rgba(0, 132, 255, 0.2); + transition: background-color 0.5s; +} +html.sidebar-force-slim ._1ht1._6zk9._1ht2 { + transition: background-color 0.5s; +} +html.sidebar-force-slim ._7vuq { + display: block; +} +/* Copied from "Narrow view" block above */ +html.sidebar-force-slim ._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 index 9ca2e323d..3690f976d 100644 --- a/source/browser.ts +++ b/source/browser.ts @@ -186,12 +186,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 { if (!isPreferencesOpen()) { const style = document.createElement('style'); @@ -314,6 +308,27 @@ function updateVibrancy(): void { ipc.send('set-vibrancy'); } +function updateSidebar(): void { + const {classList} = document.documentElement; + + classList.remove('sidebar-hidden', 'sidebar-force-slim', 'sidebar-force-wide'); + + switch (config.get('sidebar')) { + case 'hidden': + classList.add('sidebar-hidden'); + break; + case 'slim': + classList.add('sidebar-force-slim'); + break; + case 'wide': + classList.add('sidebar-force-wide'); + break; + default: + } + + ipc.send('set-sidebar'); +} + async function updateDoNotDisturb(): Promise { const shouldClosePreferences = await openHiddenPreferences(); const soundsCheckbox = document.querySelector(messengerSoundsSelector)!; @@ -344,9 +359,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); @@ -546,8 +560,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 index a7e4b5c90..732dcfb9e 100644 --- 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' | 'slim' | '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', 'slim', 'wide'], + default: 'default' }, autoHideMenuBar: { type: 'boolean', diff --git a/source/menu.ts b/source/menu.ts index 16b600690..d21a51e2b 100644 --- a/source/menu.ts +++ b/source/menu.ts @@ -86,6 +86,51 @@ export default async function updateMenu(): Promise { } ]; + 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: 'Slim Sidebar', + type: 'checkbox', + checked: config.get('sidebar') === 'slim', + async click() { + config.set('sidebar', 'slim'); + 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', From 34c9a60994afe22c0cf8c6c1fb25b1c36bbd5e01 Mon Sep 17 00:00:00 2001 From: Florian Date: Mon, 11 Nov 2019 11:34:55 -0600 Subject: [PATCH 2/2] Rename slim sidebar to narrow and migrate sidebar setting --- css/browser.css | 40 ++++++++++++++++++++-------------------- source/browser.ts | 6 +++--- source/config.ts | 13 +++++++++++-- source/menu.ts | 6 +++--- 4 files changed, 37 insertions(+), 28 deletions(-) diff --git a/css/browser.css b/css/browser.css index f651b540b..671157e82 100644 --- a/css/browser.css +++ b/css/browser.css @@ -109,50 +109,50 @@ html.sidebar-hidden.os-darwin ._6ynl { padding-left: 76px; } -/* Forced slim sidebar (copied from @media (max-width: 900px) blocks) */ - -html.sidebar-force-slim ._1ht5 ._1qt4._7vuo, -html.sidebar-force-slim ._6-xk ._6-xo, -html.sidebar-force-slim ._6-xv, -html.sidebar-force-slim ._6-xl, -html.sidebar-force-slim ._7sta._87u_, -html.sidebar-force-slim ._1nq2._7vup, -html.sidebar-force-slim ._6ymu, -html.sidebar-force-slim ._1ht1 ._2j6._6zkg { +/* 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-slim ._1enh._7q1s { +html.sidebar-force-narrow ._1enh._7q1s { flex-basis: 74px; min-width: 80px; } -html.sidebar-force-slim ._6-xk { +html.sidebar-force-narrow ._6-xk { justify-content: center; } -html.sidebar-force-slim ._6-xp { +html.sidebar-force-narrow ._6-xp { margin-left: 0; } -html.sidebar-force-slim ._6zkc { +html.sidebar-force-narrow ._6zkc { padding-left: 4px; padding-right: 4px; } -html.sidebar-force-slim ._7t1l { +html.sidebar-force-narrow ._7t1l { justify-content: center; } -html.sidebar-force-slim ._1ht1 ._1qt3._6-5k { +html.sidebar-force-narrow ._1ht1 ._1qt3._6-5k { margin-right: 0; } -html.sidebar-force-slim ._1ht3._1ht1._6zk9 { +html.sidebar-force-narrow ._1ht3._1ht1._6zk9 { background-color: rgba(0, 132, 255, 0.2); transition: background-color 0.5s; } -html.sidebar-force-slim ._1ht1._6zk9._1ht2 { +html.sidebar-force-narrow ._1ht1._6zk9._1ht2 { transition: background-color 0.5s; } -html.sidebar-force-slim ._7vuq { +html.sidebar-force-narrow ._7vuq { display: block; } /* Copied from "Narrow view" block above */ -html.sidebar-force-slim ._6-xk { +html.sidebar-force-narrow ._6-xk { height: auto; padding-top: 36px; flex-direction: column; diff --git a/source/browser.ts b/source/browser.ts index 3690f976d..3421eeff5 100644 --- a/source/browser.ts +++ b/source/browser.ts @@ -311,14 +311,14 @@ function updateVibrancy(): void { function updateSidebar(): void { const {classList} = document.documentElement; - classList.remove('sidebar-hidden', 'sidebar-force-slim', 'sidebar-force-wide'); + classList.remove('sidebar-hidden', 'sidebar-force-narrow', 'sidebar-force-wide'); switch (config.get('sidebar')) { case 'hidden': classList.add('sidebar-hidden'); break; - case 'slim': - classList.add('sidebar-force-slim'); + case 'narrow': + classList.add('sidebar-force-narrow'); break; case 'wide': classList.add('sidebar-force-wide'); diff --git a/source/config.ts b/source/config.ts index 732dcfb9e..2be59c9bb 100644 --- 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; - sidebar: 'default' | 'hidden' | 'slim' | 'wide'; + sidebar: 'default' | 'hidden' | 'narrow' | 'wide'; autoHideMenuBar: boolean; notificationsMuted: boolean; hardwareAcceleration: boolean; @@ -155,7 +155,7 @@ const schema: {[Key in keyof StoreType]: Store.Schema} = { }, sidebar: { type: 'string', - enum: ['default', 'hidden', 'slim', 'wide'], + enum: ['default', 'hidden', 'narrow', 'wide'], default: 'default' }, autoHideMenuBar: { @@ -196,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({schema}); diff --git a/source/menu.ts b/source/menu.ts index d21a51e2b..5d6f40ddd 100644 --- a/source/menu.ts +++ b/source/menu.ts @@ -110,11 +110,11 @@ export default async function updateMenu(): Promise { } }, { - label: 'Slim Sidebar', + label: 'Narrow Sidebar', type: 'checkbox', - checked: config.get('sidebar') === 'slim', + checked: config.get('sidebar') === 'narrow', async click() { - config.set('sidebar', 'slim'); + config.set('sidebar', 'narrow'); sendAction('update-sidebar'); await updateMenu(); }