diff options
Diffstat (limited to 'src/features/todos/components')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 51 |
1 files changed, 20 insertions, 31 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index dccb818a6..ca8460f94 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -7,7 +7,7 @@ import classnames from 'classnames'; | |||
7 | 7 | ||
8 | import { TODOS_PARTITION_ID } from '../../../config'; | 8 | import { TODOS_PARTITION_ID } from '../../../config'; |
9 | 9 | ||
10 | const styles = theme => ({ | 10 | const styles = (theme) => ({ |
11 | root: { | 11 | root: { |
12 | background: theme.colorBackground, | 12 | background: theme.colorBackground, |
13 | position: 'relative', | 13 | position: 'relative', |
@@ -34,7 +34,6 @@ const styles = theme => ({ | |||
34 | width: 5, | 34 | width: 5, |
35 | zIndex: 400, | 35 | zIndex: 400, |
36 | background: theme.todos.dragIndicator.background, | 36 | background: theme.todos.dragIndicator.background, |
37 | |||
38 | }, | 37 | }, |
39 | premiumContainer: { | 38 | premiumContainer: { |
40 | display: 'flex', | 39 | display: 'flex', |
@@ -68,7 +67,8 @@ const styles = theme => ({ | |||
68 | }, | 67 | }, |
69 | }); | 68 | }); |
70 | 69 | ||
71 | @injectSheet(styles) @observer | 70 | @injectSheet(styles) |
71 | @observer | ||
72 | class TodosWebview extends Component { | 72 | class TodosWebview extends Component { |
73 | static propTypes = { | 73 | static propTypes = { |
74 | classes: PropTypes.object.isRequired, | 74 | classes: PropTypes.object.isRequired, |
@@ -89,15 +89,11 @@ class TodosWebview extends Component { | |||
89 | width: 300, | 89 | width: 300, |
90 | }; | 90 | }; |
91 | 91 | ||
92 | componentWillMount() { | 92 | componentDidMount() { |
93 | const { width } = this.props; | ||
94 | |||
95 | this.setState({ | 93 | this.setState({ |
96 | width, | 94 | width: this.props.width, |
97 | }); | 95 | }); |
98 | } | ||
99 | 96 | ||
100 | componentDidMount() { | ||
101 | this.node.addEventListener('mousemove', this.resizePanel.bind(this)); | 97 | this.node.addEventListener('mousemove', this.resizePanel.bind(this)); |
102 | this.node.addEventListener('mouseup', this.stopResize.bind(this)); | 98 | this.node.addEventListener('mouseup', this.stopResize.bind(this)); |
103 | this.node.addEventListener('mouseleave', this.stopResize.bind(this)); | 99 | this.node.addEventListener('mouseleave', this.stopResize.bind(this)); |
@@ -114,10 +110,7 @@ class TodosWebview extends Component { | |||
114 | resizePanel(e) { | 110 | resizePanel(e) { |
115 | const { minWidth } = this.props; | 111 | const { minWidth } = this.props; |
116 | 112 | ||
117 | const { | 113 | const { isDragging, initialPos } = this.state; |
118 | isDragging, | ||
119 | initialPos, | ||
120 | } = this.state; | ||
121 | 114 | ||
122 | if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) { | 115 | if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) { |
123 | const delta = e.clientX - initialPos; | 116 | const delta = e.clientX - initialPos; |
@@ -129,16 +122,9 @@ class TodosWebview extends Component { | |||
129 | } | 122 | } |
130 | 123 | ||
131 | stopResize() { | 124 | stopResize() { |
132 | const { | 125 | const { resize, minWidth } = this.props; |
133 | resize, | ||
134 | minWidth, | ||
135 | } = this.props; | ||
136 | 126 | ||
137 | const { | 127 | const { isDragging, delta, width } = this.state; |
138 | isDragging, | ||
139 | delta, | ||
140 | width, | ||
141 | } = this.state; | ||
142 | 128 | ||
143 | if (isDragging) { | 129 | if (isDragging) { |
144 | let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta)); | 130 | let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta)); |
@@ -176,11 +162,7 @@ class TodosWebview extends Component { | |||
176 | isTodoUrlValid, | 162 | isTodoUrlValid, |
177 | } = this.props; | 163 | } = this.props; |
178 | 164 | ||
179 | const { | 165 | const { width, delta, isDragging } = this.state; |
180 | width, | ||
181 | delta, | ||
182 | isDragging, | ||
183 | } = this.state; | ||
184 | 166 | ||
185 | let displayedWidth = isVisible ? width : 0; | 167 | let displayedWidth = isVisible ? width : 0; |
186 | if (isTodosServiceActive) { | 168 | if (isTodosServiceActive) { |
@@ -197,13 +179,18 @@ class TodosWebview extends Component { | |||
197 | })} | 179 | })} |
198 | style={{ width: displayedWidth }} | 180 | style={{ width: displayedWidth }} |
199 | onMouseUp={() => this.stopResize()} | 181 | onMouseUp={() => this.stopResize()} |
200 | ref={(node) => { this.node = node; }} | 182 | ref={(node) => { |
183 | this.node = node; | ||
184 | }} | ||
201 | id="todos-panel" | 185 | id="todos-panel" |
202 | > | 186 | > |
203 | <div | 187 | <div |
204 | className={classes.resizeHandler} | 188 | className={classes.resizeHandler} |
205 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad | 189 | style={{ |
206 | onMouseDown={e => this.startResize(e)} | 190 | left: delta, |
191 | ...(isDragging ? { width: 600, marginLeft: -200 } : {}), | ||
192 | }} // This hack is required as resizing with webviews beneath behaves quite bad | ||
193 | onMouseDown={(e) => this.startResize(e)} | ||
207 | /> | 194 | /> |
208 | {isDragging && ( | 195 | {isDragging && ( |
209 | <div | 196 | <div |
@@ -221,7 +208,9 @@ class TodosWebview extends Component { | |||
221 | }} | 208 | }} |
222 | partition={TODOS_PARTITION_ID} | 209 | partition={TODOS_PARTITION_ID} |
223 | preload="./features/todos/preload.js" | 210 | preload="./features/todos/preload.js" |
224 | ref={(webview) => { this.webview = webview ? webview.view : null; }} | 211 | ref={(webview) => { |
212 | this.webview = webview ? webview.view : null; | ||
213 | }} | ||
225 | useragent={userAgent} | 214 | useragent={userAgent} |
226 | src={todoUrl} | 215 | src={todoUrl} |
227 | /> | 216 | /> |