ashpie/tabs
ashpie/tabs
1
0
Fork 0
Code Issues 12 Pull Requests Releases 49 Wiki Activity

Add config option to increase the navigation bar's size

Browse Source 
Closes #4
This commit is contained in:
Alice Gaudon 2020-06-15 15:45:19 +02:00
parent 2822a2e110
commit d90b8b0b05
5 changed files with 191 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
frontend/sass/index.scss
View File

@ -1,128 +1,132 @@
:root {
--nav-width: 48px;
}
body { body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#navigation { #navigation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 48px; width: var(--nav-width);
} }
#navigation > :not(#service-buttons) { #navigation > :not(#service-buttons) {
flex-shrink: 0; flex-shrink: 0;
} }
#service-buttons { #service-buttons {
flex-grow: 1; flex-grow: 1;
overflow: hidden auto; overflow: hidden auto;
} }
#service-selector { #service-selector {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#service-selector::-webkit-scrollbar { #service-selector::-webkit-scrollbar {
width: 6px; width: 6px;
} }
#service-selector [draggable] { #service-selector [draggable] {
user-select: none; user-select: none;
background-color: rgb(43, 43, 43); background-color: rgb(43, 43, 43);
} }
#service-selector [draggable] img { #service-selector [draggable] img {
-webkit-user-drag: none; -webkit-user-drag: none;
user-drag: none; user-drag: none;
} }
#service-selector .drag-target button::after, #service-selector .drag-target button::after,
#service-last-drag-position.drag-target { #service-last-drag-position.drag-target {
content: ""; content: "";
height: 4px; height: 4px;
transform: translateY(-50%); transform: translateY(-50%);
border: 0; border: 0;
box-sizing: border-box; box-sizing: border-box;
background: #fff9; background: #fff9;
} }
#service-selector .drag-target-self button::after { #service-selector .drag-target-self button::after {
height: 48px; height: var(--nav-width);
border: 1px dashed #fff; border: 1px dashed #fff;
transform: none; transform: none;
} }
#service-selector .drag-target button::after { #service-selector .drag-target button::after {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
} }
#service-selector .drag-target::after { #service-selector .drag-target::after {
top: 75% !important; top: 75% !important;
} }
*:focus { *:focus {
outline-color: rgb(118, 93, 176); outline-color: rgb(118, 93, 176);
} }
#navigation button { #navigation button {
position: relative; position: relative;
display: block; display: block;
width: 48px; width: var(--nav-width);
height: 48px; height: var(--nav-width);
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #fff; color: #fff;
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
} }
#navigation button:focus { #navigation button:focus {
outline: none; outline: none;
background: #fff3 !important; background: #fff3 !important;
} }
#navigation button img { #navigation button img {
width: 24px; width: calc(var(--nav-width) / 2);
} }
#navigation button i { #navigation button i {
font-size: 24px; font-size: calc(var(--nav-width) / 2);
} }
#service-selector li { #service-selector li {
position: relative; position: relative;
} }
#service-selector li button, #service-selector li button,
#navigation > button { #navigation > button {
border-radius: 0; border-radius: 0;
} }
#service-selector li.active button { #service-selector li.active button {
background-color: #fff2; background-color: #fff2;
} }
#service-selector li.loaded button::before { #service-selector li.loaded button::before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
right: 0; right: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
height: 75%; height: 75%;
border-right: 4px solid #ffffff3e; border-right: 4px solid #ffffff3e;
} }
/*#service-selector li.loaded::after {*/ /*#service-selector li.loaded::after {*/
@ -139,206 +143,206 @@ body {
/*}*/ /*}*/
#navigation button:hover { #navigation button:hover {
background-color: #fff3; background-color: #fff3;
} }
#history { #history {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2px; padding: 2px;
} }
#history button, #history button,
#history .status { #history .status {
display: inline; display: inline;
width: 24px; width: calc(var(--nav-width) / 2);
height: 24px; height: calc(var(--nav-width) / 2);
margin: 2px; margin: 2px;
padding: initial; padding: initial;
font-size: 12px; font-size: calc(var(--nav-width) / 4);
background: #fff1; background: #fff1;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
} }
#history button i { #history button i {
font-size: inherit; font-size: inherit;
} }
#history button.disabled { #history button.disabled {
color: #888; color: #888;
border: transparent; border: transparent;
background: transparent; background: transparent;
cursor: initial; cursor: initial;
} }
#history button:focus, #history button:focus,
#history button:hover { #history button:hover {
outline: none; outline: none;
border-color: #fff9; border-color: #fff9;
} }
#history button:hover:not(.disabled) { #history button:hover:not(.disabled) {
outline: none; outline: none;
background-color: #fff2; background-color: #fff2;
} }
#history button:active:not(.disabled) { #history button:active:not(.disabled) {
background-color: #fff4; background-color: #fff4;
} }
#history #status { #history #status {
background: transparent; background: transparent;
} }
#history #status .unknown, #history #status .unknown,
#history #status .file { #history #status .file {
color: #888; color: #888;
} }
#history #status .https { #history #status .https {
color: #009800; color: #009800;
} }
#history #status .http { #history #status .http {
color: #e20000; color: #e20000;
} }
#history #status > :not(.active) { #history #status > :not(.active) {
display: none; display: none;
} }
#history #status > * .tip { #history #status > * .tip {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
left: 100%; left: 100%;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
display: none; display: none;
margin-left: 8px; margin-left: 8px;
background-color: #000; background-color: #000;
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
color: #fff; color: #fff;
text-transform: none; text-transform: none;
font-family: sans-serif; font-family: sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 100; font-weight: 100;
} }
#history #status > * .tip::before { #history #status > * .tip::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
transform: translate(-100%, -50%); transform: translate(-100%, -50%);
display: inline-block; display: inline-block;
width: 0; width: 0;
height: 0; height: 0;
border: 0 solid transparent; border: 0 solid transparent;
border-top-width: 4px; border-top-width: 4px;
border-bottom-width: 4px; border-bottom-width: 4px;
border-right: 7px solid black; border-right: 7px solid black;
} }
#history #status:focus > * .tip { #history #status:focus > * .tip {
display: block; display: block;
} }
#navigation #add-button:not(:hover) { #navigation #add-button:not(:hover) {
opacity: 0.75; opacity: 0.75;
} }
#services { #services {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
} }
#services > *:not(.loader):not(#url-preview) { #services > *:not(.loader):not(#url-preview) {
height: 100%; height: 100%;
} }
#services > :not(.active):not(.loader):not(#url-preview):not(webview) { #services > :not(.active):not(.loader):not(#url-preview):not(webview) {
display: none; display: none;
} }
#services > webview { #services > webview {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 10; z-index: 10;
background-color: rgb(43, 43, 43); background-color: rgb(43, 43, 43);
} }
#services > webview.active { #services > webview.active {
z-index: 20; z-index: 20;
} }
#services > .loader { #services > .loader {
width: 64px; width: 64px;
height: 64px; height: 64px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: -1; z-index: -1;
} }
#url-preview { #url-preview {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: block; display: block;
padding: 2px 5px 1px 5px; padding: 2px 5px 1px 5px;
max-width: 48%; max-width: 48%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-family: monospace; font-family: monospace;
border-width: 1px 1px 0 0; border-width: 1px 1px 0 0;
border-color: #232323; border-color: #232323;
border-style: solid; border-style: solid;
border-radius: 0 5px 0 0; border-radius: 0 5px 0 0;
background: #2b2b2b; background: #2b2b2b;
opacity: 1; opacity: 1;
transition: 100ms ease opacity; transition: 100ms ease opacity;
transition-delay: 200ms; transition-delay: 200ms;
} }
#url-preview.right { #url-preview.right {
left: auto; left: auto;
right: 0; right: 0;
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
border-radius: 5px 0 0 0; border-radius: 5px 0 0 0;
} }
#url-preview.hidden { #url-preview.hidden {
opacity: 0; opacity: 0;
} }
#services > #empty-message { #services > #empty-message {
display: flex !important; display: flex !important;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#services > .loader:not(.hidden) ~ #empty-message { #services > .loader:not(.hidden) ~ #empty-message {
display: none !important; display: none !important;
} }

