From 1decbeb1e0e604c5e02da1eb236b6cce8f841816 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Fri, 6 Jul 2018 14:38:53 +0200 Subject: [PATCH 1/2] Resize electron window --- packages/fether-electron/src/main/index.js | 4 +- .../src/main/messages/index.js | 33 +++++-- packages/fether-react/package.json | 1 + packages/fether-react/src/App/App.js | 19 ++++- .../src/assets/sass/layouts/_wrapper.scss | 85 +++++++++---------- .../src/assets/sass/shared/_basics.scss | 2 - yarn.lock | 27 ++++++ 7 files changed, 109 insertions(+), 62 deletions(-) diff --git a/packages/fether-electron/src/main/index.js b/packages/fether-electron/src/main/index.js index 732e7743..10d54619 100644 --- a/packages/fether-electron/src/main/index.js +++ b/packages/fether-electron/src/main/index.js @@ -82,7 +82,9 @@ function createWindow () { ); // Listen to messages from renderer process - ipcMain.on('asynchronous-message', messages); + ipcMain.on('asynchronous-message', (...args) => + messages(mainWindow, ...args) + ); // Add application menu addMenu(mainWindow); diff --git a/packages/fether-electron/src/main/messages/index.js b/packages/fether-electron/src/main/messages/index.js index 3f1687e3..c8c8de99 100644 --- a/packages/fether-electron/src/main/messages/index.js +++ b/packages/fether-electron/src/main/messages/index.js @@ -5,17 +5,34 @@ import { signerNewToken } from '@parity/electron'; +import Pino from './utils/pino'; + +const pino = Pino(); + /** * Handle all asynchronous messages from renderer to main. */ -export default async (event, arg) => { - switch (arg) { - case 'signer-new-token': { - const token = await signerNewToken(); - // Send back the token to the renderer process - event.sender.send('asynchronous-reply', token); - break; +export default async (mainWindow, event, ...args) => { + try { + if (!args.length) { + return; + } + switch (args[0]) { + case 'app-resize': { + const [width] = mainWindow.getSize(); + const newHeight = args[1]; + mainWindow.setContentSize(width, Math.round(newHeight) + 2); + break; + } + case 'signer-new-token': { + const token = await signerNewToken(); + // Send back the token to the renderer process + event.sender.send('asynchronous-reply', token); + break; + } + default: } - default: + } catch (err) { + pino.error(err); } }; diff --git a/packages/fether-react/package.json b/packages/fether-react/package.json index 092a19c2..27d1b2ff 100644 --- a/packages/fether-react/package.json +++ b/packages/fether-react/package.json @@ -52,6 +52,7 @@ "react-dom": "^16.3.2", "react-final-form": "^3.6.4", "react-markdown": "^3.3.4", + "react-resize-detector": "^3.0.1", "react-router-dom": "^4.2.2", "react-scripts": "1.1.4", "recompose": "^0.27.1", diff --git a/packages/fether-react/src/App/App.js b/packages/fether-react/src/App/App.js index fc8a44f5..5b34d1a9 100644 --- a/packages/fether-react/src/App/App.js +++ b/packages/fether-react/src/App/App.js @@ -12,6 +12,8 @@ import { Switch } from 'react-router-dom'; import { inject, observer } from 'mobx-react'; +import isElectron from 'is-electron'; +import ReactResizeDetector from 'react-resize-detector'; import Accounts from '../Accounts'; import Onboarding from '../Onboarding'; @@ -25,17 +27,26 @@ import Whitelist from '../Whitelist'; // https://github.com/facebook/create-react-app/issues/3591 const Router = process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter; +const electron = isElectron() ? window.require('electron') : null; @inject('healthStore', 'onboardingStore') @observer class App extends Component { + handleResize = (_, height) => { + if (!electron) { + return; + } + // Send height to main process + electron.ipcRenderer.send('asynchronous-message', 'app-resize', height); + }; + render () { return ( - -
+ +
{this.renderScreen()}
-
- + + ); } diff --git a/packages/fether-react/src/assets/sass/layouts/_wrapper.scss b/packages/fether-react/src/assets/sass/layouts/_wrapper.scss index 5d07a1df..719fd6d2 100644 --- a/packages/fether-react/src/assets/sass/layouts/_wrapper.scss +++ b/packages/fether-react/src/assets/sass/layouts/_wrapper.scss @@ -1,58 +1,49 @@ -.wrapper { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; +.content { + // TODO: abstract this out + overflow: visible; + max-width: 22rem; + margin: 0 auto; - .content { - // TODO: abstract this out - overflow: visible; - max-width: 22rem; - margin: 0 auto; + .connector { + height: 0.5rem; + display: flex; + justify-content: center; - .connector { - height: 0.5rem; - display: flex; - justify-content: center; - - &.-top { - margin-bottom: -1px; - } + &.-top { + margin-bottom: -1px; + } - svg { - height: 0.5rem; - width: auto; - polygon { - fill: $chrome; - } + svg { + height: 0.5rem; + width: auto; + polygon { + fill: $chrome; } } + } - .window { - background: $chrome; - border-radius: 0.25rem; - overflow: hidden; - position: relative; - box-shadow: 0 0.125rem 0.75rem rgba($black, 0.175), - 0 0.125rem 0.125rem rgba($black, 0.1); + .window { + background: $chrome; + border-radius: 0.25rem; + overflow: hidden; + position: relative; + box-shadow: 0 0.125rem 0.75rem rgba($black, 0.175), + 0 0.125rem 0.125rem rgba($black, 0.1); - .window_content { - min-height: 7.5rem; - } + .window_content { + min-height: 7.5rem; + } - .window_overlay { - background-color: $chrome; - bottom: 0; - left: 0; - min-height: 7.5rem; - opacity: 0.98; - position: absolute; - right: 0; - top: 0; - z-index: 10; - } + .window_overlay { + background-color: $chrome; + bottom: 0; + left: 0; + min-height: 7.5rem; + opacity: 0.98; + position: absolute; + right: 0; + top: 0; + z-index: 10; } } } diff --git a/packages/fether-react/src/assets/sass/shared/_basics.scss b/packages/fether-react/src/assets/sass/shared/_basics.scss index 0a1f0695..e7020507 100644 --- a/packages/fether-react/src/assets/sass/shared/_basics.scss +++ b/packages/fether-react/src/assets/sass/shared/_basics.scss @@ -1,6 +1,5 @@ html { font-size: 16px; - height: 100%; } body { @@ -10,7 +9,6 @@ body { font-weight: 400; font-size: ms(0); line-height: ms(0) * 1.3; - min-height: 100%; } .hidden { diff --git a/yarn.lock b/yarn.lock index b61f7ff4..20e3797c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7561,6 +7561,14 @@ lodash.defaults@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" +lodash.isarray@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403" + +lodash.isfunction@^3.0.9: + version "3.0.9" + resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051" + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -7582,6 +7590,10 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "~3.0.0" +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" @@ -9599,6 +9611,17 @@ react-redux@4.4.6: lodash "^4.2.0" loose-envify "^1.1.0" +react-resize-detector@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-3.0.1.tgz#73214983c0652e96fac1e2eba39b5501de3e2a12" + dependencies: + lodash.debounce "^4.0.8" + lodash.isarray "^4.0.0" + lodash.isfunction "^3.0.9" + lodash.throttle "^4.1.1" + prop-types "^15.6.1" + resize-observer-polyfill "^1.5.0" + react-router-dom@^4.2.2: version "4.3.1" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6" @@ -10143,6 +10166,10 @@ requires-port@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" +resize-observer-polyfill@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69" + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" -- GitLab From 450b683ab78a9622dfcbae8fcca9bb05238fa0c6 Mon Sep 17 00:00:00 2001 From: Amaury Martiny Date: Fri, 6 Jul 2018 14:45:57 +0200 Subject: [PATCH 2/2] Make code look better --- packages/fether-electron/src/main/messages/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/fether-electron/src/main/messages/index.js b/packages/fether-electron/src/main/messages/index.js index c8c8de99..42e9d3d6 100644 --- a/packages/fether-electron/src/main/messages/index.js +++ b/packages/fether-electron/src/main/messages/index.js @@ -5,22 +5,22 @@ import { signerNewToken } from '@parity/electron'; -import Pino from './utils/pino'; +import Pino from '../utils/pino'; const pino = Pino(); /** * Handle all asynchronous messages from renderer to main. */ -export default async (mainWindow, event, ...args) => { +export default async (mainWindow, event, action, ...args) => { try { - if (!args.length) { + if (!action) { return; } - switch (args[0]) { + switch (action) { case 'app-resize': { - const [width] = mainWindow.getSize(); - const newHeight = args[1]; + const [width] = mainWindow.getContentSize(); + const newHeight = args[0]; mainWindow.setContentSize(width, Math.round(newHeight) + 2); break; } -- GitLab