[BREAKING] Remove the old room list

res/css/_common.scss

@@ -226,7 +226,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 #mx_theme_tertiaryAccentColor {
-    color: $roomsublist-label-bg-color;
+    color: $tertiary-accent-color;
 }
 
 /* Expected z-indexes for dialogs:

res/css/_components.scss

@@ -12,7 +12,6 @@
 @import "./structures/_HeaderButtons.scss";
 @import "./structures/_HomePage.scss";
 @import "./structures/_LeftPanel.scss";
-@import "./structures/_LeftPanel2.scss";
 @import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
 @import "./structures/_MyGroups.scss";
@@ -21,14 +20,12 @@
 @import "./structures/_RoomDirectory.scss";
 @import "./structures/_RoomSearch.scss";
 @import "./structures/_RoomStatusBar.scss";
-@import "./structures/_RoomSubList.scss";
 @import "./structures/_RoomView.scss";
 @import "./structures/_ScrollPanel.scss";
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TabbedView.scss";
 @import "./structures/_TagPanel.scss";
 @import "./structures/_ToastContainer.scss";
-@import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserMenu.scss";
 @import "./structures/_ViewSource.scss";
@@ -167,7 +164,6 @@
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
-@import "./views/rooms/_InviteOnlyIcon.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";
 @import "./views/rooms/_MemberInfo.scss";
@@ -180,23 +176,18 @@
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_RoomBreadcrumbs.scss";
-@import "./views/rooms/_RoomBreadcrumbs2.scss";
-@import "./views/rooms/_RoomDropTarget.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
-@import "./views/rooms/_RoomList2.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomRecoveryReminder.scss";
-@import "./views/rooms/_RoomSublist2.scss";
+@import "./views/rooms/_RoomSublist.scss";
 @import "./views/rooms/_RoomTile.scss";
-@import "./views/rooms/_RoomTile2.scss";
 @import "./views/rooms/_RoomTileIcon.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
-@import "./views/rooms/_UserOnlineDot.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_AvatarSetting.scss";
 @import "./views/settings/_CrossSigningPanel.scss";
@@ -227,6 +218,4 @@
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
-@import "./views/voip/_CallView2.scss";
-@import "./views/voip/_IncomingCallbox.scss";
 @import "./views/voip/_VideoView.scss";

res/css/structures/_LeftPanel.scss

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2020 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.
@@ -15,164 +14,182 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_LeftPanel_container {
-    display: flex;
-    /* LeftPanel 260px */
+$tagPanelWidth: 56px; // only applies in this file, used for calculations
+
+.mx_LeftPanel {
+    background-color: $roomlist-bg-color;
     min-width: 260px;
     max-width: 50%;
-    flex: 0 0 auto;
-}
-
-.mx_LeftPanel_container.collapsed {
-    min-width: unset;
-    /* Collapsed LeftPanel 50px */
-    flex: 0 0 50px;
-}
-
-.mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
-    /* TagPanel 70px + Collapsed LeftPanel 50px */
-    flex: 0 0 120px;
-}
-
-.mx_LeftPanel_tagPanelContainer {
-    flex: 0 0 70px;
-    height: 100%;
-}
-
-.mx_LeftPanel_hideButton {
-    position: absolute;
-    top: 10px;
-    right: 0px;
-    padding: 8px;
-    cursor: pointer;
-}
 
-.mx_LeftPanel {
-    flex: 1;
-    overflow-x: hidden;
+    // Create a row-based flexbox for the TagPanel and the room list
     display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-.mx_LeftPanel .mx_AppTile_mini {
-    height: 132px;
-}
-
-.mx_LeftPanel .mx_RoomList_scrollbar {
-    order: 1;
-
-    flex: 1 1 0;
 
-    overflow-y: auto;
-    z-index: 6;
-}
-
-.mx_LeftPanel .mx_BottomLeftMenu {
-    order: 3;
+    .mx_LeftPanel_tagPanelContainer {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: $tagPanelWidth;
+        height: 100%;
 
-    border-top: 1px solid $panel-divider-color;
-    margin-left: 16px; /* gutter */
-    margin-right: 16px; /* gutter */
-    flex: 0 0 60px;
-    z-index: 1;
-}
+        // Create another flexbox so the TagPanel fills the container
+        display: flex;
 
-.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
-    flex: 0 0 160px;
-    margin-bottom: 9px;
-}
+        // TagPanel handles its own CSS
+    }
 
-.mx_LeftPanel .mx_BottomLeftMenu_options {
-    margin-top: 18px;
-}
+    &:not(.mx_LeftPanel_hasTagPanel) {
+        .mx_LeftPanel_roomListContainer {
+            width: 100%;
+        }
+    }
 
-.mx_BottomLeftMenu_options object {
-    pointer-events: none;
-}
+    // Note: The 'room list' in this context is actually everything that isn't the tag
+    // panel, such as the menu options, breadcrumbs, filtering, etc
+    .mx_LeftPanel_roomListContainer {
+        width: calc(100% - $tagPanelWidth);
+        background-color: $roomlist-bg-color;
+
+        // Create another flexbox (this time a column) for the room list components
+        display: flex;
+        flex-direction: column;
+
+        .mx_LeftPanel_userHeader {
+            /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
+             * for internal whitespace in the breadcrumbs)
+             */
+            padding: 12px;
+            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+
+            // Create another flexbox column for the rows to stack within
+            display: flex;
+            flex-direction: column;
+        }
 
