diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-07-10 14:43:24 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-07-10 14:43:24 +0200 |
commit | 53b8eb3a104c991a246db32c66a19e702594c901 (patch) | |
tree | 7af12f77c0f0dc75d546d90c036ad60490bd57f9 /src | |
parent | Merge branch 'release/5.2.0-beta.2' (diff) | |
download | ferdium-app-53b8eb3a104c991a246db32c66a19e702594c901.tar.gz ferdium-app-53b8eb3a104c991a246db32c66a19e702594c901.tar.zst ferdium-app-53b8eb3a104c991a246db32c66a19e702594c901.zip |
basic integration of todos as static sidebar
Diffstat (limited to 'src')
-rw-r--r-- | src/components/layout/AppLayout.js | 7 | ||||
-rw-r--r-- | src/containers/layout/AppLayoutContainer.js | 4 | ||||
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 41 | ||||
-rw-r--r-- | src/i18n/locales/defaultMessages.json | 12 | ||||
-rw-r--r-- | src/i18n/messages/src/components/layout/AppLayout.json | 12 | ||||
-rw-r--r-- | src/styles/layout.scss | 7 |
6 files changed, 67 insertions, 16 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 499bc097a..797db6eb5 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -17,6 +17,7 @@ import { isWindows } from '../../environment'; | |||
17 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; | 17 | import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator'; |
18 | import { workspaceStore } from '../../features/workspaces'; | 18 | import { workspaceStore } from '../../features/workspaces'; |
19 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; | 19 | import AppUpdateInfoBar from '../AppUpdateInfoBar'; |
20 | import TodosWebview from '../../features/todos/components/TodosWebview'; | ||
20 | 21 | ||
21 | function createMarkup(HTMLString) { | 22 | function createMarkup(HTMLString) { |
22 | return { __html: HTMLString }; | 23 | return { __html: HTMLString }; |
@@ -39,7 +40,8 @@ const messages = defineMessages({ | |||
39 | 40 | ||
40 | const styles = theme => ({ | 41 | const styles = theme => ({ |
41 | appContent: { | 42 | appContent: { |
42 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | 43 | // width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
44 | width: '100%', | ||
43 | transition: 'transform 0.5s ease', | 45 | transition: 'transform 0.5s ease', |
44 | transform() { | 46 | transform() { |
45 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; | 47 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; |
@@ -50,6 +52,7 @@ const styles = theme => ({ | |||
50 | @injectSheet(styles) @observer | 52 | @injectSheet(styles) @observer |
51 | class AppLayout extends Component { | 53 | class AppLayout extends Component { |
52 | static propTypes = { | 54 | static propTypes = { |
55 | authToken: PropTypes.string.isRequired, | ||
53 | classes: PropTypes.object.isRequired, | 56 | classes: PropTypes.object.isRequired, |
54 | isFullScreen: PropTypes.bool.isRequired, | 57 | isFullScreen: PropTypes.bool.isRequired, |
55 | sidebar: PropTypes.element.isRequired, | 58 | sidebar: PropTypes.element.isRequired, |
@@ -83,6 +86,7 @@ class AppLayout extends Component { | |||
83 | 86 | ||
84 | render() { | 87 | render() { |
85 | const { | 88 | const { |
89 | authToken, | ||
86 | classes, | 90 | classes, |
87 | isFullScreen, | 91 | isFullScreen, |
88 | workspacesDrawer, | 92 | workspacesDrawer, |
@@ -173,6 +177,7 @@ class AppLayout extends Component { | |||
173 | {children} | 177 | {children} |
174 | </div> | 178 | </div> |
175 | </div> | 179 | </div> |
180 | <TodosWebview authToken={authToken} /> | ||
176 | </div> | 181 | </div> |
177 | </div> | 182 | </div> |
178 | </ErrorBoundary> | 183 | </ErrorBoundary> |
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js index d290a6094..473280c54 100644 --- a/src/containers/layout/AppLayoutContainer.js +++ b/src/containers/layout/AppLayoutContainer.js | |||
@@ -12,6 +12,7 @@ import NewsStore from '../../stores/NewsStore'; | |||
12 | import SettingsStore from '../../stores/SettingsStore'; | 12 | import SettingsStore from '../../stores/SettingsStore'; |
13 | import RequestStore from '../../stores/RequestStore'; | 13 | import RequestStore from '../../stores/RequestStore'; |
14 | import GlobalErrorStore from '../../stores/GlobalErrorStore'; | 14 | import GlobalErrorStore from '../../stores/GlobalErrorStore'; |
15 | import UserStore from '../../stores/UserStore'; | ||
15 | 16 | ||
16 | import { oneOrManyChildElements } from '../../prop-types'; | 17 | import { oneOrManyChildElements } from '../../prop-types'; |
17 | import AppLayout from '../../components/layout/AppLayout'; | 18 | import AppLayout from '../../components/layout/AppLayout'; |
@@ -39,6 +40,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e | |||
39 | settings, | 40 | settings, |
40 | globalError, | 41 | globalError, |
41 | requests, | 42 | requests, |
43 | user, | ||
42 | } = this.props.stores; | 44 | } = this.props.stores; |
43 | 45 | ||
44 | const { | 46 | const { |
@@ -131,6 +133,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e | |||
131 | return ( | 133 | return ( |
132 | <ThemeProvider theme={ui.theme}> | 134 | <ThemeProvider theme={ui.theme}> |
133 | <AppLayout | 135 | <AppLayout |
136 | authToken={user.authToken} | ||
134 | isFullScreen={app.isFullScreen} | 137 | isFullScreen={app.isFullScreen} |
135 | isOnline={app.isOnline} | 138 | isOnline={app.isOnline} |
136 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} | 139 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} |
@@ -169,6 +172,7 @@ AppLayoutContainer.wrappedComponent.propTypes = { | |||
169 | settings: PropTypes.instanceOf(SettingsStore).isRequired, | 172 | settings: PropTypes.instanceOf(SettingsStore).isRequired, |
170 | requests: PropTypes.instanceOf(RequestStore).isRequired, | 173 | requests: PropTypes.instanceOf(RequestStore).isRequired, |
171 | globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired, | 174 | globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired, |
175 | user: PropTypes.instanceOf(UserStore).isRequired, | ||
172 | }).isRequired, | 176 | }).isRequired, |
173 | actions: PropTypes.shape({ | 177 | actions: PropTypes.shape({ |
174 | service: PropTypes.shape({ | 178 | service: PropTypes.shape({ |
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js new file mode 100644 index 000000000..54208d7ad --- /dev/null +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -0,0 +1,41 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import Webview from 'react-electron-web-view'; | ||
6 | |||
7 | const styles = theme => ({ | ||
8 | root: { | ||
9 | background: theme.colorBackground, | ||
10 | height: '100%', | ||
11 | width: 300, | ||
12 | position: 'absolute', | ||
13 | top: 0, | ||
14 | right: 0, | ||
15 | }, | ||
16 | webview: { | ||
17 | height: '100%', | ||
18 | }, | ||
19 | }); | ||
20 | |||
21 | @injectSheet(styles) @observer | ||
22 | class TodosWebview extends Component { | ||
23 | static propTypes = { | ||
24 | classes: PropTypes.object.isRequired, | ||
25 | authToken: PropTypes.string.isRequired, | ||
26 | }; | ||
27 | |||
28 | render() { | ||
29 | const { authToken, classes } = this.props; | ||
30 | return ( | ||
31 | <div className={classes.root}> | ||
32 | <Webview | ||
33 | className={classes.webview} | ||
34 | src={`http://localhost:4000?authToken=${authToken}`} | ||
35 | /> | ||
36 | </div> | ||
37 | ); | ||
38 | } | ||
39 | } | ||
40 | |||
41 | export default TodosWebview; | ||
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index d517b456b..1c7f5a7dd 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -669,39 +669,39 @@ | |||
669 | "defaultMessage": "!!!Your services have been updated.", | 669 | "defaultMessage": "!!!Your services have been updated.", |
670 | "end": { | 670 | "end": { |
671 | "column": 3, | 671 | "column": 3, |
672 | "line": 29 | 672 | "line": 30 |
673 | }, | 673 | }, |
674 | "file": "src/components/layout/AppLayout.js", | 674 | "file": "src/components/layout/AppLayout.js", |
675 | "id": "infobar.servicesUpdated", | 675 | "id": "infobar.servicesUpdated", |
676 | "start": { | 676 | "start": { |
677 | "column": 19, | 677 | "column": 19, |
678 | "line": 26 | 678 | "line": 27 |
679 | } | 679 | } |
680 | }, | 680 | }, |
681 | { | 681 | { |
682 | "defaultMessage": "!!!Reload services", | 682 | "defaultMessage": "!!!Reload services", |
683 | "end": { | 683 | "end": { |
684 | "column": 3, | 684 | "column": 3, |
685 | "line": 33 | 685 | "line": 34 |
686 | }, | 686 | }, |
687 | "file": "src/components/layout/AppLayout.js", | 687 | "file": "src/components/layout/AppLayout.js", |
688 | "id": "infobar.buttonReloadServices", | 688 | "id": "infobar.buttonReloadServices", |
689 | "start": { | 689 | "start": { |
690 | "column": 24, | 690 | "column": 24, |
691 | "line": 30 | 691 | "line": 31 |
692 | } | 692 | } |
693 | }, | 693 | }, |
694 | { | 694 | { |
695 | "defaultMessage": "!!!Could not load services and user information", | 695 | "defaultMessage": "!!!Could not load services and user information", |
696 | "end": { | 696 | "end": { |
697 | "column": 3, | 697 | "column": 3, |
698 | "line": 37 | 698 | "line": 38 |
699 | }, | 699 | }, |
700 | "file": "src/components/layout/AppLayout.js", | 700 | "file": "src/components/layout/AppLayout.js", |
701 | "id": "infobar.requiredRequestsFailed", | 701 | "id": "infobar.requiredRequestsFailed", |
702 | "start": { | 702 | "start": { |
703 | "column": 26, | 703 | "column": 26, |
704 | "line": 34 | 704 | "line": 35 |
705 | } | 705 | } |
706 | } | 706 | } |
707 | ], | 707 | ], |
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json index 190c5dff7..b71889155 100644 --- a/src/i18n/messages/src/components/layout/AppLayout.json +++ b/src/i18n/messages/src/components/layout/AppLayout.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Your services have been updated.", | 4 | "defaultMessage": "!!!Your services have been updated.", |
5 | "file": "src/components/layout/AppLayout.js", | 5 | "file": "src/components/layout/AppLayout.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 26, | 7 | "line": 27, |
8 | "column": 19 | 8 | "column": 19 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 29, | 11 | "line": 30, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!Reload services", | 17 | "defaultMessage": "!!!Reload services", |
18 | "file": "src/components/layout/AppLayout.js", | 18 | "file": "src/components/layout/AppLayout.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 30, | 20 | "line": 31, |
21 | "column": 24 | 21 | "column": 24 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 33, | 24 | "line": 34, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Could not load services and user information", | 30 | "defaultMessage": "!!!Could not load services and user information", |
31 | "file": "src/components/layout/AppLayout.js", | 31 | "file": "src/components/layout/AppLayout.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 34, | 33 | "line": 35, |
34 | "column": 26 | 34 | "column": 26 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 37, | 37 | "line": 38, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | } | 40 | } |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index e858b7904..c9cc94e15 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -33,10 +33,11 @@ html { overflow: hidden; } | |||
33 | } | 33 | } |
34 | 34 | ||
35 | .app { | 35 | .app { |
36 | display: flex; | 36 | //display: flex; |
37 | flex-direction: column; | ||
38 | 37 | ||
39 | .app__content { display: flex; } | 38 | .app__content { |
39 | display: flex; | ||
40 | } | ||
40 | 41 | ||
41 | .app__service { | 42 | .app__service { |
42 | position: relative; | 43 | position: relative; |