6
frontend/settings.html
View File

@ -35,6 +35,12 @@
<label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label> <label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label>
</section> </section>
<section>
<h2 class="form-header">Appearance</h2>
<label class="form-group"><input type="checkbox" name="big-nav-bar" id="big-nav-bar"> Increase the size of the navigation bar</label>
</section>
<section> <section>
<h2 class="form-header">History navigation buttons</h2> <h2 class="form-header">History navigation buttons</h2>

3
frontend/ts/index.ts
View File

@ -207,6 +207,9 @@ ipcRenderer.on('data', (event, appData, iconSets, actualSelectedService, emptyUr
// Other elements // Other elements
serviceSelector = document.getElementById('service-selector'); serviceSelector = document.getElementById('service-selector');
// Navbar size
document.documentElement.style.setProperty('--nav-width', config.bigNavBar ? '64px' : '48px');
}); });
function removeServiceFeatures(id: number): HTMLElement | null { function removeServiceFeatures(id: number): HTMLElement | null {

10
frontend/ts/settings.ts
View File

@ -8,6 +8,8 @@ let config: any;
let startMinimizedField: HTMLInputElement | null; let startMinimizedField: HTMLInputElement | null;
let bigNavBarField: HTMLInputElement | null;
let securityButtonField: HTMLInputElement | null, let securityButtonField: HTMLInputElement | null,
homeButtonField: HTMLInputElement | null, homeButtonField: HTMLInputElement | null,
backButtonField: HTMLInputElement | null, backButtonField: HTMLInputElement | null,
@ -22,6 +24,8 @@ ipcRenderer.on('config', (e, c) => {
config = c; config = c;
if (startMinimizedField) startMinimizedField.checked = config.startMinimized; if (startMinimizedField) startMinimizedField.checked = config.startMinimized;
if (bigNavBarField) bigNavBarField.checked = config.bigNavBar;
if (securityButtonField) securityButtonField.checked = config.securityButton; if (securityButtonField) securityButtonField.checked = config.securityButton;
if (homeButtonField) homeButtonField.checked = config.homeButton; if (homeButtonField) homeButtonField.checked = config.homeButton;
if (backButtonField) backButtonField.checked = config.backButton; if (backButtonField) backButtonField.checked = config.backButton;
@ -47,6 +51,8 @@ function save() {
config.startMinimized = formData.get('start-minimized') === 'on'; config.startMinimized = formData.get('start-minimized') === 'on';
config.bigNavBar = formData.get('big-nav-bar') === 'on';
config.securityButton = formData.get('security-button') === 'on'; config.securityButton = formData.get('security-button') === 'on';
config.homeButton = formData.get('home-button') === 'on'; config.homeButton = formData.get('home-button') === 'on';
config.backButton = formData.get('back-button') === 'on'; config.backButton = formData.get('back-button') === 'on';
@ -55,7 +61,7 @@ function save() {
ipcRenderer.send('save-config', config); ipcRenderer.send('save-config', config);
remote.getCurrentWindow().close(); remote.getCurrentWindow().close();
}; }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
currentVersion = document.getElementById('current-version'); currentVersion = document.getElementById('current-version');
@ -68,6 +74,8 @@ document.addEventListener('DOMContentLoaded', () => {
startMinimizedField = <HTMLInputElement>document.getElementById('start-minimized'); startMinimizedField = <HTMLInputElement>document.getElementById('start-minimized');
bigNavBarField = <HTMLInputElement>document.getElementById('big-nav-bar');
securityButtonField = <HTMLInputElement>document.getElementById('security-button'); securityButtonField = <HTMLInputElement>document.getElementById('security-button');
homeButtonField = <HTMLInputElement>document.getElementById('home-button'); homeButtonField = <HTMLInputElement>document.getElementById('home-button');
backButtonField = <HTMLInputElement>document.getElementById('back-button'); backButtonField = <HTMLInputElement>document.getElementById('back-button');

4
src/Config.ts
View File

@ -15,6 +15,8 @@ export default class Config {
public startMinimized: boolean = false; public startMinimized: boolean = false;
public bigNavBar: boolean = false;
public securityButton: boolean = true; public securityButton: boolean = true;
public homeButton: boolean = false; public homeButton: boolean = false;
public backButton: boolean = true; public backButton: boolean = true;
@ -50,6 +52,8 @@ export default class Config {
this.defineProperty('startMinimized', data); this.defineProperty('startMinimized', data);
this.defineProperty('bigNavBar', data);
this.defineProperty('securityButton', data); this.defineProperty('securityButton', data);
this.defineProperty('homeButton', data); this.defineProperty('homeButton', data);
this.defineProperty('backButton', data); this.defineProperty('backButton', data);