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

swap search field and breadcrumbs

Browse Source
This commit is contained in:
Bruno Windels 2020-07-13 14:52:50 +02:00
parent 0c06975e7a
commit 02b27086da
2 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
res/css/structures/_LeftPanel2.scss
View File

@ -64,13 +64,6 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
// Create another flexbox column for the rows to stack within
display: flex;
flex-direction: column;
// This is basically just breadcrumbs. The row above that is handled by the UserMenu
.mx_LeftPanel2_headerRow {
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
display: flex;
align-items: center;
}
.mx_LeftPanel2_breadcrumbsContainer {
@ -79,6 +72,11 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
overflow-x: scroll;
margin-top: 20px;
padding-bottom: 2px;
flex: 0 0 auto;
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
display: flex;
align-items: center;
&.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 10%);
@ -92,7 +90,6 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
}
}
.mx_LeftPanel2_filterContainer {
margin-left: 12px;

21
src/components/structures/LeftPanel2.tsx
View File

@ -314,24 +314,24 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
};
private renderHeader(): React.ReactNode {
let breadcrumbs;
return (
<div className="mx_LeftPanel2_userHeader">
<UserMenu isMinimized={this.props.isMinimized} />
</div>
);
}
private renderBreadcrumbs(): React.ReactNode {
if (this.state.showBreadcrumbs && !this.props.isMinimized) {
breadcrumbs = (
return (
<IndicatorScrollbar
className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
className="mx_LeftPanel2_breadcrumbsContainer mx_AutoHideScrollbar"
verticalScrollsHorizontally={true}
>
<RoomBreadcrumbs2 />
</IndicatorScrollbar>
);
}
return (
<div className="mx_LeftPanel2_userHeader">
<UserMenu isMinimized={this.props.isMinimized} />
{breadcrumbs}
</div>
);
}
private renderSearchExplore(): React.ReactNode {
@ -393,6 +393,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
<aside className="mx_LeftPanel2_roomListContainer">
{this.renderHeader()}
{this.renderSearchExplore()}
{this.renderBreadcrumbs()}
<div className="mx_LeftPanel2_roomListWrapper">
<div
className={roomListClasses}