diff options
Diffstat (limited to 'src/features/todos/components')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 104 |
1 files changed, 49 insertions, 55 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index 44c94a3ff..c06183e37 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -41,10 +41,6 @@ const styles = theme => ({ | |||
41 | '&:hover $closeTodosButton': { | 41 | '&:hover $closeTodosButton': { |
42 | opacity: 1, | 42 | opacity: 1, |
43 | }, | 43 | }, |
44 | }, | ||
45 | webview: { | ||
46 | height: '100%', | ||
47 | |||
48 | '& webview': { | 44 | '& webview': { |
49 | height: '100%', | 45 | height: '100%', |
50 | }, | 46 | }, |
@@ -245,60 +241,58 @@ class TodosWebview extends Component { | |||
245 | const { intl } = this.context; | 241 | const { intl } = this.context; |
246 | 242 | ||
247 | return ( | 243 | return ( |
248 | <> | 244 | <div |
249 | <div | 245 | className={classes.root} |
250 | className={classes.root} | 246 | style={{ width: isVisible ? width : 0 }} |
251 | style={{ width: isVisible ? width : 0 }} | 247 | onMouseUp={() => this.stopResize()} |
252 | onMouseUp={() => this.stopResize()} | 248 | ref={(node) => { this.node = node; }} |
253 | ref={(node) => { this.node = node; }} | 249 | > |
250 | <button | ||
251 | onClick={() => togglePanel()} | ||
252 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} | ||
253 | type="button" | ||
254 | > | 254 | > |
255 | <button | 255 | <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} /> |
256 | onClick={() => togglePanel()} | 256 | </button> |
257 | className={isVisible ? classes.closeTodosButton : classes.openTodosButton} | 257 | <div |
258 | type="button" | 258 | className={classes.resizeHandler} |
259 | > | 259 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad |
260 | <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} /> | 260 | onMouseDown={e => this.startResize(e)} |
261 | </button> | 261 | /> |
262 | {isDragging && ( | ||
262 | <div | 263 | <div |
263 | className={classes.resizeHandler} | 264 | className={classes.dragIndicator} |
264 | style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad | 265 | style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad |
265 | onMouseDown={e => this.startResize(e)} | 266 | /> |
267 | )} | ||
268 | {isTodosIncludedInCurrentPlan ? ( | ||
269 | <Webview | ||
270 | className={classes.webview} | ||
271 | onDidAttach={() => { | ||
272 | const { setTodosWebview } = this.props; | ||
273 | setTodosWebview(this.webview); | ||
274 | this.startListeningToIpcMessages(); | ||
275 | }} | ||
276 | partition="persist:todos" | ||
277 | preload="./features/todos/preload.js" | ||
278 | ref={(webview) => { this.webview = webview ? webview.view : null; }} | ||
279 | src={environment.TODOS_FRONTEND} | ||
266 | /> | 280 | /> |
267 | {isDragging && ( | 281 | ) : ( |
268 | <div | 282 | <Appear> |
269 | className={classes.dragIndicator} | 283 | <div className={classes.premiumContainer}> |
270 | style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad | 284 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} /> |
271 | /> | 285 | <p>{intl.formatMessage(messages.premiumInfo)}</p> |
272 | )} | 286 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> |
273 | {isTodosIncludedInCurrentPlan ? ( | 287 | <UpgradeButton |
274 | <Webview | 288 | className={classes.premiumCTA} |
275 | className={classes.webview} | 289 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} |
276 | onDidAttach={() => { | 290 | short |
277 | const { setTodosWebview } = this.props; | 291 | /> |
278 | setTodosWebview(this.webview); | 292 | </div> |
279 | this.startListeningToIpcMessages(); | 293 | </Appear> |
280 | }} | 294 | )} |
281 | partition="persist:todos" | 295 | </div> |
282 | preload="./features/todos/preload.js" | ||
283 | ref={(webview) => { this.webview = webview ? webview.view : null; }} | ||
284 | src={environment.TODOS_FRONTEND} | ||
285 | /> | ||
286 | ) : ( | ||
287 | <Appear> | ||
288 | <div className={classes.premiumContainer}> | ||
289 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} /> | ||
290 | <p>{intl.formatMessage(messages.premiumInfo)}</p> | ||
291 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> | ||
292 | <UpgradeButton | ||
293 | className={classes.premiumCTA} | ||
294 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} | ||
295 | short | ||
296 | /> | ||
297 | </div> | ||
298 | </Appear> | ||
299 | )} | ||
300 | </div> | ||
301 | </> | ||
302 | ); | 296 | ); |
303 | } | 297 | } |
304 | } | 298 | } |