[WIP] incorporate electron-react-titlebar

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 (
       <div>
         <div className="app">
-          {sidebar}
-          <div className="app__service">
-            {news.length > 0 && news.map(item => (
-              <InfoBar
-                key={item.id}
-                position="top"
-                type={item.type}
-                sticky={item.sticky}
-                onHide={() => removeNewsItem({ newsId: item.id })}
-              >
-                <span dangerouslySetInnerHTML={createMarkup(item.message)} />
-              </InfoBar>
-            ))}
-            {!isOnline && (
-              <InfoBar
-                type="danger"
-              >
-                <span className="mdi mdi-flash" />
-                {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-              </InfoBar>
-            )}
-            {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-              <InfoBar
-                type="danger"
-                ctaLabel="Try again"
-                ctaLoading={areRequiredRequestsLoading}
-                sticky
-                onClick={retryRequiredRequests}
-              >
-                <span className="mdi mdi-flash" />
-                {intl.formatMessage(messages.requiredRequestsFailed)}
-              </InfoBar>
-            )}
-            {showServicesUpdatedInfoBar && (
-              <InfoBar
-                type="primary"
-                ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                onClick={reloadServicesAfterUpdate}
-                sticky
-              >
-                <span className="mdi mdi-power-plug" />
-                {intl.formatMessage(messages.servicesUpdated)}
-              </InfoBar>
-            )}
-            {appUpdateIsDownloaded && (
-              <InfoBar
-                type="primary"
-                ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
-                onClick={installAppUpdate}
-                sticky
-              >
-                <span className="mdi mdi-information" />
-                {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
-                  <u>{intl.formatMessage(messages.changelog)}</u>
-                </a>
-              </InfoBar>
-            )}
-            {services}
+          <TitleBar menu={window.franz.menu.template}>
+            <link rel="stylesheet" type="text/css" href={require.resolve('electron-react-titlebar/assets/style.css')} />
+          </TitleBar>
+          <div className="app__content">
+            {sidebar}
+            <div className="app__service">
+              {news.length > 0 && news.map(item => (
+                <InfoBar
+                  key={item.id}
+                  position="top"
+                  type={item.type}
+                  sticky={item.sticky}
+                  onHide={() => removeNewsItem({ newsId: item.id })}
+                >
+                  <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                </InfoBar>
+              ))}
+              {!isOnline && (
+                <InfoBar
+                  type="danger"
+                >
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+                </InfoBar>
+              )}
+              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+                <InfoBar
+                  type="danger"
+                  ctaLabel="Try again"
+                  ctaLoading={areRequiredRequestsLoading}
+                  sticky
+                  onClick={retryRequiredRequests}
+                >
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(messages.requiredRequestsFailed)}
+                </InfoBar>
+              )}
+              {showServicesUpdatedInfoBar && (
+                <InfoBar
+                  type="primary"
+                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                  onClick={reloadServicesAfterUpdate}
+                  sticky
+                >
+                  <span className="mdi mdi-power-plug" />
+                  {intl.formatMessage(messages.servicesUpdated)}
+                </InfoBar>
+              )}
+              {appUpdateIsDownloaded && (
+                <InfoBar
+                  type="primary"
+                  ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+                  onClick={installAppUpdate}
+                  sticky
+                >
+                  <span className="mdi mdi-information" />
+                  {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank">
+                    <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%;
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"