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

Make all history nav buttons hideable and add default settings

Browse Source
This commit is contained in:
Alice Gaudon 2020-05-20 17:13:33 +02:00
parent 8d7b65a894
commit 251b1431cc
8 changed files with 115 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<div id="navigation"> <div id="navigation">
<div id="history"> <div id="history">
<button id="status"> <button id="status" class="hidden">
<i class="fas fa-question unknown active"> <i class="fas fa-question unknown active">
<span class="tip">Unknown protocol</span> <span class="tip">Unknown protocol</span>
</i> </i>
@ -32,10 +32,10 @@
<span class="tip">Local file</span> <span class="tip">Local file</span>
</i> </i>
</button> </button>
<button id="home" class="disabled"><i class="fas fa-home"></i></button> <button id="home" class="hidden disabled"><i class="fas fa-home"></i></button>
<button id="back" class="disabled"><i class="fas fa-arrow-left"></i></button> <button id="back" class="hidden disabled"><i class="fas fa-arrow-left"></i></button>
<button id="forward" class="disabled"><i class="fas fa-arrow-right"></i></button> <button id="forward" class="hidden disabled"><i class="fas fa-arrow-right"></i></button>
<button id="reload" class="disabled"><i class="fas fa-redo"></i></button> <button id="reload" class="hidden disabled"><i class="fas fa-redo"></i></button>
</div> </div>
<div id="service-buttons"> <div id="service-buttons">

29
resources/js/index.js
View File

