diff options
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | src/components/layout/AppLayout.js | 123 | ||||
-rw-r--r-- | src/lib/Menu.js | 6 | ||||
-rw-r--r-- | src/styles/layout.scss | 10 | ||||
-rw-r--r-- | 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 @@ | |||
35 | "classnames": "^2.2.5", | 35 | "classnames": "^2.2.5", |
36 | "du": "^0.1.0", | 36 | "du": "^0.1.0", |
37 | "electron-fetch": "^1.1.0", | 37 | "electron-fetch": "^1.1.0", |
38 | "electron-react-titlebar": "^0.7.1", | ||
38 | "electron-spellchecker": "^1.1.2", | 39 | "electron-spellchecker": "^1.1.2", |
39 | "electron-updater": "^2.4.3", | 40 | "electron-updater": "^2.4.3", |
40 | "electron-window-state": "^4.1.0", | 41 | "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'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { TitleBar } from 'electron-react-titlebar'; | ||
5 | 6 | ||
6 | import InfoBar from '../ui/InfoBar'; | 7 | import InfoBar from '../ui/InfoBar'; |
7 | import globalMessages from '../../i18n/globalMessages'; | 8 | import globalMessages from '../../i18n/globalMessages'; |
9 | import Menu from '../../lib/Menu'; | ||
8 | 10 | ||
9 | function createMarkup(HTMLString) { | 11 | function createMarkup(HTMLString) { |
10 | return { __html: HTMLString }; | 12 | return { __html: HTMLString }; |
@@ -87,64 +89,69 @@ export default class AppLayout extends Component { | |||
87 | return ( | 89 | return ( |
88 | <div> | 90 | <div> |
89 | <div className="app"> | 91 | <div className="app"> |
90 | {sidebar} | 92 | <TitleBar menu={window.franz.menu.template}> |
91 | <div className="app__service"> | 93 | <link rel="stylesheet" type="text/css" href={require.resolve('electron-react-titlebar/assets/style.css')} /> |
92 | {news.length > 0 && news.map(item => ( | 94 | </TitleBar> |
93 | <InfoBar | 95 | <div className="app__content"> |
94 | key={item.id} | 96 | {sidebar} |
95 | position="top" | 97 | <div className="app__service"> |
96 | type={item.type} | 98 | {news.length > 0 && news.map(item => ( |
97 | sticky={item.sticky} | 99 | <InfoBar |
98 | onHide={() => removeNewsItem({ newsId: item.id })} | 100 | key={item.id} |
99 | > | 101 | position="top" |
100 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> | 102 | type={item.type} |
101 | </InfoBar> | 103 | sticky={item.sticky} |
102 | ))} | 104 | onHide={() => removeNewsItem({ newsId: item.id })} |
103 | {!isOnline && ( | 105 | > |
104 | <InfoBar | 106 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> |
105 | type="danger" | 107 | </InfoBar> |
106 | > | 108 | ))} |
107 | <span className="mdi mdi-flash" /> | 109 | {!isOnline && ( |
108 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | 110 | <InfoBar |
109 | </InfoBar> | 111 | type="danger" |
110 | )} | 112 | > |
111 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | 113 | <span className="mdi mdi-flash" /> |
112 | <InfoBar | 114 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} |
113 | type="danger" | 115 | </InfoBar> |
114 | ctaLabel="Try again" | 116 | )} |
115 | ctaLoading={areRequiredRequestsLoading} | 117 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( |
116 | sticky | 118 | <InfoBar |
117 | onClick={retryRequiredRequests} | 119 | type="danger" |
118 | > | 120 | ctaLabel="Try again" |
119 | <span className="mdi mdi-flash" /> | 121 | ctaLoading={areRequiredRequestsLoading} |
120 | {intl.formatMessage(messages.requiredRequestsFailed)} | 122 | sticky |
121 | </InfoBar> | 123 | onClick={retryRequiredRequests} |
122 | )} | 124 | > |
123 | {showServicesUpdatedInfoBar && ( | 125 | <span className="mdi mdi-flash" /> |
124 | <InfoBar | 126 | {intl.formatMessage(messages.requiredRequestsFailed)} |
125 | type="primary" | 127 | </InfoBar> |
126 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} | 128 | )} |
127 | onClick={reloadServicesAfterUpdate} | 129 | {showServicesUpdatedInfoBar && ( |
128 | sticky | 130 | <InfoBar |
129 | > | 131 | type="primary" |
130 | <span className="mdi mdi-power-plug" /> | 132 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} |
131 | {intl.formatMessage(messages.servicesUpdated)} | 133 | onClick={reloadServicesAfterUpdate} |
132 | </InfoBar> | 134 | sticky |
133 | )} | 135 | > |
134 | {appUpdateIsDownloaded && ( | 136 | <span className="mdi mdi-power-plug" /> |
135 | <InfoBar | 137 | {intl.formatMessage(messages.servicesUpdated)} |
136 | type="primary" | 138 | </InfoBar> |
137 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} | 139 | )} |
138 | onClick={installAppUpdate} | 140 | {appUpdateIsDownloaded && ( |
139 | sticky | 141 | <InfoBar |
140 | > | 142 | type="primary" |
141 | <span className="mdi mdi-information" /> | 143 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} |
142 | {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank"> | 144 | onClick={installAppUpdate} |
143 | <u>{intl.formatMessage(messages.changelog)}</u> | 145 | sticky |
144 | </a> | 146 | > |
145 | </InfoBar> | 147 | <span className="mdi mdi-information" /> |
146 | )} | 148 | {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank"> |
147 | {services} | 149 | <u>{intl.formatMessage(messages.changelog)}</u> |
150 | </a> | ||
151 | </InfoBar> | ||
152 | )} | ||
153 | {services} | ||
154 | </div> | ||
148 | </div> | 155 | </div> |
149 | </div> | 156 | </div> |
150 | {children} | 157 | {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 { | |||
124 | autorun(this._build.bind(this)); | 124 | autorun(this._build.bind(this)); |
125 | } | 125 | } |
126 | 126 | ||
127 | get template() { | ||
128 | return toJS(this.tpl); | ||
129 | } | ||
130 | |||
127 | _build() { | 131 | _build() { |
128 | const tpl = toJS(this.tpl); | 132 | const tpl = this.template; |
129 | 133 | ||
130 | tpl[1].submenu.push({ | 134 | tpl[1].submenu.push({ |
131 | role: 'toggledevtools', | 135 | 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 { | |||
6 | 6 | ||
7 | .app { | 7 | .app { |
8 | display: flex; | 8 | display: flex; |
9 | flex-direction: row; | 9 | flex-direction: column; |
10 | |||
11 | .app__content { | ||
12 | display: flex; | ||
13 | } | ||
10 | 14 | ||
11 | .app__service { | 15 | .app__service { |
12 | display: flex; | 16 | display: flex; |
@@ -15,6 +19,10 @@ html { | |||
15 | } | 19 | } |
16 | } | 20 | } |
17 | 21 | ||
22 | .electron-app-title-bar { | ||
23 | z-index: 99999999; | ||
24 | } | ||
25 | |||
18 | .window-draggable { | 26 | .window-draggable { |
19 | position: absolute; | 27 | position: absolute; |
20 | width: 100%; | 28 | width: 100%; |
@@ -1367,7 +1367,7 @@ circular-json@^0.3.1: | |||
1367 | version "0.3.3" | 1367 | version "0.3.3" |
1368 | resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66" | 1368 | resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66" |
1369 | 1369 | ||
1370 | classnames@^2.2.0, classnames@^2.2.5: | 1370 | classnames@^2.2.0, classnames@^2.2.3, classnames@^2.2.5: |
1371 | version "2.2.5" | 1371 | version "2.2.5" |
1372 | resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" | 1372 | resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d" |
1373 | 1373 | ||
@@ -1766,6 +1766,10 @@ doctrine@^2.0.0: | |||
1766 | esutils "^2.0.2" | 1766 | esutils "^2.0.2" |
1767 | isarray "^1.0.0" | 1767 | isarray "^1.0.0" |
1768 | 1768 | ||
1769 | "dom-helpers@^2.4.0 || ^3.0.0": | ||
1770 | version "3.3.1" | ||
1771 | resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" | ||
1772 | |||
1769 | dom-helpers@^3.2.0: | 1773 | dom-helpers@^3.2.0: |
1770 | version "3.2.1" | 1774 | version "3.2.1" |
1771 | resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a" | 1775 | resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a" |
@@ -1995,6 +1999,13 @@ electron-publish@19.15.0: | |||
1995 | fs-extra-p "^4.3.0" | 1999 | fs-extra-p "^4.3.0" |
1996 | mime "^1.3.6" | 2000 | mime "^1.3.6" |
1997 | 2001 | ||
2002 | electron-react-titlebar@^0.7.1: | ||
2003 | version "0.7.1" | ||
2004 | resolved "https://registry.yarnpkg.com/electron-react-titlebar/-/electron-react-titlebar-0.7.1.tgz#d56517d01ef0e935caa994e9b577dfd63a56c66c" | ||
2005 | dependencies: | ||
2006 | lodash "^4.17.4" | ||
2007 | react-virtualized "^9.7.6" | ||
2008 | |||
1998 | electron-rebuild@^1.6.0: | 2009 | electron-rebuild@^1.6.0: |
1999 | version "1.6.0" | 2010 | version "1.6.0" |
2000 | resolved "https://registry.yarnpkg.com/electron-rebuild/-/electron-rebuild-1.6.0.tgz#e8d26f4d8e9fe5388df35864b3658e5cfd4dcb7e" | 2011 | resolved "https://registry.yarnpkg.com/electron-rebuild/-/electron-rebuild-1.6.0.tgz#e8d26f4d8e9fe5388df35864b3658e5cfd4dcb7e" |
@@ -2450,6 +2461,18 @@ fast-levenshtein@~2.0.4: | |||
2450 | version "2.0.6" | 2461 | version "2.0.6" |
2451 | resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" | 2462 | resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" |
2452 | 2463 | ||
2464 | fbjs@^0.8.16: | ||
2465 | version "0.8.16" | ||
2466 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" | ||
2467 | dependencies: | ||
2468 | core-js "^1.0.0" | ||
2469 | isomorphic-fetch "^2.1.1" | ||
2470 | loose-envify "^1.0.0" | ||
2471 | object-assign "^4.1.0" | ||
2472 | promise "^7.1.1" | ||
2473 | setimmediate "^1.0.5" | ||
2474 | ua-parser-js "^0.7.9" | ||
2475 | |||
2453 | fbjs@^0.8.9: | 2476 | fbjs@^0.8.9: |
2454 | version "0.8.14" | 2477 | version "0.8.14" |
2455 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" | 2478 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" |
@@ -4058,7 +4081,7 @@ longest@^1.0.1: | |||
4058 | version "1.0.1" | 4081 | version "1.0.1" |
4059 | resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" | 4082 | resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" |
4060 | 4083 | ||
4061 | loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: | 4084 | 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: |
4062 | version "1.3.1" | 4085 | version "1.3.1" |
4063 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" | 4086 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" |
4064 | dependencies: | 4087 | 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: | |||
4948 | fbjs "^0.8.9" | 4971 | fbjs "^0.8.9" |
4949 | loose-envify "^1.3.1" | 4972 | loose-envify "^1.3.1" |
4950 | 4973 | ||
4974 | prop-types@^15.6.0: | ||
4975 | version "15.6.0" | ||
4976 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" | ||
4977 | dependencies: | ||
4978 | fbjs "^0.8.16" | ||
4979 | loose-envify "^1.3.1" | ||
4980 | object-assign "^4.1.1" | ||
4981 | |||
4951 | proxy-middleware@~0.15.0: | 4982 | proxy-middleware@~0.15.0: |
4952 | version "0.15.0" | 4983 | version "0.15.0" |
4953 | resolved "https://registry.yarnpkg.com/proxy-middleware/-/proxy-middleware-0.15.0.tgz#a3fdf1befb730f951965872ac2f6074c61477a56" | 4984 | resolved "https://registry.yarnpkg.com/proxy-middleware/-/proxy-middleware-0.15.0.tgz#a3fdf1befb730f951965872ac2f6074c61477a56" |
@@ -5126,6 +5157,16 @@ react-transition-group@^1.2.0: | |||
5126 | prop-types "^15.5.6" | 5157 | prop-types "^15.5.6" |
5127 | warning "^3.0.0" | 5158 | warning "^3.0.0" |
5128 | 5159 | ||
5160 | react-virtualized@^9.7.6: | ||
5161 | version "9.18.5" | ||
5162 | resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.18.5.tgz#42dd390ebaa7ea809bfcaf775d39872641679b89" | ||
5163 | dependencies: | ||
5164 | babel-runtime "^6.26.0" | ||
5165 | classnames "^2.2.3" | ||
5166 | dom-helpers "^2.4.0 || ^3.0.0" | ||
5167 | loose-envify "^1.3.0" | ||
5168 | prop-types "^15.6.0" | ||
5169 | |||
5129 | react@^15.4.1: | 5170 | react@^15.4.1: |
5130 | version "15.6.1" | 5171 | version "15.6.1" |
5131 | resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df" | 5172 | resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df" |