Merge pull request matrix-org#4731 from matrix-org/joriks/radio-buttons

Change theme selector to use new styled radio buttons

Author: JorikSchellekens

res/css/views/elements/_StyledCheckbox.scss

@@ -25,6 +25,8 @@ limitations under the License.
 
     input[type=checkbox] {
         appearance: none;
+        margin: 0;
+        padding: 0;
 
         & + label {
             display: flex;

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -44,6 +44,83 @@ 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;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        margin-top: 4px;
+        margin-bottom: 30px;
+
+        > .mx_RadioButton {
+            padding: $font-16px;
+            box-sizing: border-box;
+            border-radius: 10px;
+            width: 180px;
+
+            background: $radio-bg-color;
+            opacity: 0.4;
+
+            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_enabled {
+            opacity: 1;
+
+            // These colors 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;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+
+            &.mx_ThemeSelector_black {
+                background-color: #000000;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+        }
+    }
+}
+
 .mx_SettingsTab_customFontSizeField {
     margin-left: calc($font-16px + 10px);
 }

src/components/views/elements/StyledRadioButton.tsx

@@ -29,9 +29,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
     }
 
     public render() {
-        const { children, className, ...otherProps } = this.props;
-        return <label className={classnames('mx_RadioButton', className)}>
-            <input type='radio' {...otherProps} />
+        const { children, className, disabled, ...otherProps } = this.props;
+        const _className = classnames(
+            'mx_RadioButton',
+            className,
+            {
+                "mx_RadioButton_disabled": disabled,
+                "mx_RadioButton_enabled": !disabled,
+            });
+        return <label className={_className}>
+            <input type='radio' disabled={disabled} {...otherProps} />
             {/* Used to render the radio button circle */}
             <div><div></div></div>
             <span>{children}</span>

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -103,14 +103,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         };
     }
 
-    private onThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
+    private onThemeChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
         const newTheme = e.target.value;
         if (this.state.theme === newTheme) return;
 
         // doing getValue in the .catch will still return the value we failed to set,
         // so remember what the value was before we tried to set it so we can revert
         const oldTheme: string = SettingsStore.getValue('theme');
-        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
             dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
             this.setState({theme: oldTheme});
         });
@@ -199,17 +199,19 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     private renderThemeSection() {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
+        const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
+        const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
 
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection: JSX.Element;
         if (themeWatcher.isSystemThemeSupported()) {
             systemThemeSection = <div>
-                <LabelledToggleSwitch
-                    value={this.state.useSystemTheme}
-                    label={SettingsStore.getDisplayName("use_system_theme")}
-                    onChange={this.onUseSystemThemeChanged}
-                />
+                <StyledCheckbox
+                    checked={this.state.useSystemTheme}
+                    onChange={(e) => this.onUseSystemThemeChanged(e.target.checked)}
+                >
+                    {SettingsStore.getDisplayName("use_system_theme")}
+                </StyledCheckbox>
             </div>;
         }
 
@@ -256,17 +258,22 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
                 {systemThemeSection}
-                <Field
-                    id="theme" label={_t("Theme")} element="select"
-                    value={this.state.theme} onChange={this.onThemeChange}
-                    disabled={this.state.useSystemTheme}
-                >
+                <div className="mx_ThemeSelectors" onChange={this.onThemeChange}>
                     {orderedThemes.map(theme => {
-                        return <option key={theme.id} value={theme.id}>{theme.name}</option>;
+                        return <StyledRadioButton
+                            key={theme.id}
+                            value={theme.id}
+                            name={"theme"}
+                            disabled={this.state.useSystemTheme}
+                            checked={!this.state.useSystemTheme && theme.id === this.state.theme}
+                            className={"mx_ThemeSelector_" + theme.id}
+                        >
+                            {theme.name}
+                        </StyledRadioButton>;
                     })}
-                </Field>
+                </div>
                 {customThemeForm}
-                <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
+                <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} useCheckbox={true} />
            </div>
         );
     }
@@ -309,8 +316,11 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     render() {
         return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Appearance")}</div>
+            <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
+                <div className="mx_SettingsTab_heading">{_t("Customise your appearance")}</div>
+                <div className="mx_SettingsTab_SubHeading">
+                    {_t("Appearance Settings only affect this Riot session.")}
+                </div>
                 {this.renderThemeSection()}
                 {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
             </div>

src/i18n/strings/en_EN.json

@@ -298,8 +298,8 @@
     "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
-    "Light theme": "Light theme",
-    "Dark theme": "Dark theme",
+    "Light": "Light",
+    "Dark": "Dark",
     "You signed in to a new session without verifying it:": "You signed in to a new session without verifying it:",
     "Verify your other session using one of the options below.": "Verify your other session using one of the options below.",
     "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) signed in to a new session without verifying it:",
@@ -779,7 +779,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",
@@ -1769,6 +1770,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",

src/theme.js

@@ -24,8 +24,8 @@ import ThemeWatcher from "./settings/watchers/ThemeWatcher";
 
 export function enumerateThemes() {
     const BUILTIN_THEMES = {
-        "light": _t("Light theme"),
-        "dark": _t("Dark theme"),
+        "light": _t("Light"),
+        "dark": _t("Dark"),
     };
     const customThemes = SettingsStore.getValue("custom_themes");
     const customThemeNames = {};