hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Adding 'centering' option to WizardLayout

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-17 12:06:43 +03:00
parent 165788da2d
commit 7a3b3d1f1d
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/components/layout/wizard-layout.scss
View File

@ -16,6 +16,7 @@
> .head-col { > .head-col {
position: sticky; position: sticky;
border-bottom: 1px solid $grey-800; border-bottom: 1px solid $grey-800;
justify-content: space-between;
} }
> .content-col { > .content-col {
@ -41,4 +42,17 @@
a { a {
color: $colorInfo; color: $colorInfo;
} }
&.centered {
.content-col {
margin: 0;
> div {
margin: 0 auto;
width: 60%;
min-width: 570px;
max-width: 1000px;
}
}
}
} }

17
src/renderer/components/layout/wizard-layout.tsx
View File

@ -10,25 +10,30 @@ interface Props {
contentClass?: IClassName; contentClass?: IClassName;
infoPanelClass?: IClassName; infoPanelClass?: IClassName;
infoPanel?: React.ReactNode; infoPanel?: React.ReactNode;
centered?: boolean; // Centering content horizontally
} }
@observer @observer
export class WizardLayout extends React.Component<Props> { export class WizardLayout extends React.Component<Props> {
render() { render() {
const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props; const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
return ( return (
<div className={cssNames("WizardLayout", className)}> <div className={cssNames("WizardLayout", { centered }, className)}>
{header && ( {header && (
<div className={cssNames("head-col flex gaps align-center", headerClass)}> <div className={cssNames("head-col flex gaps align-center", headerClass)}>
{header} {header}
</div> </div>
)} )}
<div className={cssNames("content-col flex column gaps", contentClass)}> <div className={cssNames("content-col flex column gaps", contentClass)}>
{content} <div className="flex column gaps">
</div> {content}
<div className={cssNames("info-col flex column gaps", infoPanelClass)}> </div>
{infoPanel}
</div> </div>
{infoPanel && (
<div className={cssNames("info-col flex column gaps", infoPanelClass)}>
{infoPanel}
</div>
)}
</div> </div>
) )
} }