Merge pull request #5702 from matrix-org/t3chguy/spaces4.1

Iterate Space Panel

res/css/structures/_SpacePanel.scss

@@ -2,8 +2,6 @@
 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
 
@@ -18,8 +16,12 @@ limitations under the License.
 
 $topLevelHeight: 32px;
 $nestedHeight: 24px;
-$gutterSize: 21px;
+$gutterSize: 17px;
 $activeStripeSize: 4px;
+$activeBorderTransparentGap: 2px;
+
+$activeBackgroundColor: $roomtile-selected-bg-color;
+$activeBorderColor: $secondary-fg-color;
 
 .mx_SpacePanel {
     flex: 0 0 auto;
@@ -68,11 +70,14 @@ $activeStripeSize: 4px;
         cursor: pointer;
     }
 
-    .mx_SpaceItem {
-        position: relative;
-    }
-
     .mx_SpaceItem.collapsed {
+        .mx_SpaceButton {
+            .mx_NotificationBadge {
+                right: -4px;
+                top: -4px;
+            }
+        }
+
         & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
             transform: rotate(-90deg);
         }
@@ -84,20 +89,35 @@ $activeStripeSize: 4px;
 
     .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
         margin-left: $gutterSize;
-
-        &.mx_SpaceButton_active {
-            &::before {
-                left: -$gutterSize;
-            }
-        }
     }
 
     .mx_SpaceButton {
         border-radius: 8px;
         position: relative;
-        margin-bottom: 16px;
+        margin-bottom: 2px;
         display: flex;
         align-items: center;
+        padding: 4px;
+
+        &.mx_SpaceButton_active {
+            &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
+                background-color: $activeBackgroundColor;
+                border-radius: 8px;
+            }
+
+            &.mx_SpaceButton_narrow {
+                .mx_BaseAvatar, .mx_SpaceButton_avatarPlaceholder {
+                    border: 2px $activeBorderColor solid;
+                    border-radius: 11px;
+                }
+            }
+        }
+
+        .mx_SpaceButton_selectionWrapper {
+            display: flex;
+            flex: 1;
+            align-items: center;
+        }
 
         .mx_SpaceButton_name {
             flex: 1;
@@ -107,7 +127,7 @@ $activeStripeSize: 4px;
             max-width: 150px;
             text-overflow: ellipsis;
             overflow: hidden;
-
+            padding-right: 8px;
             font-size: $font-14px;
             line-height: $font-18px;
         }
@@ -123,24 +143,12 @@ $activeStripeSize: 4px;
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
 
-        &.mx_SpaceButton_active {
-            &::before {
-                position: absolute;
-                content: '';
-                width: $activeStripeSize;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                background-color: $accent-color;
-                border-radius: 0 4px 4px 0;
-            }
-        }
-
-        .mx_SpaceButton_avatarPlaceholder {
+        .mx_SpaceButton_icon {
             width: $topLevelHeight;
             min-width: $topLevelHeight;
             height: $topLevelHeight;
             border-radius: 8px;
+            position: relative;
 
             &::before {
                 position: absolute;
@@ -155,7 +163,7 @@ $activeStripeSize: 4px;
             }
         }
 
-        &.mx_SpaceButton_home .mx_SpaceButton_avatarPlaceholder {
+        &.mx_SpaceButton_home .mx_SpaceButton_icon {
             background-color: #ffffff;
 
             &::before {
@@ -164,16 +172,26 @@ $activeStripeSize: 4px;
             }
         }
 
-        &.mx_SpaceButton_newCancel .mx_SpaceButton_avatarPlaceholder {
-            background-color: $icon-button-color;
-
-            &::before {
-                transform: rotate(45deg);
-            }
+        .mx_SpaceButton_avatarPlaceholder {
+            border: $activeBorderTransparentGap transparent solid;
+            padding: $activeBorderTransparentGap;
         }
 
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
+        .mx_BaseAvatar {
+            /* moving the border-radius to this element from _image
+            element so we can add a border to it without the initials being displaced */
+            overflow: hidden;
+            border: 2px transparent solid;
+            padding: $activeBorderTransparentGap;
+
+            .mx_BaseAvatar_initial {
+                top: $activeBorderTransparentGap;
+                left: $activeBorderTransparentGap;
+            }
+
+            .mx_BaseAvatar_image {
+                border-radius: 8px;
+            }
         }
     }
 
@@ -201,8 +219,8 @@ $activeStripeSize: 4px;
         .mx_SpaceButton {
             .mx_SpacePanel_badgeContainer {
                 position: absolute;
-                right: -8px;
-                top: -4px;
+                right: 0px;
+                top: 2px;
             }
         }
     }

res/css/structures/_UserMenu.scss

@@ -72,6 +72,7 @@ limitations under the License.
             position: relative; // to make default avatars work
             margin-right: 8px;
             height: 32px; // to remove the unknown 4px gap the browser puts below it
+            padding: 3px 0; // to align with and without using doubleName
 
             .mx_UserMenu_userAvatar {
                 border-radius: 32px; // should match avatar size

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -75,6 +75,11 @@ limitations under the License.
                 background-color: $menu-selected-color;
             }
 
+            &.mx_AccessibleButton_disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
             img, .mx_IconizedContextMenu_icon { // icons
                 width: 16px;
                 min-width: 16px;

res/img/element-icons/room/invite.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="-0.4 1 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1001 9C18.7779 9 18.5168 8.73883 18.5168 8.41667V6.08333H16.1834C15.8613 6.08333 15.6001 5.82217 15.6001 5.5C15.6001 5.17783 15.8613 4.91667 16.1834 4.91667H18.5168V2.58333C18.5168 2.26117 18.7779 2 19.1001 2C19.4223 2 19.6834 2.26117 19.6834 2.58333V4.91667H22.0168C22.3389 4.91667 22.6001 5.17783 22.6001 5.5C22.6001 5.82217 22.3389 6.08333 22.0168 6.08333H19.6834V8.41667C19.6834 8.73883 19.4223 9 19.1001 9ZM19.6001 11C20.0669 11 20.5212 10.9467 20.9574 10.8458C21.1161 11.5383 21.2 12.2594 21.2 13C21.2 16.1409 19.6917 18.9294 17.3598 20.6808V20.6807C16.0014 21.7011 14.3635 22.3695 12.5815 22.5505C12.2588 22.5832 11.9314 22.6 11.6 22.6C6.29807 22.6 2 18.302 2 13C2 7.69809 6.29807 3.40002 11.6 3.40002C12.3407 3.40002 13.0618 3.48391 13.7543 3.64268C13.6534 4.07884 13.6001 4.53319 13.6001 5C13.6001 8.31371 16.2864 11 19.6001 11ZM11.5999 20.68C13.6754 20.68 15.5585 19.8567 16.9407 18.5189C16.0859 16.4086 14.0167 14.92 11.5998 14.92C9.18298 14.92 7.11378 16.4086 6.25901 18.5189C7.64115 19.8567 9.52436 20.68 11.5999 20.68ZM11.7426 7.41172C10.3168 7.54168 9.2 8.74043 9.2 10.2C9.2 11.7464 10.4536 13 12 13C13.0308 13 13.9315 12.443 14.4176 11.6135C13.0673 10.6058 12.0929 9.12248 11.7426 7.41172Z" fill="black"/>
 </svg>