Merge branch 'develop'

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

View File

@ -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,194 +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) {
display: none;
#services > :not(.active):not(.loader):not(#url-preview):not(webview) {
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 {
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;
}

View File

@ -27,20 +27,34 @@
<p id="current-version"></p>
<p id="update-status">Loading...</p>
<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">
<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>
<label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label>
</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>
<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 class="form-footer">

View File

@ -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 {

View File

@ -6,6 +6,10 @@ let updateInfo: any;
let updateButton: HTMLElement | null;
let config: any;
let startMinimizedField: HTMLInputElement | null;
let bigNavBarField: HTMLInputElement | null;
let securityButtonField: HTMLInputElement | null,
homeButtonField: HTMLInputElement | null,
backButtonField: HTMLInputElement | null,
@ -18,6 +22,10 @@ ipcRenderer.on('current-version', (e, version) => {
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;
@ -41,6 +49,10 @@ function save() {
if (!form) return;
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.homeButton = formData.get('home-button') === 'on';
config.backButton = formData.get('back-button') === 'on';
@ -49,7 +61,7 @@ function save() {
ipcRenderer.send('save-config', config);
remote.getCurrentWindow().close();
};
}
document.addEventListener('DOMContentLoaded', () => {
currentVersion = document.getElementById('current-version');
@ -60,6 +72,10 @@ document.addEventListener('DOMContentLoaded', () => {
.catch(console.error);
});
startMinimizedField = <HTMLInputElement>document.getElementById('start-minimized');
bigNavBarField = <HTMLInputElement>document.getElementById('big-nav-bar');
securityButtonField = <HTMLInputElement>document.getElementById('security-button');
homeButtonField = <HTMLInputElement>document.getElementById('home-button');
backButtonField = <HTMLInputElement>document.getElementById('back-button');

View File

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

View File

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

View File

@ -10,7 +10,13 @@ const configFile = path.resolve(configDir, 'config.json');
export default class Config {
public services: Service[] = [];
public updateCheckSkip?: string;
public startMinimized: boolean = false;
public bigNavBar: boolean = false;
public securityButton: boolean = true;
public homeButton: boolean = false;
public backButton: boolean = true;
@ -44,6 +50,10 @@ export default class Config {
this.defineProperty('updateCheckSkip', data);
this.defineProperty('startMinimized', data);
this.defineProperty('bigNavBar', data);
this.defineProperty('securityButton', data);
this.defineProperty('homeButton', data);
this.defineProperty('backButton', data);

View File

@ -2,13 +2,16 @@ import {autoUpdater, UpdateInfo} from "electron-updater";
import {dialog, shell} from "electron";
import Config from "./Config";
import BrowserWindow = Electron.BrowserWindow;
import Application from "./Application";
export default class Updater {
private readonly config: Config;
private readonly application: Application;
private updateInfo?: UpdateInfo;
public constructor(config: Config) {
public constructor(config: Config, application: Application) {
this.config = config;
this.application = application;
// Configure auto updater
autoUpdater.autoDownload = false;
@ -42,10 +45,10 @@ export default class Updater {
if (updateInfo && updateInfo.version !== this.config.updateCheckSkip) {
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: [
'Cancel',
'Download',
'Install',
],
checkboxChecked: false,
checkboxLabel: `Don't remind me for this version`,
@ -61,7 +64,9 @@ export default class Updater {
}
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();
}
}
}

View File

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