Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FIX] About dialog #889

Merged
merged 7 commits into from
Sep 19, 2018
Merged

[FIX] About dialog #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fc15230
Wait for app to be ready before load i18n
tassoevan Sep 18, 2018
abfb986
Move about window code to background process
tassoevan Sep 18, 2018
51b2f58
Update logo colors
tassoevan Sep 19, 2018
8d1dcf6
Move about dialog styles to the stylesheets
tassoevan Sep 19, 2018
cace9e6
Update about dialog styles
tassoevan Sep 19, 2018
8849cbd
Increase about dialog size due to i18n
tassoevan Sep 19, 2018
ca411e4
Add new i18n keys
tassoevan Sep 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion src/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import querystring from 'querystring';
import url from 'url';
import jetpack from 'fs-jetpack';
import idle from '@paulcbetts/system-idle-time';
import { app, ipcMain, Menu } from 'electron';
import { app, ipcMain, BrowserWindow, Menu } from 'electron';

import autoUpdate from './background/autoUpdate';
import certificate from './background/certificate';
Expand Down Expand Up @@ -108,3 +108,22 @@ app.on('window-all-closed', () => {
ipcMain.on('getSystemIdleTime', (event) => {
event.returnValue = idle.getIdleTime();
});

ipcMain.on('show-about-dialog', () => {
getMainWindow().then((mainWindow) => {
const win = new BrowserWindow({
title: i18n.__('About', app.getName()),
parent: mainWindow,
width: 400,
height: 300,
resizable: false,
maximizable: false,
minimizable: false,
center: true,
show: false,
});
win.setMenuBarVisibility(false);
win.once('ready-to-show', () => win.show());
win.loadURL(`file://${ __dirname }/public/about.html`);
});
});
29 changes: 19 additions & 10 deletions src/i18n/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,26 @@ class I18n {
* @constructor
*/
constructor() {
let dir = path.join(__dirname, '../i18n/lang');
if (!fs.existsSync(dir)) {
dir = path.join(__dirname, 'i18n/lang');
}
const defaultLocale = path.join(dir, 'en.i18n.json');
loadedLanguage = JSON.parse(fs.readFileSync(defaultLocale, 'utf8'));
const locale = path.join(dir, `${ eApp.getLocale() }.i18n.json`);
if (fs.existsSync(locale)) {
const lang = JSON.parse(fs.readFileSync(locale, 'utf8'));
loadedLanguage = Object.assign(loadedLanguage, lang);
const load = () => {
let dir = path.join(__dirname, '../i18n/lang');
if (!fs.existsSync(dir)) {
dir = path.join(__dirname, 'i18n/lang');
}
const defaultLocale = path.join(dir, 'en.i18n.json');
loadedLanguage = JSON.parse(fs.readFileSync(defaultLocale, 'utf8'));
const locale = path.join(dir, `${ eApp.getLocale() }.i18n.json`);
if (fs.existsSync(locale)) {
const lang = JSON.parse(fs.readFileSync(locale, 'utf8'));
loadedLanguage = Object.assign(loadedLanguage, lang);
}
};

if (eApp.isReady()) {
load();
return;
}

eApp.once('ready', load);
}

/**
Expand Down
1 change: 1 addition & 0 deletions src/i18n/lang/en.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"New_Version": "New Version:",
"No": "No",
"No_suggestions": "No suggestions",
"No updates are available.": "No updates are available.",
"No_valid_server_found": "No valid server found at the URL",
"Open_DevTools": "Open DevTools",
"Open_Language_Dictionary": "Open Language Dictionary",
Expand Down
1 change: 1 addition & 0 deletions src/i18n/lang/pt-br.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"New_Version": "Nova Versão:",
"No": "Não",
"No_suggestions": "Sem sugestões",
"No updates are available.": "Não há atualizações disponíveis.",
"No_valid_server_found": "Nenhum servidor válido encontrado neste endereço",
"Open_DevTools": "Abrir DevTools",
"Open_Language_Dictionary": "Abrir Dicionário Idioma",
Expand Down
161 changes: 71 additions & 90 deletions src/public/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,103 @@
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
html {
background-color: #ececec;
font-family: helvetica;
padding: 10px;
}

body {
margin: 0px;
text-align: center;
}

img {
height: 60px;
margin-bottom: 5px;
}

.app-name {
font-size: 14px;
font-weight: bold;
}

.app-version {
margin-top: 15px;
font-size: 11px;
}

.app-version .version {
font-weight: bold;
}

.update {
margin-top:5px;
}

.copyright {
font-size: 10px;
position: absolute;
bottom: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

.update-container {
display: none;
}

.update-container.update-container--enabled {
display: block;
}

.auto-update-container {
margin: auto 0;
}
</style>
<script>
const i18n = require('../i18n/index');
</script>
</head>
<body>
<img src="images/icon.png">
<div class="app-name"></div>
<div class="app-version"></div>

<div class="update-container">
<span class="update-spin icon-spin3 animate-spin" style="display:none;"></span>
<button class="update"><script>document.write(i18n.__('Check_for_Updates'))</script></button>
<p class="auto-update-container"><input type="checkbox" id="auto-update" checked /> <script>document.write(i18n.__('Check_for_Updates_on_Start'))</script></p>
</div>
<p class="copyright"><script>document.write(i18n.__('Copyright', require('../../package.json').copyright))</script></p>
<script>
<title>About %s</title>
<link rel="stylesheet" href="../stylesheets/main.css" />
<script>
document.addEventListener('DOMContentLoaded', () => {
const { remote, ipcRenderer } = require('electron');
const i18n = require('../i18n/index');
const { copyright } = require('../../package.json');

document.querySelector('.app-name').innerHTML = remote.app.getName();
document.title = i18n.__('About', remote.app.getName());
document.querySelector('.app-version').innerHTML = `${i18n.__('Version')} <span class="version">${remote.app.getVersion()}</span>`;
document.querySelector('.check-for-updates').innerHTML = i18n.__('Check_for_Updates');
document.querySelector('.check-for-updates-on-start + span').innerHTML = i18n.__('Check_for_Updates_on_Start');
document.querySelector('.copyright').innerHTML = i18n.__('Copyright', copyright);

const canUpdate = ipcRenderer.sendSync('can-update');

if (canUpdate) {
const canAutoUpdate = ipcRenderer.sendSync('can-auto-update');

if (canAutoUpdate) {
document.querySelector('#auto-update').setAttribute('checked', 'checked');
document.querySelector('.check-for-updates-on-start').setAttribute('checked', 'checked');
} else {
document.querySelector('#auto-update').removeAttribute('checked');
document.querySelector('.check-for-updates-on-start').removeAttribute('checked');
}

const canSetAutoUpdate = ipcRenderer.sendSync('can-set-auto-update');
if (canSetAutoUpdate) {
document.querySelector('#auto-update').addEventListener('change', (event) => {
document.querySelector('.check-for-updates-on-start').addEventListener('change', (event) => {
ipcRenderer.send('set-auto-update', event.target.checked);
});
} else {
document.querySelector('#auto-update').setAttribute('disabled', 'disabled');
document.querySelector('.check-for-updates-on-start').setAttribute('disabled', 'disabled');
}

document.querySelector('.update').onclick = function(e) {
document.querySelector('.update-spin').setAttribute('style', '');
document.querySelector('.update').setAttribute('disabled', 'disabled');
document.querySelector('.check-for-updates').addEventListener('click', (e) => {
e.preventDefault();
document.querySelector('.check-for-updates').setAttribute('disabled', 'disabled');
document.querySelector('.check-for-updates').classList.add('hidden');
document.querySelector('.checking-for-updates').classList.remove('hidden');
ipcRenderer.send('check-for-updates');
};
}, false);

ipcRenderer.on('update-result', (e, updateAvailable) => {
document.querySelector('.update-spin').setAttribute('style', 'display:none');
document.querySelector('.update').removeAttribute('disabled');
if (!updateAvailable) {
alert('No updates are available.');
const resetUpdatesSection = () => {
document.querySelector('.check-for-updates').removeAttribute('disabled');
document.querySelector('.check-for-updates').classList.remove('hidden');
document.querySelector('.checking-for-updates').classList.add('hidden');
};

if (updateAvailable) {
resetUpdatesSection();
return;
}

document.querySelector('.checking-for-updates .message').innerHTML = i18n.__('No updates are available.');
document.querySelector('.checking-for-updates').classList.add('message-shown');

setTimeout(() => {
resetUpdatesSection();
document.querySelector('.checking-for-updates .message').innerHTML = '';
document.querySelector('.checking-for-updates').classList.remove('message-shown');
}, 5000);
});

document.querySelector('.update-container').classList.add('update-container--enabled');
document.querySelector('.updates').classList.remove('hidden');
}
</script>
</body>
}, false);
</script>
</head>
<body class="about-page">
<section class="app-info">
<div class="app-logo">
<img src="./images/logo.svg">
</div>
<div class="app-version">
Version <span class="version">%s</span>
</div>
</section>

<section class="updates hidden">
<button class="check-for-updates button primary">
Check for Updates
</button>

<div class="checking-for-updates hidden">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="message"></span>
</div>

<label class="check-for-updates-on-start__label">
<input class="check-for-updates-on-start" type="checkbox" checked /> <span>Check for Updates on Start</span>
</label>
</section>

<div class="copyright"></div>
</body>
</html>
2 changes: 1 addition & 1 deletion src/public/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<section class="landing-page">
<div class="wrapper">
<header>
<img class="logo" src="./images/logo.svg" />
<img class="logo" src="./images/logo-dark.svg" />
</header>
<div class="loading-animation" id="loading">
<div class="bounce1"></div>
Expand Down
Loading