-.mx_BottomLeftMenu_options > div {
-    display: inline-block;
-}
+        .mx_LeftPanel_breadcrumbsContainer {
+            overflow-y: hidden;
+            overflow-x: scroll;
+            margin: 12px 12px 0 12px;
+            flex: 0 0 auto;
+            // Create yet another flexbox, this time within the row, to ensure items stay
+            // aligned correctly. This is also a row-based flexbox.
+            display: flex;
+            align-items: center;
+
+            &.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow {
+                mask-image: linear-gradient(90deg, black, black 95%, transparent);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
+            }
+        }
 
-.mx_BottomLeftMenu_options .mx_RoleButton {
-    margin-left: 0px;
-    margin-right: 10px;
-    height: 30px;
-}
+        .mx_LeftPanel_filterContainer {
+            margin-left: 12px;
+            margin-right: 12px;
+
+            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+
+            // Create a flexbox to organize the inputs
+            display: flex;
+            align-items: center;
+
+            .mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton {
+                // Cheaty way to return the occupied space to the filter input
+                flex-basis: 0;
+                margin: 0;
+                width: 0;
+
+                // Don't forget to hide the masked ::before icon,
+                // using display:none or visibility:hidden would break accessibility
+                &::before {
+                    content: none;
+                }
+            }
+
+            .mx_LeftPanel_exploreButton {
+                width: 28px;
+                height: 28px;
+                border-radius: 20px;
+                background-color: $roomlist-button-bg-color;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 6px;
+                    left: 6px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url('$(res)/img/feather-customised/compass.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background: $primary-fg-color;
+                }
+            }
+        }
 
-.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
-    float: right;
-}
+        .mx_LeftPanel_roomListWrapper {
+            // Create a flexbox to ensure the containing items cause appropriate overflow.
+            display: flex;
 
-.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
-    margin-right: 0px;
-}
+            flex-grow: 1;
+            overflow: hidden;
+            min-height: 0;
+            margin-top: 10px; // so we're not up against the search/filter
 
-.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
-    float: none;
-}
+            &.mx_LeftPanel_roomListWrapper_stickyBottom {
+                padding-bottom: 32px;
+            }
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_LeftPanel .mx_BottomLeftMenu {
-        flex: 0 0 50px;
-    }
+            &.mx_LeftPanel_roomListWrapper_stickyTop {
+                padding-top: 32px;
+            }
+        }
 
-    .mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
-        flex: 0 0 160px;
-    }
+        .mx_LeftPanel_actualRoomListContainer {
+            flex-grow: 1; // fill the available space
+            overflow-y: auto;
+            width: 100%;
+            max-width: 100%;
+            position: relative; // for sticky headers
 
-    .mx_LeftPanel .mx_BottomLeftMenu_options {
-        margin-top: 12px;
+            // Create a flexbox to trick the layout engine
+            display: flex;
+        }
     }
-}
-
-.mx_LeftPanel_exploreAndFilterRow {
-    display: flex;
 
-    .mx_SearchBox {
-        flex: 1 1 0;
-        min-width: 0;
-        margin: 4px 9px 1px 9px;
-    }
-}
+    // These styles override the defaults for the minimized (66px) layout
+    &.mx_LeftPanel_minimized {
+        min-width: unset;
 
-.mx_LeftPanel_explore {
-    flex: 0 0 50%;
-    overflow: hidden;
-    transition: flex-basis 0.2s;
-    box-sizing: border-box;
+        // We have to forcefully set the width to override the resizer's style attribute.
+        &.mx_LeftPanel_hasTagPanel {
+            width: calc(68px + $tagPanelWidth) !important;
+        }
+        &:not(.mx_LeftPanel_hasTagPanel) {
+            width: 68px !important;
+        }
 
-    &.mx_LeftPanel_explore_hidden {
-        flex-basis: 0;
-    }
+        .mx_LeftPanel_roomListContainer {
+            width: 68px;
 
-    .mx_AccessibleButton {
-        font-size: $font-14px;
-        margin: 4px 0 1px 9px;
-        padding: 9px;
-        padding-left: 42px;
-        font-weight: 600;
-        color: $notice-secondary-color;
-        position: relative;
-        border-radius: 4px;
-
-        &:hover {
-            background-color: $primary-bg-color;
-        }
+            .mx_LeftPanel_filterContainer {
+                // Organize the flexbox into a centered column layout
+                flex-direction: column;
+                justify-content: center;
 
-        &::before {
-            cursor: pointer;
-            mask: url('$(res)/img/explore.svg');
-            mask-repeat: no-repeat;
-            mask-position: center center;
-            content: "";
-            left: 14px;
-            top: 10px;
-            width: 16px;
-            height: 16px;
-            background-color: $notice-secondary-color;
-            position: absolute;
+                .mx_LeftPanel_exploreButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+            }
         }
     }
 }