From a10e71edcf675924b3917d989d2fc8cfc803561c Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 8 Jun 2020 18:17:02 +0100 Subject: [PATCH] Use styled radio buttons for theme selection --- res/css/_components.scss | 1 + .../views/elements/_StyledRadioButton.scss | 88 +++++++++++++++++++ .../tabs/user/_AppearanceUserSettingsTab.scss | 55 ++++++++++++ .../views/elements/StyledRadioButton.tsx | 41 +++++++++ .../tabs/user/AppearanceUserSettingsTab.tsx | 39 ++++---- src/i18n/strings/en_EN.json | 4 +- 6 files changed, 212 insertions(+), 16 deletions(-) create mode 100644 res/css/views/elements/_StyledRadioButton.scss create mode 100644 src/components/views/elements/StyledRadioButton.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index b047519d99..b1a05b1389 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -115,6 +115,7 @@ @import "./views/elements/_Slider.scss"; @import "./views/elements/_Spinner.scss"; @import "./views/elements/_StyledCheckbox.scss"; +@import "./views/elements/_StyledRadioButton.scss"; @import "./views/elements/_SyntaxHighlight.scss"; @import "./views/elements/_TextWithTooltip.scss"; @import "./views/elements/_ToggleSwitch.scss"; diff --git a/res/css/views/elements/_StyledRadioButton.scss b/res/css/views/elements/_StyledRadioButton.scss new file mode 100644 index 0000000000..03a4cf88eb --- /dev/null +++ b/res/css/views/elements/_StyledRadioButton.scss @@ -0,0 +1,88 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +/** +* This component expects the parent to specify a positive padding and +* width +*/ + +.mx_RadioButton { + + $radio-circle-color: $muted-fg-color; + $active-radio-circle-color: $accent-color; + // We need to make this element positioned + // so that the radio circle can be absolute + position: relative; + + display: flex; + align-items: center; + flex-grow: 1; + + > span { + flex-grow: 1; + + display: flex; + justify-content: center; + } + + > input[type=radio] { + // Remove the OS's representation + margin: 0; + padding: 0; + display: none; + + + div { + // Necessary to center the following span + position: absolute; + + display: flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + height: $font-16px; + width: $font-16px; + + border: $font-1-5px solid $radio-circle-color; + border-radius: $font-16px; + + > div { + box-sizing: border-box; + + height: $font-8px; + width: $font-8px; + + border-radius: $font-8px; + } + } + } + + > input[type=radio]:checked { + + div { + > div { + background: $radio-circle-color; + } + } + } + + > input[type=radio]:disabled { + + div { + > div { + display: none; + } + } + } +} diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index e82ae3c575..eb73d2ec85 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -43,3 +43,58 @@ limitations under the License. padding-left: 20px; padding-right: 5px; } + +.mx_AppearanceUserSettingsTab_themeSection { + $radio-bg-color: $input-darker-bg-color; + + > .mx_ThemeSelectors { + display: flex; + flex-direction: row; + + margin-top: 23px; + + > .mx_RadioButton { + padding: $font-16px; + border-radius: 10px; + background: rgba($radio-bg-color, 0.2); + width: 180px; + flex-shrink: 1; + flex-grow: 0; + margin-right: 15px; + } + + > .mx_RadioButton:not([disabled]) { + // These need to be hardcoded because they don't change with the theme + &.mx_ThemeSelector_light { + background-color: #f3f8fd; + color: #2e2f32; + } + + &.mx_ThemeSelector_dark { + background-color: #181b21; + + > input > div { + border-color: $input-darker-bg-color; + > div { + border-color: $input-darker-bg-color; + } + } + } + + &.mx_ThemeSelector_black { + background-color: #000000; + + > input > div { + border-color: $input-darker-bg-color; + > div { + border-color: $input-darker-bg-color; + } + } + } + } + } +} + +.mx_SettingsTab_customFontSizeField { + margin-left: calc($font-16px + 10px); +} diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx new file mode 100644 index 0000000000..f1d6fb09cd --- /dev/null +++ b/src/components/views/elements/StyledRadioButton.tsx @@ -0,0 +1,41 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the 'License'); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an 'AS IS' BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import classnames from 'classnames'; + +interface IProps extends React.InputHTMLAttributes { +} + +interface IState { +} + +export default class StyledRadioButton extends React.PureComponent { + + public static readonly defaultProps = { + className: '', + } + + public render() { + const { children, className, ...otherProps } = this.props; + return + } +} \ No newline at end of file diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index bcd87b290a..9146f4ff20 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -103,7 +103,7 @@ export default class AppearanceUserSettingsTab extends React.Component): void => { + private onThemeChange = (e: React.ChangeEvent): void => { const newTheme = e.target.value; if (this.state.theme === newTheme) return; @@ -193,17 +193,19 @@ export default class AppearanceUserSettingsTab extends React.Component - + this.onUseSystemThemeChanged(e.target.checked)} + > + {SettingsStore.getDisplayName("use_system_theme")} + ; } @@ -250,15 +252,19 @@ export default class AppearanceUserSettingsTab extends React.Component {_t("Theme")} {systemThemeSection} - +
{orderedThemes.map(theme => { - return ; + return + {theme.name} + ; })} - +
{customThemeForm} @@ -302,7 +308,10 @@ export default class AppearanceUserSettingsTab extends React.Component -
{_t("Appearance")}
+
{_t("Customise your appearance")}
+
+ {_t("Appearance Settings only affect this Riot session.")} +
{this.renderThemeSection()} {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0aa4c3779e..46a91b0cb1 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -777,7 +777,8 @@ "Custom theme URL": "Custom theme URL", "Add theme": "Add theme", "Theme": "Theme", - "Appearance": "Appearance", + "Customise your appearance": "Customise your appearance", + "Appearance Settings only affect this Riot session.": "Appearance Settings only affect this Riot session.", "Flair": "Flair", "Failed to change password. Is your password correct?": "Failed to change password. Is your password correct?", "Success": "Success", @@ -1753,6 +1754,7 @@ "Upload %(count)s other files|one": "Upload %(count)s other file", "Cancel All": "Cancel All", "Upload Error": "Upload Error", + "Appearance": "Appearance", "Verify other session": "Verify other session", "Verification Request": "Verification Request", "A widget would like to verify your identity": "A widget would like to verify your identity",