From 073212bf046b9218f9e3129988b1b63fba5d685d Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Wed, 10 Apr 2019 16:12:38 +0200 Subject: added generic pro badge component for settings nav --- .../settings/navigation/SettingsNavigation.js | 13 ++++++---- src/features/workspaces/store.js | 12 +++++----- src/i18n/locales/defaultMessages.json | 28 +++++++++++----------- src/i18n/locales/en-US.json | 2 +- .../settings/navigation/SettingsNavigation.json | 28 +++++++++++----------- src/stores/UIStore.js | 9 +++---- src/styles/settings.scss | 26 -------------------- 7 files changed, 48 insertions(+), 70 deletions(-) (limited to 'src') diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 1c51d50d6..993b0a44a 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js @@ -2,10 +2,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, intlShape } from 'react-intl'; import { inject, observer } from 'mobx-react'; -import { Icon } from '@meetfranz/ui'; +import { ProBadge } from '@meetfranz/ui'; import Link from '../../ui/Link'; import { workspaceStore } from '../../../features/workspaces'; +import UIStore from '../../../stores/UIStore'; const messages = defineMessages({ availableServices: { @@ -40,6 +41,9 @@ const messages = defineMessages({ export default @inject('stores') @observer class SettingsNavigation extends Component { static propTypes = { + stores: PropTypes.shape({ + ui: PropTypes.instanceOf(UIStore).isRequired, + }).isRequired, serviceCount: PropTypes.number.isRequired, workspaceCount: PropTypes.number.isRequired, }; @@ -49,7 +53,8 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp }; render() { - const { serviceCount, workspaceCount } = this.props; + const { serviceCount, workspaceCount, stores } = this.props; + const { isDarkThemeActive } = stores.ui; const { intl } = this.context; return ( @@ -79,9 +84,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp {intl.formatMessage(messages.yourWorkspaces)} {' '} {workspaceStore.isPremiumUpgradeRequired ? ( - - - + ) : ( {workspaceCount} )} diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js index 2e1764f99..ba48022c2 100644 --- a/src/features/workspaces/store.js +++ b/src/features/workspaces/store.js @@ -36,6 +36,8 @@ export default class WorkspacesStore extends FeatureStore { @observable isWorkspaceDrawerOpen = false; + @observable isSettingsRouteActive = null; + @computed get workspaces() { if (!this.isFeatureActive) return []; return getUserWorkspacesRequest.result || []; @@ -104,8 +106,6 @@ export default class WorkspacesStore extends FeatureStore { _wasDrawerOpenBeforeSettingsRoute = null; - _isSettingsRouteActive = null; - _getWorkspaceById = id => this.workspaces.find(w => w.id === id); _updateSettings = (changes) => { @@ -239,17 +239,17 @@ export default class WorkspacesStore extends FeatureStore { _openDrawerWithSettingsReaction = () => { const { router } = this.stores; const isWorkspaceSettingsRoute = router.location.pathname.includes(WORKSPACES_ROUTES.ROOT); - const isSwitchingToSettingsRoute = !this._isSettingsRouteActive && isWorkspaceSettingsRoute; - const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this._isSettingsRouteActive; + const isSwitchingToSettingsRoute = !this.isSettingsRouteActive && isWorkspaceSettingsRoute; + const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this.isSettingsRouteActive; if (isSwitchingToSettingsRoute) { - this._isSettingsRouteActive = true; + this.isSettingsRouteActive = true; this._wasDrawerOpenBeforeSettingsRoute = this.isWorkspaceDrawerOpen; if (!this._wasDrawerOpenBeforeSettingsRoute) { workspaceActions.toggleWorkspaceDrawer(); } } else if (isLeavingSettingsRoute) { - this._isSettingsRouteActive = false; + this.isSettingsRouteActive = false; if (!this._wasDrawerOpenBeforeSettingsRoute && this.isWorkspaceDrawerOpen) { workspaceActions.toggleWorkspaceDrawer(); } diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index f882e6030..791c4dd53 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json @@ -1302,91 +1302,91 @@ "defaultMessage": "!!!Available services", "end": { "column": 3, - "line": 14 + "line": 15 }, "file": "src/components/settings/navigation/SettingsNavigation.js", "id": "settings.navigation.availableServices", "start": { "column": 21, - "line": 11 + "line": 12 } }, { "defaultMessage": "!!!Your services", "end": { "column": 3, - "line": 18 + "line": 19 }, "file": "src/components/settings/navigation/SettingsNavigation.js", "id": "settings.navigation.yourServices", "start": { "column": 16, - "line": 15 + "line": 16 } }, { "defaultMessage": "!!!Your workspaces", "end": { "column": 3, - "line": 22 + "line": 23 }, "file": "src/components/settings/navigation/SettingsNavigation.js", "id": "settings.navigation.yourWorkspaces", "start": { "column": 18, - "line": 19 + "line": 20 } }, { "defaultMessage": "!!!Account", "end": { "column": 3, - "line": 26 + "line": 27 }, "file": "src/components/settings/navigation/SettingsNavigation.js", "id": "settings.navigation.account", "start": { "column": 11, - "line": 23 + "line": 24 } }, { "defaultMessage": "!!!Settings", "end": { "column": 3, - "line": 30 + "line": 31 }, "file": "src/components/settings/navigation/SettingsNavigation.js", "id": "settings.navigation.settings", "start": { "column": 12, - "line": 27 + "line": 28 } }, { "defaultMessage": "!!!Invite Friends", "end": { "column": 3, - "line": 34 + "line": 35 }, "file": "src/components/settings/navigation/SettingsNavigation.js", "id": "settings.navigation.inviteFriends", "start": { "column": 17, - "line": 31 + "line": 32 } }, { "defaultMessage": "!!!Logout", "end": { "column": 3, - "line": 38 + "line": 39 }, "file": "src/components/settings/navigation/SettingsNavigation.js", "id": "settings.navigation.logout", "start": { "column": 10, - "line": 35 + "line": 36 } } ], diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index db1d51f3b..6591af2e2 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -315,4 +315,4 @@ "workspaceDrawer.workspaceFeatureInfo": "

Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.

You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.

", "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", "workspaces.switchingIndicator.switchingTo": "Switching to" -} +} \ No newline at end of file diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json index de78a71cf..77b0ed8a4 100644 --- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json +++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json @@ -4,11 +4,11 @@ "defaultMessage": "!!!Available services", "file": "src/components/settings/navigation/SettingsNavigation.js", "start": { - "line": 11, + "line": 12, "column": 21 }, "end": { - "line": 14, + "line": 15, "column": 3 } }, @@ -17,11 +17,11 @@ "defaultMessage": "!!!Your services", "file": "src/components/settings/navigation/SettingsNavigation.js", "start": { - "line": 15, + "line": 16, "column": 16 }, "end": { - "line": 18, + "line": 19, "column": 3 } }, @@ -30,11 +30,11 @@ "defaultMessage": "!!!Your workspaces", "file": "src/components/settings/navigation/SettingsNavigation.js", "start": { - "line": 19, + "line": 20, "column": 18 }, "end": { - "line": 22, + "line": 23, "column": 3 } }, @@ -43,11 +43,11 @@ "defaultMessage": "!!!Account", "file": "src/components/settings/navigation/SettingsNavigation.js", "start": { - "line": 23, + "line": 24, "column": 11 }, "end": { - "line": 26, + "line": 27, "column": 3 } }, @@ -56,11 +56,11 @@ "defaultMessage": "!!!Settings", "file": "src/components/settings/navigation/SettingsNavigation.js", "start": { - "line": 27, + "line": 28, "column": 12 }, "end": { - "line": 30, + "line": 31, "column": 3 } }, @@ -69,11 +69,11 @@ "defaultMessage": "!!!Invite Friends", "file": "src/components/settings/navigation/SettingsNavigation.js", "start": { - "line": 31, + "line": 32, "column": 17 }, "end": { - "line": 34, + "line": 35, "column": 3 } }, @@ -82,11 +82,11 @@ "defaultMessage": "!!!Logout", "file": "src/components/settings/navigation/SettingsNavigation.js", "start": { - "line": 35, + "line": 36, "column": 10 }, "end": { - "line": 38, + "line": 39, "column": 3 } } diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js index bb7965a4a..a95a8e1e0 100644 --- a/src/stores/UIStore.js +++ b/src/stores/UIStore.js @@ -21,11 +21,12 @@ export default class UIStore extends Store { return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted; } - @computed get theme() { - if (this.stores.settings.all.app.darkMode) { - return theme('dark'); - } + @computed get isDarkThemeActive() { + return this.stores.settings.all.app.darkMode; + } + @computed get theme() { + if (this.isDarkThemeActive) return theme('dark'); return theme('default'); } diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 6340f2951..dd6f56d2b 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -85,11 +85,6 @@ .badge { background: $dark-theme-gray-lighter; color: $dark-theme-gray-smoke; - - &.badge--pro { - background: $theme-brand-primary; - padding: 4px 6px 3px 7px; - } } &:hover { @@ -98,11 +93,6 @@ .badge { background: $dark-theme-gray-lighter; color: $dark-theme-gray-smoke; - - &.badge--pro { - background: $theme-brand-primary; - padding: 4px 6px 3px 7px; - } } } @@ -433,15 +423,6 @@ text-decoration: none; transition: background $theme-transition-time, color $theme-transition-time; - .badge--pro { - background: $theme-brand-primary !important; - padding: 4px 6px 3px 7px; - - .badge-icon-pro { - fill: white; - } - } - &:hover { background: darken($theme-gray-lightest, 5%); @@ -454,13 +435,6 @@ background: $theme-brand-primary; color: #FFF; - .badge--pro { - background: white !important; - .badge-icon-pro { - fill: $theme-brand-primary; - } - } - .badge { background: #FFF; color: $theme-brand-primary; -- cgit v1.2.3-54-g00ecf