diff options
author | 2019-08-02 11:41:51 +0200 | |
---|---|---|
committer | 2019-08-02 11:41:51 +0200 | |
commit | 6297d46f370092598d2ebb973bb69f2c368d7904 (patch) | |
tree | 52bdd4885537ca2fb20be32b2db9c8c4dc95f908 /src/features | |
parent | Add separator to todos panel (diff) | |
download | ferdium-app-6297d46f370092598d2ebb973bb69f2c368d7904.tar.gz ferdium-app-6297d46f370092598d2ebb973bb69f2c368d7904.tar.zst ferdium-app-6297d46f370092598d2ebb973bb69f2c368d7904.zip |
Add option to toggle the Todos panel
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/todos/actions.js | 1 | ||||
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 56 | ||||
-rw-r--r-- | src/features/todos/containers/TodosScreen.js | 2 | ||||
-rw-r--r-- | src/features/todos/index.js | 1 | ||||
-rw-r--r-- | src/features/todos/store.js | 15 |
5 files changed, 72 insertions, 3 deletions
diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js index a6090a259..dc63d5fcd 100644 --- a/src/features/todos/actions.js +++ b/src/features/todos/actions.js | |||
@@ -5,6 +5,7 @@ export const todoActions = createActionsFromDefinitions({ | |||
5 | resize: { | 5 | resize: { |
6 | width: PropTypes.number.isRequired, | 6 | width: PropTypes.number.isRequired, |
7 | }, | 7 | }, |
8 | toggleTodosPanel: {}, | ||
8 | setTodosWebview: { | 9 | setTodosWebview: { |
9 | webview: PropTypes.instanceOf(Element).isRequired, | 10 | webview: PropTypes.instanceOf(Element).isRequired, |
10 | }, | 11 | }, |
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index bc32ae728..819e599ca 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -3,16 +3,31 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import Webview from 'react-electron-web-view'; | 5 | import Webview from 'react-electron-web-view'; |
6 | import { Icon } from '@meetfranz/ui'; | ||
6 | import * as environment from '../../../environment'; | 7 | import * as environment from '../../../environment'; |
7 | 8 | ||
9 | const TOGGLE_SIZE = 45; | ||
10 | |||
8 | const styles = theme => ({ | 11 | const styles = theme => ({ |
9 | root: { | 12 | root: { |
10 | background: theme.colorBackground, | 13 | background: theme.colorBackground, |
11 | position: 'relative', | 14 | position: 'relative', |
12 | borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor], | 15 | borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor], |
16 | zIndex: 300, | ||
17 | |||
18 | transition: 'all 0.5s', | ||
19 | transform: props => `translateX(${props.isVisible ? 0 : props.width}px)`, | ||
20 | |||
21 | '&:hover $toggleTodosButton': { | ||
22 | opacity: 1, | ||
23 | }, | ||
13 | }, | 24 | }, |
14 | webview: { | 25 | webview: { |
15 | height: '100%', | 26 | height: '100%', |
27 | |||
28 | '& webview': { | ||
29 | height: '100%', | ||
30 | }, | ||
16 | }, | 31 | }, |
17 | resizeHandler: { | 32 | resizeHandler: { |
18 | position: 'absolute', | 33 | position: 'absolute', |
@@ -29,6 +44,31 @@ const styles = theme => ({ | |||
29 | zIndex: 400, | 44 | zIndex: 400, |
30 | background: theme.todos.dragIndicator.background, | 45 | background: theme.todos.dragIndicator.background, |
31 | }, | 46 | }, |
47 | toggleTodosButton: { | ||
48 | width: TOGGLE_SIZE, | ||
49 | height: TOGGLE_SIZE, | ||
50 | background: theme.todos.toggleButton.background, | ||
51 | position: 'absolute', | ||
52 | bottom: 80, | ||
53 | right: props => (props.width + (props.isVisible ? -TOGGLE_SIZE / 2 : 0)), | ||
54 | borderRadius: TOGGLE_SIZE / 2, | ||
55 | opacity: props => (props.isVisible ? 0 : 1), | ||
56 | transition: 'all 0.5s', | ||
57 | zIndex: 600, | ||
58 | display: 'flex', | ||
59 | alignItems: 'center', | ||
60 | justifyContent: 'center', | ||
61 | boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor], | ||
62 | // border: [1, 'solid', theme.todos.toggleButton.borderColor], | ||
63 | |||
64 | borderTopRightRadius: props => (props.isVisible ? null : 0), | ||
65 | borderBottomRightRadius: props => (props.isVisible ? null : 0), | ||
66 | |||
67 | '& svg': { | ||
68 | fill: theme.todos.toggleButton.textColor, | ||
69 | transition: 'all 0.5s', | ||
70 | }, | ||
71 | }, | ||
32 | }); | 72 | }); |
33 | 73 | ||
34 | @injectSheet(styles) @observer | 74 | @injectSheet(styles) @observer |
@@ -36,6 +76,8 @@ class TodosWebview extends Component { | |||
36 | static propTypes = { | 76 | static propTypes = { |
37 | classes: PropTypes.object.isRequired, | 77 | classes: PropTypes.object.isRequired, |
38 | authToken: PropTypes.string.isRequired, | 78 | authToken: PropTypes.string.isRequired, |
79 | isVisible: PropTypes.bool.isRequired, | ||
80 | togglePanel: PropTypes.func.isRequired, | ||
39 | handleClientMessage: PropTypes.func.isRequired, | 81 | handleClientMessage: PropTypes.func.isRequired, |
40 | setTodosWebview: PropTypes.func.isRequired, | 82 | setTodosWebview: PropTypes.func.isRequired, |
41 | resize: PropTypes.func.isRequired, | 83 | resize: PropTypes.func.isRequired, |
@@ -123,16 +165,26 @@ class TodosWebview extends Component { | |||
123 | } | 165 | } |
124 | 166 | ||
125 | render() { | 167 | render() { |
126 | const { authToken, classes } = this.props; | 168 | const { |
169 | authToken, classes, isVisible, togglePanel, | ||
170 | } = this.props; | ||
127 | const { width, delta, isDragging } = this.state; | 171 | const { width, delta, isDragging } = this.state; |
172 | |||
128 | return ( | 173 | return ( |
129 | <> | 174 | <> |
130 | <div | 175 | <div |
131 | className={classes.root} | 176 | className={classes.root} |
132 | style={{ width }} | 177 | style={{ width: isVisible ? width : 0 }} |
133 | onMouseUp={() => this.stopResize()} | 178 | onMouseUp={() => this.stopResize()} |
134 | ref={(node) => { this.node = node; }} | 179 | ref={(node) => { this.node = node; }} |
135 | > | 180 | > |
181 | <button | ||
182 | onClick={() => togglePanel()} | ||
183 | className={classes.toggleTodosButton} | ||
184 | type="button" | ||
185 | > | ||
186 | <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} /> | ||
187 | </button> | ||
136 | <div | 188 | <div |
137 | className={classes.resizeHandler} | 189 | className={classes.resizeHandler} |
138 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad | 190 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad |
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js index 2b81bd728..48acd19f4 100644 --- a/src/features/todos/containers/TodosScreen.js +++ b/src/features/todos/containers/TodosScreen.js | |||
@@ -27,6 +27,8 @@ class TodosScreen extends Component { | |||
27 | <ErrorBoundary> | 27 | <ErrorBoundary> |
28 | <TodosWebview | 28 | <TodosWebview |
29 | authToken={stores.user.authToken} | 29 | authToken={stores.user.authToken} |
30 | isVisible={todosStore.isTodosPanelVisible} | ||
31 | togglePanel={todoActions.toggleTodosPanel} | ||
30 | handleClientMessage={todoActions.handleClientMessage} | 32 | handleClientMessage={todoActions.handleClientMessage} |
31 | setTodosWebview={webview => todoActions.setTodosWebview({ webview })} | 33 | setTodosWebview={webview => todoActions.setTodosWebview({ webview })} |
32 | width={todosStore.width} | 34 | width={todosStore.width} |
diff --git a/src/features/todos/index.js b/src/features/todos/index.js index f741561d6..00b165cc5 100644 --- a/src/features/todos/index.js +++ b/src/features/todos/index.js | |||
@@ -7,6 +7,7 @@ export const GA_CATEGORY_TODOS = 'Todos'; | |||
7 | 7 | ||
8 | export const DEFAULT_TODOS_WIDTH = 300; | 8 | export const DEFAULT_TODOS_WIDTH = 300; |
9 | export const TODOS_MIN_WIDTH = 200; | 9 | export const TODOS_MIN_WIDTH = 200; |
10 | export const DEFAULT_TODOS_VISIBLE = true; | ||
10 | 11 | ||
11 | export const todosStore = new TodoStore(); | 12 | export const todosStore = new TodoStore(); |
12 | 13 | ||
diff --git a/src/features/todos/store.js b/src/features/todos/store.js index cd9c8e5f6..79c218b65 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js | |||
@@ -9,7 +9,7 @@ import { todoActions } from './actions'; | |||
9 | import { FeatureStore } from '../utils/FeatureStore'; | 9 | import { FeatureStore } from '../utils/FeatureStore'; |
10 | import { createReactions } from '../../stores/lib/Reaction'; | 10 | import { createReactions } from '../../stores/lib/Reaction'; |
11 | import { createActionBindings } from '../utils/ActionBinding'; | 11 | import { createActionBindings } from '../utils/ActionBinding'; |
12 | import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH } from '.'; | 12 | import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.'; |
13 | 13 | ||
14 | const debug = require('debug')('Franz:feature:todos:store'); | 14 | const debug = require('debug')('Franz:feature:todos:store'); |
15 | 15 | ||
@@ -26,6 +26,12 @@ export default class TodoStore extends FeatureStore { | |||
26 | return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width; | 26 | return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width; |
27 | } | 27 | } |
28 | 28 | ||
29 | @computed get isTodosPanelVisible() { | ||
30 | if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; | ||
31 | |||
32 | return this.settings.isTodosPanelVisible; | ||
33 | } | ||
34 | |||
29 | @computed get settings() { | 35 | @computed get settings() { |
30 | return localStorage.getItem('todos') || {}; | 36 | return localStorage.getItem('todos') || {}; |
31 | } | 37 | } |
@@ -41,6 +47,7 @@ export default class TodoStore extends FeatureStore { | |||
41 | 47 | ||
42 | this._registerActions(createActionBindings([ | 48 | this._registerActions(createActionBindings([ |
43 | [todoActions.resize, this._resize], | 49 | [todoActions.resize, this._resize], |
50 | [todoActions.toggleTodosPanel, this._toggleTodosPanel], | ||
44 | [todoActions.setTodosWebview, this._setTodosWebview], | 51 | [todoActions.setTodosWebview, this._setTodosWebview], |
45 | [todoActions.handleHostMessage, this._handleHostMessage], | 52 | [todoActions.handleHostMessage, this._handleHostMessage], |
46 | [todoActions.handleClientMessage, this._handleClientMessage], | 53 | [todoActions.handleClientMessage, this._handleClientMessage], |
@@ -81,6 +88,12 @@ export default class TodoStore extends FeatureStore { | |||
81 | }); | 88 | }); |
82 | }; | 89 | }; |
83 | 90 | ||
91 | @action _toggleTodosPanel = () => { | ||
92 | this._updateSettings({ | ||
93 | isTodosPanelVisible: !this.isTodosPanelVisible, | ||
94 | }); | ||
95 | }; | ||
96 | |||
84 | @action _setTodosWebview = ({ webview }) => { | 97 | @action _setTodosWebview = ({ webview }) => { |
85 | debug('_setTodosWebview', webview); | 98 | debug('_setTodosWebview', webview); |
86 | this.webview = webview; | 99 | this.webview = webview; |