From 87164b3a22a7d8acdfd7341f26a06abb2e4c08a9 Mon Sep 17 00:00:00 2001 From: Gregor Herdmann Date: Tue, 3 Apr 2018 21:26:01 +0200 Subject: [PATCH] fix: Adjust new webview behavior and styles --- electron/renderer/src/components/Sidebar.css | 4 + electron/renderer/src/components/Sidebar.js | 21 ++- electron/renderer/src/components/Webviews.css | 1 + electron/renderer/src/components/Webviews.js | 3 - electron/renderer/static/webview-preload.js | 137 ++++++++---------- 5 files changed, 72 insertions(+), 94 deletions(-) diff --git a/electron/renderer/src/components/Sidebar.css b/electron/renderer/src/components/Sidebar.css index fdb9d05ccc4..0248535c6bc 100644 --- a/electron/renderer/src/components/Sidebar.css +++ b/electron/renderer/src/components/Sidebar.css @@ -55,6 +55,10 @@ border-radius: 50%; } +.Sidebar-icon-cursor { + cursor: pointer; +} + .Sidebar-account-add { width: 28px; height: 28px; diff --git a/electron/renderer/src/components/Sidebar.js b/electron/renderer/src/components/Sidebar.js index 7385aad46f5..f1d023fd39c 100644 --- a/electron/renderer/src/components/Sidebar.js +++ b/electron/renderer/src/components/Sidebar.js @@ -35,18 +35,17 @@ import { import './Sidebar.css'; -function className(account) { - return [ - 'Sidebar-icon', - account.badgeCount > 0 ? 'Sidebar-icon-badge' : '', - ].join(' '); -} - const centerOfEventTarget = event => { const cRect = event.target.getBoundingClientRect(); return [cRect.left + cRect.width / 2, cRect.top + cRect.height / 2]; }; +const getClassName = account => { + const showIconBadge = account.badgeCount > 0 ? ' Sidebar-icon-badge' : ''; + const showIconCursor = account.visible ? '' : ' Sidebar-icon-cursor'; + return `Sidebar-icon${showIconBadge}${showIconCursor}`; +}; + const Sidebar = ({ accounts, currentAccentID, @@ -59,15 +58,15 @@ const Sidebar = ({ }) => (
{accounts.map(account => (
connected.switchAccount(account.id)} onContextMenu={preventFocus(event => { const isAtLeastAdmin = [ @@ -110,7 +109,7 @@ const Sidebar = ({ ); export default connect( - ({ accounts, contextMenuState }) => ({ + ({accounts, contextMenuState}) => ({ accounts, currentAccentID: (accounts.find(account => account.visible) || {}).accentID, hasCreatedAccount: accounts.some(account => account.userID !== undefined), diff --git a/electron/renderer/src/components/Webviews.css b/electron/renderer/src/components/Webviews.css index ba44b05628e..dbe76a26550 100644 --- a/electron/renderer/src/components/Webviews.css +++ b/electron/renderer/src/components/Webviews.css @@ -26,6 +26,7 @@ } .Webviews-close { + cursor: pointer; position: absolute; top: 24px; right: 24px; diff --git a/electron/renderer/src/components/Webviews.js b/electron/renderer/src/components/Webviews.js index d0b7c65d969..c659e8ac48c 100644 --- a/electron/renderer/src/components/Webviews.js +++ b/electron/renderer/src/components/Webviews.js @@ -67,9 +67,6 @@ class Webviews extends Component { // pass account id to webview so we can access it in the preload script url.searchParams.set('id', account.id); - // when landing on auth page for login mode - url.hash = 'login'; - return url.href; } diff --git a/electron/renderer/static/webview-preload.js b/electron/renderer/static/webview-preload.js index 90d934facf2..4bf0087e683 100644 --- a/electron/renderer/static/webview-preload.js +++ b/electron/renderer/static/webview-preload.js @@ -23,8 +23,8 @@ const fs = require('fs-extra'); const path = require('path'); const winston = require('winston'); -const { desktopCapturer, ipcRenderer, remote, webFrame } = require('electron'); -const { app } = remote; +const {desktopCapturer, ipcRenderer, remote, webFrame} = require('electron'); +const {app} = remote; webFrame.setVisualZoomLevelLimits(1, 1); webFrame.setLayoutZoomLevelLimits(1, 1); @@ -32,11 +32,8 @@ webFrame.registerURLSchemeAsBypassingCSP('file'); const subscribeToWebappEvents = () => { amplify.subscribe(z.event.WebApp.LIFECYCLE.RESTART, update_source => { - if (update_source === z.lifecycle.UPDATE_SOURCE.DESKTOP) { - ipcRenderer.send('wrapper-update'); - } else { - ipcRenderer.send('wrapper-relaunch'); - } + const isUpdateSourceDesktop = update_source === z.lifecycle.UPDATE_SOURCE.DESKTOP; + ipcRenderer.send(isUpdateSourceDesktop ? 'wrapper-update' : 'wrapper-relaunch'); }); amplify.subscribe(z.event.WebApp.LIFECYCLE.LOADED, () => { @@ -68,60 +65,57 @@ const subscribeToWebappEvents = () => { }; const subscribeToMainProcessEvents = () => { - ipcRenderer.on('conversation-add-people', () => - amplify.publish(z.event.WebApp.SHORTCUT.ADD_PEOPLE) - ); - ipcRenderer.on('conversation-archive', () => - amplify.publish(z.event.WebApp.SHORTCUT.ARCHIVE) - ); - ipcRenderer.on('conversation-call', () => - amplify.publish(z.event.WebApp.CALL.STATE.TOGGLE, false) - ); - ipcRenderer.on('conversation-delete', () => - amplify.publish(z.event.WebApp.SHORTCUT.DELETE) - ); - ipcRenderer.on('conversation-next', () => - amplify.publish(z.event.WebApp.SHORTCUT.NEXT) - ); - ipcRenderer.on('conversation-people', () => - amplify.publish(z.event.WebApp.SHORTCUT.PEOPLE) - ); - ipcRenderer.on('conversation-ping', () => - amplify.publish(z.event.WebApp.SHORTCUT.PING) - ); - ipcRenderer.on('conversation-prev', () => - amplify.publish(z.event.WebApp.SHORTCUT.PREV) - ); - ipcRenderer.on('conversation-show', conversation_id => - amplify.publish(z.event.WebApp.CONVERSATION.SHOW, conversation_id) - ); - ipcRenderer.on('conversation-silence', () => - amplify.publish(z.event.WebApp.SHORTCUT.SILENCE) - ); - ipcRenderer.on('conversation-start', () => - amplify.publish(z.event.WebApp.SHORTCUT.START) - ); - ipcRenderer.on('conversation-video-call', () => - amplify.publish(z.event.WebApp.CALL.STATE.TOGGLE, true) - ); - ipcRenderer.on('preferences-show', () => - amplify.publish(z.event.WebApp.PREFERENCES.MANAGE_ACCOUNT) - ); - ipcRenderer.on('sign-out', () => - amplify.publish(z.event.WebApp.LIFECYCLE.ASK_TO_CLEAR_DATA) - ); - ipcRenderer.on('wrapper-update-available', () => - amplify.publish( - z.event.WebApp.LIFECYCLE.UPDATE, - z.announce.UPDATE_SOURCE.DESKTOP - ) - ); + ipcRenderer.on('conversation-add-people', () => { + amplify.publish(z.event.WebApp.SHORTCUT.ADD_PEOPLE); + }); + ipcRenderer.on('conversation-archive', () => { + amplify.publish(z.event.WebApp.SHORTCUT.ARCHIVE); + }); + ipcRenderer.on('conversation-call', () => { + amplify.publish(z.event.WebApp.CALL.STATE.TOGGLE, false); + }); + ipcRenderer.on('conversation-delete', () => { + amplify.publish(z.event.WebApp.SHORTCUT.DELETE); + }); + ipcRenderer.on('conversation-next', () => { + amplify.publish(z.event.WebApp.SHORTCUT.NEXT); + }); + ipcRenderer.on('conversation-people', () => { + amplify.publish(z.event.WebApp.SHORTCUT.PEOPLE); + }); + ipcRenderer.on('conversation-ping', () => { + amplify.publish(z.event.WebApp.SHORTCUT.PING); + }); + ipcRenderer.on('conversation-prev', () => { + amplify.publish(z.event.WebApp.SHORTCUT.PREV); + }); + ipcRenderer.on('conversation-show', conversationId => { + amplify.publish(z.event.WebApp.CONVERSATION.SHOW, conversationId) + }); + ipcRenderer.on('conversation-silence', () => { + amplify.publish(z.event.WebApp.SHORTCUT.SILENCE); + }); + ipcRenderer.on('conversation-start', () => { + amplify.publish(z.event.WebApp.SHORTCUT.START); + }); + ipcRenderer.on('conversation-video-call', () => { + amplify.publish(z.event.WebApp.CALL.STATE.TOGGLE, true); + }); + ipcRenderer.on('preferences-show', () => { + amplify.publish(z.event.WebApp.PREFERENCES.MANAGE_ACCOUNT); + }); + ipcRenderer.on('sign-out', () => { + amplify.publish(z.event.WebApp.LIFECYCLE.ASK_TO_CLEAR_DATA); + }); + ipcRenderer.on('wrapper-update-available', () => { + amplify.publish(z.event.WebApp.LIFECYCLE.UPDATE, z.lifecycle.UPDATE_SOURCE.DESKTOP); + }); }; -const exposeAddressbook = () => { +const exposeAddressBook = () => { let cachedAddressBook; - const getAdressBook = () => { + const getAddressBook = () => { if (!cachedAddressBook) { try { cachedAddressBook = require('node-addressbook'); @@ -133,7 +127,7 @@ const exposeAddressbook = () => { }; if (environment.platform.IS_MAC_OS) { - Object.defineProperty(window, 'wAddressBook', { get: getAdressBook }); + Object.defineProperty(window, 'wAddressBook', { get: getAddressBook }); } }; @@ -156,12 +150,7 @@ const enableFileLogging = () => { const id = new URL(window.location).searchParams.get('id'); if (id) { - const logFilePath = path.join( - app.getPath('userData'), - 'logs', - id, - config.LOG_FILE_NAME - ); + const logFilePath = path.join(app.getPath('userData'), 'logs', id, config.LOG_FILE_NAME); fs.createFileSync(logFilePath); const logger = new winston.Logger(); @@ -177,16 +166,13 @@ const enableFileLogging = () => { } }; -const reportWebappVersion = () => { - ipcRenderer.send('webapp-version', z.util.Environment.version(false)); -}; +const reportWebappVersion = () => ipcRenderer.send('webapp-version', z.util.Environment.version(false)); const checkAvailability = callback => { const intervalId = setInterval(() => { if (window.wire) { clearInterval(intervalId); - callback(); - return; + return callback(); } if (navigator.onLine) { @@ -197,10 +183,6 @@ const checkAvailability = callback => { }, 500); }; -const forceEmailLogin = () => { - window.location.hash = '#login'; -}; - // https://github.com/electron/electron/issues/2984 const _setImmediate = setImmediate; process.once('loaded', () => { @@ -208,18 +190,13 @@ process.once('loaded', () => { global.desktopCapturer = desktopCapturer; global.environment = environment; global.openGraph = require('../../js/lib/openGraph'); - global.notification_icon = path.join( - app.getAppPath(), - 'img', - 'notification.png' - ); + global.notification_icon = path.join(app.getAppPath(), 'img', 'notification.png'); enableFileLogging(); - forceEmailLogin(); }); window.addEventListener('DOMContentLoaded', () => { checkAvailability(() => { - exposeAddressbook(); + exposeAddressBook(); subscribeToMainProcessEvents(); subscribeToWebappEvents();