@ -16,7 +16,7 @@ const icons = [];
let services = []; let services = [];
let selectedService = null; let selectedService = null;
let statusButton, homeButton, forwardButton, backButton, reloadButton; let securityButton, homeButton, forwardButton, backButton, refreshButton;
let addButton, settingsButton; let addButton, settingsButton;
let emptyPage; let emptyPage;
let urlPreview; let urlPreview;
@ -119,7 +119,7 @@ function openServiceContextMenu(event, serviceId) {
} }
ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualServices, actualSelectedService, emptyUrl) => { ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualSelectedService, emptyUrl, config) => {
// App info // App info
appInfo.title = appData.title; appInfo.title = appData.title;
@ -132,7 +132,7 @@ ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualServices,
} }
console.log('Updating services ...'); console.log('Updating services ...');
services = actualServices; services = config.services;
const nav = document.querySelector('#service-selector'); const nav = document.querySelector('#service-selector');
while (nav.children.length > 0) { while (nav.children.length > 0) {
@ -176,6 +176,19 @@ ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualServices,
urlPreview.classList.add('right'); urlPreview.classList.add('right');
} }
}); });
// History nav buttons
const buttons = {
securityButton: securityButton,
homeButton: homeButton,
backButton: backButton,
forwardButton: forwardButton,
refreshButton: refreshButton,
};
for (const k in buttons) {
if (config[k]) buttons[k].classList.remove('hidden');
else buttons[k].classList.add('hidden');
}
}); });
function removeServiceFeatures(id) { function removeServiceFeatures(id) {
@ -364,7 +377,7 @@ function reorderService(serviceId, targetId) {
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
statusButton = document.getElementById('status'); securityButton = document.getElementById('status');
homeButton = document.getElementById('home'); homeButton = document.getElementById('home');
homeButton.addEventListener('click', () => goHome()); homeButton.addEventListener('click', () => goHome());
@ -375,8 +388,8 @@ document.addEventListener('DOMContentLoaded', () => {
backButton = document.getElementById('back'); backButton = document.getElementById('back');
backButton.addEventListener('click', () => goBack()); backButton.addEventListener('click', () => goBack());
reloadButton = document.getElementById('reload'); refreshButton = document.getElementById('reload');
reloadButton.addEventListener('click', () => reload()); refreshButton.addEventListener('click', () => reload());
addButton = document.getElementById('add-button'); addButton = document.getElementById('add-button');
addButton.addEventListener('click', () => ipcRenderer.send('openServiceSettings', null)); addButton.addEventListener('click', () => ipcRenderer.send('openServiceSettings', null));
@ -607,7 +620,7 @@ function updateNavigation() {
if (view && view.canGoBack()) backButton.classList.remove('disabled'); if (view && view.canGoBack()) backButton.classList.remove('disabled');
else backButton.classList.add('disabled'); else backButton.classList.add('disabled');
reloadButton.classList.remove('disabled'); refreshButton.classList.remove('disabled');
updateStatusButton(); updateStatusButton();
} }
@ -618,7 +631,7 @@ function updateNavigation() {
function updateStatusButton() { function updateStatusButton() {
let protocol = services[selectedService].view.getURL().split('://')[0]; let protocol = services[selectedService].view.getURL().split('://')[0];
if (!protocol) protocol = 'unknown'; if (!protocol) protocol = 'unknown';
for (const c of statusButton.children) { for (const c of securityButton.children) {
if (c.classList.contains(protocol)) c.classList.add('active'); if (c.classList.contains(protocol)) c.classList.add('active');
else c.classList.remove('active'); else c.classList.remove('active');
} }

26
resources/js/settings.js
View File

@ -4,11 +4,23 @@ let currentVersion;
let updateStatus; let updateStatus;
let updateInfo; let updateInfo;
let updateButton; let updateButton;
let config;
let securityButtonField, homeButtonField, backButtonField, forwardButtonField, refreshButtonField;
ipcRenderer.on('current-version', (e, version) => { ipcRenderer.on('current-version', (e, version) => {
currentVersion.innerText = `Version: ${version.version}`; currentVersion.innerText = `Version: ${version.version}`;
}); });
ipcRenderer.on('config', (e, c) => {
config = c;
securityButtonField.checked = config.securityButton;
homeButtonField.checked = config.homeButton;
backButtonField.checked = config.backButton;
forwardButtonField.checked = config.forwardButton;
refreshButtonField.checked = config.refreshButton;
});
ipcRenderer.on('updateStatus', (e, available, version) => { ipcRenderer.on('updateStatus', (e, available, version) => {
console.log(available, version); console.log(available, version);
updateInfo = version; updateInfo = version;
@ -22,6 +34,14 @@ ipcRenderer.on('updateStatus', (e, available, version) => {
function save() { function save() {
const formData = new FormData(document.querySelector('form')); const formData = new FormData(document.querySelector('form'));
config.securityButton = formData.get('security-button') === 'on';
config.homeButton = formData.get('home-button') === 'on';
config.backButton = formData.get('back-button') === 'on';
config.forwardButton = formData.get('forward-button') === 'on';
config.refreshButton = formData.get('refresh-button') === 'on';
ipcRenderer.send('save-config', config);
remote.getCurrentWindow().close(); remote.getCurrentWindow().close();
} }
@ -34,6 +54,12 @@ document.addEventListener('DOMContentLoaded', () => {
.catch(console.error); .catch(console.error);
}); });
securityButtonField = document.getElementById('security-button');
homeButtonField = document.getElementById('home-button');
backButtonField = document.getElementById('back-button');
forwardButtonField = document.getElementById('forward-button');
refreshButtonField = document.getElementById('refresh-button');
ipcRenderer.send('syncSettings'); ipcRenderer.send('syncSettings');
ipcRenderer.send('checkForUpdates'); ipcRenderer.send('checkForUpdates');
}); });

13
resources/settings.html
View File

@ -28,6 +28,19 @@
<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>
<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>
</div> </div>
<div class="form-footer"> <div class="form-footer">

2
resources/style/layout.css
View File

@ -76,7 +76,7 @@ button:hover {
} }
.hidden { .hidden {
display: none; display: none !important;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

5
resources/style/service-settings.css
View File

@ -88,6 +88,11 @@ form {
margin-left: 8px; margin-left: 8px;
} }
label.form-group {
line-height: 29px;
text-align: left;
}
#buttons { #buttons {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }

33
src/Config.js
View File

@ -9,6 +9,15 @@ const configDir = Meta.isDevMode() ? getAppDataPath('tabs-app-dev') : getAppData
const configFile = path.resolve(configDir, 'config.json'); const configFile = path.resolve(configDir, 'config.json');
export default class Config { export default class Config {
updateCheckSkip = undefined;
securityButton = true;
homeButton = false;
backButton = true;
forwardButton = false;
refreshButton = false;
properties = [];
constructor() { constructor() {
// Load data from config file // Load data from config file
let data = {}; let data = {};
@ -33,7 +42,13 @@ export default class Config {
this.services.push(new Service('welcome', 'Welcome', 'rocket', false, 'https://github.com/ArisuOngaku/tabs', false)); this.services.push(new Service('welcome', 'Welcome', 'rocket', false, 'https://github.com/ArisuOngaku/tabs', false));
} }
this.updateCheckSkip = data.updateCheckSkip; this.defineProperty('updateCheckSkip', data);
this.defineProperty('securityButton', data);
this.defineProperty('homeButton', data);
this.defineProperty('backButton', data);
this.defineProperty('forwardButton', data);
this.defineProperty('refreshButton', data);
this.save(); this.save();
} }
@ -44,4 +59,20 @@ export default class Config {
fs.writeFileSync(configFile, JSON.stringify(this, null, 4)); fs.writeFileSync(configFile, JSON.stringify(this, null, 4));
console.log('> Config saved to', configFile.toString()); console.log('> Config saved to', configFile.toString());
} }
defineProperty(name, data) {
if (data[name] !== undefined) {
this[name] = data[name];
}
this.properties.push(name);
}
update(data) {
for (const prop of this.properties) {
if (data[prop] !== undefined) {
this[prop] = data[prop];
}
}
}
} }

14
src/main.js
View File

@ -252,6 +252,7 @@ async function createWindow() {
let syncListener; let syncListener;
ipcMain.on('syncSettings', syncListener = () => { ipcMain.on('syncSettings', syncListener = () => {
settingsWindow.webContents.send('current-version', updater.getCurrentVersion()); settingsWindow.webContents.send('current-version', updater.getCurrentVersion());
settingsWindow.webContents.send('config', config);
}); });
let checkForUpdatesListener; let checkForUpdatesListener;
@ -260,9 +261,18 @@ async function createWindow() {
settingsWindow.webContents.send('updateStatus', available, version); settingsWindow.webContents.send('updateStatus', available, version);
}); });
}); });
let saveConfigListener;
ipcMain.on('save-config', saveConfigListener = (e, data) => {
config.update(data);
config.save();
sendData();
});
settingsWindow.on('close', () => { settingsWindow.on('close', () => {
ipcMain.removeListener('sync-settings', syncListener); ipcMain.removeListener('syncSettings', syncListener);
ipcMain.removeListener('checkForUpdates', checkForUpdatesListener); ipcMain.removeListener('checkForUpdates', checkForUpdatesListener);
ipcMain.removeListener('save-config', saveConfigListener);
}); });
settingsWindow.loadFile(path.resolve(resourcesDir, 'settings.html')) settingsWindow.loadFile(path.resolve(resourcesDir, 'settings.html'))
.catch(console.error); .catch(console.error);
@ -274,7 +284,7 @@ async function createWindow() {
function sendData() { function sendData() {
console.log('Syncing data'); console.log('Syncing data');
window.webContents.send('data', Meta.title, brandIcons, solidIcons, config.services, selectedService, path.resolve(resourcesDir, 'empty.html')); window.webContents.send('data', Meta.title, brandIcons, solidIcons, selectedService, path.resolve(resourcesDir, 'empty.html'), config);
} }
function setActiveService(index) { function setActiveService(index) {