diff options
Diffstat (limited to 'src/components/layout')
-rw-r--r-- | src/components/layout/AppLayout.js | 122 |
1 files changed, 64 insertions, 58 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 20dc2f764..686476317 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 { isMac } from '../../environment'; | ||
11 | |||
9 | function createMarkup(HTMLString) { | 12 | function createMarkup(HTMLString) { |
10 | return { __html: HTMLString }; | 13 | return { __html: HTMLString }; |
11 | } | 14 | } |
@@ -87,64 +90,67 @@ export default class AppLayout extends Component { | |||
87 | return ( | 90 | return ( |
88 | <div> | 91 | <div> |
89 | <div className="app"> | 92 | <div className="app"> |
90 | {sidebar} | 93 | {!isMac && <TitleBar menu={window.franz.menu.template} icon={'assets/images/logo.svg'} />} |
91 | <div className="app__service"> | 94 | <div className="app__content"> |
92 | {news.length > 0 && news.map(item => ( | 95 | {sidebar} |
93 | <InfoBar | 96 | <div className="app__service"> |
94 | key={item.id} | 97 | {news.length > 0 && news.map(item => ( |
95 | position="top" | 98 | <InfoBar |
96 | type={item.type} | 99 | key={item.id} |
97 | sticky={item.sticky} | 100 | position="top" |
98 | onHide={() => removeNewsItem({ newsId: item.id })} | 101 | type={item.type} |
99 | > | 102 | sticky={item.sticky} |
100 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> | 103 | onHide={() => removeNewsItem({ newsId: item.id })} |
101 | </InfoBar> | 104 | > |
102 | ))} | 105 | <span dangerouslySetInnerHTML={createMarkup(item.message)} /> |
103 | {!isOnline && ( | 106 | </InfoBar> |
104 | <InfoBar | 107 | ))} |
105 | type="danger" | 108 | {!isOnline && ( |
106 | > | 109 | <InfoBar |
107 | <span className="mdi mdi-flash" /> | 110 | type="danger" |
108 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} | 111 | > |
109 | </InfoBar> | 112 | <span className="mdi mdi-flash" /> |
110 | )} | 113 | {intl.formatMessage(globalMessages.notConnectedToTheInternet)} |
111 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | 114 | </InfoBar> |
112 | <InfoBar | 115 | )} |
113 | type="danger" | 116 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( |
114 | ctaLabel="Try again" | 117 | <InfoBar |
115 | ctaLoading={areRequiredRequestsLoading} | 118 | type="danger" |
116 | sticky | 119 | ctaLabel="Try again" |
117 | onClick={retryRequiredRequests} | 120 | ctaLoading={areRequiredRequestsLoading} |
118 | > | 121 | sticky |
119 | <span className="mdi mdi-flash" /> | 122 | onClick={retryRequiredRequests} |
120 | {intl.formatMessage(messages.requiredRequestsFailed)} | 123 | > |
121 | </InfoBar> | 124 | <span className="mdi mdi-flash" /> |
122 | )} | 125 | {intl.formatMessage(messages.requiredRequestsFailed)} |
123 | {showServicesUpdatedInfoBar && ( | 126 | </InfoBar> |
124 | <InfoBar | 127 | )} |
125 | type="primary" | 128 | {showServicesUpdatedInfoBar && ( |
126 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} | 129 | <InfoBar |
127 | onClick={reloadServicesAfterUpdate} | 130 | type="primary" |
128 | sticky | 131 | ctaLabel={intl.formatMessage(messages.buttonReloadServices)} |
129 | > | 132 | onClick={reloadServicesAfterUpdate} |
130 | <span className="mdi mdi-power-plug" /> | 133 | sticky |
131 | {intl.formatMessage(messages.servicesUpdated)} | 134 | > |
132 | </InfoBar> | 135 | <span className="mdi mdi-power-plug" /> |
133 | )} | 136 | {intl.formatMessage(messages.servicesUpdated)} |
134 | {appUpdateIsDownloaded && ( | 137 | </InfoBar> |
135 | <InfoBar | 138 | )} |
136 | type="primary" | 139 | {appUpdateIsDownloaded && ( |
137 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} | 140 | <InfoBar |
138 | onClick={installAppUpdate} | 141 | type="primary" |
139 | sticky | 142 | ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)} |
140 | > | 143 | onClick={installAppUpdate} |
141 | <span className="mdi mdi-information" /> | 144 | sticky |
142 | {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank"> | 145 | > |
143 | <u>{intl.formatMessage(messages.changelog)}</u> | 146 | <span className="mdi mdi-information" /> |
144 | </a> | 147 | {intl.formatMessage(messages.updateAvailable)} <a href="https://meetfranz.com/changelog" target="_blank"> |
145 | </InfoBar> | 148 | <u>{intl.formatMessage(messages.changelog)}</u> |
146 | )} | 149 | </a> |
147 | {services} | 150 | </InfoBar> |
151 | )} | ||
152 | {services} | ||
153 | </div> | ||
148 | </div> | 154 | </div> |
149 | </div> | 155 | </div> |
150 | {children} | 156 | {children} |