diff options
Diffstat (limited to 'src/features/todos/components')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 74 |
1 files changed, 34 insertions, 40 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index 288c1906f..9dd313109 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -22,10 +22,6 @@ const styles = theme => ({ | |||
22 | '&:hover $closeTodosButton': { | 22 | '&:hover $closeTodosButton': { |
23 | opacity: 1, | 23 | opacity: 1, |
24 | }, | 24 | }, |
25 | }, | ||
26 | webview: { | ||
27 | height: '100%', | ||
28 | |||
29 | '& webview': { | 25 | '& webview': { |
30 | height: '100%', | 26 | height: '100%', |
31 | }, | 27 | }, |
@@ -191,45 +187,43 @@ class TodosWebview extends Component { | |||
191 | const { width, delta, isDragging } = this.state; | 187 | const { width, delta, isDragging } = this.state; |
192 | 188 | ||
193 | return ( | 189 | return ( |
194 | <> | 190 | <div |
195 | <div | 191 | className={classes.root} |
196 | className={classes.root} | 192 | style={{ width: isVisible ? width : 0 }} |
197 | style={{ width: isVisible ? width : 0 }} | 193 | onMouseUp={() => this.stopResize()} |
198 | onMouseUp={() => this.stopResize()} | 194 | ref={(node) => { this.node = node; }} |
199 | ref={(node) => { this.node = node; }} | 195 | > |
196 | <button | ||
197 | onClick={() => togglePanel()} | ||
198 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} | ||
199 | type="button" | ||
200 | > | 200 | > |
201 | <button | 201 | <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} /> |
202 | onClick={() => togglePanel()} | 202 | </button> |
203 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} | 203 | <div |
204 | type="button" | 204 | className={classes.resizeHandler} |
205 | > | 205 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad |
206 | <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} /> | 206 | onMouseDown={e => this.startResize(e)} |
207 | </button> | 207 | /> |
208 | {isDragging && ( | ||
208 | <div | 209 | <div |
209 | className={classes.resizeHandler} | 210 | className={classes.dragIndicator} |
210 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad | 211 | style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad |
211 | onMouseDown={e => this.startResize(e)} | ||
212 | /> | ||
213 | {isDragging && ( | ||
214 | <div | ||
215 | className={classes.dragIndicator} | ||
216 | style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad | ||
217 | /> | ||
218 | )} | ||
219 | <Webview | ||
220 | className={classes.webview} | ||
221 | onDidAttach={() => { | ||
222 | const { setTodosWebview } = this.props; | ||
223 | setTodosWebview(this.webview); | ||
224 | this.startListeningToIpcMessages(); | ||
225 | }} | ||
226 | partition="persist:todos" | ||
227 | preload="./features/todos/preload.js" | ||
228 | ref={(webview) => { this.webview = webview ? webview.view : null; }} | ||
229 | src={environment.TODOS_FRONTEND} | ||
230 | /> | 212 | /> |
231 | </div> | 213 | )} |
232 | </> | 214 | <Webview |
215 | className={classes.webview} | ||
216 | onDidAttach={() => { | ||
217 | const { setTodosWebview } = this.props; | ||
218 | setTodosWebview(this.webview); | ||
219 | this.startListeningToIpcMessages(); | ||
220 | }} | ||
221 | partition="persist:todos" | ||
222 | preload="./features/todos/preload.js" | ||
223 | ref={(webview) => { this.webview = webview ? webview.view : null; }} | ||
224 | src={environment.TODOS_FRONTEND} | ||
225 | /> | ||
226 | </div> | ||
233 | ); | 227 | ); |
234 | } | 228 | } |
235 | } | 229 | } |