diff --git a/css/browser.css b/css/browser.css index 871c50be9..671157e82 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 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 index 9ca2e323d..3421eeff5 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-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 { 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..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; - 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({schema}); diff --git a/source/menu.ts b/source/menu.ts index 16b600690..5d6f40ddd 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: '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',