matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-11 20:22:36 +03:00
Code 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,33 +64,30 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
// Create another flexbox column for the rows to stack within // Create another flexbox column for the rows to stack within
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
// This is basically just breadcrumbs. The row above that is handled by the UserMenu .mx_LeftPanel2_breadcrumbsContainer {
.mx_LeftPanel2_headerRow { width: 100%;
// Create yet another flexbox, this time within the row, to ensure items stay overflow-y: hidden;
// aligned correctly. This is also a row-based flexbox. overflow-x: scroll;
display: flex; margin-top: 20px;
align-items: center; 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%);
} }
.mx_LeftPanel2_breadcrumbsContainer { &.mx_IndicatorScrollbar_rightOverflow {
width: 100%; mask-image: linear-gradient(90deg, black, black 90%, transparent);
overflow-y: hidden; }
overflow-x: scroll;
margin-top: 20px;
padding-bottom: 2px;
&.mx_IndicatorScrollbar_leftOverflow { &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 10%); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow {
mask-image: linear-gradient(90deg, black, black 90%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
} }
} }

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