From fc1523007923f620b94c9cc337643434bd3a23d8 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 18 Sep 2018 13:42:40 -0300 Subject: [PATCH 1/7] Wait for app to be ready before load i18n --- src/i18n/index.js | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/i18n/index.js b/src/i18n/index.js index 853b653434..99d242b88e 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -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); } /** From abfb98636d200e555f417eb34b163559dc14d8e3 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 18 Sep 2018 13:46:15 -0300 Subject: [PATCH 2/7] Move about window code to background process --- src/background.js | 21 ++++++++++++++++++++- src/scripts/menus/app.js | 28 ++++++---------------------- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/background.js b/src/background.js index 3bbc5beecb..5bee6a9afa 100644 --- a/src/background.js +++ b/src/background.js @@ -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: 310, + height: 240, + resizable: false, + maximizable: false, + minimizable: false, + center: true, + show: false, + }); + win.setMenuBarVisibility(false); + win.loadURL(`file://${ __dirname }/public/about.html`); + win.once('ready-to-show', () => win.show()); + }); +}); diff --git a/src/scripts/menus/app.js b/src/scripts/menus/app.js index f48163914f..0f8fcefde5 100644 --- a/src/scripts/menus/app.js +++ b/src/scripts/menus/app.js @@ -1,38 +1,22 @@ -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(), }, ]; From 51b2f588d64e260a81ea68636b241ab0a7551f56 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 19 Sep 2018 11:29:21 -0300 Subject: [PATCH 3/7] Update logo colors --- src/public/app.html | 2 +- src/public/images/logo-dark.svg | 23 +++++++++++++++++++++++ src/public/images/logo.svg | 24 +++++++++++++++++++++++- 3 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 src/public/images/logo-dark.svg diff --git a/src/public/app.html b/src/public/app.html index 5aa413f5bf..db1e32d369 100644 --- a/src/public/app.html +++ b/src/public/app.html @@ -28,7 +28,7 @@
- +
diff --git a/src/public/images/logo-dark.svg b/src/public/images/logo-dark.svg new file mode 100644 index 0000000000..533ef3b9d7 --- /dev/null +++ b/src/public/images/logo-dark.svg @@ -0,0 +1,23 @@ + + + + diff --git a/src/public/images/logo.svg b/src/public/images/logo.svg index 03611142d7..baaf3f3ec9 100644 --- a/src/public/images/logo.svg +++ b/src/public/images/logo.svg @@ -1 +1,23 @@ - \ No newline at end of file + + + + From 8d1dcf6a7c7ff6a5b6523d80386d78b9512823fa Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 19 Sep 2018 12:17:23 -0300 Subject: [PATCH 4/7] Move about dialog styles to the stylesheets --- src/public/about.html | 167 ++++++++++--------------------- src/stylesheets/main.less | 3 +- src/stylesheets/pages/about.less | 50 +++++++++ 3 files changed, 107 insertions(+), 113 deletions(-) create mode 100644 src/stylesheets/pages/about.less diff --git a/src/public/about.html b/src/public/about.html index ccb91e57a5..80aadb20ba 100644 --- a/src/public/about.html +++ b/src/public/about.html @@ -1,122 +1,65 @@ - - - + + - - -
-
- -
- - -

-
-

- +

+
+

+ - + document.querySelector('.update-container').classList.add('update-container--enabled'); + } + + diff --git a/src/stylesheets/main.less b/src/stylesheets/main.less index 28e6c0d371..1ae2f77f96 100755 --- a/src/stylesheets/main.less +++ b/src/stylesheets/main.less @@ -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; diff --git a/src/stylesheets/pages/about.less b/src/stylesheets/pages/about.less new file mode 100644 index 0000000000..1f9d301795 --- /dev/null +++ b/src/stylesheets/pages/about.less @@ -0,0 +1,50 @@ +.about-page { + background-color: #ececec; + padding: 10px; + 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; + } +} From cace9e66105f2331cf566e06e15690e1814af942 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 19 Sep 2018 14:17:46 -0300 Subject: [PATCH 5/7] Update about dialog styles --- src/public/about.html | 131 ++++++++++++++++++++----------- src/stylesheets/pages/about.less | 117 ++++++++++++++++++--------- 2 files changed, 166 insertions(+), 82 deletions(-) diff --git a/src/public/about.html b/src/public/about.html index 80aadb20ba..a3b5608988 100644 --- a/src/public/about.html +++ b/src/public/about.html @@ -3,63 +3,100 @@ + - - - -
-
- -
- - -

-
-

- + + +
+ +
+ Version %s +
+
- document.querySelector('.update').onclick = function(e) { - document.querySelector('.update-spin').setAttribute('style', ''); - document.querySelector('.update').setAttribute('disabled', 'disabled'); - ipcRenderer.send('check-for-updates'); - }; - - 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.'); - } - }); + + +
diff --git a/src/stylesheets/pages/about.less b/src/stylesheets/pages/about.less index 1f9d301795..ec6e8111e5 100644 --- a/src/stylesheets/pages/about.less +++ b/src/stylesheets/pages/about.less @@ -1,50 +1,97 @@ .about-page { - background-color: #ececec; - padding: 10px; - text-align: center; + display: flex; + flex-direction: column; + padding: 0.25rem 0.75rem; + min-height: 100vh; + background-color: @secondary-background-color; + cursor: default; + user-select: none; - img { - height: 60px; - margin-bottom: 5px; + .hidden { + display: none !important; } - .app-name { - font-size: 14px; - font-weight: bold; - } + .app-info { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; - .app-version { - margin-top: 15px; - font-size: 11px; - } + .app-logo img { + width: 100%; + } - .app-version .version { - font-weight: bold; - } + .app-version { + margin: 0 auto; + font-size: 0.75rem; - .update { - margin-top:5px; + .version { + cursor: text; + user-select: text; + font-weight: bold; + } + } } - .copyright { - font-size: 10px; - position: absolute; - bottom: 0; - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; - } + .updates { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; - .update-container { - display: none; - } + .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; - .update-container.update-container--enabled { - display: block; + .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; + } } - .auto-update-container { - margin: auto 0; + .copyright { + margin: 0 auto; + font-size: 0.65rem; } } From 8849cbdd19905ff444355f2dadf8eb968ab14540 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 19 Sep 2018 16:34:26 -0300 Subject: [PATCH 6/7] Increase about dialog size due to i18n --- src/background.js | 6 +++--- src/public/about.html | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/background.js b/src/background.js index 5bee6a9afa..a1f8926568 100644 --- a/src/background.js +++ b/src/background.js @@ -114,8 +114,8 @@ ipcMain.on('show-about-dialog', () => { const win = new BrowserWindow({ title: i18n.__('About', app.getName()), parent: mainWindow, - width: 310, - height: 240, + width: 400, + height: 300, resizable: false, maximizable: false, minimizable: false, @@ -123,7 +123,7 @@ ipcMain.on('show-about-dialog', () => { show: false, }); win.setMenuBarVisibility(false); - win.loadURL(`file://${ __dirname }/public/about.html`); win.once('ready-to-show', () => win.show()); + win.loadURL(`file://${ __dirname }/public/about.html`); }); }); diff --git a/src/public/about.html b/src/public/about.html index a3b5608988..4dec9f3eb7 100644 --- a/src/public/about.html +++ b/src/public/about.html @@ -2,14 +2,15 @@ + About %s -