diff options
Diffstat (limited to 'src/features/todos')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 104 | ||||
-rw-r--r-- | src/features/todos/store.js | 15 |
2 files changed, 62 insertions, 57 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index 9a50f7e8d..143955a7b 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={5} /> |
271 | /> | 285 | <p>{intl.formatMessage(messages.premiumInfo)}</p> |
272 | )} | 286 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> |
273 | {isTodosIncludedInCurrentPlan ? ( | 287 | <ActivateTrialButton |
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={5} /> | ||
290 | <p>{intl.formatMessage(messages.premiumInfo)}</p> | ||
291 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> | ||
292 | <ActivateTrialButton | ||
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 | } |
diff --git a/src/features/todos/store.js b/src/features/todos/store.js index 56e117c6c..170408ebb 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js | |||
@@ -61,6 +61,7 @@ export default class TodoStore extends FeatureStore { | |||
61 | 61 | ||
62 | this._allReactions = createReactions([ | 62 | this._allReactions = createReactions([ |
63 | this._setFeatureEnabledReaction, | 63 | this._setFeatureEnabledReaction, |
64 | this._updateTodosConfig, | ||
64 | ]); | 65 | ]); |
65 | 66 | ||
66 | this._registerReactions(this._allReactions); | 67 | this._registerReactions(this._allReactions); |
@@ -123,11 +124,16 @@ export default class TodoStore extends FeatureStore { | |||
123 | // Todos client message handlers | 124 | // Todos client message handlers |
124 | 125 | ||
125 | _onTodosClientInitialized = () => { | 126 | _onTodosClientInitialized = () => { |
127 | const { authToken } = this.stores.user; | ||
128 | const { isDarkThemeActive } = this.stores.ui; | ||
129 | const { locale } = this.stores.app; | ||
130 | if (!this.webview) return; | ||
126 | this.webview.send(IPC.TODOS_HOST_CHANNEL, { | 131 | this.webview.send(IPC.TODOS_HOST_CHANNEL, { |
127 | action: 'todos:configure', | 132 | action: 'todos:configure', |
128 | data: { | 133 | data: { |
129 | authToken: this.stores.user.authToken, | 134 | authToken, |
130 | theme: this.stores.ui.isDarkThemeActive ? ThemeType.dark : ThemeType.default, | 135 | locale, |
136 | theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default, | ||
131 | }, | 137 | }, |
132 | }); | 138 | }); |
133 | }; | 139 | }; |
@@ -146,4 +152,9 @@ export default class TodoStore extends FeatureStore { | |||
146 | 152 | ||
147 | this.isFeatureEnabled = isTodosEnabled; | 153 | this.isFeatureEnabled = isTodosEnabled; |
148 | }; | 154 | }; |
155 | |||
156 | _updateTodosConfig = () => { | ||
157 | // Resend the config if any part changes in Franz: | ||
158 | this._onTodosClientInitialized(); | ||
159 | } | ||
149 | } | 160 | } |