summaryrefslogtreecommitdiffstats
path: root/src/features/announcements/components/AnnouncementScreen.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/features/announcements/components/AnnouncementScreen.js')
-rw-r--r--src/features/announcements/components/AnnouncementScreen.js300
1 files changed, 0 insertions, 300 deletions
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
deleted file mode 100644
index 315843db3..000000000
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ /dev/null
@@ -1,300 +0,0 @@
1import React, { Component } from 'react';
2import marked from 'marked';
3import PropTypes from 'prop-types';
4import { inject, observer } from 'mobx-react';
5import { defineMessages, intlShape } from 'react-intl';
6import injectSheet from 'react-jss';
7import { Button } from '@meetfranz/forms';
8
9import { announcementsStore } from '../index';
10import UIStore from '../../../stores/UIStore';
11import AppStore from '../../../stores/AppStore';
12
13const renderer = new marked.Renderer();
14
15renderer.link = (href, title, text) => `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
16
17const markedOptions = { sanitize: true, renderer };
18
19const messages = defineMessages({
20 headline: {
21 id: 'feature.announcements.changelog.headline',
22 defaultMessage: '!!!Changes in Ferdi {version}',
23 },
24});
25
26const smallScreen = '1000px';
27
28const styles = (theme) => ({
29 container: {
30 background: theme.colorBackground,
31 position: 'relative',
32 top: 0,
33 zIndex: 140,
34 width: '100%',
35 height: '100%',
36 overflowY: 'auto',
37 },
38 headline: {
39 color: theme.colorHeadline,
40 margin: [25, 0, 40],
41 // 'max-width': 500,
42 'text-align': 'center',
43 'line-height': '1.3em',
44 },
45 announcement: {
46 height: 'auto',
47
48 [`@media(min-width: ${smallScreen})`]: {
49 display: 'flex',
50 flexDirection: 'column',
51 justifyContent: 'center',
52 height: '100vh',
53 },
54 },
55 main: {
56 display: 'flex',
57 flexDirection: 'column',
58 flexGrow: 1,
59 justifyContent: 'center',
60
61 '& h1': {
62 margin: [40, 0, 15],
63 fontSize: 70,
64 color: theme.styleTypes.primary.accent,
65 textAlign: 'center',
66
67 [`@media(min-width: ${smallScreen})`]: {
68 marginTop: 0,
69 },
70 },
71 '& h2': {
72 fontSize: 30,
73 fontWeight: 300,
74 color: theme.colorText,
75 textAlign: 'center',
76 marginBottom: 60,
77 },
78 },
79 mainBody: {
80 display: 'flex',
81 flexDirection: 'column',
82 alignItems: 'center',
83 width: 'calc(100% - 80px)',
84 height: 'auto',
85 margin: '0 auto',
86 [`@media(min-width: ${smallScreen})`]: {
87 flexDirection: 'row',
88 justifyContent: 'center',
89 },
90 },
91 mainImage: {
92 minWidth: 250,
93 maxWidth: 400,
94 margin: '0 auto',
95 marginBottom: 40,
96 '& img': {
97 width: '100%',
98 },
99 [`@media(min-width: ${smallScreen})`]: {
100 margin: 0,
101 },
102 },
103 mainText: {
104 height: 'auto',
105 maxWidth: 600,
106 textAlign: 'center',
107 '& p': {
108 lineHeight: '1.5em',
109 },
110 [`@media(min-width: ${smallScreen})`]: {
111 textAlign: 'left',
112 },
113 },
114 mainCtaButton: {
115 textAlign: 'center',
116 marginTop: 40,
117 [`@media(min-width: ${smallScreen})`]: {
118 textAlign: 'left',
119 },
120 },
121 spotlight: {
122 height: 'auto',
123 background: theme.announcements.spotlight.background,
124 padding: [40, 0],
125 marginTop: 80,
126 [`@media(min-width: ${smallScreen})`]: {
127 marginTop: 0,
128 justifyContent: 'center',
129 alignItems: 'flex-start',
130 display: 'flex',
131 flexDirection: 'row',
132 },
133 },
134 spotlightTopicContainer: {
135 textAlign: 'center',
136 marginBottom: 20,
137
138 [`@media(min-width: ${smallScreen})`]: {
139 marginBottom: 0,
140 minWidth: 250,
141 maxWidth: 330,
142 width: '100%',
143 textAlign: 'right',
144 marginRight: 60,
145 },
146 },
147 spotlightContentContainer: {
148 textAlign: 'center',
149 [`@media(min-width: ${smallScreen})`]: {
150 height: 'auto',
151 maxWidth: 600,
152 paddingRight: 40,
153 textAlign: 'left',
154 },
155 '& p': {
156 lineHeight: '1.5em',
157 },
158 },
159 spotlightTopic: {
160 fontSize: 20,
161 marginBottom: 5,
162 letterSpacing: 0,
163 fontWeight: 100,
164 },
165 spotlightSubject: {
166 fontSize: 20,
167 },
168 changelog: {
169 padding: [0, 60],
170 maxWidth: 700,
171 margin: [100, 'auto'],
172 height: 'auto',
173
174 '& h3': {
175 fontSize: '24px',
176 margin: '1.5em 0 1em 0',
177 },
178 '& li': {
179 marginBottom: '1em',
180 lineHeight: '1.4em',
181 },
182 '& div': {
183 height: 'auto',
184 },
185 },
186});
187
188@inject('stores', 'actions') @injectSheet(styles) @observer
189class AnnouncementScreen extends Component {
190 static propTypes = {
191 classes: PropTypes.object.isRequired,
192 stores: PropTypes.shape({
193 ui: PropTypes.instanceOf(UIStore).isRequired,
194 }).isRequired,
195 actions: PropTypes.shape({
196 app: PropTypes.instanceOf(AppStore).isRequired,
197 }).isRequired,
198 };
199
200 static contextTypes = {
201 intl: intlShape,
202 };
203
204 render() {
205 const { classes, stores, actions } = this.props;
206 const { intl } = this.context;
207 const { changelog, announcement } = announcementsStore;
208 const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light';
209 return (
210 <div className={classes.container}>
211 {announcement && (
212 <div className={classes.announcement}>
213 <div className={classes.main}>
214 <h1>{announcement.main.headline}</h1>
215 <h2>{announcement.main.subHeadline}</h2>
216 <div className={classes.mainBody}>
217 <div className={classes.mainImage}>
218 <img
219 src={announcement.main.image[themeImage]}
220 alt=""
221 />
222 </div>
223 <div className={classes.mainText}>
224 <div
225 dangerouslySetInnerHTML={{
226 __html: marked(announcement.main.text, markedOptions),
227 }}
228 />
229 {(announcement.main.cta.label || announcement.main.cta.href) && (
230 <div className={classes.mainCtaButton}>
231 <Button
232 label={announcement.main.cta.label}
233 onClick={() => {
234 const {
235 href,
236 } = announcement.main.cta;
237 if (announcement.main.cta.href.startsWith('http')) {
238 actions.app.openExternalUrl({ url: href });
239 } else {
240 window.location.href = `#${href}`;
241 }
242 }}
243 />
244 </div>
245 )}
246 </div>
247 </div>
248 </div>
249 {announcement.spotlight && (
250 <div className={classes.spotlight}>
251 <div className={classes.spotlightTopicContainer}>
252 <h2 className={classes.spotlightTopic}>{announcement.spotlight.title}</h2>
253 <h3 className={classes.spotlightSubject}>{announcement.spotlight.subject}</h3>
254 </div>
255 <div className={classes.spotlightContentContainer}>
256 <div
257 dangerouslySetInnerHTML={{
258 __html: marked(announcement.spotlight.text, markedOptions),
259 }}
260 />
261 <div className={classes.mainCtaButton}>
262 <Button
263 label={announcement.spotlight.cta.label}
264 onClick={() => {
265 const {
266 href,
267 } = announcement.spotlight.cta;
268 if (announcement.spotlight.cta.href.startsWith('http')) {
269 actions.app.openExternalUrl({ url: href });
270 } else {
271 window.location.href = `#${href}`;
272 }
273 }}
274 />
275 </div>
276 </div>
277 </div>
278 )}
279 </div>
280 )}
281 {changelog && (
282 <div className={classes.changelog}>
283 <h1 className={classes.headline}>
284 {intl.formatMessage(messages.headline, {
285 version: announcementsStore.targetVersion,
286 })}
287 </h1>
288 <div
289 dangerouslySetInnerHTML={{
290 __html: marked(changelog, markedOptions),
291 }}
292 />
293 </div>
294 )}
295 </div>
296 );
297 }
298}
299
300export default AnnouncementScreen;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-08-22 07:23:24 +0000