From 1d2965a11120d5da12ae47911bb8d7e75735e939 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 29 Nov 2021 20:10:34 +0000 Subject: [PATCH] Tweak bottom of space panel buttons in expanded state (#7213) --- res/css/structures/_QuickSettingsButton.scss | 19 +++++++--- res/css/structures/_SpacePanel.scss | 36 +++++++++++++------ .../views/spaces/QuickSettingsButton.tsx | 10 ++++-- src/components/views/spaces/SpacePanel.tsx | 7 ++-- src/i18n/strings/en_EN.json | 4 +-- 5 files changed, 54 insertions(+), 22 deletions(-) diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss index 24883478bdc..45f7447162e 100644 --- a/res/css/structures/_QuickSettingsButton.scss +++ b/res/css/structures/_QuickSettingsButton.scss @@ -16,17 +16,26 @@ limitations under the License. .mx_QuickSettingsButton { flex: 0 0 auto; - width: 32px; - height: 32px; border-radius: 8px; position: relative; margin: 12px auto; + color: $secondary-content; + min-width: 32px; + min-height: 32px; + line-height: 32px; + + &.expanded { + margin-left: 20px; + padding-left: 44px; // align with toggle collapse button text + padding-right: 8px; + } &::before { content: ""; position: absolute; - width: inherit; - height: inherit; + width: 32px; + height: 32px; + left: 0; mask-image: url('$(res)/img/element-icons/settings.svg'); mask-repeat: no-repeat; mask-position: center; @@ -34,7 +43,7 @@ limitations under the License. background: $secondary-content; } - &:hover { + &:not(.expanded):hover { background-color: $quaternary-content; &::before { diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index 42fb72464a5..706cfb44f09 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -41,18 +41,34 @@ $activeBorderColor: $secondary-content; } .mx_SpacePanel_toggleCollapse { - flex: 0 0 auto; - width: 40px; - height: 40px; - mask-position: center; - mask-size: 32px; - mask-repeat: no-repeat; - margin-left: $gutterSize; - background-color: $tertiary-content; - mask-image: url('$(res)/img/element-icons/expand-space-panel.svg'); + margin: 0 auto; + position: relative; + min-width: 32px; + min-height: 32px; + line-height: 32px; + color: $secondary-content; + + &::before { + content: ""; + position: absolute; + width: 32px; + height: 32px; + left: 0; + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + background-color: $secondary-content; + mask-image: url('$(res)/img/element-icons/expand-space-panel.svg'); + } &.expanded { - transform: scaleX(-1); + padding-left: 48px; + padding-right: 8px; + margin-left: $gutterSize; + + &::before { + transform: scaleX(-1); + } } } diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index e54d5af5980..2b7595f9a53 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -34,8 +34,9 @@ import SettingsStore from "../../../settings/SettingsStore"; import { SettingLevel } from "../../../settings/SettingLevel"; import dis from "../../../dispatcher/dispatcher"; import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload"; +import classNames from "classnames"; -const QuickSettingsButton = () => { +const QuickSettingsButton = ({ isPanelCollapsed = false }) => { const orderedThemes = useMemo(getOrderedThemes, []); const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu(); @@ -137,11 +138,14 @@ const QuickSettingsButton = () => { return <> + forceHide={!isPanelCollapsed} + > + { !isPanelCollapsed ? _t("Settings") : null } + { contextMenu } ; diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index 0aa2d44dff9..57d770195d2 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -324,8 +324,11 @@ const SpacePanel = () => { className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })} onClick={() => setPanelCollapsed(!isPanelCollapsed)} title={isPanelCollapsed ? _t("Expand space panel") : _t("Collapse space panel")} - /> - { metaSpacesEnabled && } + forceHide={!isPanelCollapsed} + > + { !isPanelCollapsed ? _t("Collapse") : null } + + { metaSpacesEnabled && } ) } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index facd3999dda..124d887c680 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1053,6 +1053,7 @@ "More options": "More options", "Theme": "Theme", "Space selection": "Space selection", + "Settings": "Settings", "Delete avatar": "Delete avatar", "Delete": "Delete", "Upload avatar": "Upload avatar", @@ -1092,6 +1093,7 @@ "Other rooms": "Other rooms", "Expand space panel": "Expand space panel", "Collapse space panel": "Collapse space panel", + "Collapse": "Collapse", "Click to copy": "Click to copy", "Copied!": "Copied!", "Failed to copy": "Failed to copy", @@ -1120,7 +1122,6 @@ "Jump to first unread room.": "Jump to first unread room.", "Jump to first invite.": "Jump to first invite.", "Expand": "Expand", - "Collapse": "Collapse", "Space options": "Space options", "Remove": "Remove", "This bridge was provisioned by .": "This bridge was provisioned by .", @@ -1794,7 +1795,6 @@ "Low Priority": "Low Priority", "Invite People": "Invite People", "Copy Room Link": "Copy Room Link", - "Settings": "Settings", "Leave Room": "Leave Room", "%(count)s unread messages including mentions.|other": "%(count)s unread messages including mentions.", "%(count)s unread messages including mentions.|one": "1 unread mention.",