6d96d66c03
Though we consider the "room list" to mean the RoomList component specifically, the room list is actually the entire left panel as far as the user is concerned. The new proposed designs for the room list modify the whole left panel, so we had might as well break it into new and old now instead of later. This "new" left panel is a bare-bones implementation and meant to only provide the absolute basic feature set to function for those who enable the experimental room list, for whatever reason. This is not intended to be a final implementation, or even remotely close to what it could be. An example of this is the lack of breadcrumbs. Given they are likely to change, they are excluded from this temporary skeleton completely. This also includes a purple/pink bar between the tag panel and left panel. This is so we can, if needed, differentiate between people who made the mistake of turning on the experimental room list while the overall aesthetic makes it indistinguishable. Once the designs are moderately approved, we can (and definitely should) remove the hideous indicator.
185 lines
4 KiB
SCSS
185 lines
4 KiB
SCSS
/*
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
Copyright 2018 New Vector Ltd
|
|
|
|
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
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
.mx_LeftPanel_container {
|
|
display: flex;
|
|
/* LeftPanel 260px */
|
|
min-width: 260px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
// TODO: Remove temporary indicator of new room list implementation.
|
|
// This border is meant to visually distinguish between the two components when the
|
|
// user has turned on the new room list implementation, at least until the designs
|
|
// themselves give it away.
|
|
.mx_LeftPanel2 .mx_LeftPanel {
|
|
border-left: 5px #e26dff solid;
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
|
|
border-top: 1px solid $panel-divider-color;
|
|
margin-left: 16px; /* gutter */
|
|
margin-right: 16px; /* gutter */
|
|
flex: 0 0 60px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
|
|
flex: 0 0 160px;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.mx_LeftPanel .mx_BottomLeftMenu_options {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.mx_BottomLeftMenu_options object {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mx_BottomLeftMenu_options > div {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mx_BottomLeftMenu_options .mx_RoleButton {
|
|
margin-left: 0px;
|
|
margin-right: 10px;
|
|
height: 30px;
|
|
}
|
|
|
|
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
|
|
float: right;
|
|
}
|
|
|
|
.mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings .mx_RoleButton {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu_settings {
|
|
float: none;
|
|
}
|
|
|
|
.mx_MatrixChat_useCompactLayout {
|
|
.mx_LeftPanel .mx_BottomLeftMenu {
|
|
flex: 0 0 50px;
|
|
}
|
|
|
|
.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
|
|
flex: 0 0 160px;
|
|
}
|
|
|
|
.mx_LeftPanel .mx_BottomLeftMenu_options {
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
.mx_LeftPanel_exploreAndFilterRow {
|
|
display: flex;
|
|
|
|
.mx_SearchBox {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
margin: 4px 9px 1px 9px;
|
|
}
|
|
}
|
|
|
|
.mx_LeftPanel_explore {
|
|
flex: 0 0 50%;
|
|
overflow: hidden;
|
|
transition: flex-basis 0.2s;
|
|
box-sizing: border-box;
|
|
|
|
&.mx_LeftPanel_explore_hidden {
|
|
flex-basis: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
&::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;
|
|
}
|
|
}
|
|
}
|