From a56408ad7531c1f5e552f926a88cc4540d805b85 Mon Sep 17 00:00:00 2001 From: vantezzen Date: Wed, 16 Oct 2019 11:06:27 +0200 Subject: Add button to directly open darkmode.css --- src/styles/settings.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/styles') diff --git a/src/styles/settings.scss b/src/styles/settings.scss index bb95ab5d2..071861f16 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -296,6 +296,7 @@ } .settings__delete-button { right: 0; } + .settings__open-dark-mode-button { right: 0; cursor:pointer; } .settings__empty-state { align-items: center; -- cgit v1.2.3-70-g09d2 From 942466eb686c480133e1b0b8b9a2b975098b5bc4 Mon Sep 17 00:00:00 2001 From: vantezzen Date: Thu, 17 Oct 2019 16:22:11 +0200 Subject: Implement #120 --- package-lock.json | 27 ++--- package.json | 4 +- src/assets/themeInfo.json | 1 + .../settings/settings/EditSettingsForm.js | 10 ++ src/components/ui/Button.js | 13 ++- src/components/ui/FullscreenLoader/index.js | 19 +++- src/components/ui/FullscreenLoader/styles.js | 1 - src/components/ui/Loader.js | 15 ++- src/config.js | 3 +- src/containers/settings/EditSettingsScreen.js | 10 ++ src/features/accentColor/index.js | 55 +++++++++++ src/features/announcements/api.js | 2 +- src/i18n/locales/defaultMessages.json | 110 +++++++++++++-------- src/i18n/locales/en-US.json | 2 + .../settings/settings/EditSettingsForm.json | 65 +++++++----- .../containers/settings/EditSettingsScreen.json | 45 ++++++--- src/index.js | 9 +- src/scripts/build-theme-info.js | 95 ++++++++++++++++++ src/stores/FeaturesStore.js | 2 + src/styles/radio.scss | 4 +- src/styles/settings.scss | 12 ++- src/styles/tabs.scss | 4 +- src/styles/type.scss | 4 +- 23 files changed, 397 insertions(+), 115 deletions(-) create mode 100644 src/assets/themeInfo.json create mode 100644 src/features/accentColor/index.js create mode 100644 src/scripts/build-theme-info.js (limited to 'src/styles') diff --git a/package-lock.json b/package-lock.json index 12ae35ed5..fb3b675fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4117,8 +4117,7 @@ "atob": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true + "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, "atob-lite": { "version": "2.0.0", @@ -6334,6 +6333,17 @@ "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=", "dev": true }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + } + }, "css-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", @@ -6569,8 +6579,7 @@ "decode-uri-component": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true + "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" }, "decompress-response": { "version": "3.3.0", @@ -19379,8 +19388,7 @@ "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", - "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", - "dev": true + "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=" }, "responselike": { "version": "1.0.2", @@ -20489,7 +20497,6 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz", "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==", - "dev": true, "requires": { "atob": "^2.1.1", "decode-uri-component": "^0.2.0", @@ -20510,8 +20517,7 @@ "source-map-url": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", - "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", - "dev": true + "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=" }, "sparkles": { "version": "1.0.1", @@ -22285,8 +22291,7 @@ "urix": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", - "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", - "dev": true + "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=" }, "url": { "version": "0.11.0", diff --git a/package.json b/package.json index d574bfeb9..e016f7359 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "uidev": "cd uidev && webpack-dev-server", "postinstall": "npx lerna run prepare", "apply-branding": "node ./src/i18n/apply-branding.js", - "prepare-code": "npm run lint && npm run reformat-files && npm run manage-translations && npm run apply-branding" + "prepare-code": "npm run lint && npm run reformat-files && npm run manage-translations && npm run apply-branding", + "build-theme-info": "node src/scripts/build-theme-info.js" }, "keywords": [], "author": "Amine Mouafik ", @@ -47,6 +48,7 @@ "auto-launch": "5.0.5", "classnames": "2.2.6", "cld3-asm": "1.0.1", + "css": "2.2.4", "darkreader": "4.7.15", "du": "^0.1.0", "electron-dl": "1.14.0", diff --git a/src/assets/themeInfo.json b/src/assets/themeInfo.json new file mode 100644 index 000000000..d6017de23 --- /dev/null +++ b/src/assets/themeInfo.json @@ -0,0 +1 @@ +{"color":".theme__dark .app .sidebar .sidebar__button.is-muted, .theme__dark .app .sidebar .sidebar__button.is-active, .sidebar .sidebar__button.is-muted, .sidebar .sidebar__button.is-active, .settings .account .invoices .invoices__action button, .settings-navigation .settings-navigation__link.is-active .badge, a.button, a.link, .auth .welcome .button:hover, .auth .welcome .button__inverted, .franz-form .franz-form__radio.is-selected, .theme__dark .franz-form__button.franz-form__button--inverted, .franz-form__button.franz-form__button--inverted","border-left-color":".tab-item.is-active","border-color":".theme__dark .settings .premium-info, a.button, .franz-form .franz-form__radio.is-selected","background":".settings .settings__header, .settings .settings__close, .settings .settings__close:hover, .settings-navigation .settings-navigation__link.is-active, a.button:hover, .info-bar, .info-bar.info-bar--primary, .infobox.infobox--primary, .theme__dark .badge.badge--primary, .theme__dark .badge.badge--premium, .badge.badge--primary, .badge.badge--premium, .content-tabs .content-tabs__tabs .content-tabs__item.is-active, #electron-app-title-bar .toolbar-dropdown:not(.open) > .toolbar-button > button:hover, #electron-app-title-bar .list-item.selected .menu-item, #electron-app-title-bar .list-item.selected:focus .menu-item, .theme__dark .quick-switch .active, .franz-form .franz-form__toggle-wrapper .franz-form__toggle.is-active .franz-form__toggle-button, .theme__dark .franz-form__button, .theme__dark .franz-form__button:hover, .theme__dark .franz-form__button.franz-form__button--inverted:hover, .franz-form__button, .franz-form__button:hover, .franz-form__button.franz-form__button--inverted:hover","border-right-color":".settings .settings__header .separator"} \ No newline at end of file diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index b01368f69..a826479ad 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js @@ -79,6 +79,10 @@ const messages = defineMessages({ id: 'settings.app.headlineAppearance', defaultMessage: '!!!Appearance', }, + accentColorInfo: { + id: 'settings.app.accentColorInfo', + defaultMessage: '!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)', + }, headlineAdvanced: { id: 'settings.app.headlineAdvanced', defaultMessage: '!!!Advanced', @@ -373,6 +377,12 @@ export default @observer class EditSettingsForm extends Component { + this.submit(e)} + field={form.$('accentColor')} + /> +

