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

Merge branch 'develop'

Browse Source
This commit is contained in:
Alice Gaudon 2020-06-15 16:00:01 +02:00
commit 49ba273927
9 changed files with 257 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

336
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,194 +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) { #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);
}
#services > webview.active {
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;
} }

38
frontend/settings.html
View File

@ -27,20 +27,34 @@
<p id="current-version"></p> <p id="current-version"></p>
<p id="update-status">Loading...</p> <p id="update-status">Loading...</p>
<button id="download-button" type="button" class="hidden">Download</button> <button id="download-button" type="button" class="hidden">Download</button>
</div> </div>startMinimized
<h2 class="form-header">History navigation buttons</h2> <section>
<h2 class="form-header">Startup</h2>
<label class="form-group"> <label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label>
<input type="checkbox" name="security-button" id="security-button"> Security info (recommended)</label> </section>
<label class="form-group">
<input type="checkbox" name="home-button" id="home-button"> Home button</label> <section>
<label class="form-group"> <h2 class="form-header">Appearance</h2>
<input type="checkbox" name="back-button" id="back-button"> Go back button</label>
<label class="form-group"> <label class="form-group"><input type="checkbox" name="big-nav-bar" id="big-nav-bar"> Increase the size of the navigation bar</label>
<input type="checkbox" name="forward-button" id="forward-button"> Go forward button</label> </section>
<label class="form-group">
<input type="checkbox" name="refresh-button" id="refresh-button"> Refresh page button</label> <section>
<h2 class="form-header">History navigation buttons</h2>
<label class="form-group">
<input type="checkbox" name="security-button" id="security-button"> Security info (recommended)</label>
<label class="form-group">
<input type="checkbox" name="home-button" id="home-button"> Home button</label>
<label class="form-group">
<input type="checkbox" name="back-button" id="back-button"> Go back button</label>
<label class="form-group">
<input type="checkbox" name="forward-button" id="forward-button"> Go forward button</label>
<label class="form-group">
<input type="checkbox" name="refresh-button" id="refresh-button"> Refresh page button</label>
</section>
</div> </div>
<div class="form-footer"> <div class="form-footer">

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 {

18
frontend/ts/settings.ts
View File

@ -6,6 +6,10 @@ let updateInfo: any;
let updateButton: HTMLElement | null; let updateButton: HTMLElement | null;
let config: any; let config: any;
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,
@ -18,6 +22,10 @@ ipcRenderer.on('current-version', (e, version) => {
ipcRenderer.on('config', (e, c) => { ipcRenderer.on('config', (e, c) => {
config = c; config = c;
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;
@ -41,6 +49,10 @@ function save() {
if (!form) return; if (!form) return;
const formData = new FormData(form); const formData = new FormData(form);
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';
@ -49,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');
@ -60,6 +72,10 @@ document.addEventListener('DOMContentLoaded', () => {
.catch(console.error); .catch(console.error);
}); });
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');

10
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "tabs", "name": "tabs",
"version": "1.0.3", "version": "1.1.0",
"description": "Persistent and separate browser tabs in one window.", "description": "Persistent and separate browser tabs in one window.",
"author": { "author": {
"name": "Alice Gaudon", "name": "Alice Gaudon",
@ -59,7 +59,7 @@
], ],
"linux": { "linux": {
"target": "AppImage", "target": "AppImage",
"icon": "resources/logo.png", "icon": "resources/images/logo.png",
"category": "Utility", "category": "Utility",
"executableName": "tabs", "executableName": "tabs",
"desktop": { "desktop": {
@ -76,9 +76,9 @@
}, },
"win": { "win": {
"target": "nsis", "target": "nsis",
"icon": "resources/logo.png", "icon": "resources/images/logo.png",
"publisherName": "Alice Gaudon", "publisherName": "Alice Gaudon",
"verifyUpdateCodeSignature": "true", "verifyUpdateCodeSignature": "false",
"publish": [ "publish": [
{ {
"provider": "github", "provider": "github",
@ -89,7 +89,7 @@
}, },
"mac": { "mac": {
"target": "default", "target": "default",
"icon": "resources/logo.png", "icon": "resources/images/logo.png",
"category": "public.app-category.utilities", "category": "public.app-category.utilities",
"publish": [ "publish": [
{ {

11
src/Application.ts
View File

@ -3,6 +3,7 @@ import Meta from "./Meta";
import Config from "./Config"; import Config from "./Config";
import Updater from "./Updater"; import Updater from "./Updater";
import MainWindow from "./windows/MainWindow"; import MainWindow from "./windows/MainWindow";
import * as os from "os";
export default class Application { export default class Application {
private readonly devMode: boolean; private readonly devMode: boolean;
@ -14,7 +15,7 @@ export default class Application {
constructor(devMode: boolean) { constructor(devMode: boolean) {
this.devMode = devMode; this.devMode = devMode;
this.config = new Config(); this.config = new Config();
this.updater = new Updater(this.config); this.updater = new Updater(this.config, this);
this.mainWindow = new MainWindow(this); this.mainWindow = new MainWindow(this);
} }
@ -26,9 +27,11 @@ export default class Application {
this.setupElectronTweaks(); this.setupElectronTweaks();
// Check for updates // Check for updates
this.updater.checkAndPromptForUpdates(this.mainWindow.getWindow()).then(() => { if (os.platform() === 'win32') {
console.log('Update check successful.'); this.updater.checkAndPromptForUpdates(this.mainWindow.getWindow()).then(() => {
}).catch(console.error); console.log('Update check successful.');
}).catch(console.error);
}
console.log('App started'); console.log('App started');
} }

10
src/Config.ts
View File

@ -10,7 +10,13 @@ const configFile = path.resolve(configDir, 'config.json');
export default class Config { export default class Config {
public services: Service[] = []; public services: Service[] = [];
public updateCheckSkip?: string; public updateCheckSkip?: string;
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;
@ -43,6 +49,10 @@ export default class Config {
} }
this.defineProperty('updateCheckSkip', data); this.defineProperty('updateCheckSkip', 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);

13
src/Updater.ts
View File

@ -2,13 +2,16 @@ import {autoUpdater, UpdateInfo} from "electron-updater";
import {dialog, shell} from "electron"; import {dialog, shell} from "electron";
import Config from "./Config"; import Config from "./Config";
import BrowserWindow = Electron.BrowserWindow; import BrowserWindow = Electron.BrowserWindow;
import Application from "./Application";
export default class Updater { export default class Updater {
private readonly config: Config; private readonly config: Config;
private readonly application: Application;
private updateInfo?: UpdateInfo; private updateInfo?: UpdateInfo;
public constructor(config: Config) { public constructor(config: Config, application: Application) {
this.config = config; this.config = config;
this.application = application;
// Configure auto updater // Configure auto updater
autoUpdater.autoDownload = false; autoUpdater.autoDownload = false;
@ -42,10 +45,10 @@ export default class Updater {
if (updateInfo && updateInfo.version !== this.config.updateCheckSkip) { if (updateInfo && updateInfo.version !== this.config.updateCheckSkip) {
const input = await dialog.showMessageBox(mainWindow, { const input = await dialog.showMessageBox(mainWindow, {
message: `Version ${updateInfo.version} of tabs is available. Do you wish to download this update?`, message: `Version ${updateInfo.version} of tabs is available. Do you wish to install this update?`,
buttons: [ buttons: [
'Cancel', 'Cancel',
'Download', 'Install',
], ],
checkboxChecked: false, checkboxChecked: false,
checkboxLabel: `Don't remind me for this version`, checkboxLabel: `Don't remind me for this version`,
@ -61,7 +64,9 @@ export default class Updater {
} }
if (input.response === 1) { if (input.response === 1) {
await shell.openExternal(`https://github.com/ArisuOngaku/tabs/releases/download/v${updateInfo.version}/${updateInfo.path}`); await this.application.stop();
await autoUpdater.downloadUpdate();
autoUpdater.quitAndInstall();
} }
} }
} }

5
src/windows/MainWindow.ts
View File

@ -25,11 +25,14 @@ export default class MainWindow extends Window {
autoHideMenuBar: true, autoHideMenuBar: true,
icon: Meta.ICON_PATH, icon: Meta.ICON_PATH,
title: Meta.title, title: Meta.title,
show: !this.application.getConfig().startMinimized,
}); });
const window = this.getWindow(); const window = this.getWindow();
window.maximize(); if (!this.application.getConfig().startMinimized) {
window.maximize();
}
if (this.application.isDevMode()) { if (this.application.isDevMode()) {
window.webContents.openDevTools({ window.webContents.openDevTools({