Commit 88f4dc92 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub

Merge pull request #889 from RocketChat/fix/about-dialog

[FIX] About dialog
parents c3f3a829 ca411e40
......@@ -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';
......@@ -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`);
});
});
......@@ -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);
}
/**
......
......@@ -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",
......
......@@ -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",
......
<!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');
......@@ -87,36 +22,82 @@
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>
......@@ -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>
......
This diff is collapsed.
This diff is collapsed.
import { remote } from 'electron';
import { remote, ipcRenderer } from 'electron';
import i18n from '../../i18n/index.js';
const APP_NAME = remote.app.getName();
const appName = remote.app.getName();
const isMac = process.platform === 'darwin';
const appTemplate = [
{
label: i18n.__('About', APP_NAME),
click() {
const win = new remote.BrowserWindow({
width: 310,
height: 240,
resizable: false,
show: false,
center: true,
maximizable: false,
minimizable: false,
title: 'About Rocket.Chat',
});
win.loadURL(`file://${ __dirname }/about.html`);
win.setMenuBarVisibility(false);
win.show();
},
label: i18n.__('About', appName),
click: () => ipcRenderer.send('show-about-dialog'),
},
{
type: 'separator',
id: 'about-sep',
},
{
label: i18n.__('Quit_App', APP_NAME),
label: i18n.__('Quit_App', appName),
accelerator: 'CommandOrControl+Q',
click() {
remote.app.quit();
},
click: () => remote.app.quit(),
},
];
......
......@@ -4,6 +4,7 @@
@import "../branding/branding.less";
@import "fontello.less";
@import "utils/_loading.import.less";
@import "pages/about.less";
*,
*:before,
......@@ -305,7 +306,7 @@ input[type='password'] {
.loading-error {
height: 100%;
color: white;
color: white;
text-align: center;
background-color: @primary-background-color;
background-position: center bottom;
......
.about-page {
display: flex;
flex-direction: column;
padding: 0.25rem 0.75rem;
min-height: 100vh;
background-color: @secondary-background-color;
cursor: default;
user-select: none;
.hidden {
display: none !important;
}
.app-info {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
.app-logo img {
width: 100%;
}
.app-version {
margin: 0 auto;
font-size: 0.75rem;
.version {
cursor: text;
user-select: text;
font-weight: bold;
}
}
}
.updates {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
.check-for-updates {
height: 2.5rem;
}
.checking-for-updates {
display: flex;
justify-content: center;
align-items: center;
height: 2.5rem;
margin: 4px;
color: @secondary-font-color;
.dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
margin: 0.1rem;
background-color: currentColor;
animation: loading-bouncedelay 1.4s infinite ease-in-out both;
&:nth-of-type(1) {
animation-delay: -0.32s;
}
&:nth-of-type(2) {
animation-delay: -0.16s;
}
}
.message {
display: none;
font-size: 1rem;
}
&.message-shown {
.dot {
display: none;
}
.message {
display: inline-flex;
}
}
}
.check-for-updates-on-start__label {
margin: 0.1rem auto;
font-size: 0.8rem;
}
}
.copyright {
margin: 0 auto;
font-size: 0.65rem;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment