Tweak bottom of space panel buttons in expanded state (#7213)

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<HTMLDivElement>();
 
@@ -137,11 +138,14 @@ const QuickSettingsButton = () => {
 
     return <>
         <AccessibleTooltipButton
-            className="mx_QuickSettingsButton"
+            className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
             onClick={openMenu}
             title={_t("Quick settings")}
             inputRef={handle}
-        />
+            forceHide={!isPanelCollapsed}
+        >
+            { !isPanelCollapsed ? _t("Settings") : null }
+        </AccessibleTooltipButton>
 
         { contextMenu }
     </>;

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 && <QuickSettingsButton /> }
+                            forceHide={!isPanelCollapsed}
+                        >
+                            { !isPanelCollapsed ? _t("Collapse") : null }
+                        </AccessibleTooltipButton>
+                        { metaSpacesEnabled && <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} /> }
                     </ul>
                 ) }
             </RovingTabIndexProvider>

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 <user />.": "This bridge was provisioned by <user />.",
@@ -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.",