diff options
author | vantezzen <properly@protonmail.com> | 2019-09-13 18:00:03 +0200 |
---|---|---|
committer | vantezzen <properly@protonmail.com> | 2019-09-13 18:00:03 +0200 |
commit | ee67ec1e9486dfaf09b01db44eb401c8b6cd2277 (patch) | |
tree | a2c8b353313cb363a56722687e110c6f80f4b791 /src/features/todos/components/TodosWebview.js | |
parent | Use ferdi namespace on debugger (diff) | |
parent | Merge branch 'master' of https://github.com/meetfranz/franz into meetfranz-ma... (diff) | |
download | ferdium-app-ee67ec1e9486dfaf09b01db44eb401c8b6cd2277.tar.gz ferdium-app-ee67ec1e9486dfaf09b01db44eb401c8b6cd2277.tar.zst ferdium-app-ee67ec1e9486dfaf09b01db44eb401c8b6cd2277.zip |
Merge Franz 5.3.2
Diffstat (limited to 'src/features/todos/components/TodosWebview.js')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 60 |
1 files changed, 1 insertions, 59 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index 7fe9d354b..d4271dba0 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -6,16 +6,11 @@ import Webview from 'react-electron-web-view'; | |||
6 | import { Icon } from '@meetfranz/ui'; | 6 | import { Icon } from '@meetfranz/ui'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, intlShape } from 'react-intl'; |
8 | 8 | ||
9 | import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; | 9 | import { mdiCheckAll } from '@mdi/js'; |
10 | import * as environment from '../../../environment'; | 10 | import * as environment from '../../../environment'; |
11 | import Appear from '../../../components/ui/effects/Appear'; | 11 | import Appear from '../../../components/ui/effects/Appear'; |
12 | import UpgradeButton from '../../../components/ui/UpgradeButton'; | 12 | import UpgradeButton from '../../../components/ui/UpgradeButton'; |
13 | 13 | ||
14 | import SettingsStore from '../../../stores/SettingsStore'; | ||
15 | |||
16 | const OPEN_TODOS_BUTTON_SIZE = 45; | ||
17 | const CLOSE_TODOS_BUTTON_SIZE = 35; | ||
18 | |||
19 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
20 | premiumInfo: { | 15 | premiumInfo: { |
21 | id: 'feature.todos.premium.info', | 16 | id: 'feature.todos.premium.info', |
@@ -63,50 +58,6 @@ const styles = theme => ({ | |||
63 | background: theme.todos.dragIndicator.background, | 58 | background: theme.todos.dragIndicator.background, |
64 | 59 | ||
65 | }, | 60 | }, |
66 | openTodosButton: { | ||
67 | width: OPEN_TODOS_BUTTON_SIZE, | ||
68 | height: OPEN_TODOS_BUTTON_SIZE, | ||
69 | background: theme.todos.toggleButton.background, | ||
70 | position: 'absolute', | ||
71 | bottom: 120, | ||
72 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), | ||
73 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, | ||
74 | opacity: props => (props.isVisible ? 0 : 1), | ||
75 | transition: 'right 0.5s', | ||
76 | zIndex: 600, | ||
77 | display: 'flex', | ||
78 | alignItems: 'center', | ||
79 | justifyContent: 'center', | ||
80 | boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor], | ||
81 | |||
82 | borderTopRightRadius: props => (props.isVisible ? null : 0), | ||
83 | borderBottomRightRadius: props => (props.isVisible ? null : 0), | ||
84 | |||
85 | '& svg': { | ||
86 | fill: theme.todos.toggleButton.textColor, | ||
87 | transition: 'all 0.5s', | ||
88 | }, | ||
89 | }, | ||
90 | closeTodosButton: { | ||
91 | width: CLOSE_TODOS_BUTTON_SIZE, | ||
92 | height: CLOSE_TODOS_BUTTON_SIZE, | ||
93 | background: theme.todos.toggleButton.background, | ||
94 | position: 'absolute', | ||
95 | bottom: 120, | ||
96 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), | ||
97 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, | ||
98 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), | ||
99 | transition: 'opacity 0.5s', | ||
100 | zIndex: 600, | ||
101 | display: 'flex', | ||
102 | alignItems: 'center', | ||
103 | justifyContent: 'center', | ||
104 | boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor], | ||
105 | |||
106 | '& svg': { | ||
107 | fill: theme.todos.toggleButton.textColor, | ||
108 | }, | ||
109 | }, | ||
110 | premiumContainer: { | 61 | premiumContainer: { |
111 | display: 'flex', | 62 | display: 'flex', |
112 | flexDirection: 'column', | 63 | flexDirection: 'column', |
@@ -134,7 +85,6 @@ class TodosWebview extends Component { | |||
134 | static propTypes = { | 85 | static propTypes = { |
135 | classes: PropTypes.object.isRequired, | 86 | classes: PropTypes.object.isRequired, |
136 | isVisible: PropTypes.bool.isRequired, | 87 | isVisible: PropTypes.bool.isRequired, |
137 | togglePanel: PropTypes.func.isRequired, | ||
138 | handleClientMessage: PropTypes.func.isRequired, | 88 | handleClientMessage: PropTypes.func.isRequired, |
139 | setTodosWebview: PropTypes.func.isRequired, | 89 | setTodosWebview: PropTypes.func.isRequired, |
140 | resize: PropTypes.func.isRequired, | 90 | resize: PropTypes.func.isRequired, |
@@ -233,7 +183,6 @@ class TodosWebview extends Component { | |||
233 | const { | 183 | const { |
234 | classes, | 184 | classes, |
235 | isVisible, | 185 | isVisible, |
236 | togglePanel, | ||
237 | isTodosIncludedInCurrentPlan, | 186 | isTodosIncludedInCurrentPlan, |
238 | stores, | 187 | stores, |
239 | } = this.props; | 188 | } = this.props; |
@@ -253,13 +202,6 @@ class TodosWebview extends Component { | |||
253 | onMouseUp={() => this.stopResize()} | 202 | onMouseUp={() => this.stopResize()} |
254 | ref={(node) => { this.node = node; }} | 203 | ref={(node) => { this.node = node; }} |
255 | > | 204 | > |
256 | <button | ||
257 | onClick={() => togglePanel()} | ||
258 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} | ||
259 | type="button" | ||
260 | > | ||
261 | <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} /> | ||
262 | </button> | ||
263 | <div | 205 | <div |
264 | className={classes.resizeHandler} | 206 | className={classes.resizeHandler} |
265 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad | 207 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad |