Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #5013 from matrix-org/travis/room-list/rm-old
Browse files Browse the repository at this point in the history 
[BREAKING] Remove the old room list
  • Loading branch information
@turt2live
turt2live authored Jul 20, 2020
2 parents 58532f2 + e03978a commit 7996013
Show file tree
Hide file tree
Showing 84 changed files with 838 additions and 6,818 deletions.
2 changes: 1 addition & 1 deletion res/css/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
13 changes: 1 addition & 12 deletions res/css/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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";
291 changes: 154 additions & 137 deletions res/css/structures/_LeftPanel.scss
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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;
}
}
}
}
}
Loading

0 comments on commit 7996013

Please sign in to comment.