De-labs Message Bubbles layout (#7612)

src/components/views/settings/LayoutSwitcher.tsx

@@ -88,7 +88,7 @@ export default class LayoutSwitcher extends React.Component<IProps, IState> {
                             checked={this.state.layout === Layout.IRC}
                             onChange={this.onLayoutChange}
                         >
-                            { _t("IRC") }
+                            { _t("IRC (Experimental)") }
                         </StyledRadioButton>
                     </label>
                     <label className={groupClasses}>

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

@@ -21,7 +21,6 @@ import { _t } from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
 import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
-import StyledCheckbox from '../../../elements/StyledCheckbox';
 import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
 import { SettingLevel } from "../../../../../settings/SettingLevel";
@@ -89,16 +88,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         this.setState({ layout: layout });
     };
 
-    private onIRCLayoutChange = (enabled: boolean) => {
-        if (enabled) {
-            this.setState({ layout: Layout.IRC });
-            SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
-        } else {
-            this.setState({ layout: Layout.Group });
-            SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
-        }
-    };
-
     private renderAdvancedSection() {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
@@ -120,15 +109,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             advanced = <>
                 <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} useCheckbox={true} />
 
-                { !SettingsStore.getValue("feature_new_layout_switcher") ?
-                    <StyledCheckbox
-                        checked={this.state.layout == Layout.IRC}
-                        onChange={(ev) => this.onIRCLayoutChange(ev.target.checked)}
-                    >
-                        { _t("Enable experimental, compact IRC style layout") }
-                    </StyledCheckbox> : null
-                }
-
                 <SettingsFlag
                     name="useSystemFont"
                     level={SettingLevel.DEVICE}
@@ -161,19 +141,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
     render() {
         const brand = SdkConfig.get().brand;
 
-        let layoutSection;
-        if (SettingsStore.getValue("feature_new_layout_switcher")) {
-            layoutSection = (
-                <LayoutSwitcher
-                    userId={this.state.userId}
-                    displayName={this.state.displayName}
-                    avatarUrl={this.state.avatarUrl}
-                    messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
-                    onLayoutChanged={this.onLayoutChanged}
-                />
-            );
-        }
-
         return (
             <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("Customise your appearance") }</div>
@@ -181,7 +148,13 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     { _t("Appearance Settings only affect this %(brand)s session.", { brand }) }
                 </div>
                 <ThemeChoicePanel />
-                { layoutSection }
+                <LayoutSwitcher
+                    userId={this.state.userId}
+                    displayName={this.state.displayName}
+                    avatarUrl={this.state.avatarUrl}
+                    messagePreviewText={this.MESSAGE_PREVIEW_TEXT}
+                    onLayoutChanged={this.onLayoutChanged}
+                />
                 <FontScalingPanel />
                 { this.renderAdvancedSection() }
                 <ImageSizePanel />

src/i18n/strings/en_EN.json

@@ -885,7 +885,6 @@
     "Show extensible event representation of events": "Show extensible event representation of events",
     "Location sharing (under active development)": "Location sharing (under active development)",
     "Show info about bridges in room settings": "Show info about bridges in room settings",
-    "New layout switcher (with message bubbles)": "New layout switcher (with message bubbles)",
     "Meta Spaces": "Meta Spaces",
     "Use new room breadcrumbs": "Use new room breadcrumbs",
     "New spotlight search experience": "New spotlight search experience",
@@ -1280,7 +1279,7 @@
     "Updating spaces... (%(progress)s out of %(count)s)|other": "Updating spaces... (%(progress)s out of %(count)s)",
     "Updating spaces... (%(progress)s out of %(count)s)|one": "Updating space...",
     "Message layout": "Message layout",
-    "IRC": "IRC",
+    "IRC (Experimental)": "IRC (Experimental)",
     "Modern": "Modern",
     "Message bubbles": "Message bubbles",
     "Messages containing keywords": "Messages containing keywords",
@@ -1391,7 +1390,6 @@
     "New version available. <a>Update now.</a>": "New version available. <a>Update now.</a>",
     "Check for update": "Check for update",
     "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Set the name of a font installed on your system & %(brand)s will attempt to use it.",
-    "Enable experimental, compact IRC style layout": "Enable experimental, compact IRC style layout",
     "Customise your appearance": "Customise your appearance",
     "Appearance Settings only affect this %(brand)s session.": "Appearance Settings only affect this %(brand)s session.",
     "Flair": "Flair",

src/settings/Settings.tsx

@@ -39,7 +39,6 @@ import { OrderedMultiController } from "./controllers/OrderedMultiController";
 import { Layout } from "./enums/Layout";
 import ReducedMotionController from './controllers/ReducedMotionController';
 import IncompatibleController from "./controllers/IncompatibleController";
-import NewLayoutSwitcherController from './controllers/NewLayoutSwitcherController';
 import { ImageSize } from "./enums/ImageSize";
 import { MetaSpace } from "../stores/spaces";
 
@@ -333,14 +332,6 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         displayName: _td("Show info about bridges in room settings"),
         default: false,
     },
-    "feature_new_layout_switcher": {
-        isFeature: true,
-        labsGroup: LabGroup.Messaging,
-        supportedLevels: LEVELS_FEATURE,
-        displayName: _td("New layout switcher (with message bubbles)"),
-        default: false,
-        controller: new NewLayoutSwitcherController(),
-    },
     "feature_spaces_metaspaces": {
         isFeature: true,
         labsGroup: LabGroup.Spaces,

src/settings/controllers/NewLayoutSwitcherController.ts

@@ -1,26 +0,0 @@
-/*
-Copyright 2021 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 SettingController from "./SettingController";
-import { SettingLevel } from "../SettingLevel";
-import SettingsStore from "../SettingsStore";
-import { Layout } from "../enums/Layout";
-
-export default class NewLayoutSwitcherController extends SettingController {
-    public onChange(level: SettingLevel, roomId: string, newValue: any) {
-        // On disabling switch back to Layout.Group if Layout.Bubble
-        if (!newValue && SettingsStore.getValue("layout") == Layout.Bubble) {
-            SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
-        }
-    }
-}