From d90b8b0b051d91b8439df39cf5a37c4f63b1cc07 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Mon, 15 Jun 2020 15:45:19 +0200 Subject: [PATCH] Add config option to increase the navigation bar's size Closes #4 --- frontend/sass/index.scss | 334 ++++++++++++++++++++------------------- frontend/settings.html | 6 + frontend/ts/index.ts | 3 + frontend/ts/settings.ts | 10 +- src/Config.ts | 4 + 5 files changed, 191 insertions(+), 166 deletions(-) diff --git a/frontend/sass/index.scss b/frontend/sass/index.scss index 6f3eab2..b6179d5 100644 --- a/frontend/sass/index.scss +++ b/frontend/sass/index.scss @@ -1,128 +1,132 @@ +:root { + --nav-width: 48px; +} + body { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #navigation { - display: flex; - flex-direction: column; - height: 100%; - width: 48px; + display: flex; + flex-direction: column; + height: 100%; + width: var(--nav-width); } #navigation > :not(#service-buttons) { - flex-shrink: 0; + flex-shrink: 0; } #service-buttons { - flex-grow: 1; + flex-grow: 1; - overflow: hidden auto; + overflow: hidden auto; } #service-selector { - display: block; - margin: 0; - padding: 0; + display: block; + margin: 0; + padding: 0; - list-style: none; + list-style: none; } #service-selector::-webkit-scrollbar { - width: 6px; + width: 6px; } #service-selector [draggable] { - user-select: none; - background-color: rgb(43, 43, 43); + user-select: none; + background-color: rgb(43, 43, 43); } #service-selector [draggable] img { - -webkit-user-drag: none; - user-drag: none; + -webkit-user-drag: none; + user-drag: none; } #service-selector .drag-target button::after, #service-last-drag-position.drag-target { - content: ""; - height: 4px; - transform: translateY(-50%); - border: 0; - box-sizing: border-box; - background: #fff9; + content: ""; + height: 4px; + transform: translateY(-50%); + border: 0; + box-sizing: border-box; + background: #fff9; } #service-selector .drag-target-self button::after { - height: 48px; - border: 1px dashed #fff; - transform: none; + height: var(--nav-width); + border: 1px dashed #fff; + transform: none; } #service-selector .drag-target button::after { - position: absolute; - left: 0; - top: 0; - width: 100%; + position: absolute; + left: 0; + top: 0; + width: 100%; } #service-selector .drag-target::after { - top: 75% !important; + top: 75% !important; } *:focus { - outline-color: rgb(118, 93, 176); + outline-color: rgb(118, 93, 176); } #navigation button { - position: relative; - display: block; - width: 48px; - height: 48px; - margin: 0; - padding: 0; + position: relative; + display: block; + width: var(--nav-width); + height: var(--nav-width); + margin: 0; + padding: 0; - color: #fff; - border: 0; - background: transparent; + color: #fff; + border: 0; + background: transparent; - cursor: pointer; + cursor: pointer; } #navigation button:focus { - outline: none; - background: #fff3 !important; + outline: none; + background: #fff3 !important; } #navigation button img { - width: 24px; + width: calc(var(--nav-width) / 2); } #navigation button i { - font-size: 24px; + font-size: calc(var(--nav-width) / 2); } #service-selector li { - position: relative; + position: relative; } #service-selector li button, #navigation > button { - border-radius: 0; + border-radius: 0; } #service-selector li.active button { - background-color: #fff2; + background-color: #fff2; } #service-selector li.loaded button::before { - content: ""; - display: block; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - height: 75%; - border-right: 4px solid #ffffff3e; + content: ""; + display: block; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + height: 75%; + border-right: 4px solid #ffffff3e; } /*#service-selector li.loaded::after {*/ @@ -139,206 +143,206 @@ body { /*}*/ #navigation button:hover { - background-color: #fff3; + background-color: #fff3; } #history { - display: flex; - flex-direction: column; - align-items: center; - padding: 2px; + display: flex; + flex-direction: column; + align-items: center; + padding: 2px; } #history button, #history .status { - display: inline; - width: 24px; - height: 24px; - margin: 2px; - padding: initial; - font-size: 12px; + display: inline; + width: calc(var(--nav-width) / 2); + height: calc(var(--nav-width) / 2); + margin: 2px; + padding: initial; + font-size: calc(var(--nav-width) / 4); - background: #fff1; + background: #fff1; - color: #fff; - cursor: pointer; + color: #fff; + cursor: pointer; - border-radius: 3px; + border-radius: 3px; } #history button i { - font-size: inherit; + font-size: inherit; } #history button.disabled { - color: #888; - border: transparent; - background: transparent; - cursor: initial; + color: #888; + border: transparent; + background: transparent; + cursor: initial; } #history button:focus, #history button:hover { - outline: none; - border-color: #fff9; + outline: none; + border-color: #fff9; } #history button:hover:not(.disabled) { - outline: none; - background-color: #fff2; + outline: none; + background-color: #fff2; } #history button:active:not(.disabled) { - background-color: #fff4; + background-color: #fff4; } #history #status { - background: transparent; + background: transparent; } #history #status .unknown, #history #status .file { - color: #888; + color: #888; } #history #status .https { - color: #009800; + color: #009800; } #history #status .http { - color: #e20000; + color: #e20000; } #history #status > :not(.active) { - display: none; + display: none; } #history #status > * .tip { - position: absolute; - z-index: 1; - left: 100%; - top: 50%; - transform: translateY(-50%); - display: none; - margin-left: 8px; + position: absolute; + z-index: 1; + left: 100%; + top: 50%; + transform: translateY(-50%); + display: none; + margin-left: 8px; - background-color: #000; - padding: 8px; - border-radius: 4px; - white-space: nowrap; - color: #fff; - text-transform: none; - font-family: sans-serif; - font-size: 16px; - font-weight: 100; + background-color: #000; + padding: 8px; + border-radius: 4px; + white-space: nowrap; + color: #fff; + text-transform: none; + font-family: sans-serif; + font-size: 16px; + font-weight: 100; } #history #status > * .tip::before { - content: ""; - position: absolute; - left: 0; - top: 50%; - transform: translate(-100%, -50%); - display: inline-block; - width: 0; - height: 0; - border: 0 solid transparent; - border-top-width: 4px; - border-bottom-width: 4px; - border-right: 7px solid black; + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translate(-100%, -50%); + display: inline-block; + width: 0; + height: 0; + border: 0 solid transparent; + border-top-width: 4px; + border-bottom-width: 4px; + border-right: 7px solid black; } #history #status:focus > * .tip { - display: block; + display: block; } #navigation #add-button:not(:hover) { - opacity: 0.75; + opacity: 0.75; } #services { - position: relative; - flex-grow: 1; + position: relative; + flex-grow: 1; } #services > *:not(.loader):not(#url-preview) { - height: 100%; + height: 100%; } #services > :not(.active):not(.loader):not(#url-preview):not(webview) { - display: none; + display: none; } #services > webview { - position: absolute; - width: 100%; - height: 100%; - z-index: 10; - background-color: rgb(43, 43, 43); + position: absolute; + width: 100%; + height: 100%; + z-index: 10; + background-color: rgb(43, 43, 43); } #services > webview.active { - z-index: 20; + z-index: 20; } #services > .loader { - width: 64px; - height: 64px; + width: 64px; + height: 64px; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - z-index: -1; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: -1; } #url-preview { - position: absolute; - bottom: 0; - left: 0; - display: block; - padding: 2px 5px 1px 5px; + position: absolute; + bottom: 0; + left: 0; + display: block; + padding: 2px 5px 1px 5px; - max-width: 48%; - overflow: hidden; - text-overflow: ellipsis; + max-width: 48%; + overflow: hidden; + text-overflow: ellipsis; - font-family: monospace; + font-family: monospace; - border-width: 1px 1px 0 0; - border-color: #232323; - border-style: solid; - border-radius: 0 5px 0 0; + border-width: 1px 1px 0 0; + border-color: #232323; + border-style: solid; + border-radius: 0 5px 0 0; - background: #2b2b2b; + background: #2b2b2b; - opacity: 1; - transition: 100ms ease opacity; - transition-delay: 200ms; + opacity: 1; + transition: 100ms ease opacity; + transition-delay: 200ms; } #url-preview.right { - left: auto; - right: 0; + left: auto; + right: 0; - border-width: 1px 0 0 1px; - border-radius: 5px 0 0 0; + border-width: 1px 0 0 1px; + border-radius: 5px 0 0 0; } #url-preview.hidden { - opacity: 0; + opacity: 0; } #services > #empty-message { - display: flex !important; - position: absolute; - z-index: -1; - bottom: 0; - width: 100%; - justify-content: center; - align-items: center; + display: flex !important; + position: absolute; + z-index: -1; + bottom: 0; + width: 100%; + justify-content: center; + align-items: center; } #services > .loader:not(.hidden) ~ #empty-message { - display: none !important; + display: none !important; } \ No newline at end of file diff --git a/frontend/settings.html b/frontend/settings.html index 540ed32..1190c7b 100644 --- a/frontend/settings.html +++ b/frontend/settings.html @@ -35,6 +35,12 @@ +
+

