diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-09-04 15:37:56 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-09-04 15:37:56 +0200 |
commit | c6dda35baf7eb9a7d89bf224c38973a1b6171c14 (patch) | |
tree | 98f562911fcccc356a0594427f6891ce0e12f22a /src/features | |
parent | Fix icons & button color (diff) | |
download | ferdium-app-c6dda35baf7eb9a7d89bf224c38973a1b6171c14.tar.gz ferdium-app-c6dda35baf7eb9a7d89bf224c38973a1b6171c14.tar.zst ferdium-app-c6dda35baf7eb9a7d89bf224c38973a1b6171c14.zip |
bugfixing & polishing
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 14 | ||||
-rw-r--r-- | src/features/todos/containers/TodosScreen.js | 6 | ||||
-rw-r--r-- | src/features/todos/store.js | 3 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 50 | ||||
-rw-r--r-- | src/features/workspaces/store.js | 5 |
5 files changed, 49 insertions, 29 deletions
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js index d8d96ba85..9cf925444 100644 --- a/src/features/todos/components/TodosWebview.js +++ b/src/features/todos/components/TodosWebview.js | |||
@@ -10,6 +10,7 @@ import { mdiChevronRight, mdiCheckAll } from '@mdi/js'; | |||
10 | import { Button } from '@meetfranz/forms'; | 10 | import { Button } from '@meetfranz/forms'; |
11 | import * as environment from '../../../environment'; | 11 | import * as environment from '../../../environment'; |
12 | import Appear from '../../../components/ui/effects/Appear'; | 12 | import Appear from '../../../components/ui/effects/Appear'; |
13 | import ActivateTrialButton from '../../../components/ui/activateTrialButton'; | ||
13 | 14 | ||
14 | const OPEN_TODOS_BUTTON_SIZE = 45; | 15 | const OPEN_TODOS_BUTTON_SIZE = 45; |
15 | const CLOSE_TODOS_BUTTON_SIZE = 35; | 16 | const CLOSE_TODOS_BUTTON_SIZE = 35; |
@@ -70,7 +71,7 @@ const styles = theme => ({ | |||
70 | height: OPEN_TODOS_BUTTON_SIZE, | 71 | height: OPEN_TODOS_BUTTON_SIZE, |
71 | background: theme.todos.toggleButton.background, | 72 | background: theme.todos.toggleButton.background, |
72 | position: 'absolute', | 73 | position: 'absolute', |
73 | bottom: 80, | 74 | bottom: 120, |
74 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), | 75 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), |
75 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, | 76 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, |
76 | opacity: props => (props.isVisible ? 0 : 1), | 77 | opacity: props => (props.isVisible ? 0 : 1), |
@@ -94,7 +95,7 @@ const styles = theme => ({ | |||
94 | height: CLOSE_TODOS_BUTTON_SIZE, | 95 | height: CLOSE_TODOS_BUTTON_SIZE, |
95 | background: theme.todos.toggleButton.background, | 96 | background: theme.todos.toggleButton.background, |
96 | position: 'absolute', | 97 | position: 'absolute', |
97 | bottom: 80, | 98 | bottom: 120, |
98 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), | 99 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), |
99 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, | 100 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, |
100 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), | 101 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), |
@@ -143,7 +144,6 @@ class TodosWebview extends Component { | |||
143 | width: PropTypes.number.isRequired, | 144 | width: PropTypes.number.isRequired, |
144 | minWidth: PropTypes.number.isRequired, | 145 | minWidth: PropTypes.number.isRequired, |
145 | isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, | 146 | isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, |
146 | upgradeAccount: PropTypes.func.isRequired, | ||
147 | }; | 147 | }; |
148 | 148 | ||
149 | state = { | 149 | state = { |
@@ -235,7 +235,6 @@ class TodosWebview extends Component { | |||
235 | isVisible, | 235 | isVisible, |
236 | togglePanel, | 236 | togglePanel, |
237 | isTodosIncludedInCurrentPlan, | 237 | isTodosIncludedInCurrentPlan, |
238 | upgradeAccount, | ||
239 | } = this.props; | 238 | } = this.props; |
240 | 239 | ||
241 | const { | 240 | const { |
@@ -291,11 +290,10 @@ class TodosWebview extends Component { | |||
291 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} /> | 290 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} /> |
292 | <p>{intl.formatMessage(messages.premiumInfo)}</p> | 291 | <p>{intl.formatMessage(messages.premiumInfo)}</p> |
293 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> | 292 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> |
294 | <Button | 293 | <ActivateTrialButton |
295 | label={intl.formatMessage(messages.upgradeCTA)} | ||
296 | className={classes.premiumCTA} | 294 | className={classes.premiumCTA} |
297 | onClick={upgradeAccount} | 295 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} |
298 | buttonType="inverted" | 296 | short |
299 | /> | 297 | /> |
300 | </div> | 298 | </div> |
301 | </Appear> | 299 | </Appear> |
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js index 7f3688828..65afc985b 100644 --- a/src/features/todos/containers/TodosScreen.js +++ b/src/features/todos/containers/TodosScreen.js | |||
@@ -26,7 +26,6 @@ class TodosScreen extends Component { | |||
26 | minWidth={TODOS_MIN_WIDTH} | 26 | minWidth={TODOS_MIN_WIDTH} |
27 | resize={width => todoActions.resize({ width })} | 27 | resize={width => todoActions.resize({ width })} |
28 | isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false} | 28 | isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false} |
29 | upgradeAccount={() => this.props.actions.ui.openSettings({ path: 'user' })} | ||
30 | /> | 29 | /> |
31 | </ErrorBoundary> | 30 | </ErrorBoundary> |
32 | ); | 31 | ); |
@@ -39,9 +38,4 @@ TodosScreen.wrappedComponent.propTypes = { | |||
39 | stores: PropTypes.shape({ | 38 | stores: PropTypes.shape({ |
40 | features: PropTypes.instanceOf(FeaturesStore).isRequired, | 39 | features: PropTypes.instanceOf(FeaturesStore).isRequired, |
41 | }).isRequired, | 40 | }).isRequired, |
42 | actions: PropTypes.shape({ | ||
43 | ui: PropTypes.shape({ | ||
44 | openSettings: PropTypes.func.isRequired, | ||
45 | }).isRequired, | ||
46 | }).isRequired, | ||
47 | }; | 41 | }; |
diff --git a/src/features/todos/store.js b/src/features/todos/store.js index 7da3b7f49..56e117c6c 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js | |||
@@ -12,6 +12,7 @@ import { createReactions } from '../../stores/lib/Reaction'; | |||
12 | import { createActionBindings } from '../utils/ActionBinding'; | 12 | import { createActionBindings } from '../utils/ActionBinding'; |
13 | import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.'; | 13 | import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.'; |
14 | import { IPC } from './constants'; | 14 | import { IPC } from './constants'; |
15 | import { state as delayAppState } from '../delayApp'; | ||
15 | 16 | ||
16 | const debug = require('debug')('Franz:feature:todos:store'); | 17 | const debug = require('debug')('Franz:feature:todos:store'); |
17 | 18 | ||
@@ -29,7 +30,7 @@ export default class TodoStore extends FeatureStore { | |||
29 | } | 30 | } |
30 | 31 | ||
31 | @computed get isTodosPanelVisible() { | 32 | @computed get isTodosPanelVisible() { |
32 | if (this.stores.services.all.length === 0) return false; | 33 | if (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false; |
33 | if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; | 34 | if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE; |
34 | 35 | ||
35 | return this.settings.isTodosPanelVisible; | 36 | return this.settings.isTodosPanelVisible; |
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 09c98ab8c..9e06a78e3 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -1,6 +1,6 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import { Infobox } from '@meetfranz/ui'; | 6 | import { Infobox } from '@meetfranz/ui'; |
@@ -12,6 +12,8 @@ import Request from '../../../stores/lib/Request'; | |||
12 | import Appear from '../../../components/ui/effects/Appear'; | 12 | import Appear from '../../../components/ui/effects/Appear'; |
13 | import { workspaceStore } from '../index'; | 13 | import { workspaceStore } from '../index'; |
14 | import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer'; | 14 | import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer'; |
15 | import UIStore from '../../../stores/UIStore'; | ||
16 | import ActivateTrialButton from '../../../components/ui/activateTrialButton'; | ||
15 | 17 | ||
16 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
17 | headline: { | 19 | headline: { |
@@ -62,17 +64,27 @@ const styles = theme => ({ | |||
62 | height: 'auto', | 64 | height: 'auto', |
63 | }, | 65 | }, |
64 | premiumAnnouncement: { | 66 | premiumAnnouncement: { |
65 | padding: '20px', | 67 | padding: 20, |
66 | backgroundColor: '#3498db', | 68 | // backgroundColor: '#3498db', |
67 | marginLeft: '-20px', | 69 | marginLeft: -20, |
68 | marginBottom: '20px', | 70 | marginBottom: 40, |
71 | paddingBottom: 40, | ||
69 | height: 'auto', | 72 | height: 'auto', |
70 | color: 'white', | 73 | display: 'flex', |
71 | borderRadius: theme.borderRadius, | 74 | borderBottom: [1, 'solid', theme.inputBackground], |
75 | }, | ||
76 | teaserImage: { | ||
77 | width: 200, | ||
78 | height: '100%', | ||
79 | float: 'left', | ||
80 | margin: [-8, 0, 0, -20], | ||
81 | }, | ||
82 | upgradeCTA: { | ||
83 | marginTop: 20, | ||
72 | }, | 84 | }, |
73 | }); | 85 | }); |
74 | 86 | ||
75 | @injectSheet(styles) @observer | 87 | @inject('stores') @injectSheet(styles) @observer |
76 | class WorkspacesDashboard extends Component { | 88 | class WorkspacesDashboard extends Component { |
77 | static propTypes = { | 89 | static propTypes = { |
78 | classes: PropTypes.object.isRequired, | 90 | classes: PropTypes.object.isRequired, |
@@ -100,7 +112,9 @@ class WorkspacesDashboard extends Component { | |||
100 | onWorkspaceClick, | 112 | onWorkspaceClick, |
101 | workspaces, | 113 | workspaces, |
102 | } = this.props; | 114 | } = this.props; |
115 | |||
103 | const { intl } = this.context; | 116 | const { intl } = this.context; |
117 | |||
104 | return ( | 118 | return ( |
105 | <div className="settings__main"> | 119 | <div className="settings__main"> |
106 | <div className="settings__header"> | 120 | <div className="settings__header"> |
@@ -138,13 +152,21 @@ class WorkspacesDashboard extends Component { | |||
138 | 152 | ||
139 | {workspaceStore.isPremiumUpgradeRequired && ( | 153 | {workspaceStore.isPremiumUpgradeRequired && ( |
140 | <div className={classes.premiumAnnouncement}> | 154 | <div className={classes.premiumAnnouncement}> |
141 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | 155 | <img src={`./assets/images/workspaces/teaser_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" /> |
142 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | 156 | <div> |
157 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | ||
158 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | ||
159 | <ActivateTrialButton | ||
160 | className={classes.upgradeCTA} | ||
161 | gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }} | ||
162 | short | ||
163 | /> | ||
164 | </div> | ||
143 | </div> | 165 | </div> |
144 | )} | 166 | )} |
145 | 167 | ||
146 | <PremiumFeatureContainer | 168 | <PremiumFeatureContainer |
147 | condition={workspaceStore.isPremiumFeature} | 169 | condition={() => workspaceStore.isPremiumUpgradeRequired} |
148 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} | 170 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} |
149 | > | 171 | > |
150 | {/* ===== Create workspace form ===== */} | 172 | {/* ===== Create workspace form ===== */} |
@@ -207,3 +229,9 @@ class WorkspacesDashboard extends Component { | |||
207 | } | 229 | } |
208 | 230 | ||
209 | export default WorkspacesDashboard; | 231 | export default WorkspacesDashboard; |
232 | |||
233 | WorkspacesDashboard.wrappedComponent.propTypes = { | ||
234 | stores: PropTypes.shape({ | ||
235 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
236 | }).isRequired, | ||
237 | }; | ||
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js index e44569be9..4a1f80b4e 100644 --- a/src/features/workspaces/store.js +++ b/src/features/workspaces/store.js | |||
@@ -253,11 +253,10 @@ export default class WorkspacesStore extends FeatureStore { | |||
253 | }; | 253 | }; |
254 | 254 | ||
255 | _setIsPremiumFeatureReaction = () => { | 255 | _setIsPremiumFeatureReaction = () => { |
256 | const { features, user } = this.stores; | 256 | const { features } = this.stores; |
257 | const { isPremium } = user.data; | ||
258 | const { isWorkspaceIncludedInCurrentPlan } = features.features; | 257 | const { isWorkspaceIncludedInCurrentPlan } = features.features; |
259 | this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan; | 258 | this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan; |
260 | this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan && !isPremium; | 259 | this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan; |
261 | }; | 260 | }; |
262 | 261 | ||
263 | _setWorkspaceBeingEditedReaction = () => { | 262 | _setWorkspaceBeingEditedReaction = () => { |