Update sublists for new hover states

Fixes element-hq/element-web#14135 Unblocks element-hq/element-web#14089
matrix-org · Jun 25, 2020 · 0af1507 · 0af1507
1 parent f8bd6c8
commit 0af1507
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 78 deletions.
diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
@@ -85,23 +85,24 @@ limitations under the License.
         // ***************************
 
         .mx_RoomSublist2_badgeContainer {
-            opacity: 0.8;
-            width: 16px;
-            margin-right: 5px; // aligns with the room tile's badge
-
             // Create another flexbox row because it's super easy to position the badge this way.
             display: flex;
             align-items: center;
             justify-content: center;
+
+            // Apply the width and margin to the badge so the container doesn't occupy dead space
+            .mx_NotificationBadge {
+                width: 16px;
+                margin-left: 8px; // same as menu+aux buttons
+            }
         }
 
-        // Both of these buttons are hidden by default until the list is hovered
         .mx_RoomSublist2_auxButton,
         .mx_RoomSublist2_menuButton {
-            width: 0;
-            margin: 0;
-            visibility: hidden;
+            margin-left: 8px; // should be the same as the notification badge
             position: relative;
+            width: 24px;
+            height: 24px;
             border-radius: 32px;
 
             &::before {
@@ -118,6 +119,13 @@ limitations under the License.
             }
         }
 
+        // Hide the menu button by default
+        .mx_RoomSublist2_menuButton {
+            visibility: hidden;
+            width: 0;
+            margin: 0;
+        }
+
         .mx_RoomSublist2_auxButton::before {
             mask-image: url('$(res)/img/feather-customised/plus.svg');
         }
@@ -142,11 +150,9 @@ limitations under the License.
             .mx_RoomSublist2_collapseBtn {
                 display: inline-block;
                 position: relative;
-
-                // Default hidden
-                visibility: hidden;
-                width: 0;
-                height: 0;
+                width: 12px;
+                height: 12px;
+                margin-right: 8px;
 
                 &::before {
                     content: '';
@@ -158,7 +164,7 @@ limitations under the License.
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $primary-fg-color;
+                    background-color: $primary-fg-color;
                     mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
                 }
 
@@ -266,46 +272,12 @@ limitations under the License.
         }
     }
 
-    // The aforementioned selector for the hover state.
-    &:hover, &.mx_RoomSublist2_hasMenuOpen {
-        &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer {
-            // If the header doesn't have an aux button we still need to hide the badge for
-            // the menu button.
-            .mx_RoomSublist2_badgeContainer {
-                // Completely hide the badge
-                width: 0;
-                margin: 0;
-                visibility: hidden;
-            }
-
-            &:not(.mx_RoomSublist2_headerContainer_withAux) {
-                // The menu button will be the rightmost button, so make it correctly aligned.
-                .mx_RoomSublist2_menuButton {
-                    margin-right: 1px; // line it up with the badges on the room tiles
-                }
-            }
-
-            // Both of these buttons have circled backgrounds and are visible at this point,
-            // so make them so.
-            .mx_RoomSublist2_auxButton,
-            .mx_RoomSublist2_menuButton {
-                width: 24px;
-                height: 24px;
-                margin-left: 16px;
-                visibility: visible;
-                background-color: $roomlist2-button-bg-color;
-            }
-        }
-
-        .mx_RoomSublist2_headerContainer {
-            .mx_RoomSublist2_headerText {
-                .mx_RoomSublist2_collapseBtn {
-                    visibility: visible;
-                    width: 12px;
-                    height: 12px;
-                    margin-right: 4px;
-                }
-            }
+    &.mx_RoomSublist2_hasMenuOpen,
+    &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
+        .mx_RoomSublist2_menuButton {
+            visibility: visible;
+            width: 24px;
+            margin-left: 8px;
         }
     }
 
@@ -354,7 +326,12 @@ limitations under the License.
             }
         }
 
-        &:hover, &.mx_RoomSublist2_hasMenuOpen {
+        .mx_RoomSublist2_menuButton {
+            height: 16px;
+        }
+
+        &.mx_RoomSublist2_hasMenuOpen,
+        & > .mx_RoomSublist2_headerContainer:hover {
             .mx_RoomSublist2_menuButton {
                 visibility: visible;
                 position: absolute;
@@ -375,7 +352,7 @@ limitations under the License.
                 }
             }
 
-            .mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
+            &.mx_RoomSublist2_headerContainer:not(.mx_RoomSublist2_headerContainer_withAux) {
                 .mx_RoomSublist2_menuButton {
                     bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
                 }
@@ -384,27 +361,6 @@ limitations under the License.
     }
 }
 
-// We have a hover style on the room list with no specific list hovered, so account for that
-.mx_RoomList2:hover .mx_RoomSublist2:not(.mx_RoomSublist2_minimized),
-.mx_RoomSublist2_hasMenuOpen:not(.mx_RoomSublist2_minimized) {
-    .mx_RoomSublist2_headerContainer_withAux {
-        .mx_RoomSublist2_badgeContainer {
-            // Completely hide the badge
-            width: 0;
-            margin: 0;
-            visibility: hidden;
-        }
-
-        .mx_RoomSublist2_auxButton {
-            // Show the aux button, but not the list button
-            width: 24px;
-            height: 24px;
-            margin-right: 1px; // line it up with the badges on the room tiles
-            visibility: visible;
-        }
-    }
-}
-
 .mx_RoomSublist2_contextMenu {
     padding: 20px 16px;
     width: 250px;

diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
@@ -320,8 +320,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                     <span>{this.props.label}</span>
                                 </AccessibleButton>
                                 {this.renderMenu()}
-                                {this.props.isMinimized ? null : addRoomButton}
                                 {this.props.isMinimized ? null : badgeContainer}
+                                {this.props.isMinimized ? null : addRoomButton}
                             </div>
                             {this.props.isMinimized ? badgeContainer : null}
                             {this.props.isMinimized ? addRoomButton : null}