From a10e71edcf675924b3917d989d2fc8cfc803561c Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 8 Jun 2020 18:17:02 +0100 Subject: [PATCH 1/8] 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", From 24cf3d5f05e9b77060baa41bec62747ce9455cd7 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 8 Jun 2020 18:37:36 +0100 Subject: [PATCH 2/8] add key to react list and let selector container wrap --- .../views/settings/tabs/user/_AppearanceUserSettingsTab.scss | 4 +++- .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index eb73d2ec85..1ecfd71888 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -50,8 +50,9 @@ limitations under the License. > .mx_ThemeSelectors { display: flex; flex-direction: row; + flex-wrap: wrap; - margin-top: 23px; + margin-top: 13px; > .mx_RadioButton { padding: $font-16px; @@ -61,6 +62,7 @@ limitations under the License. flex-shrink: 1; flex-grow: 0; margin-right: 15px; + margin-top: 10px; } > .mx_RadioButton:not([disabled]) { diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 9146f4ff20..3d19241f42 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -255,6 +255,7 @@ export default class AppearanceUserSettingsTab extends React.Component {orderedThemes.map(theme => { return Date: Tue, 9 Jun 2020 13:31:16 +0100 Subject: [PATCH 3/8] fix line indents --- .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 3d19241f42..ebdb6b2714 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -258,10 +258,10 @@ export default class AppearanceUserSettingsTab extends React.Component + > {theme.name} ; })} From cf392af52f86d8493b216f819e20d0e61d2421bf Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 11 Jun 2020 12:27:09 +0100 Subject: [PATCH 4/8] Address design issues and set theme at device level --- .../tabs/user/_AppearanceUserSettingsTab.scss | 25 +++++++++++++++++-- .../views/elements/StyledRadioButton.tsx | 13 +++++++--- .../tabs/user/AppearanceUserSettingsTab.tsx | 4 +-- src/i18n/strings/en_EN.json | 4 +-- src/theme.js | 4 +-- 5 files changed, 39 insertions(+), 11 deletions(-) diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss index 1ecfd71888..57eb2d6823 100644 --- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss @@ -44,8 +44,15 @@ limitations under the License. padding-right: 5px; } +.mx_AppearanceUserSettingsTab { + > .mx_SettingsTab_SubHeading { + margin-bottom: 32px; + } +} + .mx_AppearanceUserSettingsTab_themeSection { $radio-bg-color: $input-darker-bg-color; + color: $primary-fg-color; > .mx_ThemeSelectors { display: flex; @@ -53,19 +60,31 @@ limitations under the License. flex-wrap: wrap; margin-top: 13px; + margin-bottom: 30px; > .mx_RadioButton { padding: $font-16px; + box-sizing: border-box; border-radius: 10px; - background: rgba($radio-bg-color, 0.2); width: 180px; + + background: rgba($radio-bg-color, 0.2); + flex-shrink: 1; flex-grow: 0; + margin-right: 15px; margin-top: 10px; + + font-weight: 600; + color: $muted-fg-color; + + > span { + justify-content: center; + } } - > .mx_RadioButton:not([disabled]) { + > .mx_RadioButton_enabled { // These need to be hardcoded because they don't change with the theme &.mx_ThemeSelector_light { background-color: #f3f8fd; @@ -74,6 +93,7 @@ limitations under the License. &.mx_ThemeSelector_dark { background-color: #181b21; + color: #f3f8fd; > input > div { border-color: $input-darker-bg-color; @@ -85,6 +105,7 @@ limitations under the License. &.mx_ThemeSelector_black { background-color: #000000; + color: #f3f8fd; > input > div { border-color: $input-darker-bg-color; diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx index 7d84f68c49..fdedd16230 100644 --- a/src/components/views/elements/StyledRadioButton.tsx +++ b/src/components/views/elements/StyledRadioButton.tsx @@ -29,9 +29,16 @@ export default class StyledRadioButton extends React.PureComponent - + const { children, className, disabled, ...otherProps } = this.props; + const _className = classnames( + 'mx_RadioButton', + className, + { + "mx_RadioButton_disabled": disabled, + "mx_RadioButton_enabled": !disabled, + }); + return