1 files changed, 70 insertions, 61 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 20dc2f764..a4003ef8e 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -2,10 +2,13 @@ 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 { isWindows } from '../../environment';
 function createMarkup(HTMLString) {
  return { __html: HTMLString };
 }
@@ -37,9 +40,9 @@ const messages = defineMessages({
  },
 });
-@observer
+export default @observer class AppLayout extends Component {
-export default class AppLayout extends Component {
  static propTypes = {
+    isFullScreen: PropTypes.bool.isRequired,
    sidebar: PropTypes.element.isRequired,
    services: PropTypes.element.isRequired,
    children: PropTypes.element,
@@ -54,6 +57,7 @@ export default class AppLayout extends Component {
    areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
    retryRequiredRequests: PropTypes.func.isRequired,
    areRequiredRequestsLoading: PropTypes.bool.isRequired,
+    darkMode: PropTypes.bool.isRequired,
  };
  static defaultProps = {
@@ -66,6 +70,7 @@ export default class AppLayout extends Component {
  render() {
    const {
+      isFullScreen,
      sidebar,
      services,
      children,
@@ -80,71 +85,75 @@ export default class AppLayout extends Component {
      areRequiredRequestsSuccessful,
      retryRequiredRequests,
      areRequiredRequestsLoading,
+      darkMode,
    } = this.props;
    const { intl } = this.context;
    return (
-      <div>
+      <div className={(darkMode ? 'theme__dark' : '')}>
        <div className="app">
-          {sidebar}
+          {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
-          <div className="app__service">
+          <div className="app__content">
-            {news.length > 0 && news.map(item => (
+            {sidebar}
-              <InfoBar
+            <div className="app__service">
-                key={item.id}
+              {news.length > 0 && news.map(item => (
-                position="top"
+                <InfoBar
-                type={item.type}
+                  key={item.id}
-                sticky={item.sticky}
+                  position="top"
-                onHide={() => removeNewsItem({ newsId: item.id })}
+                  type={item.type}
-              >
+                  sticky={item.sticky}
-                <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                  onHide={() => removeNewsItem({ newsId: item.id })}
-              </InfoBar>
+                >
-            ))}
+                  <span dangerouslySetInnerHTML={createMarkup(item.message)} />
-            {!isOnline && (
+                </InfoBar>
-              <InfoBar
+              ))}
-                type="danger"
+              {!isOnline && (
-              >
+                <InfoBar
-                <span className="mdi mdi-flash" />
+                  type="danger"
-                {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+                >
-              </InfoBar>
+                  <span className="mdi mdi-flash" />
-            )}
+                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-            {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                </InfoBar>
-              <InfoBar
+              )}
-                type="danger"
+              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                ctaLabel="Try again"
+                <InfoBar
-                ctaLoading={areRequiredRequestsLoading}
+                  type="danger"
-                sticky
+                  ctaLabel="Try again"
-                onClick={retryRequiredRequests}
+                  ctaLoading={areRequiredRequestsLoading}
-              >
+                  sticky
-                <span className="mdi mdi-flash" />
+                  onClick={retryRequiredRequests}
-                {intl.formatMessage(messages.requiredRequestsFailed)}
+                >
-              </InfoBar>
+                  <span className="mdi mdi-flash" />
-            )}
+                  {intl.formatMessage(messages.requiredRequestsFailed)}
-            {showServicesUpdatedInfoBar && (
+                </InfoBar>
-              <InfoBar
+              )}
-                type="primary"
+              {showServicesUpdatedInfoBar && (
-                ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                <InfoBar
-                onClick={reloadServicesAfterUpdate}
+                  type="primary"
-                sticky
+                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-              >
+                  onClick={reloadServicesAfterUpdate}
-                <span className="mdi mdi-power-plug" />
+                  sticky
-                {intl.formatMessage(messages.servicesUpdated)}
+                >
-              </InfoBar>
+                  <span className="mdi mdi-power-plug" />
-            )}
+                  {intl.formatMessage(messages.servicesUpdated)}
-            {appUpdateIsDownloaded && (
+                </InfoBar>
-              <InfoBar
+              )}
-                type="primary"
+              {appUpdateIsDownloaded && (
-                ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+                <InfoBar
-                onClick={installAppUpdate}
+                  type="primary"
-                sticky
+                  ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
-              >
+                  onClick={installAppUpdate}
-                <span className="mdi mdi-information" />
+                  sticky
-                {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
+                >
-                  <u>{intl.formatMessage(messages.changelog)}</u>
+                  <span className="mdi mdi-information" />
-                </a>
+                  {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
-              </InfoBar>
+                    <u>{intl.formatMessage(messages.changelog)}</u>
-            )}
+                  </a>
-            {services}
+                </InfoBar>
+              )}
+              {services}
+            </div>
          </div>
        </div>
        {children}

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 20dc2f764..a4003ef8e 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js
@@ -2,10 +2,13 @@ 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';
8		9
		10	import { isWindows } from '../../environment';
		11
9	function createMarkup(HTMLString) {	12	function createMarkup(HTMLString) {
10	return { __html: HTMLString };	13	return { __html: HTMLString };
11	}	14	}
@@ -37,9 +40,9 @@ const messages = defineMessages({
37	},	40	},
38	});	41	});
39		42
40	@observer	43	export default @observer class AppLayout extends Component {
41	export default class AppLayout extends Component {
42	static propTypes = {	44	static propTypes = {
		45	isFullScreen: PropTypes.bool.isRequired,
43	sidebar: PropTypes.element.isRequired,	46	sidebar: PropTypes.element.isRequired,
44	services: PropTypes.element.isRequired,	47	services: PropTypes.element.isRequired,
45	children: PropTypes.element,	48	children: PropTypes.element,
@@ -54,6 +57,7 @@ export default class AppLayout extends Component {
54	areRequiredRequestsSuccessful: PropTypes.bool.isRequired,	57	areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
55	retryRequiredRequests: PropTypes.func.isRequired,	58	retryRequiredRequests: PropTypes.func.isRequired,
56	areRequiredRequestsLoading: PropTypes.bool.isRequired,	59	areRequiredRequestsLoading: PropTypes.bool.isRequired,
		60	darkMode: PropTypes.bool.isRequired,
57	};	61	};
58		62
59	static defaultProps = {	63	static defaultProps = {
@@ -66,6 +70,7 @@ export default class AppLayout extends Component {
66		70
67	render() {	71	render() {
68	const {	72	const {
		73	isFullScreen,
69	sidebar,	74	sidebar,
70	services,	75	services,
71	children,	76	children,
@@ -80,71 +85,75 @@ export default class AppLayout extends Component {
80	areRequiredRequestsSuccessful,	85	areRequiredRequestsSuccessful,
81	retryRequiredRequests,	86	retryRequiredRequests,
82	areRequiredRequestsLoading,	87	areRequiredRequestsLoading,
		88	darkMode,
83	} = this.props;	89	} = this.props;
84		90
85	const { intl } = this.context;	91	const { intl } = this.context;
86		92
87	return (	93	return (
88	<div>	94	<div className={(darkMode ? 'theme__dark' : '')}>
89	<div className="app">	95	<div className="app">
90	{sidebar}	96	{isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />}
91	<div className="app__service">	97	<div className="app__content">
92	{news.length > 0 && news.map(item => (	98	{sidebar}
93	<InfoBar	99	<div className="app__service">
94	key={item.id}	100	{news.length > 0 && news.map(item => (
95	position="top"	101	<InfoBar
96	type={item.type}	102	key={item.id}
97	sticky={item.sticky}	103	position="top"
98	onHide={() => removeNewsItem({ newsId: item.id })}	104	type={item.type}
99	>	105	sticky={item.sticky}
100	<span dangerouslySetInnerHTML={createMarkup(item.message)} />	106	onHide={() => removeNewsItem({ newsId: item.id })}
101	</InfoBar>	107	>
102	))}	108	<span dangerouslySetInnerHTML={createMarkup(item.message)} />
103	{!isOnline && (	109	</InfoBar>
104	<InfoBar	110	))}
105	type="danger"	111	{!isOnline && (
106	>	112	<InfoBar
107	<span className="mdi mdi-flash" />	113	type="danger"
108	{intl.formatMessage(globalMessages.notConnectedToTheInternet)}	114	>
109	</InfoBar>	115	<span className="mdi mdi-flash" />
110	)}	116	{intl.formatMessage(globalMessages.notConnectedToTheInternet)}
111	{!areRequiredRequestsSuccessful && showRequiredRequestsError && (	117	</InfoBar>
112	<InfoBar	118	)}
113	type="danger"	119	{!areRequiredRequestsSuccessful && showRequiredRequestsError && (
114	ctaLabel="Try again"	120	<InfoBar
115	ctaLoading={areRequiredRequestsLoading}	121	type="danger"
116	sticky	122	ctaLabel="Try again"
117	onClick={retryRequiredRequests}	123	ctaLoading={areRequiredRequestsLoading}
118	>	124	sticky
119	<span className="mdi mdi-flash" />	125	onClick={retryRequiredRequests}
120	{intl.formatMessage(messages.requiredRequestsFailed)}	126	>
121	</InfoBar>	127	<span className="mdi mdi-flash" />
122	)}	128	{intl.formatMessage(messages.requiredRequestsFailed)}
123	{showServicesUpdatedInfoBar && (	129	</InfoBar>
124	<InfoBar	130	)}
125	type="primary"	131	{showServicesUpdatedInfoBar && (
126	ctaLabel={intl.formatMessage(messages.buttonReloadServices)}	132	<InfoBar
127	onClick={reloadServicesAfterUpdate}	133	type="primary"
128	sticky	134	ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
129	>	135	onClick={reloadServicesAfterUpdate}
130	<span className="mdi mdi-power-plug" />	136	sticky
131	{intl.formatMessage(messages.servicesUpdated)}	137	>
132	</InfoBar>	138	<span className="mdi mdi-power-plug" />
133	)}	139	{intl.formatMessage(messages.servicesUpdated)}
134	{appUpdateIsDownloaded && (	140	</InfoBar>
135	<InfoBar	141	)}
136	type="primary"	142	{appUpdateIsDownloaded && (
137	ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}	143	<InfoBar
138	onClick={installAppUpdate}	144	type="primary"
139	sticky	145	ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
140	>	146	onClick={installAppUpdate}
141	<span className="mdi mdi-information" />	147	sticky
142	{intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">	148	>
143	<u>{intl.formatMessage(messages.changelog)}</u>	149	<span className="mdi mdi-information" />
144	</a>	150	{intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
145	</InfoBar>	151	<u>{intl.formatMessage(messages.changelog)}</u>
146	)}	152	</a>
147	{services}	153	</InfoBar>
		154	)}
		155	{services}
		156	</div>
148	</div>	157	</div>
149	</div>	158	</div>
150	{children}	159	{children}