Hide new layout switcher behind feature flag

su-ex · Jun 11, 2021 · fbcac68 · fbcac68
1 parent 541b5bf
commit fbcac68
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -482,25 +482,31 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     useCheckbox={true}
                     disabled={this.state.layout == Layout.IRC}
                 />
-                <SettingsFlag
-                    name="singleSideBubbles"
-                    level={SettingLevel.DEVICE}
-                    useCheckbox={true}
-                    disabled={!(this.state.layout == Layout.Bubble) || this.state.adaptiveSideBubbles}
-                />
-                <SettingsFlag
-                    name="adaptiveSideBubbles"
-                    level={SettingLevel.DEVICE}
-                    useCheckbox={true}
-                    onChange={(checked) => this.setState({adaptiveSideBubbles: checked})}
-                    disabled={!(this.state.layout == Layout.Bubble)}
-                />
-                <StyledCheckbox
-                    checked={this.state.layout == Layout.IRC}
-                    onChange={(ev) => this.onIRCLayoutChange(ev.target.checked)}
-                >
-                    {_t("Enable experimental, compact IRC style layout")}
-                </StyledCheckbox>
+                { SettingsStore.getValue("feature_new_layout_switcher") ?
+                    <SettingsFlag
+                        name="singleSideBubbles"
+                        level={SettingLevel.DEVICE}
+                        useCheckbox={true}
+                        disabled={!(this.state.layout == Layout.Bubble) || this.state.adaptiveSideBubbles}
+                    /> : null
+                }
+                { SettingsStore.getValue("feature_new_layout_switcher") ?
+                    <SettingsFlag
+                        name="adaptiveSideBubbles"
+                        level={SettingLevel.DEVICE}
+                        useCheckbox={true}
+                        onChange={(checked) => this.setState({adaptiveSideBubbles: checked})}
+                        disabled={!(this.state.layout == Layout.Bubble)}
+                    /> : null
+                }
+                { !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"
@@ -541,8 +547,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     {_t("Appearance Settings only affect this %(brand)s session.", { brand })}
                 </div>
                 {this.renderThemeSection()}
+                {SettingsStore.getValue("feature_new_layout_switcher") ? this.renderLayoutSection() : null}
                 {this.renderFontSection()}
-                {this.renderLayoutSection()}
                 {this.renderAdvancedSection()}
             </div>
         );

diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
@@ -41,6 +41,7 @@ import { Layout } from "./Layout";
 import ReducedMotionController from './controllers/ReducedMotionController';
 import IncompatibleController from "./controllers/IncompatibleController";
 import SdkConfig from "../SdkConfig";
+import NewLayoutSwitcherController from './controllers/NewLayoutSwitcherController';
 
 // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
 const LEVELS_ROOM_SETTINGS = [
@@ -285,6 +286,13 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         displayName: _td("Show info about bridges in room settings"),
         default: false,
     },
+    "feature_new_layout_switcher": {
+        isFeature: true,
+        supportedLevels: LEVELS_FEATURE,
+        displayName: _td("Explore new ways switching layouts (including a new bubble layout)"),
+        default: false,
+        controller: new NewLayoutSwitcherController(),
+    },
     "RoomList.backgroundImage": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: null,

diff --git a/src/settings/controllers/NewLayoutSwitcherController.ts b/src/settings/controllers/NewLayoutSwitcherController.ts
@@ -0,0 +1,29 @@
+/*
+Copyright 2019, 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 SettingController from "./SettingController";
+import { SettingLevel } from "../SettingLevel";
+import SettingsStore from "../SettingsStore";
+import { Layout } from "../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);
+        }
+    }
+}