From ddcae7803de4a5288818267ca1c3489898684d4a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 10:42:27 +0000 Subject: [PATCH 01/11] Add quick settings button to bottom of Space Panel --- res/css/_components.scss | 1 + res/css/structures/_QuickSettingsButton.scss | 131 +++++++++++++++++ res/css/structures/_SpacePanel.scss | 1 - .../views/settings/ThemeChoicePanel.tsx | 16 +- .../tabs/user/SidebarUserSettingsTab.tsx | 2 +- .../views/spaces/QuickSettingsButton.tsx | 138 ++++++++++++++++++ src/components/views/spaces/SpacePanel.tsx | 4 + src/stores/spaces/SpaceStore.ts | 1 + src/theme.ts | 16 ++ 9 files changed, 296 insertions(+), 14 deletions(-) create mode 100644 res/css/structures/_QuickSettingsButton.scss create mode 100644 src/components/views/spaces/QuickSettingsButton.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 81b5e3be99e..731e20217b7 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss new file mode 100644 index 00000000000..608835e8145 --- /dev/null +++ b/res/css/structures/_QuickSettingsButton.scss @@ -0,0 +1,131 @@ +/* +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 0 12px 16px; + + &::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; + } +} + +.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu { + padding: 16px; + width: max-content; + min-width: 200px; + contain: unset; // let the dropdown paint beyond the context menu + + > 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; + } + + > 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_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'); + } + } +} diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 0785d4955f6..e343af88b5c 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/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'); diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx index feb9552230a..2655fc78c52 100644 --- a/src/components/views/settings/ThemeChoicePanel.tsx +++ b/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 { 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 { ); } - // XXX: replace any type here - const themes = Object.entries(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 (
{ _t("Theme") } diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx index 8b1d0d8f852..92a5bacb64f 100644 --- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx +++ b/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) => { +export const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent) => { const currentValue = SettingsStore.getValue("Spaces.enabledMetaSpaces"); SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.ACCOUNT, { ...currentValue, diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx new file mode 100644 index 00000000000..f55c3741792 --- /dev/null +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -0,0 +1,138 @@ +/* +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 React, { useMemo } from "react"; + +import { _t } from "../../../languageHandler"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import { alwaysAboveRightOf, ChevronFace, ContextMenu, useContextMenu } from "../../structures/ContextMenu"; +import AccessibleButton from "../elements/AccessibleButton"; +import StyledCheckbox from "../elements/StyledCheckbox"; +import { MetaSpace } from "../../../stores/spaces"; +import { useSettingValue } from "../../../hooks/useSettings"; +import { onMetaSpaceChangeFactory } from "../settings/tabs/user/SidebarUserSettingsTab"; +import defaultDispatcher from "../../../dispatcher/dispatcher"; +import { Action } from "../../../dispatcher/actions"; +import { UserTab } from "../dialogs/UserSettingsDialog"; +import { findNonHighContrastTheme, getOrderedThemes } from "../../../theme"; +import Dropdown from "../elements/Dropdown"; +import ThemeChoicePanel from "../settings/ThemeChoicePanel"; +import SettingsStore from "../../../settings/SettingsStore"; +import { SettingLevel } from "../../../settings/SettingLevel"; +import dis from "../../../dispatcher/dispatcher"; +import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload"; + +const QuickSettingsButton = () => { + const orderedThemes = useMemo(getOrderedThemes, []); + const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu(); + + const { + [MetaSpace.Favourites]: favouritesEnabled, + [MetaSpace.People]: peopleEnabled, + } = useSettingValue>("Spaces.enabledMetaSpaces"); + + let contextMenu: JSX.Element; + if (menuDisplayed) { + const themeState = ThemeChoicePanel.calculateThemeState(); + const nonHighContrast = findNonHighContrastTheme(themeState.theme); + const theme = nonHighContrast ? nonHighContrast : themeState.theme; + + contextMenu = +

{ _t("Quick settings") }

+ + {}} kind="primary_outline"> + { _t("All settings") } + + +

{ _t("Pin to sidebar") }

+ + + { _t("Favourites") } + + + { _t("People") } + + { + closeMenu(); + defaultDispatcher.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Sidebar, + }); + }}> + { _t("More options") } + + +
+

{ _t("Theme") }

+ { + // XXX: mostly copied from ThemeChoicePanel + // doing getValue in the .catch will still return the value we failed to set, + // so remember what the value was before we tried to set it so we can revert + // const oldTheme: string = SettingsStore.getValue("theme"); + SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => { + dis.dispatch({ action: Action.RecheckTheme }); + }); + // The settings watcher doesn't fire until the echo comes back from the + // server, so to make the theme change immediately we need to manually + // do the dispatch now + // XXX: The local echoed value appears to be unreliable, in particular + // when settings custom themes(!) so adding forceTheme to override + // the value from settings. + dis.dispatch({ action: Action.RecheckTheme, forceTheme: newTheme }); + closeMenu(); + }} + value={theme} + label={_t("Space selection")} + > + { orderedThemes.map((theme) => ( +
+ { theme.name } +
+ )) } + +
+ ; + } + + return <> + + + { contextMenu } + ; +}; + +export default QuickSettingsButton; diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index 9c572c9fe50..0aa2d44dff9 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -54,6 +54,8 @@ import IconizedContextMenu, { import SettingsStore from "../../../settings/SettingsStore"; import { SettingLevel } from "../../../settings/SettingLevel"; import UIStore from "../../../stores/UIStore"; +import QuickSettingsButton from "./QuickSettingsButton"; +import { useSettingValue } from "../../../hooks/useSettings"; const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => { const invites = useEventEmitterState(SpaceStore.instance, UPDATE_INVITED_SPACES, () => { @@ -277,6 +279,7 @@ const InnerSpacePanel = React.memo(({ children, isPanelCo }); const SpacePanel = () => { + const metaSpacesEnabled = useSettingValue("feature_spaces_metaspaces"); const [isPanelCollapsed, setPanelCollapsed] = useState(true); const ref = useRef(); useLayoutEffect(() => { @@ -322,6 +325,7 @@ const SpacePanel = () => { onClick={() => setPanelCollapsed(!isPanelCollapsed)} title={isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel")} /> + { metaSpacesEnabled && } ) } diff --git a/src/stores/spaces/SpaceStore.ts b/src/stores/spaces/SpaceStore.ts index 83e6ae07add..45c0f7a6a24 100644 --- a/src/stores/spaces/SpaceStore.ts +++ b/src/stores/spaces/SpaceStore.ts @@ -20,6 +20,7 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { IRoomCapability } from "matrix-js-sdk/src/client"; import { logger } from "matrix-js-sdk/src/logger"; +import { sleep } from "matrix-js-sdk/src/utils"; import { AsyncStoreWithClient } from "../AsyncStoreWithClient"; import defaultDispatcher from "../../dispatcher/dispatcher"; diff --git a/src/theme.ts b/src/theme.ts index b1eec5acedd..e344d58fed4 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -19,6 +19,7 @@ import { _t } from "./languageHandler"; import SettingsStore from "./settings/SettingsStore"; import ThemeWatcher from "./settings/watchers/ThemeWatcher"; +import { compare } from "./utils/strings"; export const DEFAULT_THEME = "light"; const HIGH_CONTRAST_THEMES = { @@ -86,6 +87,21 @@ export function enumerateThemes(): {[key: string]: string} { return Object.assign({}, customThemeNames, BUILTIN_THEMES); } +interface ITheme { + id: string; + name: string; +} + +export function getOrderedThemes(): ITheme[] { + const themes = Object.entries(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)); + return [...builtInThemes, ...customThemes]; +} + function clearCustomTheme(): void { // remove all css variables, we assume these are there because of the custom theme const inlineStyleProps = Object.values(document.body.style); From 02fe3ff78df414a00ebbee4436dcdc75efca91c9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 10:52:01 +0000 Subject: [PATCH 02/11] Iterate to match figma design --- res/css/structures/_QuickSettingsButton.scss | 21 +++++++++++++++++++ .../views/spaces/QuickSettingsButton.tsx | 5 ++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss index 608835e8145..63e4767d2f4 100644 --- a/res/css/structures/_QuickSettingsButton.scss +++ b/res/css/structures/_QuickSettingsButton.scss @@ -128,4 +128,25 @@ limitations under the License. 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; + } + } } diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index f55c3741792..b043f2f6f18 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -88,11 +88,10 @@ const QuickSettingsButton = () => { { _t("More options") } -
+

{ _t("Theme") }

{ // XXX: mostly copied from ThemeChoicePanel // doing getValue in the .catch will still return the value we failed to set, From aeaeb293c3ed5e81b119507224a1d34485559916 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 11:01:42 +0000 Subject: [PATCH 03/11] improve a11y of the quick settings pane --- src/components/views/spaces/QuickSettingsButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index b043f2f6f18..4997cfabd28 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -55,6 +55,7 @@ const QuickSettingsButton = () => { wrapperClassName="mx_QuickSettingsButton_ContextMenuWrapper" onFinished={closeMenu} managed={false} + focusLock={true} >

{ _t("Quick settings") }

From 8376cc26d66be18442163303026b52ee28966adf Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 11:12:13 +0000 Subject: [PATCH 04/11] fix quick settings button alignment and i18n --- res/css/structures/_QuickSettingsButton.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss index 63e4767d2f4..82528bd350a 100644 --- a/res/css/structures/_QuickSettingsButton.scss +++ b/res/css/structures/_QuickSettingsButton.scss @@ -20,7 +20,7 @@ limitations under the License. height: 32px; border-radius: 8px; position: relative; - margin: 12px 0 12px 16px; + margin: 12px auto; &::before { content: ""; From b621333335526959d64ebcc4ae1d507c5cf679a9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 11:25:53 +0000 Subject: [PATCH 05/11] delint --- .../views/spaces/QuickSettingsButton.tsx | 17 ++++++++++------- src/stores/spaces/SpaceStore.ts | 1 - 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index 4997cfabd28..9e5003d3457 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -79,13 +79,16 @@ const QuickSettingsButton = () => { > { _t("People") } - { - closeMenu(); - defaultDispatcher.dispatch({ - action: Action.ViewUserSettings, - initialTabId: UserTab.Sidebar, - }); - }}> + { + closeMenu(); + defaultDispatcher.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Sidebar, + }); + }} + > { _t("More options") } diff --git a/src/stores/spaces/SpaceStore.ts b/src/stores/spaces/SpaceStore.ts index 45c0f7a6a24..83e6ae07add 100644 --- a/src/stores/spaces/SpaceStore.ts +++ b/src/stores/spaces/SpaceStore.ts @@ -20,7 +20,6 @@ import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { IRoomCapability } from "matrix-js-sdk/src/client"; import { logger } from "matrix-js-sdk/src/logger"; -import { sleep } from "matrix-js-sdk/src/utils"; import { AsyncStoreWithClient } from "../AsyncStoreWithClient"; import defaultDispatcher from "../../dispatcher/dispatcher"; From 4c2a4dbf9b1e5a30f8431ed88ee877e16501c7d3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 11:55:00 +0000 Subject: [PATCH 06/11] i18n --- src/i18n/strings/en_EN.json | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 0f1f5b05477..898cce419e1 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1034,6 +1034,14 @@ "Your server isn't responding to some requests.": "Your server isn't responding to some requests.", "Decline (%(counter)s)": "Decline (%(counter)s)", "Accept to continue:": "Accept to continue:", + "Quick settings": "Quick settings", + "All settings": "All settings", + "Pin to sidebar": "Pin to sidebar", + "Favourites": "Favourites", + "People": "People", + "More options": "More options", + "Theme": "Theme", + "Space selection": "Space selection", "Delete avatar": "Delete avatar", "Delete": "Delete", "Upload avatar": "Upload avatar", @@ -1070,8 +1078,6 @@ "Show all rooms": "Show all rooms", "All rooms": "All rooms", "Options": "Options", - "Favourites": "Favourites", - "People": "People", "Other rooms": "Other rooms", "Spaces": "Spaces", "Expand space panel": "Expand space panel", @@ -1317,7 +1323,6 @@ "Use high contrast": "Use high contrast", "Custom theme URL": "Custom theme URL", "Add theme": "Add theme", - "Theme": "Theme", "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).", "Checking for an update...": "Checking for an update...", "No update available.": "No update available.", @@ -1639,7 +1644,6 @@ "Show Stickers": "Show Stickers", "Send a sticker": "Send a sticker", "Send voice message": "Send voice message", - "More options": "More options", "The conversation continues here.": "The conversation continues here.", "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.", "You do not have permission to post to this room": "You do not have permission to post to this room", @@ -2249,7 +2253,6 @@ "Adding rooms... (%(progress)s out of %(count)s)|other": "Adding rooms... (%(progress)s out of %(count)s)", "Adding rooms... (%(progress)s out of %(count)s)|one": "Adding room...", "Direct Messages": "Direct Messages", - "Space selection": "Space selection", "Add existing rooms": "Add existing rooms", "Want to add a new room instead?": "Want to add a new room instead?", "Create a new room": "Create a new room", @@ -3056,7 +3059,6 @@ "New here? Create an account": "New here? Create an account", "Notification settings": "Notification settings", "Security & privacy": "Security & privacy", - "All settings": "All settings", "Community settings": "Community settings", "User settings": "User settings", "Switch to light mode": "Switch to light mode", From 5d5922f62399ec5426a6b4bc523e3a6d36d7328c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 12:22:29 +0000 Subject: [PATCH 07/11] Fix all settings button --- src/components/views/spaces/QuickSettingsButton.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index 9e5003d3457..3365332f400 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -59,7 +59,16 @@ const QuickSettingsButton = () => { >

{ _t("Quick settings") }

- {}} kind="primary_outline"> + { + closeMenu(); + defaultDispatcher.dispatch({ + action: Action.ViewUserSettings, + initialTabId: UserTab.Sidebar, + }); + }} + kind="primary_outline" + > { _t("All settings") } From f7debdedc6910c184925a6da4f1f980205795169 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 Nov 2021 15:10:22 +0000 Subject: [PATCH 08/11] Fix css rules --- res/css/structures/_QuickSettingsButton.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss index 82528bd350a..af8859639e7 100644 --- a/res/css/structures/_QuickSettingsButton.scss +++ b/res/css/structures/_QuickSettingsButton.scss @@ -45,7 +45,7 @@ limitations under the License. min-width: 200px; contain: unset; // let the dropdown paint beyond the context menu - > h2 { + > div > h2 { font-weight: $font-semi-bold; font-size: $font-15px; line-height: $font-24px; @@ -57,7 +57,7 @@ limitations under the License. display: block; } - > h4 { + > div > h4 { font-weight: $font-semi-bold; font-size: $font-12px; line-height: $font-15px; From 57791d254c214d1b10b4b9f6aec323ad7aae70fe Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 26 Nov 2021 10:35:06 +0000 Subject: [PATCH 09/11] Iterate PR based on review --- res/css/structures/_QuickSettingsButton.scss | 24 +++++++++++++++++++ .../views/spaces/QuickSettingsButton.tsx | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss index af8859639e7..b1e9f49d494 100644 --- a/res/css/structures/_QuickSettingsButton.scss +++ b/res/css/structures/_QuickSettingsButton.scss @@ -36,6 +36,10 @@ limitations under the License. &:hover { background-color: $quaternary-content; + + &::before { + background-color: $primary-content; + } } } @@ -66,6 +70,26 @@ limitations under the License. margin: 20px 0 12px; } + .mx_QuickSettingsButton_pinToSidebarHeading { + padding-right: 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; + right: 0; + top: 50%; + transform: translateY(-50%); + } + } + .mx_Checkbox { margin-bottom: 8px; } diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index 3365332f400..59cfcb967cc 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -72,7 +72,7 @@ const QuickSettingsButton = () => { { _t("All settings") } -

{ _t("Pin to sidebar") }

+

{ _t("Pin to sidebar") }

Date: Fri, 26 Nov 2021 10:35:21 +0000 Subject: [PATCH 10/11] Allow dropdown component to close when clicking on header when expanded --- src/components/views/elements/Dropdown.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/components/views/elements/Dropdown.tsx b/src/components/views/elements/Dropdown.tsx index 86e0822b110..54154c7f7b0 100644 --- a/src/components/views/elements/Dropdown.tsx +++ b/src/components/views/elements/Dropdown.tsx @@ -178,26 +178,20 @@ export default class Dropdown extends React.Component { 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 { onKeyDown={this.onKeyDown} > { currentValue } - + { menu }
; From 0049c9be682cf80b24556f028c014b4d21879957 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 26 Nov 2021 15:27:57 +0000 Subject: [PATCH 11/11] Move pin to the left side instead --- res/css/structures/_QuickSettingsButton.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss index b1e9f49d494..24883478bdc 100644 --- a/res/css/structures/_QuickSettingsButton.scss +++ b/res/css/structures/_QuickSettingsButton.scss @@ -71,7 +71,7 @@ limitations under the License. } .mx_QuickSettingsButton_pinToSidebarHeading { - padding-right: 24px; + padding-left: 24px; position: relative; &::before { @@ -84,7 +84,7 @@ limitations under the License. width: 16px; height: 16px; position: absolute; - right: 0; + left: 0; top: 50%; transform: translateY(-50%); }