mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-13 08:08:03 +03:00
a8e2c1bc2a
This commit moves the dial pad from a context menu to sit right by the explore button, in line with the designs in the linked issue. The dial pad button is only shown when PSTN support is detected.
225 lines
7.5 KiB
SCSS
225 lines
7.5 KiB
SCSS
/*
|
|
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.
|
|
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.
|
|
*/
|
|
|
|
$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
|
|
$roomListCollapsedWidth: 68px;
|
|
|
|
.mx_LeftPanel {
|
|
background-color: $roomlist-bg-color;
|
|
// TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
|
|
min-width: 206px;
|
|
max-width: 50%;
|
|
|
|
// Create a row-based flexbox for the GroupFilterPanel and the room list
|
|
display: flex;
|
|
contain: content;
|
|
|
|
.mx_LeftPanel_GroupFilterPanelContainer {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
flex-basis: $groupFilterPanelWidth;
|
|
height: 100%;
|
|
|
|
// Create another flexbox so the GroupFilterPanel fills the container
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// GroupFilterPanel handles its own CSS
|
|
}
|
|
|
|
// 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 {
|
|
background-color: $roomlist-bg-color;
|
|
flex: 1 0 0;
|
|
min-width: 0;
|
|
// 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_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;
|
|
contain: content;
|
|
|
|
&.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_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_focused, .mx_RoomSearch_hasQuery {
|
|
& + .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_dialPadButton {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background-color: $roomlist-button-bg-color;
|
|
position: relative;
|
|
margin-left: 8px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
|
|
mask-position: center;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
background: $secondary-fg-color;
|
|
}
|
|
}
|
|
|
|
.mx_LeftPanel_exploreButton {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background-color: $roomlist-button-bg-color;
|
|
position: relative;
|
|
margin-left: 8px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
|
|
mask-position: center;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
background: $secondary-fg-color;
|
|
}
|
|
|
|
&.mx_LeftPanel_exploreButton_space::before {
|
|
mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
|
|
}
|
|
}
|
|
}
|
|
|
|
.mx_LeftPanel_roomListFilterCount {
|
|
font-size: $font-13px;
|
|
font-weight: $font-semi-bold;
|
|
margin-left: 12px;
|
|
margin-top: 14px;
|
|
margin-bottom: -4px; // to counteract the normal roomListWrapper margin-top
|
|
}
|
|
|
|
.mx_LeftPanel_roomListWrapper {
|
|
overflow: hidden;
|
|
margin-top: 10px; // so we're not up against the search/filter
|
|
flex: 1 0 0; // needed in Safari to properly set flex-basis
|
|
|
|
&.mx_LeftPanel_roomListWrapper_stickyBottom {
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
&.mx_LeftPanel_roomListWrapper_stickyTop {
|
|
padding-top: 32px;
|
|
}
|
|
}
|
|
|
|
.mx_LeftPanel_actualRoomListContainer {
|
|
position: relative; // for sticky headers
|
|
height: 100%; // ensure scrolling still works
|
|
}
|
|
}
|
|
|
|
// These styles override the defaults for the minimized (66px) layout
|
|
&.mx_LeftPanel_minimized {
|
|
min-width: unset;
|
|
width: unset !important;
|
|
|
|
.mx_LeftPanel_roomListContainer {
|
|
width: $roomListCollapsedWidth;
|
|
|
|
.mx_LeftPanel_userHeader {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mx_LeftPanel_filterContainer {
|
|
// Organize the flexbox into a centered column layout
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.mx_LeftPanel_dialPadButton {
|
|
margin-left: 0;
|
|
margin-top: 8px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.mx_LeftPanel_exploreButton {
|
|
margin-left: 0;
|
|
margin-top: 8px;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|