From cdf477682a3923d770596442549d229d413ef5a2 Mon Sep 17 00:00:00 2001 From: haraldox Date: Tue, 20 Feb 2018 12:17:14 +0100 Subject: [WIP] incorporate electron-react-titlebar --- package.json | 1 + src/components/layout/AppLayout.js | 123 ++++++++++++++++++++----------------- src/lib/Menu.js | 6 +- src/styles/layout.scss | 10 ++- yarn.lock | 45 +++++++++++++- 5 files changed, 123 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index a14367bf2..78f7a3291 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "classnames": "^2.2.5", "du": "^0.1.0", "electron-fetch": "^1.1.0", + "electron-react-titlebar": "^0.7.1", "electron-spellchecker": "^1.1.2", "electron-updater": "^2.4.3", "electron-window-state": "^4.1.0", diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 20dc2f764..4f047368a 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js @@ -2,9 +2,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; +import { TitleBar } from 'electron-react-titlebar'; import InfoBar from '../ui/InfoBar'; import globalMessages from '../../i18n/globalMessages'; +import Menu from '../../lib/Menu'; function createMarkup(HTMLString) { return { __html: HTMLString }; @@ -87,64 +89,69 @@ export default class AppLayout extends Component { return (
- {sidebar} -
- {news.length > 0 && news.map(item => ( - removeNewsItem({ newsId: item.id })} - > - - - ))} - {!isOnline && ( - - - {intl.formatMessage(globalMessages.notConnectedToTheInternet)} - - )} - {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( - - - {intl.formatMessage(messages.requiredRequestsFailed)} - - )} - {showServicesUpdatedInfoBar && ( - - - {intl.formatMessage(messages.servicesUpdated)} - - )} - {appUpdateIsDownloaded && ( - - - {intl.formatMessage(messages.updateAvailable)} - {intl.formatMessage(messages.changelog)} - - - )} - {services} + + + +
+ {sidebar} +
+ {news.length > 0 && news.map(item => ( + removeNewsItem({ newsId: item.id })} + > + + + ))} + {!isOnline && ( + + + {intl.formatMessage(globalMessages.notConnectedToTheInternet)} + + )} + {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( + + + {intl.formatMessage(messages.requiredRequestsFailed)} + + )} + {showServicesUpdatedInfoBar && ( + + + {intl.formatMessage(messages.servicesUpdated)} + + )} + {appUpdateIsDownloaded && ( + + + {intl.formatMessage(messages.updateAvailable)} + {intl.formatMessage(messages.changelog)} + + + )} + {services} +
{children} diff --git a/src/lib/Menu.js b/src/lib/Menu.js index 703060dc1..0818c94fb 100644 --- a/src/lib/Menu.js +++ b/src/lib/Menu.js @@ -124,8 +124,12 @@ export default class FranzMenu { autorun(this._build.bind(this)); } + get template() { + return toJS(this.tpl); + } + _build() { - const tpl = toJS(this.tpl); + const tpl = this.template; tpl[1].submenu.push({ role: 'toggledevtools', diff --git a/src/styles/layout.scss b/src/styles/layout.scss index afdd7dec7..964a9fcea 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -6,7 +6,11 @@ html { .app { display: flex; - flex-direction: row; + flex-direction: column; + + .app__content { + display: flex; + } .app__service { display: flex; @@ -15,6 +19,10 @@ html { } } +.electron-app-title-bar { + z-index: 99999999; +} + .window-draggable { position: absolute; width: 100%; diff --git a/yarn.lock b/yarn.lock index c788006b7..317f7b220 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1367,7 +1367,7 @@ circular-json@^0.3.1: version "0.3.3" resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66" -classnames@^2.2.0, classnames@^2.2.5: +classnames@^2.2.0, classnames@^2.2.3, classnames@^2.2.5: version "2.2.5" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" @@ -1766,6 +1766,10 @@ doctrine@^2.0.0: esutils "^2.0.2" isarray "^1.0.0" +"dom-helpers@^2.4.0 || ^3.0.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" + dom-helpers@^3.2.0: version "3.2.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a" @@ -1995,6 +1999,13 @@ electron-publish@19.15.0: fs-extra-p "^4.3.0" mime "^1.3.6" +electron-react-titlebar@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/electron-react-titlebar/-/electron-react-titlebar-0.7.1.tgz#d56517d01ef0e935caa994e9b577dfd63a56c66c" + dependencies: + lodash "^4.17.4" + react-virtualized "^9.7.6" + electron-rebuild@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/electron-rebuild/-/electron-rebuild-1.6.0.tgz#e8d26f4d8e9fe5388df35864b3658e5cfd4dcb7e" @@ -2450,6 +2461,18 @@ fast-levenshtein@~2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + fbjs@^0.8.9: version "0.8.14" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" @@ -4058,7 +4081,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -4948,6 +4971,14 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8: fbjs "^0.8.9" loose-envify "^1.3.1" +prop-types@^15.6.0: + version "15.6.0" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" + proxy-middleware@~0.15.0: version "0.15.0" resolved "https://registry.yarnpkg.com/proxy-middleware/-/proxy-middleware-0.15.0.tgz#a3fdf1befb730f951965872ac2f6074c61477a56" @@ -5126,6 +5157,16 @@ react-transition-group@^1.2.0: prop-types "^15.5.6" warning "^3.0.0" +react-virtualized@^9.7.6: + version "9.18.5" + resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.18.5.tgz#42dd390ebaa7ea809bfcaf775d39872641679b89" + dependencies: + babel-runtime "^6.26.0" + classnames "^2.2.3" + dom-helpers "^2.4.0 || ^3.0.0" + loose-envify "^1.3.0" + prop-types "^15.6.0" + react@^15.4.1: version "15.6.1" resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df" -- cgit v1.2.3-70-g09d2