diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 12:53:16 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 12:53:16 +0200 |
commit | ca9d5863f9067f2a32498da763cd536e0bcc5c77 (patch) | |
tree | 30d0f41f9db7c499cc3e1f2f1e39004294be7f80 /src/features/announcements/components | |
parent | merge-in workspace feature (diff) | |
download | ferdium-app-ca9d5863f9067f2a32498da763cd536e0bcc5c77.tar.gz ferdium-app-ca9d5863f9067f2a32498da763cd536e0bcc5c77.tar.zst ferdium-app-ca9d5863f9067f2a32498da763cd536e0bcc5c77.zip |
refactor announcements to newest feature pattern
Diffstat (limited to 'src/features/announcements/components')
-rw-r--r-- | src/features/announcements/components/AnnouncementScreen.js | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js new file mode 100644 index 000000000..5b3e7aeaa --- /dev/null +++ b/src/features/announcements/components/AnnouncementScreen.js | |||
@@ -0,0 +1,79 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import marked from 'marked'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { inject, observer } from 'mobx-react'; | ||
5 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | import injectSheet from 'react-jss'; | ||
7 | import { themeSidebarWidth } from '../../../../packages/theme/lib/themes/legacy'; | ||
8 | import { announcementsStore } from '../index'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | headline: { | ||
12 | id: 'feature.announcements.headline', | ||
13 | defaultMessage: '!!!What\'s new in Franz {version}?', | ||
14 | }, | ||
15 | }); | ||
16 | |||
17 | const styles = theme => ({ | ||
18 | container: { | ||
19 | background: theme.colorBackground, | ||
20 | position: 'absolute', | ||
21 | top: 0, | ||
22 | zIndex: 140, | ||
23 | width: `calc(100% - ${themeSidebarWidth})`, | ||
24 | display: 'flex', | ||
25 | 'flex-direction': 'column', | ||
26 | 'align-items': 'center', | ||
27 | 'justify-content': 'center', | ||
28 | }, | ||
29 | headline: { | ||
30 | color: theme.colorHeadline, | ||
31 | margin: [25, 0, 40], | ||
32 | 'max-width': 500, | ||
33 | 'text-align': 'center', | ||
34 | 'line-height': '1.3em', | ||
35 | }, | ||
36 | body: { | ||
37 | '& h3': { | ||
38 | fontSize: '24px', | ||
39 | margin: '1.5em 0 1em 0', | ||
40 | }, | ||
41 | '& li': { | ||
42 | marginBottom: '1em', | ||
43 | }, | ||
44 | }, | ||
45 | }); | ||
46 | |||
47 | |||
48 | @inject('actions') @injectSheet(styles) @observer | ||
49 | class AnnouncementScreen extends Component { | ||
50 | static propTypes = { | ||
51 | classes: PropTypes.object.isRequired, | ||
52 | }; | ||
53 | |||
54 | static contextTypes = { | ||
55 | intl: intlShape, | ||
56 | }; | ||
57 | |||
58 | render() { | ||
59 | const { classes } = this.props; | ||
60 | const { intl } = this.context; | ||
61 | return ( | ||
62 | <div className={`${classes.container}`}> | ||
63 | <h1 className={classes.headline}> | ||
64 | {intl.formatMessage(messages.headline, { | ||
65 | version: announcementsStore.currentVersion, | ||
66 | })} | ||
67 | </h1> | ||
68 | <div | ||
69 | className={classes.body} | ||
70 | dangerouslySetInnerHTML={{ | ||
71 | __html: marked(announcementsStore.announcement, { sanitize: true }), | ||
72 | }} | ||
73 | /> | ||
74 | </div> | ||
75 | ); | ||
76 | } | ||
77 | } | ||
78 | |||
79 | export default AnnouncementScreen; | ||