Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

also blur the sticky headers

Browse Source 
added a DOM element so we can set the background on the parent and
the blur on the new element
This commit is contained in:
Bruno Windels 2020-07-03 16:50:01 +02:00
parent eb5f6de25f
commit 82e0816d86
3 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,6 +80,14 @@ limitations under the License.
// 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.
// blur for element theme, background image is on parent
.mx_RoomSublist2_stickyHeaderBlur {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
}
// Sticky Headers End

14
res/themes/element/css/_mods.scss
View File

@ -19,4 +19,18 @@
.mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
backdrop-filter: blur(175px);
}
// sticky headers need their own blur
.mx_RoomSublist2_headerContainer_sticky {
background-size: cover;
background-image: var(--avatar-url);
background-position: center;
}
.mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur {
backdrop-filter: blur(100px);
background-color: $roomlist2-bg-color;
}
}
}

30
src/components/views/rooms/RoomSublist2.tsx
View File

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