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

Author: t3chguy

res/css/structures/_QuickSettingsButton.scss

@@ -16,25 +16,34 @@ 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;
         mask-size: 16px;
         background: $secondary-content;
     }
 
-    &:hover {
+    &:not(.expanded):hover {
         background-color: $quaternary-content;
 
         &::before {

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);
+            }
         }
     }
 

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.",