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

Moving <ScrollSpy/> out from <PageLayout/>

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-09 15:06:03 +03:00
parent 66994bdf4c
commit 7d1f356d88
2 changed files with 110 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/components/+preferences/preferences.tsx
View File

@ -14,6 +14,7 @@ import { SubTitle } from "../layout/sub-title";
import { Select, SelectOption } from "../select"; import { Select, SelectOption } from "../select";
import { HelmCharts } from "./helm-charts"; import { HelmCharts } from "./helm-charts";
import { KubectlBinaries } from "./kubectl-binaries"; import { KubectlBinaries } from "./kubectl-binaries";
import { ScrollSpy } from "../scroll-spy/scroll-spy";
@observer @observer
export class Preferences extends React.Component { export class Preferences extends React.Component {
@ -31,9 +32,10 @@ export class Preferences extends React.Component {
const header = <h2>Preferences</h2>; const header = <h2>Preferences</h2>;
return ( return (
<ScrollSpy render={navigation => (
<PageLayout <PageLayout
showOnTop showOnTop
showNavigation navigation={navigation}
className="Preferences" className="Preferences"
contentGaps={false} contentGaps={false}
header={header} header={header}
@ -119,6 +121,7 @@ export class Preferences extends React.Component {
})} })}
</section> </section>
</PageLayout> </PageLayout>
)}/>
); );
} }
} }

14
src/renderer/components/layout/page-layout.tsx
View File

@ -5,8 +5,7 @@ import { observer } from "mobx-react";
import { autobind, cssNames, IClassName } from "../../utils"; import { autobind, cssNames, IClassName } from "../../utils";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { navigation } from "../../navigation"; import { navigation } from "../../navigation";
import { ScrollSpy } from "../scroll-spy/scroll-spy"; import { NavigationTree, RecursiveTreeView } from "../tree-view";
import { RecursiveTreeView } from "../tree-view";
export interface PageLayoutProps extends React.DOMAttributes<any> { export interface PageLayoutProps extends React.DOMAttributes<any> {
className?: IClassName; className?: IClassName;
@ -16,7 +15,7 @@ export interface PageLayoutProps extends React.DOMAttributes<any> {
provideBackButtonNavigation?: boolean; provideBackButtonNavigation?: boolean;
contentGaps?: boolean; contentGaps?: boolean;
showOnTop?: boolean; // covers whole app view showOnTop?: boolean; // covers whole app view
showNavigation?: boolean; navigation?: NavigationTree[];
back?: (evt: React.MouseEvent | KeyboardEvent) => void; back?: (evt: React.MouseEvent | KeyboardEvent) => void;
} }
@ -60,12 +59,11 @@ export class PageLayout extends React.Component<PageLayoutProps> {
render() { render() {
const { const {
contentClass, header, headerClass, provideBackButtonNavigation, contentClass, header, headerClass, provideBackButtonNavigation,
contentGaps, showOnTop, showNavigation, children, ...elemProps contentGaps, showOnTop, navigation, children, ...elemProps
} = this.props; } = this.props;
const className = cssNames("PageLayout", { showOnTop, showNavigation }, this.props.className); const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);
return ( return (
<ScrollSpy render={navigation => (
<div {...elemProps} className={className}> <div {...elemProps} className={className}>
<div className={cssNames("header flex gaps align-center", headerClass)}> <div className={cssNames("header flex gaps align-center", headerClass)}>
{header} {header}
@ -79,7 +77,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
</div> </div>
<div className="content-scrollable-area"> <div className="content-scrollable-area">
<div className="content-wrapper"> <div className="content-wrapper">
{ showNavigation && ( { navigation && (
<nav className="content-navigation"> <nav className="content-navigation">
<RecursiveTreeView data={navigation}/> <RecursiveTreeView data={navigation}/>
</nav> </nav>
@ -90,6 +88,6 @@ export class PageLayout extends React.Component<PageLayoutProps> {
</div> </div>
</div> </div>
</div> </div>
)} />); );
} }
} }