Float the badges with the sticky headers
This commit is contained in:
parent
c26c79bda8
commit
eeac80096c
3 changed files with 35 additions and 32 deletions
|
@ -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,13 +129,6 @@ limitations under the License.
|
|||
.mx_RoomSublist2_headerText {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 16px); // 16px is the badge width
|
||||
|
||||
// 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;
|
||||
|
@ -138,7 +140,6 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist2_resizeBox {
|
||||
margin-bottom: 4px; // for the resize handle
|
||||
|
|
|
@ -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`);
|
||||
|
|
|
@ -257,6 +257,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
// TODO: a11y (see old component)
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className='mx_RoomSublist2_stickable'>
|
||||
<AccessibleButton
|
||||
inputRef={ref}
|
||||
tabIndex={tabIndex}
|
||||
|
@ -272,6 +273,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
|
|||
{badge}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</RovingTabIndexWrapper>
|
||||
|
|
Loading…
Reference in a new issue