Open separate windows with theme, update settings theme on change

This commit is contained in:
Scott Nonnenberg 2018-07-13 08:57:30 -07:00
parent d014fa779e
commit d8e5e5fcf2
10 changed files with 38 additions and 14 deletions

View file

@ -6,6 +6,7 @@ const config = url.parse(window.location.toString(), true).query;
const { locale } = config; const { locale } = config;
const localeMessages = ipcRenderer.sendSync('locale-data'); const localeMessages = ipcRenderer.sendSync('locale-data');
window.theme = config.theme;
window.i18n = i18n.setup(locale, localeMessages); window.i18n = i18n.setup(locale, localeMessages);
// got.js appears to need this to successfully submit debug logs to the cloud // got.js appears to need this to successfully submit debug logs to the cloud

View file

@ -5,6 +5,7 @@ $(document).on('keyup', function(e) {
}); });
const $body = $(document.body); const $body = $(document.body);
$body.addClass(window.theme);
// got.js appears to need this to successfully submit debug logs to the cloud // got.js appears to need this to successfully submit debug logs to the cloud
window.setImmediate = window.nodeSetImmediate; window.setImmediate = window.nodeSetImmediate;

View file

@ -5,6 +5,7 @@ $(document).on('keyup', function(e) {
}); });
const $body = $(document.body); const $body = $(document.body);
$body.addClass(window.theme);
window.view = new Whisper.ConfirmationDialogView({ window.view = new Whisper.ConfirmationDialogView({
message: i18n('audioPermissionNeeded'), message: i18n('audioPermissionNeeded'),

View file

@ -5,6 +5,7 @@ $(document).on('keyup', function(e) {
}); });
const $body = $(document.body); const $body = $(document.body);
$body.addClass(window.theme);
const getInitialData = async () => ({ const getInitialData = async () => ({
deviceName: await window.getDeviceName(), deviceName: await window.getDeviceName(),

View file

@ -1,5 +1,6 @@
/* global i18n: false */ /* global i18n: false */
/* global Whisper: false */ /* global Whisper: false */
/* global $: false */
/* eslint-disable no-new */ /* eslint-disable no-new */
@ -82,7 +83,14 @@
el: this.$('.theme-settings'), el: this.$('.theme-settings'),
name: 'theme-setting', name: 'theme-setting',
value: window.initialData.themeSetting, value: window.initialData.themeSetting,
setFn: window.setThemeSetting, setFn: theme => {
$(document.body)
.removeClass('android')
.removeClass('android-dark')
.removeClass('ios')
.addClass(theme);
window.setThemeSetting(theme);
},
}); });
if (Settings.isAudioNotificationSupported()) { if (Settings.isAudioNotificationSupported()) {
new CheckboxView({ new CheckboxView({

28
main.js
View file

@ -115,7 +115,7 @@ const loadLocale = require('./app/locale').load;
let logger; let logger;
let locale; let locale;
function prepareURL(pathSegments) { function prepareURL(pathSegments, moreKeys) {
return url.format({ return url.format({
pathname: path.join.apply(null, pathSegments), pathname: path.join.apply(null, pathSegments),
protocol: 'file:', protocol: 'file:',
@ -134,6 +134,7 @@ function prepareURL(pathSegments) {
appInstance: process.env.NODE_APP_INSTANCE, appInstance: process.env.NODE_APP_INSTANCE,
proxyUrl: process.env.HTTPS_PROXY || process.env.https_proxy, proxyUrl: process.env.HTTPS_PROXY || process.env.https_proxy,
importMode: importMode ? true : undefined, // for stringify() importMode: importMode ? true : undefined, // for stringify()
...moreKeys,
}, },
}); });
} }
@ -428,7 +429,7 @@ function showAbout() {
} }
let settingsWindow; let settingsWindow;
function showSettingsWindow() { async function showSettingsWindow() {
if (settingsWindow) { if (settingsWindow) {
settingsWindow.show(); settingsWindow.show();
return; return;
@ -437,6 +438,7 @@ function showSettingsWindow() {
return; return;
} }
const theme = await pify(getDataFromMainWindow)('theme-setting');
const size = mainWindow.getSize(); const size = mainWindow.getSize();
const options = { const options = {
width: Math.min(500, size[0]), width: Math.min(500, size[0]),
@ -461,7 +463,7 @@ function showSettingsWindow() {
captureClicks(settingsWindow); captureClicks(settingsWindow);
settingsWindow.loadURL(prepareURL([__dirname, 'settings.html'])); settingsWindow.loadURL(prepareURL([__dirname, 'settings.html'], { theme }));
settingsWindow.on('closed', () => { settingsWindow.on('closed', () => {
removeDarkOverlay(); removeDarkOverlay();
@ -475,12 +477,13 @@ function showSettingsWindow() {
} }
let debugLogWindow; let debugLogWindow;
function showDebugLogWindow() { async function showDebugLogWindow() {
if (debugLogWindow) { if (debugLogWindow) {
debugLogWindow.show(); debugLogWindow.show();
return; return;
} }
const theme = await pify(getDataFromMainWindow)('theme-setting');
const size = mainWindow.getSize(); const size = mainWindow.getSize();
const options = { const options = {
width: Math.max(size[0] - 100, MIN_WIDTH), width: Math.max(size[0] - 100, MIN_WIDTH),
@ -505,7 +508,7 @@ function showDebugLogWindow() {
captureClicks(debugLogWindow); captureClicks(debugLogWindow);
debugLogWindow.loadURL(prepareURL([__dirname, 'debug_log.html'])); debugLogWindow.loadURL(prepareURL([__dirname, 'debug_log.html'], { theme }));
debugLogWindow.on('closed', () => { debugLogWindow.on('closed', () => {
removeDarkOverlay(); removeDarkOverlay();
@ -519,7 +522,7 @@ function showDebugLogWindow() {
} }
let permissionsPopupWindow; let permissionsPopupWindow;
function showPermissionsPopupWindow() { async function showPermissionsPopupWindow() {
if (permissionsPopupWindow) { if (permissionsPopupWindow) {
permissionsPopupWindow.show(); permissionsPopupWindow.show();
return; return;
@ -528,6 +531,7 @@ function showPermissionsPopupWindow() {
return; return;
} }
const theme = await pify(getDataFromMainWindow)('theme-setting');
const size = mainWindow.getSize(); const size = mainWindow.getSize();
const options = { const options = {
width: Math.min(400, size[0]), width: Math.min(400, size[0]),
@ -553,7 +557,7 @@ function showPermissionsPopupWindow() {
captureClicks(permissionsPopupWindow); captureClicks(permissionsPopupWindow);
permissionsPopupWindow.loadURL( permissionsPopupWindow.loadURL(
prepareURL([__dirname, 'permissions_popup.html']) prepareURL([__dirname, 'permissions_popup.html'], { theme })
); );
permissionsPopupWindow.on('closed', () => { permissionsPopupWindow.on('closed', () => {
@ -832,13 +836,19 @@ ipc.on('delete-all-data', () => {
} }
}); });
function getDataFromMainWindow(name, callback) {
ipc.once(`get-success-${name}`, (_event, error, value) =>
callback(error, value)
);
mainWindow.webContents.send(`get-${name}`);
}
function installSettingsGetter(name) { function installSettingsGetter(name) {
ipc.on(`get-${name}`, event => { ipc.on(`get-${name}`, event => {
if (mainWindow && mainWindow.webContents) { if (mainWindow && mainWindow.webContents) {
ipc.once(`get-success-${name}`, (_event, error, value) => getDataFromMainWindow(name, (error, value) =>
event.sender.send(`get-success-${name}`, error, value) event.sender.send(`get-success-${name}`, error, value)
); );
mainWindow.webContents.send(`get-${name}`);
} }
}); });
} }

View file

@ -6,6 +6,7 @@ const config = url.parse(window.location.toString(), true).query;
const { locale } = config; const { locale } = config;
const localeMessages = ipcRenderer.sendSync('locale-data'); const localeMessages = ipcRenderer.sendSync('locale-data');
window.theme = config.theme;
window.i18n = i18n.setup(locale, localeMessages); window.i18n = i18n.setup(locale, localeMessages);
require('./js/logging'); require('./js/logging');

View file

@ -70,10 +70,6 @@ window.closeAbout = () => ipc.send('close-about');
window.updateTrayIcon = unreadCount => window.updateTrayIcon = unreadCount =>
ipc.send('update-tray-icon', unreadCount); ipc.send('update-tray-icon', unreadCount);
ipc.on('debug-log', () => {
Whisper.events.trigger('showDebugLog');
});
ipc.on('set-up-with-import', () => { ipc.on('set-up-with-import', () => {
Whisper.events.trigger('setupWithImport'); Whisper.events.trigger('setupWithImport');
}); });

View file

@ -6,6 +6,7 @@ const config = url.parse(window.location.toString(), true).query;
const { locale } = config; const { locale } = config;
const localeMessages = ipcRenderer.sendSync('locale-data'); const localeMessages = ipcRenderer.sendSync('locale-data');
window.theme = config.theme;
window.i18n = i18n.setup(locale, localeMessages); window.i18n = i18n.setup(locale, localeMessages);
require('./js/logging'); require('./js/logging');

View file

@ -6,6 +6,10 @@ $button-dark: #ccc;
$text-dark: #cccccc; $text-dark: #cccccc;
$text-dark_l2: darken($text-dark, 30%); $text-dark_l2: darken($text-dark, 30%);
body.android-dark {
background-color: $grey-dark;
}
.android-dark { .android-dark {
.app-loading-screen { .app-loading-screen {
background-color: $grey-dark; background-color: $grey-dark;