[WIP] incorporate electron-react-titlebar

author: haraldox <hnaumann+github@gmail.com> 2018-02-20 12:17:14 +0100
committer: haraldox <hnaumann+github@gmail.com> 2018-02-20 12:17:14 +0100
commit: cdf477682a3923d770596442549d229d413ef5a2 (patch)
tree: 77eac3d00dcaefd134b239588f2b6ac754ee9187 /src
parent: fix(Linux): Fix window restore on notification click (@closingin) (diff)
download: ferdium-app-cdf477682a3923d770596442549d229d413ef5a2.tar.gz
ferdium-app-cdf477682a3923d770596442549d229d413ef5a2.tar.zst
ferdium-app-cdf477682a3923d770596442549d229d413ef5a2.zip
3 files changed, 79 insertions, 60 deletions
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 (
      <div>
        <div className="app">
-          {sidebar}
+          <TitleBar menu={window.franz.menu.template}>
-          <div className="app__service">
+            <link rel="stylesheet" type="text/css" href={require.resolve('electron-react-titlebar/assets/style.css')} />
-            {news.length > 0 && news.map(item => (
+          </TitleBar>
-              <InfoBar
+          <div className="app__content">
-                key={item.id}
+            {sidebar}
-                position="top"
+            <div className="app__service">
-                type={item.type}
+              {news.length > 0 && news.map(item => (
-                sticky={item.sticky}
+                <InfoBar
-                onHide={() => removeNewsItem({ newsId: item.id })}
+                  key={item.id}
-              >
+                  position="top"
-                <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                  type={item.type}
-              </InfoBar>
+                  sticky={item.sticky}
-            ))}
+                  onHide={() => removeNewsItem({ newsId: item.id })}
-            {!isOnline && (
+                >
-              <InfoBar
+                  <span dangerouslySetInnerHTML={createMarkup(item.message)} />
-                type="danger"
+                </InfoBar>
-              >
+              ))}
-                <span className="mdi mdi-flash" />
+              {!isOnline && (
-                {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+                <InfoBar
-              </InfoBar>
+                  type="danger"
-            )}
+                >
-            {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                  <span className="mdi mdi-flash" />
-              <InfoBar
+                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-                type="danger"
+                </InfoBar>
-                ctaLabel="Try again"
+              )}
-                ctaLoading={areRequiredRequestsLoading}
+              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                sticky
+                <InfoBar
-                onClick={retryRequiredRequests}
+                  type="danger"
-              >
+                  ctaLabel="Try again"
-                <span className="mdi mdi-flash" />
+                  ctaLoading={areRequiredRequestsLoading}
-                {intl.formatMessage(messages.requiredRequestsFailed)}
+                  sticky
-              </InfoBar>
+                  onClick={retryRequiredRequests}
-            )}
+                >
-            {showServicesUpdatedInfoBar && (
+                  <span className="mdi mdi-flash" />
-              <InfoBar
+                  {intl.formatMessage(messages.requiredRequestsFailed)}
-                type="primary"
+                </InfoBar>
-                ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+              )}
-                onClick={reloadServicesAfterUpdate}
+              {showServicesUpdatedInfoBar && (
-                sticky
+                <InfoBar
-              >
+                  type="primary"
-                <span className="mdi mdi-power-plug" />
+                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                {intl.formatMessage(messages.servicesUpdated)}
+                  onClick={reloadServicesAfterUpdate}
-              </InfoBar>
+                  sticky
-            )}
+                >
-            {appUpdateIsDownloaded && (
+                  <span className="mdi mdi-power-plug" />
-              <InfoBar
+                  {intl.formatMessage(messages.servicesUpdated)}
-                type="primary"
+                </InfoBar>
-                ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+              )}
-                onClick={installAppUpdate}
+              {appUpdateIsDownloaded && (
-                sticky
+                <InfoBar
-              >
+                  type="primary"
-                <span className="mdi mdi-information" />
+                  ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
-                {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
+                  onClick={installAppUpdate}
-                  <u>{intl.formatMessage(messages.changelog)}</u>
+                  sticky
-                </a>
+                >
-              </InfoBar>
+                  <span className="mdi mdi-information" />
-            )}
+                  {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
-            {services}
+                    <u>{intl.formatMessage(messages.changelog)}</u>
+                  </a>
+                </InfoBar>
+              )}
+              {services}
+            </div>
          </div>
        </div>
        {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%;
author	haraldox <hnaumann+github@gmail.com>	2018-02-20 12:17:14 +0100
committer	haraldox <hnaumann+github@gmail.com>	2018-02-20 12:17:14 +0100
commit	cdf477682a3923d770596442549d229d413ef5a2 (patch)
tree	77eac3d00dcaefd134b239588f2b6ac754ee9187 /src
parent	fix(Linux): Fix window restore on notification click (@closingin) (diff)
download	ferdium-app-cdf477682a3923d770596442549d229d413ef5a2.tar.gz ferdium-app-cdf477682a3923d770596442549d229d413ef5a2.tar.zst ferdium-app-cdf477682a3923d770596442549d229d413ef5a2.zip

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%;