diff options
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/components | |
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 |
[WIP] incorporate electron-react-titlebar
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/layout/AppLayout.js | 123 |
1 files changed, 65 insertions, 58 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'; | |||
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} |