diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-08-02 11:41:51 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-08-02 11:41:51 +0200 |
commit | 6297d46f370092598d2ebb973bb69f2c368d7904 (patch) | |
tree | 52bdd4885537ca2fb20be32b2db9c8c4dc95f908 /src/features/todos/components/TodosWebview.js | |
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/todos/components/TodosWebview.js')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 56 |
1 files changed, 54 insertions, 2 deletions
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 |