Appearance

+ + +
+

History navigation buttons

diff --git a/frontend/ts/index.ts b/frontend/ts/index.ts index f0eb02b..3164032 100644 --- a/frontend/ts/index.ts +++ b/frontend/ts/index.ts @@ -207,6 +207,9 @@ ipcRenderer.on('data', (event, appData, iconSets, actualSelectedService, emptyUr // Other elements serviceSelector = document.getElementById('service-selector'); + + // Navbar size + document.documentElement.style.setProperty('--nav-width', config.bigNavBar ? '64px' : '48px'); }); function removeServiceFeatures(id: number): HTMLElement | null { diff --git a/frontend/ts/settings.ts b/frontend/ts/settings.ts index 29a1d1e..f70cca0 100644 --- a/frontend/ts/settings.ts +++ b/frontend/ts/settings.ts @@ -8,6 +8,8 @@ let config: any; let startMinimizedField: HTMLInputElement | null; +let bigNavBarField: HTMLInputElement | null; + let securityButtonField: HTMLInputElement | null, homeButtonField: HTMLInputElement | null, backButtonField: HTMLInputElement | null, @@ -22,6 +24,8 @@ ipcRenderer.on('config', (e, c) => { config = c; if (startMinimizedField) startMinimizedField.checked = config.startMinimized; + if (bigNavBarField) bigNavBarField.checked = config.bigNavBar; + if (securityButtonField) securityButtonField.checked = config.securityButton; if (homeButtonField) homeButtonField.checked = config.homeButton; if (backButtonField) backButtonField.checked = config.backButton; @@ -47,6 +51,8 @@ function save() { config.startMinimized = formData.get('start-minimized') === 'on'; + config.bigNavBar = formData.get('big-nav-bar') === 'on'; + config.securityButton = formData.get('security-button') === 'on'; config.homeButton = formData.get('home-button') === 'on'; config.backButton = formData.get('back-button') === 'on'; @@ -55,7 +61,7 @@ function save() { ipcRenderer.send('save-config', config); remote.getCurrentWindow().close(); -}; +} document.addEventListener('DOMContentLoaded', () => { currentVersion = document.getElementById('current-version'); @@ -68,6 +74,8 @@ document.addEventListener('DOMContentLoaded', () => { startMinimizedField = document.getElementById('start-minimized'); + bigNavBarField = document.getElementById('big-nav-bar'); + securityButtonField = document.getElementById('security-button'); homeButtonField = document.getElementById('home-button'); backButtonField = document.getElementById('back-button'); diff --git a/src/Config.ts b/src/Config.ts index 2262b77..b776cc3 100644 --- a/src/Config.ts +++ b/src/Config.ts @@ -15,6 +15,8 @@ export default class Config { public startMinimized: boolean = false; + public bigNavBar: boolean = false; + public securityButton: boolean = true; public homeButton: boolean = false; public backButton: boolean = true; @@ -50,6 +52,8 @@ export default class Config { this.defineProperty('startMinimized', data); + this.defineProperty('bigNavBar', data); + this.defineProperty('securityButton', data); this.defineProperty('homeButton', data); this.defineProperty('backButton', data);