imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #4758 from matrix-org/travis/room-list/sticky

Browse source 
Sticky and collapsing headers for new room list
This commit is contained in:
Travis Ralston 2020-06-17 08:28:38 -06:00 • committed by GitHub
commit d2831ffb0c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 187 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/structures/_LeftPanel2.scss
View file

@ -131,6 +131,7 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
overflow-y: auto;
width: 100%;
max-width: 100%;
position: relative; // for sticky headers
// Create a flexbox to trick the layout engine
display: flex;

95
res/css/views/rooms/_RoomSublist2.scss
View file

@ -27,12 +27,61 @@ limitations under the License.
width: 100%;
.mx_RoomSublist2_headerContainer {
// Create a flexbox to make ordering easy
// Create a flexbox to make alignment easy
display: flex;
align-items: center;
// ***************************
// Sticky Headers Start
// Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the
// headerContainer, however due to our layout concerns we actually have to
// calculate it manually so we can sticky things in the right places. We also
// target the headerText instead of the container to reduce jumps when scrolling,
// and to help hide the badges/other buttons that could appear on hover. This
// all works by ensuring the header text has a fixed height when sticky so the
// fixed height of the container can maintain the scroll position.
// The combined height must be set in the LeftPanel2 component for sticky headers
// to work correctly.
padding-bottom: 8px;
height: 24px;
.mx_RoomSublist2_stickable {
flex: 1;
max-width: 100%;
z-index: 2; // Prioritize headers in the visible list over sticky ones
// Set the same background color as the room list for sticky headers
background-color: $roomlist2-bg-color;
// Create a flexbox to make ordering easy
display: flex;
align-items: center;
// We use a generic sticky class for 2 reasons: to reduce style duplication and
// to identify when a header is sticky. If we didn't have a consistent sticky class,
// we'd have to do the "is sticky" checks again on click, as clicking the header
// when sticky scrolls instead of collapses the list.
&.mx_RoomSublist2_headerContainer_sticky {
position: fixed;
z-index: 1; // over top of other elements, but still under the ones in the visible list
height: 32px; // to match the header container
// width set by JS
}
&.mx_RoomSublist2_headerContainer_stickyBottom {
bottom: 0;
}
// We don't have a top style because the top is dependent on the room list header's
// height, and is therefore calculated in JS.
// The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
}
// Sticky Headers End
// ***************************
.mx_RoomSublist2_badgeContainer {
opacity: 0.8;
width: 16px;
@ -76,18 +125,45 @@ limitations under the License.
}
.mx_RoomSublist2_headerText {
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
text-transform: uppercase;
opacity: 0.5;
line-height: $font-16px;
font-size: $font-12px;
flex: 1;
max-width: calc(100% - 16px); // 16px is the badge width
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.mx_RoomSublist2_collapseBtn {
display: inline-block;
position: relative;
// Default hidden
visibility: hidden;
width: 0;
height: 0;
&::before {
content: '';
width: 12px;
height: 12px;
position: absolute;
top: 1px;
left: 1px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-fg-color;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
}
&.mx_RoomSublist2_collapseBtn_collapsed::before {
mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
}
}
}
}
@ -201,6 +277,17 @@ limitations under the License.
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_minimized {