diff options
Diffstat (limited to 'src/features/announcements/components/AnnouncementScreen.js')
-rw-r--r-- | src/features/announcements/components/AnnouncementScreen.js | 152 |
1 files changed, 130 insertions, 22 deletions
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js index 5b3e7aeaa..2d5efc396 100644 --- a/src/features/announcements/components/AnnouncementScreen.js +++ b/src/features/announcements/components/AnnouncementScreen.js | |||
@@ -4,27 +4,29 @@ import PropTypes from 'prop-types'; | |||
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, intlShape } from 'react-intl'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { themeSidebarWidth } from '../../../../packages/theme/lib/themes/legacy'; | 7 | import { Button } from '@meetfranz/forms'; |
8 | |||
8 | import { announcementsStore } from '../index'; | 9 | import { announcementsStore } from '../index'; |
10 | import UIStore from '../../../stores/UIStore'; | ||
9 | 11 | ||
10 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
11 | headline: { | 13 | headline: { |
12 | id: 'feature.announcements.headline', | 14 | id: 'feature.announcements.changelog.headline', |
13 | defaultMessage: '!!!What\'s new in Franz {version}?', | 15 | defaultMessage: '!!!Changes in Franz {version}', |
14 | }, | 16 | }, |
15 | }); | 17 | }); |
16 | 18 | ||
19 | const smallScreen = '1000px'; | ||
20 | |||
17 | const styles = theme => ({ | 21 | const styles = theme => ({ |
18 | container: { | 22 | container: { |
19 | background: theme.colorBackground, | 23 | background: theme.colorBackground, |
20 | position: 'absolute', | 24 | position: 'absolute', |
21 | top: 0, | 25 | top: 0, |
22 | zIndex: 140, | 26 | zIndex: 140, |
23 | width: `calc(100% - ${themeSidebarWidth})`, | 27 | width: '100%', |
24 | display: 'flex', | 28 | height: '100%', |
25 | 'flex-direction': 'column', | 29 | overflowY: 'auto', |
26 | 'align-items': 'center', | ||
27 | 'justify-content': 'center', | ||
28 | }, | 30 | }, |
29 | headline: { | 31 | headline: { |
30 | color: theme.colorHeadline, | 32 | color: theme.colorHeadline, |
@@ -33,7 +35,76 @@ const styles = theme => ({ | |||
33 | 'text-align': 'center', | 35 | 'text-align': 'center', |
34 | 'line-height': '1.3em', | 36 | 'line-height': '1.3em', |
35 | }, | 37 | }, |
36 | body: { | 38 | announcement: { |
39 | height: '100vh', | ||
40 | display: 'flex', | ||
41 | flexDirection: 'column', | ||
42 | justifyContent: 'center', | ||
43 | }, | ||
44 | main: { | ||
45 | flexGrow: 1, | ||
46 | '& h1': { | ||
47 | marginTop: 40, | ||
48 | fontSize: 50, | ||
49 | color: theme.styleTypes.primary.accent, | ||
50 | textAlign: 'center', | ||
51 | [`@media(min-width: ${smallScreen})`]: { | ||
52 | marginTop: 75, | ||
53 | }, | ||
54 | }, | ||
55 | '& h2': { | ||
56 | fontSize: 24, | ||
57 | fontWeight: 300, | ||
58 | color: theme.colorText, | ||
59 | textAlign: 'center', | ||
60 | }, | ||
61 | }, | ||
62 | mainBody: { | ||
63 | display: 'flex', | ||
64 | flexDirection: 'column', | ||
65 | alignItems: 'center', | ||
66 | width: 'calc(100% - 80px)', | ||
67 | height: 'auto', | ||
68 | margin: '0 auto', | ||
69 | [`@media(min-width: ${smallScreen})`]: { | ||
70 | flexDirection: 'row', | ||
71 | justifyContent: 'center', | ||
72 | }, | ||
73 | }, | ||
74 | mainImage: { | ||
75 | minWidth: 250, | ||
76 | maxWidth: 400, | ||
77 | margin: '0 auto', | ||
78 | marginBottom: 40, | ||
79 | '& img': { | ||
80 | width: '100%', | ||
81 | }, | ||
82 | [`@media(min-width: ${smallScreen})`]: { | ||
83 | margin: 0, | ||
84 | }, | ||
85 | }, | ||
86 | mainText: { | ||
87 | height: 'auto', | ||
88 | maxWidth: 600, | ||
89 | textAlign: 'center', | ||
90 | '& p': { | ||
91 | lineHeight: '1.5em', | ||
92 | }, | ||
93 | [`@media(min-width: ${smallScreen})`]: { | ||
94 | textAlign: 'left', | ||
95 | }, | ||
96 | }, | ||
97 | mainCtaButton: { | ||
98 | textAlign: 'center', | ||
99 | marginTop: 40, | ||
100 | [`@media(min-width: ${smallScreen})`]: { | ||
101 | textAlign: 'left', | ||
102 | }, | ||
103 | }, | ||
104 | spotlight: { | ||
105 | height: 'auto', | ||
106 | }, | ||
107 | changelog: { | ||
37 | '& h3': { | 108 | '& h3': { |
38 | fontSize: '24px', | 109 | fontSize: '24px', |
39 | margin: '1.5em 0 1em 0', | 110 | margin: '1.5em 0 1em 0', |
@@ -45,10 +116,13 @@ const styles = theme => ({ | |||
45 | }); | 116 | }); |
46 | 117 | ||
47 | 118 | ||
48 | @inject('actions') @injectSheet(styles) @observer | 119 | @inject('stores', 'actions') @injectSheet(styles) @observer |
49 | class AnnouncementScreen extends Component { | 120 | class AnnouncementScreen extends Component { |
50 | static propTypes = { | 121 | static propTypes = { |
51 | classes: PropTypes.object.isRequired, | 122 | classes: PropTypes.object.isRequired, |
123 | stores: PropTypes.shape({ | ||
124 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
125 | }).isRequired, | ||
52 | }; | 126 | }; |
53 | 127 | ||
54 | static contextTypes = { | 128 | static contextTypes = { |
@@ -56,21 +130,55 @@ class AnnouncementScreen extends Component { | |||
56 | }; | 130 | }; |
57 | 131 | ||
58 | render() { | 132 | render() { |
59 | const { classes } = this.props; | 133 | const { classes, stores } = this.props; |
60 | const { intl } = this.context; | 134 | const { intl } = this.context; |
135 | const { changelog, announcement } = announcementsStore; | ||
136 | const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light'; | ||
61 | return ( | 137 | return ( |
62 | <div className={`${classes.container}`}> | 138 | <div className={`${classes.container}`}> |
63 | <h1 className={classes.headline}> | 139 | <div className={classes.announcement}> |
64 | {intl.formatMessage(messages.headline, { | 140 | <div className={classes.main}> |
65 | version: announcementsStore.currentVersion, | 141 | <h1>{announcement.main.headline}</h1> |
66 | })} | 142 | <h2>{announcement.main.subHeadline}</h2> |
67 | </h1> | 143 | <div className={classes.mainBody}> |
68 | <div | 144 | <div className={classes.mainImage}> |
69 | className={classes.body} | 145 | <img |
70 | dangerouslySetInnerHTML={{ | 146 | src={announcement.main.image[themeImage]} |
71 | __html: marked(announcementsStore.announcement, { sanitize: true }), | 147 | alt="" |
72 | }} | 148 | /> |
73 | /> | 149 | </div> |
150 | <div className={classes.mainText}> | ||
151 | <p | ||
152 | dangerouslySetInnerHTML={{ | ||
153 | __html: marked(announcement.main.text,{ sanitize: true }), | ||
154 | }} | ||
155 | /> | ||
156 | <div className={classes.mainCtaButton}> | ||
157 | <Button label={announcement.main.cta.label} /> | ||
158 | </div> | ||
159 | </div> | ||
160 | </div> | ||
161 | </div> | ||
162 | {announcement.spotlight && ( | ||
163 | <div className={classes.spotlight}> | ||
164 | <h2>{announcement.spotlight.title}</h2> | ||
165 | </div> | ||
166 | )} | ||
167 | </div> | ||
168 | {changelog && ( | ||
169 | <div className={classes.changelog}> | ||
170 | <h1 className={classes.headline}> | ||
171 | {intl.formatMessage(messages.headline, { | ||
172 | version: announcementsStore.currentVersion, | ||
173 | })} | ||
174 | </h1> | ||
175 | <div | ||
176 | dangerouslySetInnerHTML={{ | ||
177 | __html: marked(changelog, { sanitize: true }), | ||
178 | }} | ||
179 | /> | ||
180 | </div> | ||
181 | )} | ||
74 | </div> | 182 | </div> |
75 | ); | 183 | ); |
76 | } | 184 | } |