diff options
Diffstat (limited to 'src/features')
-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 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 | } |
diff --git a/src/features/todos/store.js b/src/features/todos/store.js index 5c6abff4c..aebe0dcbe 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 | this._firstLaunchReaction, | 65 | this._firstLaunchReaction, |
65 | ]); | 66 | ]); |
66 | 67 | ||
@@ -124,11 +125,16 @@ export default class TodoStore extends FeatureStore { | |||
124 | // Todos client message handlers | 125 | // Todos client message handlers |
125 | 126 | ||
126 | _onTodosClientInitialized = () => { | 127 | _onTodosClientInitialized = () => { |
128 | const { authToken } = this.stores.user; | ||
129 | const { isDarkThemeActive } = this.stores.ui; | ||
130 | const { locale } = this.stores.app; | ||
131 | if (!this.webview) return; | ||
127 | this.webview.send(IPC.TODOS_HOST_CHANNEL, { | 132 | this.webview.send(IPC.TODOS_HOST_CHANNEL, { |
128 | action: 'todos:configure', | 133 | action: 'todos:configure', |
129 | data: { | 134 | data: { |
130 | authToken: this.stores.user.authToken, | 135 | authToken, |
131 | theme: this.stores.ui.isDarkThemeActive ? ThemeType.dark : ThemeType.default, | 136 | locale, |
137 | theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default, | ||
132 | }, | 138 | }, |
133 | }); | 139 | }); |
134 | }; | 140 | }; |
@@ -148,6 +154,11 @@ export default class TodoStore extends FeatureStore { | |||
148 | this.isFeatureEnabled = isTodosEnabled; | 154 | this.isFeatureEnabled = isTodosEnabled; |
149 | }; | 155 | }; |
150 | 156 | ||
157 | _updateTodosConfig = () => { | ||
158 | // Resend the config if any part changes in Franz: | ||
159 | this._onTodosClientInitialized(); | ||
160 | }; | ||
161 | |||
151 | _firstLaunchReaction = () => { | 162 | _firstLaunchReaction = () => { |
152 | const { stats } = this.stores.settings.all; | 163 | const { stats } = this.stores.settings.all; |
153 | 164 | ||