Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to force sidebar width #1170

Merged
merged 2 commits into from
Nov 22, 2019
Merged

Add ability to force sidebar width #1170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f86f87f
Add ability to force sidebar width
jaflo Nov 7, 2019
34c9a60
Rename slim sidebar to narrow and migrate sidebar setting
jaflo Nov 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 92 additions & 10 deletions css/browser.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 */
Expand Down Expand Up @@ -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 */
Expand Down
36 changes: 25 additions & 11 deletions source/browser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<boolean> {
if (!isPreferencesOpen()) {
const style = document.createElement('style');
Expand Down Expand Up @@ -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<void> {
const shouldClosePreferences = await openHiddenPreferences();
const soundsCheckbox = document.querySelector<HTMLInputElement>(messengerSoundsSelector)!;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();
Expand Down
18 changes: 14 additions & 4 deletions source/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -153,9 +153,10 @@ const schema: {[Key in keyof StoreType]: Store.Schema} = {
type: 'boolean',
default: false
},
sidebarHidden: {
type: 'boolean',
jaflo marked this conversation as resolved.
Show resolved Hide resolved
default: false
sidebar: {
type: 'string',
enum: ['default', 'hidden', 'narrow', 'wide'],
default: 'default'
},
autoHideMenuBar: {
type: 'boolean',
Expand Down Expand Up @@ -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});
Expand Down
54 changes: 47 additions & 7 deletions source/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down