Make compact layout only apply to Modern layout (#7382)

src/components/structures/LoggedInView.tsx

@@ -147,6 +147,7 @@ class LoggedInView extends React.Component<IProps, IState> {
     protected readonly _roomView: React.RefObject<any>;
     protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
     protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
+    protected layoutWatcherRef: string;
     protected compactLayoutWatcherRef: string;
     protected backgroundImageWatcherRef: string;
     protected resizer: Resizer;
@@ -190,6 +191,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         );
         this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
 
+        this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, this.onCompactLayoutChanged);
         this.compactLayoutWatcherRef = SettingsStore.watchSetting(
             "useCompactLayout", null, this.onCompactLayoutChanged,
         );
@@ -212,6 +214,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this._matrixClient.removeListener("sync", this.onSync);
         this._matrixClient.removeListener("RoomState.events", this.onRoomStateEvents);
         OwnProfileStore.instance.off(UPDATE_EVENT, this.refreshBackgroundImage);
+        SettingsStore.unwatchSetting(this.layoutWatcherRef);
         SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
         SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
         this.resizer.detach();
@@ -295,9 +298,9 @@ class LoggedInView extends React.Component<IProps, IState> {
         }
     };
 
-    onCompactLayoutChanged = (setting, roomId, level, valueAtLevel, newValue) => {
+    private onCompactLayoutChanged = () => {
         this.setState({
-            useCompactLayout: valueAtLevel,
+            useCompactLayout: SettingsStore.getValue("useCompactLayout"),
         });
     };
 

src/components/views/elements/Field.tsx

@@ -230,7 +230,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
         const { element, prefixComponent, postfixComponent, className, onValidate, children,
             tooltipContent, forceValidity, tooltipClassName, list, validateOnBlur, validateOnChange, validateOnFocus,
-            usePlaceholderAsHint,
+            usePlaceholderAsHint, forceTooltipVisible,
             ...inputProps } = this.props;
 
         // Set some defaults for the <input> element
@@ -276,7 +276,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         if (tooltipContent || this.state.feedback) {
             fieldTooltip = <Tooltip
                 tooltipClassName={classNames("mx_Field_tooltip", tooltipClassName)}
-                visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
+                visible={(this.state.focused && forceTooltipVisible) || this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
                 alignment={Tooltip.Alignment.Right}
             />;

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

@@ -118,12 +118,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 { brand },
             );
             advanced = <>
-                <SettingsFlag
-                    name="useCompactLayout"
-                    level={SettingLevel.DEVICE}
-                    useCheckbox={true}
-                    disabled={this.state.layout !== Layout.Group}
-                />
+                <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} useCheckbox={true} />
 
                 { !SettingsStore.getValue("feature_new_layout_switcher") ?
                     <StyledCheckbox

src/settings/Settings.tsx

@@ -417,6 +417,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         displayName: _td("Use a more compact 'Modern' layout"),
         default: false,
+        controller: new IncompatibleController("layout", false, v => v !== Layout.Group),
     },
     "showRedactions": {
         supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,

src/settings/controllers/IncompatibleController.ts

@@ -27,7 +27,7 @@ export default class IncompatibleController extends SettingController {
     public constructor(
         private settingName: string,
         private forcedValue: any = false,
-        private incompatibleValue: any = true,
+        private incompatibleValue: any | ((v: any) => boolean) = true,
     ) {
         super();
     }
@@ -49,6 +49,9 @@ export default class IncompatibleController extends SettingController {
     }
 
     public get incompatibleSetting(): boolean {
+        if (typeof this.incompatibleValue === "function") {
+            return this.incompatibleValue(SettingsStore.getValue(this.settingName));
+        }
         return SettingsStore.getValue(this.settingName) === this.incompatibleValue;
     }
 }