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

Revert "also blur the sticky headers"

Browse source 
This reverts commit 82e0816d86.
This commit is contained in:
Bruno Windels 2020-07-08 15:47:01 +02:00
parent 92a2621815
commit 269c30f8e8
3 changed files with 16 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -81,14 +81,6 @@ limitations under the License.
// We don't have a top style because the top is dependent on the room list header's // 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. // height, and is therefore calculated in JS.
// The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though. // The class, mx_RoomSublist2_headerContainer_stickyTop, is applied though.
// blur for element theme, background image is on parent
.mx_RoomSublist2_stickyHeaderBlur {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
} }
// Sticky Headers End // Sticky Headers End

13
res/themes/element/css/_mods.scss
View file

@ -19,19 +19,6 @@
.mx_LeftPanel2 .mx_LeftPanel2_roomListContainer { .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
backdrop-filter: blur(175px); backdrop-filter: blur(175px);
} }
// sticky headers need their own blur, and their own background to make it opaque
.mx_RoomSublist2_headerContainer_sticky {
background-size: cover;
background-image: var(--avatar-url);
background-position: center;
}
}
/* outside of @supports as the backdrop-filter will be ignored, and we still apply the mostly-opaque background color */
.mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur {
backdrop-filter: blur(100px);
background-color: $roomlist2-bg-color;
} }
.mx_RoomSublist2_showNButton { .mx_RoomSublist2_showNButton {

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

@ -437,24 +437,22 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
return ( return (
<div className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus}> <div className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus}>
<div className="mx_RoomSublist2_stickable"> <div className="mx_RoomSublist2_stickable">
<div className="mx_RoomSublist2_stickyHeaderBlur"> <AccessibleButton
<AccessibleButton onFocus={onFocus}
onFocus={onFocus} inputRef={ref}
inputRef={ref} tabIndex={tabIndex}
tabIndex={tabIndex} className="mx_RoomSublist2_headerText"
className="mx_RoomSublist2_headerText" role="treeitem"
role="treeitem" aria-level={1}
aria-level={1} onClick={this.onHeaderClick}
onClick={this.onHeaderClick} onContextMenu={this.onContextMenu}
onContextMenu={this.onContextMenu} >
> <span className={collapseClasses} />
<span className={collapseClasses} /> <span>{this.props.label}</span>
<span>{this.props.label}</span> </AccessibleButton>
</AccessibleButton> {this.renderMenu()}
{this.renderMenu()} {this.props.isMinimized ? null : badgeContainer}
{this.props.isMinimized ? null : badgeContainer} {this.props.isMinimized ? null : addRoomButton}
{this.props.isMinimized ? null : addRoomButton}
</div>
</div> </div>
{this.props.isMinimized ? badgeContainer : null} {this.props.isMinimized ? badgeContainer : null}
{this.props.isMinimized ? addRoomButton : null} {this.props.isMinimized ? addRoomButton : null}