PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Float the badges with the sticky headers

Browse source
This commit is contained in:
Travis Ralston 2020-06-13 19:07:19 -06:00
parent c26c79bda8
commit eeac80096c
3 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,7 @@ 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;
@ -47,9 +47,18 @@ limitations under the License.
padding-bottom: 8px;
height: 24px;
.mx_RoomSublist2_headerText {
.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
@ -120,23 +129,15 @@ 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;
// Set the same background color as the room list for sticky headers
background-color: $roomlist2-bg-color;
// Target the span inside the container so we don't opacify the
// whole header, which can make the sticky header experience annoying.
> span {
text-transform: uppercase;
opacity: 0.5;
line-height: $font-16px;
font-size: $font-12px;
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}

2
src/components/structures/LeftPanel2.tsx
View file

@ -102,7 +102,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
for (const sublist of sublists) {
const slRect = sublist.getBoundingClientRect();
const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_headerText");
const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_stickable");
if (slRect.top + headerHeight > bottom && !gotBottom) {
console.log(`${header.textContent} is off the bottom`);

28
src/components/views/rooms/RoomSublist2.tsx
View file

@ -257,19 +257,21 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// TODO: a11y (see old component)
return (
<div className={classes}>
<AccessibleButton
inputRef={ref}
tabIndex={tabIndex}
className={"mx_RoomSublist2_headerText"}
role="treeitem"
aria-level={1}
>
<span>{this.props.label}</span>
</AccessibleButton>
{this.renderMenu()}
{addRoomButton}
<div className="mx_RoomSublist2_badgeContainer">
{badge}
<div className='mx_RoomSublist2_stickable'>
<AccessibleButton
inputRef={ref}
tabIndex={tabIndex}
className={"mx_RoomSublist2_headerText"}
role="treeitem"
aria-level={1}
>
<span>{this.props.label}</span>
</AccessibleButton>
{this.renderMenu()}
{addRoomButton}
<div className="mx_RoomSublist2_badgeContainer">
{badge}
</div>
</div>
</div>
);