Spaces quick settings

res/css/_components.scss

@@ -22,6 +22,7 @@
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NonUrgentToastContainer.scss";
 @import "./structures/_NotificationPanel.scss";
+@import "./structures/_QuickSettingsButton.scss";
 @import "./structures/_RightPanel.scss";
 @import "./structures/_RoomDirectory.scss";
 @import "./structures/_RoomSearch.scss";

res/css/structures/_QuickSettingsButton.scss

@@ -0,0 +1,176 @@
+/*
+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.
+*/
+
+.mx_QuickSettingsButton {
+    flex: 0 0 auto;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    position: relative;
+    margin: 12px auto;
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: inherit;
+        height: inherit;
+        mask-image: url('$(res)/img/element-icons/settings.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 16px;
+        background: $secondary-content;
+    }
+
+    &:hover {
+        background-color: $quaternary-content;
+
+        &::before {
+            background-color: $primary-content;
+        }
+    }
+}
+
+.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
+    padding: 16px;
+    width: max-content;
+    min-width: 200px;
+    contain: unset; // let the dropdown paint beyond the context menu
+
+    > div > h2 {
+        font-weight: $font-semi-bold;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-content;
+        margin: 0 0 16px;
+    }
+
+    .mx_AccessibleButton_kind_primary_outline {
+        display: block;
+    }
+
+    > div > h4 {
+        font-weight: $font-semi-bold;
+        font-size: $font-12px;
+        line-height: $font-15px;
+        text-transform: uppercase;
+        color: $tertiary-content;
+        margin: 20px 0 12px;
+    }
+
+    .mx_QuickSettingsButton_pinToSidebarHeading {
+        padding-left: 24px;
+        position: relative;
+
+        &::before {
+            background-color: $secondary-content;
+            content: "";
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: contain;
+            mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+
+    .mx_Checkbox {
+        margin-bottom: 8px;
+    }
+
+    .mx_QuickSettingsButton_favouritesCheckbox,
+    .mx_QuickSettingsButton_peopleCheckbox {
+        .mx_Checkbox_background + div {
+            padding-left: 22px;
+            position: relative;
+            margin-left: 6px;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $secondary-content;
+
+            &::before {
+                background-color: $secondary-content;
+                content: "";
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    .mx_QuickSettingsButton_favouritesCheckbox .mx_Checkbox_background + div::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
+    }
+
+    .mx_QuickSettingsButton_peopleCheckbox .mx_Checkbox_background + div::before {
+        mask-image: url('$(res)/img/element-icons/room/members.svg');
+    }
+
+    .mx_QuickSettingsButton_moreOptionsButton {
+        padding-left: 22px;
+        margin-left: 22px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+        position: relative;
+        margin-bottom: 16px;
+
+        &::before {
+            background-color: $secondary-content;
+            content: "";
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: contain;
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+        }
+    }
+
+    .mx_QuickSettingsButton_themePicker {
+        display: flex;
+        align-items: center;
+
+        > h4 {
+            font-weight: $font-semi-bold;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+            text-transform: uppercase;
+            display: inline-block;
+            margin: 0;
+        }
+
+        .mx_Dropdown {
+            min-width: 100px;
+            margin-left: auto;
+            height: min-content;
+        }
+    }
+}

res/css/structures/_SpacePanel.scss

@@ -48,7 +48,6 @@ $activeBorderColor: $secondary-content;
         mask-size: 32px;
         mask-repeat: no-repeat;
         margin-left: $gutterSize;
-        margin-bottom: 12px;
         background-color: $tertiary-content;
         mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
 

src/components/views/elements/Dropdown.tsx

@@ -178,26 +178,20 @@ export default class Dropdown extends React.Component<IProps, IState> {
         this.ignoreEvent = ev;
     };
 
-    private onChevronClick = (ev: React.MouseEvent) => {
-        if (this.state.expanded) {
-            this.setState({ expanded: false });
-            ev.stopPropagation();
-            ev.preventDefault();
-        }
-    };
-
     private onAccessibleButtonClick = (ev: ButtonEvent) => {
         if (this.props.disabled) return;
 
         if (!this.state.expanded) {
-            this.setState({
-                expanded: true,
-            });
+            this.setState({ expanded: true });
             ev.preventDefault();
         } else if ((ev as React.KeyboardEvent).key === Key.ENTER) {
             // the accessible button consumes enter onKeyDown for firing onClick, so handle it here
             this.props.onOptionChange(this.state.highlightedOption);
             this.close();
+        } else if (!(ev as React.KeyboardEvent).key) {
+            // collapse on other non-keyboard event activations
+            this.setState({ expanded: false });
+            ev.preventDefault();
         }
     };
 
@@ -383,7 +377,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
                 onKeyDown={this.onKeyDown}
             >
                 { currentValue }
-                <span onClick={this.onChevronClick} className="mx_Dropdown_arrow" />
+                <span className="mx_Dropdown_arrow" />
                 { menu }
             </AccessibleButton>
         </div>;

src/components/views/settings/ThemeChoicePanel.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import { _t } from "../../../languageHandler";
 import SettingsStore from "../../../settings/SettingsStore";
-import { enumerateThemes, findHighContrastTheme, findNonHighContrastTheme, isHighContrastTheme } from "../../../theme";
+import { findHighContrastTheme, findNonHighContrastTheme, getOrderedThemes, isHighContrastTheme } from "../../../theme";
 import ThemeWatcher from "../../../settings/watchers/ThemeWatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import dis from "../../../dispatcher/dispatcher";
@@ -28,7 +28,6 @@ import Field from '../elements/Field';
 import StyledRadioGroup from "../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { compare } from "../../../utils/strings";
 
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -58,13 +57,13 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
         super(props);
 
         this.state = {
-            ...this.calculateThemeState(),
+            ...ThemeChoicePanel.calculateThemeState(),
             customThemeUrl: "",
             customThemeMessage: { isError: false, text: "" },
         };
     }
 
-    private calculateThemeState(): IThemeState {
+    public static calculateThemeState(): IThemeState {
         // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
         // show the right values for things.
 
@@ -238,14 +237,7 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
             );
         }
 
-        // XXX: replace any type here
-        const themes = Object.entries<any>(enumerateThemes())
-            .map(p => ({ id: p[0], name: p[1] })) // convert pairs to objects for code readability
-            .filter(p => !isHighContrastTheme(p.id));
-        const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
-        const customThemes = themes.filter(p => !builtInThemes.includes(p))
-            .sort((a, b) => compare(a.name, b.name));
-        const orderedThemes = [...builtInThemes, ...customThemes];
+        const orderedThemes = getOrderedThemes();
         return (
             <div className="mx_SettingsTab_section mx_ThemeChoicePanel">
                 <span className="mx_SettingsTab_subheading">{ _t("Theme") }</span>

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

@@ -23,7 +23,7 @@ import StyledCheckbox from "../../../elements/StyledCheckbox";
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import { MetaSpace } from "../../../../../stores/spaces";
 
-const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent<HTMLInputElement>) => {
+export const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
     SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.ACCOUNT, {
         ...currentValue,