{intl.formatMessage(messages.accentColorInfo)}

{/* Language */}

{intl.formatMessage(messages.headlineLanguage)}

diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js index e2d7cea83..f46fd34ea 100644 --- a/src/components/ui/Button.js +++ b/src/components/ui/Button.js @@ -1,10 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { observer } from 'mobx-react'; +import { observer, inject } from 'mobx-react'; import Loader from 'react-loader'; import classnames from 'classnames'; -export default @observer class Button extends Component { +export default @observer @inject('stores') class Button extends Component { static propTypes = { className: PropTypes.string, label: PropTypes.string.isRequired, @@ -14,6 +14,13 @@ export default @observer class Button extends Component { buttonType: PropTypes.string, loaded: PropTypes.bool, htmlForm: PropTypes.string, + stores: PropTypes.shape({ + settings: PropTypes.shape({ + app: PropTypes.shape({ + accentColor: PropTypes.string.isRequired, + }).isRequired, + }).isRequired, + }).isRequired, }; static defaultProps = { @@ -69,7 +76,7 @@ export default @observer class Button extends Component { loaded={loaded} lines={10} scale={0.4} - color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'} + color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor} component="span" /> {label} diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index 06dab1eb6..334bb6c4a 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { observer } from 'mobx-react'; +import { observer, inject } from 'mobx-react'; import injectSheet, { withTheme } from 'react-jss'; import classnames from 'classnames'; @@ -8,7 +8,7 @@ import Loader from '../Loader'; import styles from './styles'; -export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component { +export default @observer @inject('stores') @withTheme @injectSheet(styles) class FullscreenLoader extends Component { static propTypes = { className: PropTypes.string, title: PropTypes.string.isRequired, @@ -16,6 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader theme: PropTypes.object.isRequired, spinnerColor: PropTypes.string, children: PropTypes.node, + stores: PropTypes.shape({ + settings: PropTypes.shape({ + app: PropTypes.shape({ + accentColor: PropTypes.string.isRequired, + }).isRequired, + }).isRequired, + }).isRequired, }; static defaultProps = { @@ -32,10 +39,16 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader spinnerColor, className, theme, + stores, } = this.props; return ( -
+
{ + style += ` + ${themeInfo[property]} { + ${property}: ${color}; + } + `; + }); + + return style; +} + +export default function initAccentColor(stores) { + const { settings } = stores; + createAccentStyleElement(); + + // Update accent color + reaction( + () => ( + settings.all.app.accentColor + ), + (color) => { + if (color === DEFAULT_APP_SETTINGS.accentColor) { + // Reset accent style to return to default color scheme + setAccentStyle(''); + } else { + const style = generateAccentStyle(color); + setAccentStyle(style); + } + }, + { + fireImmediately: true, + }, + ); +} diff --git a/src/features/announcements/api.js b/src/features/announcements/api.js index a7995d6db..f33980d0f 100644 --- a/src/features/announcements/api.js +++ b/src/features/announcements/api.js @@ -12,7 +12,7 @@ export const announcementsApi = { async getChangelog(version) { debug('fetching release changelog from Github'); - const url = `https://api.github.com/repos/meetfranz/franz/releases/tags/v${version}`; + const url = `https://api.github.com/repos/getferdi/ferdi/releases/tags/v${version}`; const request = await window.fetch(url, { method: 'GET' }); if (!request.ok) return null; const data = await request.json(); diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 3fc86c266..f9afe6213 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json @@ -2657,172 +2657,185 @@ } }, { - "defaultMessage": "!!!Advanced", + "defaultMessage": "!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)", "end": { "column": 3, "line": 85 }, "file": "src/components/settings/settings/EditSettingsForm.js", + "id": "settings.app.accentColorInfo", + "start": { + "column": 19, + "line": 82 + } + }, + { + "defaultMessage": "!!!Advanced", + "end": { + "column": 3, + "line": 89 + }, + "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.headlineAdvanced", "start": { "column": 20, - "line": 82 + "line": 86 } }, { "defaultMessage": "!!!Help us to translate Ferdi into your language.", "end": { "column": 3, - "line": 89 + "line": 93 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.translationHelp", "start": { "column": 19, - "line": 86 + "line": 90 } }, { "defaultMessage": "!!!Cache", "end": { "column": 3, - "line": 93 + "line": 97 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.subheadlineCache", "start": { "column": 20, - "line": 90 + "line": 94 } }, { "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.", "end": { "column": 3, - "line": 97 + "line": 101 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.cacheInfo", "start": { "column": 13, - "line": 94 + "line": 98 } }, { "defaultMessage": "!!!Clear cache", "end": { "column": 3, - "line": 101 + "line": 105 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.buttonClearAllCache", "start": { "column": 23, - "line": 98 + "line": 102 } }, { "defaultMessage": "!!!Check for updates", "end": { "column": 3, - "line": 105 + "line": 109 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.buttonSearchForUpdate", "start": { "column": 25, - "line": 102 + "line": 106 } }, { "defaultMessage": "!!!Restart & install update", "end": { "column": 3, - "line": 109 + "line": 113 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.buttonInstallUpdate", "start": { "column": 23, - "line": 106 + "line": 110 } }, { "defaultMessage": "!!!Is searching for update", "end": { "column": 3, - "line": 113 + "line": 117 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.updateStatusSearching", "start": { "column": 25, - "line": 110 + "line": 114 } }, { "defaultMessage": "!!!Update available, downloading...", "end": { "column": 3, - "line": 117 + "line": 121 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.updateStatusAvailable", "start": { "column": 25, - "line": 114 + "line": 118 } }, { "defaultMessage": "!!!You are using the latest version of Ferdi", "end": { "column": 3, - "line": 121 + "line": 125 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.updateStatusUpToDate", "start": { "column": 24, - "line": 118 + "line": 122 } }, { "defaultMessage": "!!!Current version:", "end": { "column": 3, - "line": 125 + "line": 129 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.currentVersion", "start": { "column": 18, - "line": 122 + "line": 126 } }, { "defaultMessage": "!!!Changes require restart", "end": { "column": 3, - "line": 129 + "line": 133 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.restartRequired", "start": { "column": 29, - "line": 126 + "line": 130 } }, { "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.", "end": { "column": 3, - "line": 133 + "line": 137 }, "file": "src/components/settings/settings/EditSettingsForm.js", "id": "settings.app.languageDisclaimer", "start": { "column": 22, - "line": 130 + "line": 134 } } ], @@ -4019,107 +4032,120 @@ } }, { - "defaultMessage": "!!!Display disabled services tabs", + "defaultMessage": "!!!Accent color", "end": { "column": 3, "line": 104 }, "file": "src/containers/settings/EditSettingsScreen.js", + "id": "settings.app.form.accentColor", + "start": { + "column": 15, + "line": 101 + } + }, + { + "defaultMessage": "!!!Display disabled services tabs", + "end": { + "column": 3, + "line": 108 + }, + "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.showDisabledServices", "start": { "column": 24, - "line": 101 + "line": 105 } }, { "defaultMessage": "!!!Show unread message badge when notifications are disabled", "end": { "column": 3, - "line": 108 + "line": 112 }, "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.showMessagesBadgesWhenMuted", "start": { "column": 29, - "line": 105 + "line": 109 } }, { "defaultMessage": "!!!Enable spell checking", "end": { "column": 3, - "line": 112 + "line": 116 }, "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.enableSpellchecking", "start": { "column": 23, - "line": 109 + "line": 113 } }, { "defaultMessage": "!!!Enable GPU Acceleration", "end": { "column": 3, - "line": 116 + "line": 120 }, "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.enableGPUAcceleration", "start": { "column": 25, - "line": 113 + "line": 117 } }, { "defaultMessage": "!!!Include beta versions", "end": { "column": 3, - "line": 120 + "line": 124 }, "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.beta", "start": { "column": 8, - "line": 117 + "line": 121 } }, { "defaultMessage": "!!!Disable updates", "end": { "column": 3, - "line": 124 + "line": 128 }, "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.noUpdates", "start": { "column": 13, - "line": 121 + "line": 125 } }, { "defaultMessage": "!!!Enable Franz Todos", "end": { "column": 3, - "line": 128 + "line": 132 }, "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.enableTodos", "start": { "column": 15, - "line": 125 + "line": 129 } }, { "defaultMessage": "!!!Keep all workspaces loaded", "end": { "column": 3, - "line": 132 + "line": 136 }, "file": "src/containers/settings/EditSettingsScreen.js", "id": "settings.app.form.keepAllWorkspacesLoaded", "start": { "column": 27, - "line": 129 + "line": 133 } } ], diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index b4649c03c..d3dabc364 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -214,11 +214,13 @@ "settings.account.upgradeToPro.label": "Upgrade to Ferdi Professional", "settings.account.userInfoRequestFailed": "Could not load user information", "settings.account.yourLicense": "Your Ferdi License", + "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: #7367f0)", "settings.app.buttonClearAllCache": "Clear cache", "settings.app.buttonInstallUpdate": "Restart & install update", "settings.app.buttonSearchForUpdate": "Check for updates", "settings.app.cacheInfo": "Ferdi cache is currently using {size} of disk space.", "settings.app.currentVersion": "Current version:", + "settings.app.form.accentColor": "Accent color", "settings.app.form.autoLaunchInBackground": "Open in background", "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start", "settings.app.form.beta": "Include beta versions", diff --git a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json index 97ecf4b5d..16d8e7816 100644 --- a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json +++ b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json @@ -181,16 +181,29 @@ "column": 3 } }, + { + "id": "settings.app.accentColorInfo", + "defaultMessage": "!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)", + "file": "src/components/settings/settings/EditSettingsForm.js", + "start": { + "line": 82, + "column": 19 + }, + "end": { + "line": 85, + "column": 3 + } + }, { "id": "settings.app.headlineAdvanced", "defaultMessage": "!!!Advanced", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 82, + "line": 86, "column": 20 }, "end": { - "line": 85, + "line": 89, "column": 3 } }, @@ -199,11 +212,11 @@ "defaultMessage": "!!!Help us to translate Ferdi into your language.", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 86, + "line": 90, "column": 19 }, "end": { - "line": 89, + "line": 93, "column": 3 } }, @@ -212,11 +225,11 @@ "defaultMessage": "!!!Cache", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 90, + "line": 94, "column": 20 }, "end": { - "line": 93, + "line": 97, "column": 3 } }, @@ -225,11 +238,11 @@ "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 94, + "line": 98, "column": 13 }, "end": { - "line": 97, + "line": 101, "column": 3 } }, @@ -238,11 +251,11 @@ "defaultMessage": "!!!Clear cache", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 98, + "line": 102, "column": 23 }, "end": { - "line": 101, + "line": 105, "column": 3 } }, @@ -251,11 +264,11 @@ "defaultMessage": "!!!Check for updates", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 102, + "line": 106, "column": 25 }, "end": { - "line": 105, + "line": 109, "column": 3 } }, @@ -264,11 +277,11 @@ "defaultMessage": "!!!Restart & install update", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 106, + "line": 110, "column": 23 }, "end": { - "line": 109, + "line": 113, "column": 3 } }, @@ -277,11 +290,11 @@ "defaultMessage": "!!!Is searching for update", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 110, + "line": 114, "column": 25 }, "end": { - "line": 113, + "line": 117, "column": 3 } }, @@ -290,11 +303,11 @@ "defaultMessage": "!!!Update available, downloading...", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 114, + "line": 118, "column": 25 }, "end": { - "line": 117, + "line": 121, "column": 3 } }, @@ -303,11 +316,11 @@ "defaultMessage": "!!!You are using the latest version of Ferdi", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 118, + "line": 122, "column": 24 }, "end": { - "line": 121, + "line": 125, "column": 3 } }, @@ -316,11 +329,11 @@ "defaultMessage": "!!!Current version:", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 122, + "line": 126, "column": 18 }, "end": { - "line": 125, + "line": 129, "column": 3 } }, @@ -329,11 +342,11 @@ "defaultMessage": "!!!Changes require restart", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 126, + "line": 130, "column": 29 }, "end": { - "line": 129, + "line": 133, "column": 3 } }, @@ -342,11 +355,11 @@ "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.", "file": "src/components/settings/settings/EditSettingsForm.js", "start": { - "line": 130, + "line": 134, "column": 22 }, "end": { - "line": 133, + "line": 137, "column": 3 } } diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json index 54a8868bf..bd5efb82e 100644 --- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json +++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json @@ -233,16 +233,29 @@ "column": 3 } }, + { + "id": "settings.app.form.accentColor", + "defaultMessage": "!!!Accent color", + "file": "src/containers/settings/EditSettingsScreen.js", + "start": { + "line": 101, + "column": 15 + }, + "end": { + "line": 104, + "column": 3 + } + }, { "id": "settings.app.form.showDisabledServices", "defaultMessage": "!!!Display disabled services tabs", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 101, + "line": 105, "column": 24 }, "end": { - "line": 104, + "line": 108, "column": 3 } }, @@ -251,11 +264,11 @@ "defaultMessage": "!!!Show unread message badge when notifications are disabled", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 105, + "line": 109, "column": 29 }, "end": { - "line": 108, + "line": 112, "column": 3 } }, @@ -264,11 +277,11 @@ "defaultMessage": "!!!Enable spell checking", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 109, + "line": 113, "column": 23 }, "end": { - "line": 112, + "line": 116, "column": 3 } }, @@ -277,11 +290,11 @@ "defaultMessage": "!!!Enable GPU Acceleration", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 113, + "line": 117, "column": 25 }, "end": { - "line": 116, + "line": 120, "column": 3 } }, @@ -290,11 +303,11 @@ "defaultMessage": "!!!Include beta versions", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 117, + "line": 121, "column": 8 }, "end": { - "line": 120, + "line": 124, "column": 3 } }, @@ -303,11 +316,11 @@ "defaultMessage": "!!!Disable updates", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 121, + "line": 125, "column": 13 }, "end": { - "line": 124, + "line": 128, "column": 3 } }, @@ -316,11 +329,11 @@ "defaultMessage": "!!!Enable Franz Todos", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 125, + "line": 129, "column": 15 }, "end": { - "line": 128, + "line": 132, "column": 3 } }, @@ -329,11 +342,11 @@ "defaultMessage": "!!!Keep all workspaces loaded", "file": "src/containers/settings/EditSettingsScreen.js", "start": { - "line": 129, + "line": 133, "column": 27 }, "end": { - "line": 132, + "line": 136, "column": 3 } } diff --git a/src/index.js b/src/index.js index 2ee404c0b..4dcabb599 100644 --- a/src/index.js +++ b/src/index.js @@ -144,6 +144,13 @@ const createWindow = () => { } // Create the browser window. + let backgroundColor = '#7367F0'; + if (settings.get('accentColor') !== '#7367f0') { + backgroundColor = settings.get('accentColor'); + } else if (settings.get('darkMode')) { + backgroundColor = '#1E1E1E'; + } + mainWindow = new BrowserWindow({ x: posX, y: posY, @@ -153,7 +160,7 @@ const createWindow = () => { minHeight: 500, titleBarStyle: isMac ? 'hidden' : '', frame: isLinux, - backgroundColor: !settings.get('darkMode') ? '#7367F0' : '#1E1E1E', + backgroundColor, webPreferences: { nodeIntegration: true, webviewTag: true, diff --git a/src/scripts/build-theme-info.js b/src/scripts/build-theme-info.js new file mode 100644 index 000000000..4df5a022b --- /dev/null +++ b/src/scripts/build-theme-info.js @@ -0,0 +1,95 @@ +/** + * Script to get information on which selectors use the brand color. + * This is needed to provide the accent color feature - the feature will create CSS rules + * to overwrite the color of these selectors. + */ +const css = require('css'); +const fs = require('fs-extra'); +const path = require('path'); + +// Colors that should be replaced with the accent color +const accentColors = [ + '#7367f0', + '#5e50ee', +]; + +const cssFile = path.join(__dirname, '../../', 'build', 'styles', 'main.css'); +const outputFile = path.join(__dirname, '../', 'assets', 'themeInfo.json'); + +// Parse and extract the rules from a CSS stylesheet file +async function getRulesFromCssFile(file) { + const cssSrc = (await fs.readFile(file)).toString(); + const cssTree = css.parse(cssSrc); + + return cssTree.stylesheet.rules; +} + +/** + * Get all selectors from a list of parsed CSS rules that set any property to one of the specified + * values. + * + * This function will output an object in this format: + * { + * 'property-name': [ array of selectors ] + * } + * + * e.g. + * { + * 'background-color': [ + * '.background', + * '.input-dark' + * ] + * } + * + * @param {Array} rules Rules as outputted by the `css` module + * @param {Array} values Array of values that should be searched for + */ +function getSelectorsDeclaringValues(rules, values) { + const output = {}; + + rules.forEach((rule) => { + if (rule.declarations) { + rule.declarations.forEach((declaration) => { + if (declaration.type === 'declaration' + && values.includes(declaration.value.toLowerCase())) { + if (!output[declaration.property]) { + output[declaration.property] = []; + } + output[declaration.property] = output[declaration.property].concat(rule.selectors); + } + }); + } + }); + + return output; +} + +async function generateThemeInfo() { + if (!await fs.pathExists(cssFile)) { + console.log('Please make sure to build the project first.'); + return; + } + + // Read and parse css bundle + const rules = await getRulesFromCssFile(cssFile); + + console.log(`Found ${rules.length} rules`); + + // Get rules specifying the brand colors + const brandRules = getSelectorsDeclaringValues(rules, accentColors); + + console.log(`Found ${Object.keys(brandRules).join(', ')} properties that set color to brand color`); + + // Join array of declarations into a single string + Object.keys(brandRules).forEach((rule) => { + brandRules[rule] = brandRules[rule].join(', '); + }); + + // Write object with theme info to file + fs.writeFile( + outputFile, + JSON.stringify(brandRules), + ); +} + +generateThemeInfo(); diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js index c39b6d7f3..3d9542245 100644 --- a/src/stores/FeaturesStore.js +++ b/src/stores/FeaturesStore.js @@ -20,6 +20,7 @@ import settingsWS from '../features/settingsWS'; import serviceLimit from '../features/serviceLimit'; import communityRecipes from '../features/communityRecipes'; import todos from '../features/todos'; +import accentColor from '../features/accentColor'; import { DEFAULT_FEATURES_CONFIG } from '../config'; @@ -83,5 +84,6 @@ export default class FeaturesStore extends Store { serviceLimit(this.stores, this.actions); communityRecipes(this.stores, this.actions); todos(this.stores, this.actions); + accentColor(this.stores, this.actions); } } diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 87d401215..b1e148ca0 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -30,7 +30,9 @@ &.is-selected { background: #FFF; - border: 2px solid $theme-brand-primary; + border-width: 2px; + border-style: solid; + border-color: $theme-brand-primary; color: $theme-brand-primary; } diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 071861f16..753288b8d 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -59,7 +59,9 @@ .premium-info { background: $dark-theme-gray-darker; - border: 2px solid $theme-brand-primary; + border-width: 2px; + border-style: solid; + border-color: $theme-brand-primary; } .legal { color: $theme-gray-light; } } @@ -170,7 +172,9 @@ } .separator { - border-right: 1px solid darken($theme-brand-primary, 8%); + border-right-width: 1px; + border-right-style: solid; + border-right-color: $theme-brand-primary; height: 100%; margin: 0 15px; transform: skew(15deg) rotate(2deg); @@ -224,7 +228,7 @@ .settings__close { background: $theme-brand-primary; - border-left: 1px solid darken($theme-brand-primary, 8%); + // border-left: 1px solid darken($theme-brand-primary, 8%); color: #FFF; font-size: 20px; height: 50px; @@ -233,7 +237,9 @@ right: 0; transition: background $theme-transition-time; border-top-right-radius: $theme-border-radius; + cursor: pointer; + &::before { cursor: pointer; } &:hover { background: darken($theme-brand-primary, 5%); } } diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index ee0858687..e500830ed 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -34,7 +34,9 @@ &.is-active { background: lighten($theme-brand-primary, 35%); - border-left: 4px solid $theme-brand-primary; + border-left-width: 4px; + border-left-style: solid; + border-left-color: $theme-brand-primary; .tab-item__icon { margin-left: -4px; } } diff --git a/src/styles/type.scss b/src/styles/type.scss index 135d32da0..e0b27fe34 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss @@ -39,7 +39,9 @@ a { &.button { background: none; - border: 2px solid $theme-brand-primary; + border-width: 2px; + border-style: solid; + border-color: $theme-brand-primary; border-radius: 3px; color: $theme-brand-primary; display: inline-block; -- cgit v1.2.3-70-g09d2 From cf6233586eff4b532df4f9489b3f2b4b27012ffa Mon Sep 17 00:00:00 2001 From: vantezzen Date: Fri, 18 Oct 2019 10:58:02 +0200 Subject: Implement #129 --- src/components/layout/Sidebar.js | 6 ++++++ src/styles/layout.scss | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) (limited to 'src/styles') diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index d0cae3443..a7f8696c3 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js @@ -201,6 +201,12 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`} > + { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE || + this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && ( + + • + + ) } {this.state.tooltipEnabled && ( diff --git a/src/styles/layout.scss b/src/styles/layout.scss index b18bd6dcf..a7de4b247 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -2,6 +2,18 @@ html { overflow: hidden; } +@keyframes pulse-danger { + 0% { + background: darken($theme-brand-danger, 10%); + } + 50% { + background: lighten($theme-brand-danger, 10%); + } + 100% { + background: darken($theme-brand-danger, 10%); + } +} + .theme__dark .app { .sidebar { background: $dark-theme-gray-darker; @@ -26,6 +38,27 @@ html { overflow: hidden; } &.is-active { color: $theme-brand-primary; } + + .update-availible { + align-items: center; + background: $theme-brand-danger; + border-radius: 20px; + bottom: 5px; + color: #FFF; + display: flex; + justify-content: center; + padding: 0px 5px; + position: absolute; + right: 16px; + padding-top: 0; + font-size: 0px; + min-height: 15px; + min-width: 15px; + + animation-name: pulse-danger; + animation-duration: 0.75s; + animation-iteration-count: 6; + } } } -- cgit v1.2.3-70-g09d2