From cca41c184c348ee9fdfe6d925eeb31f22c99ae5a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 26 Sep 2019 17:35:06 +0200 Subject: [PATCH] very basic color pickers for custom theme --- package.json | 1 + .../tabs/user/_GeneralUserSettingsTab.scss | 6 +++ .../tabs/user/GeneralUserSettingsTab.js | 51 +++++++++++++++++++ src/i18n/strings/en_EN.json | 10 ++++ yarn.lock | 12 +++++ 5 files changed, 80 insertions(+) diff --git a/package.json b/package.json index 958b782ac3..e4f0543463 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,7 @@ "slate-react": "^0.18.10", "text-encoding-utf-8": "^1.0.1", "url": "^0.11.0", + "vanilla-picker": "^2.10.0", "velocity-animate": "^1.5.2", "whatwg-fetch": "^1.1.1", "zxcvbn": "^4.4.2" diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss index 62d230e752..ba62288725 100644 --- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss @@ -34,3 +34,9 @@ limitations under the License. .mx_GeneralUserSettingsTab_warningIcon { vertical-align: middle; } + +.mx_GeneralUserSettingsTab_themeSection .mx_GeneralUserSettingsTab_customColors { + button { + display: block; + } +} diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js index b9c566b22a..5ac4e84e54 100644 --- a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.js @@ -39,6 +39,8 @@ import IdentityAuthClient from "../../../../../IdentityAuthClient"; import {abbreviateUrl} from "../../../../../utils/UrlUtils"; import { getThreepidsWithBindStatus } from '../../../../../boundThreepids'; +import Picker from 'vanilla-picker'; + export default class GeneralUserSettingsTab extends React.Component { static propTypes = { closeSettingsFn: PropTypes.func.isRequired, @@ -270,6 +272,21 @@ export default class GeneralUserSettingsTab extends React.Component { _renderThemeSection() { const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag"); + let customSection; + if (this.state.theme === "light-custom") { + customSection = (
+ {_t("Custom theme colors")} + + + + + + + + + +
); + } return (
{_t("Theme")} @@ -280,6 +297,7 @@ export default class GeneralUserSettingsTab extends React.Component { })} + { customSection }
); } @@ -379,3 +397,36 @@ export default class GeneralUserSettingsTab extends React.Component { ); } } + +class CustomThemeColorField extends React.Component { + componentDidMount() { + setTimeout(() => { + this.value = window.getComputedStyle(document.body).getPropertyValue(`--${this.props.name}`); + this._buttonRef.style.background = this.value; + }, 3000); + } + + _onClick = (event) => { + const button = event.target; + if (button.tagName !== "BUTTON") { + console.log("target is", button); + return; + } + console.log("clicked color " + this.props.name); + const picker = new Picker({parent: button, alpha: false, color: this.value}); + picker.onChange = color => this._onColorChanged(color); + } + + _onColorChanged(color) { + const hex = color.hex.substr(0, 7); + document.body.style.setProperty(`--${this.props.name}`, hex); + document.body.style.setProperty(`--${this.props.name}-0pct`, hex + "00"); + document.body.style.setProperty(`--${this.props.name}-50pct`, hex + "7F"); + this._buttonRef.style.background = hex; + this.value = hex; + } + + render() { + return (); + } +} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5a05373dff..dc15276dc9 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -599,6 +599,16 @@ "Account": "Account", "Set a new account password...": "Set a new account password...", "Language and region": "Language and region", + "Custom theme colors": "Custom theme colors", + "Accent color": "Accent color", + "Background color": "Background color", + "Base color": "Base color", + "Panel color": "Panel color", + "Panel Contrast color": "Panel Contrast color", + "Body Text color": "Body Text color", + "Body contrast color": "Body contrast color", + "Primary color": "Primary color", + "Warning color": "Warning color", "Theme": "Theme", "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.", "Account management": "Account management", diff --git a/yarn.lock b/yarn.lock index ac1adf1d20..78b32ad03b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -211,6 +211,11 @@ resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5" integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ== +"@sphinxxxx/color-conversion@^2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca" + integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw== + "@types/events@*": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" @@ -8098,6 +8103,13 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +vanilla-picker@^2.10.0: + version "2.10.0" + resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.10.0.tgz#36676631b9346daa6b93aa4f80c541f113e38c50" + integrity sha512-s1K+oa/JrT5blJFbLLw1O+PMncJM1qCF8DVXKNPaTVxXgTteSCjSr4rvf8TpcqEcQQ+S4RV/nvPBZanrlJE82w== + dependencies: + "@sphinxxxx/color-conversion" "^2.2.2" + velocity-animate@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105"