diff options
author | 2019-09-02 12:11:15 +0200 | |
---|---|---|
committer | 2019-09-02 12:11:15 +0200 | |
commit | 19fe5357925443d21c16868f7b6fcbe305f6650f (patch) | |
tree | fe3245615097f9beb037cfa14fe56ed07f94b697 /src/features | |
parent | Remove auth token url parameter (diff) | |
download | ferdium-app-19fe5357925443d21c16868f7b6fcbe305f6650f.tar.gz ferdium-app-19fe5357925443d21c16868f7b6fcbe305f6650f.tar.zst ferdium-app-19fe5357925443d21c16868f7b6fcbe305f6650f.zip |
Fix performance lag on toggle
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 45 |
1 files changed, 33 insertions, 12 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index d171bbd0a..288c1906f 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -4,9 +4,11 @@ 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 { Icon } from '@meetfranz/ui'; |
7 | |||
7 | import * as environment from '../../../environment'; | 8 | import * as environment from '../../../environment'; |
8 | 9 | ||
9 | const TOGGLE_SIZE = 45; | 10 | const OPEN_TODOS_BUTTON_SIZE = 45; |
11 | const CLOSE_TODOS_BUTTON_SIZE = 35; | ||
10 | 12 | ||
11 | const styles = theme => ({ | 13 | const styles = theme => ({ |
12 | root: { | 14 | root: { |
@@ -15,10 +17,9 @@ const styles = theme => ({ | |||
15 | borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor], | 17 | borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor], |
16 | zIndex: 300, | 18 | zIndex: 300, |
17 | 19 | ||
18 | transition: 'all 0.5s', | 20 | transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`, |
19 | transform: props => `translateX(${props.isVisible ? 0 : props.width}px)`, | ||
20 | 21 | ||
21 | '&:hover $toggleTodosButton': { | 22 | '&:hover $closeTodosButton': { |
22 | opacity: 1, | 23 | opacity: 1, |
23 | }, | 24 | }, |
24 | }, | 25 | }, |
@@ -43,23 +44,23 @@ const styles = theme => ({ | |||
43 | width: 5, | 44 | width: 5, |
44 | zIndex: 400, | 45 | zIndex: 400, |
45 | background: theme.todos.dragIndicator.background, | 46 | background: theme.todos.dragIndicator.background, |
47 | |||
46 | }, | 48 | }, |
47 | toggleTodosButton: { | 49 | openTodosButton: { |
48 | width: TOGGLE_SIZE, | 50 | width: OPEN_TODOS_BUTTON_SIZE, |
49 | height: TOGGLE_SIZE, | 51 | height: OPEN_TODOS_BUTTON_SIZE, |
50 | background: theme.todos.toggleButton.background, | 52 | background: theme.todos.toggleButton.background, |
51 | position: 'absolute', | 53 | position: 'absolute', |
52 | bottom: 80, | 54 | bottom: 80, |
53 | right: props => (props.width + (props.isVisible ? -TOGGLE_SIZE / 2 : 0)), | 55 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), |
54 | borderRadius: TOGGLE_SIZE / 2, | 56 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, |
55 | opacity: props => (props.isVisible ? 0 : 1), | 57 | opacity: props => (props.isVisible ? 0 : 1), |
56 | transition: 'all 0.5s', | 58 | transition: 'right 0.5s', |
57 | zIndex: 600, | 59 | zIndex: 600, |
58 | display: 'flex', | 60 | display: 'flex', |
59 | alignItems: 'center', | 61 | alignItems: 'center', |
60 | justifyContent: 'center', | 62 | justifyContent: 'center', |
61 | boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor], | 63 | boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor], |
62 | // border: [1, 'solid', theme.todos.toggleButton.borderColor], | ||
63 | 64 | ||
64 | borderTopRightRadius: props => (props.isVisible ? null : 0), | 65 | borderTopRightRadius: props => (props.isVisible ? null : 0), |
65 | borderBottomRightRadius: props => (props.isVisible ? null : 0), | 66 | borderBottomRightRadius: props => (props.isVisible ? null : 0), |
@@ -69,6 +70,26 @@ const styles = theme => ({ | |||
69 | transition: 'all 0.5s', | 70 | transition: 'all 0.5s', |
70 | }, | 71 | }, |
71 | }, | 72 | }, |
73 | closeTodosButton: { | ||
74 | width: CLOSE_TODOS_BUTTON_SIZE, | ||
75 | height: CLOSE_TODOS_BUTTON_SIZE, | ||
76 | background: theme.todos.toggleButton.background, | ||
77 | position: 'absolute', | ||
78 | bottom: 80, | ||
79 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), | ||
80 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, | ||
81 | opacity: 0, | ||
82 | transition: 'opacity 0.5s', | ||
83 | zIndex: 600, | ||
84 | display: 'flex', | ||
85 | alignItems: 'center', | ||
86 | justifyContent: 'center', | ||
87 | boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor], | ||
88 | |||
89 | '& svg': { | ||
90 | fill: theme.todos.toggleButton.textColor, | ||
91 | }, | ||
92 | }, | ||
72 | }); | 93 | }); |
73 | 94 | ||
74 | @injectSheet(styles) @observer | 95 | @injectSheet(styles) @observer |
@@ -179,7 +200,7 @@ class TodosWebview extends Component { | |||
179 | > | 200 | > |
180 | <button | 201 | <button |
181 | onClick={() => togglePanel()} | 202 | onClick={() => togglePanel()} |
182 | className={classes.toggleTodosButton} | 203 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} |
183 | type="button" | 204 | type="button" |
184 | > | 205 | > |
185 | <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} /> | 206 | <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} /> |