Merge pull request #4822 from matrix-org/joriks/appearance-tab-compact-to-advanced

Move compact modern layout checkbox to 'advanced'

res/css/views/elements/_StyledCheckbox.scss

@@ -77,8 +77,8 @@ limitations under the License.
         }
 
         &:checked:disabled + label > .mx_Checkbox_background {
-            background-color: $muted-fg-color;
-            border-color: rgba($muted-fg-color, 0.5);
+            background-color: $accent-color;
+            border-color: $accent-color;
         }
     }
 }

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

@@ -209,9 +209,15 @@ limitations under the License.
 }
 
 .mx_AppearanceUserSettingsTab_Advanced {
+    color: $primary-fg-color;
+
+    > * {
+        margin-bottom: 16px;
+    }
+
     .mx_AppearanceUserSettingsTab_AdvancedToggle {
         color: $accent-color;
-        margin-bottom: 16px;
+        cursor: pointer;
     }
 
     .mx_AppearanceUserSettingsTab_systemFont {

src/components/views/elements/SettingsFlag.tsx

@@ -30,6 +30,7 @@ interface IProps {
     isExplicit?: boolean;
     // XXX: once design replaces all toggles make this the default
     useCheckbox?: boolean;
+    disabled?: boolean;
     onChange?(checked: boolean): void;
 }
 
@@ -78,14 +79,23 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
         else label = _t(label);
 
         if (this.props.useCheckbox) {
-            return <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={!canChange} >
+            return <StyledCheckbox
+                checked={this.state.value}
+                onChange={this.checkBoxOnChange}
+                disabled={this.props.disabled || !canChange}
+            >
                 {label}
             </StyledCheckbox>;
         } else {
             return (
                 <div className="mx_SettingsFlag">
                     <span className="mx_SettingsFlag_label">{label}</span>
-                    <ToggleSwitch checked={this.state.value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
+                    <ToggleSwitch
+                        checked={this.state.value}
+                        onChange={this.onChange}
+                        disabled={this.props.disabled || !canChange}
+                        aria-label={label}
+                    />
                 </div>
             );
         }

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

@@ -391,7 +391,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         let advanced: React.ReactNode;
 
         if (this.state.showAdvanced) {
-            advanced = <div>
+            advanced = <>
+                <SettingsFlag
+                    name="useCompactLayout"
+                    level={SettingLevel.DEVICE}
+                    useCheckbox={true}
+                    disabled={this.state.useIRCLayout}
+                />
                 <SettingsFlag
                     name="useSystemFont"
                     level={SettingLevel.DEVICE}
@@ -413,7 +419,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     disabled={!this.state.useSystemFont}
                     value={this.state.systemFont}
                 />
-            </div>;
+            </>;
         }
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Advanced">
             {toggle}

src/i18n/strings/en_EN.json

@@ -441,7 +441,7 @@
     "Font size": "Font size",
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
-    "Use compact timeline layout": "Use compact timeline layout",
+    "Use a more compact ‘Modern’ layout": "Use a more compact ‘Modern’ layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",
     "Show avatar changes": "Show avatar changes",

src/settings/Settings.js

@@ -197,7 +197,7 @@ export const SETTINGS = {
     },
     "useCompactLayout": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Use compact timeline layout'),
+        displayName: _td('Use a more compact ‘Modern’ layout'),
         default: false,
     },
     "showRedactions": {