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

167
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,94 +32,96 @@ export class Preferences extends React.Component {
const header = <h2>Preferences</h2>; const header = <h2>Preferences</h2>;
return ( return (
<PageLayout <ScrollSpy render={navigation => (
showOnTop <PageLayout
showNavigation showOnTop
className="Preferences" navigation={navigation}
contentGaps={false} className="Preferences"
header={header} contentGaps={false}
> header={header}
<section id="application" title="Application"> >
<section> <section id="application" title="Application">
<h1>Application</h1> <section>
</section> <h1>Application</h1>
<section id="appearance"> </section>
<h2>Appearance</h2> <section id="appearance">
<SubTitle title="Theme"/> <h2>Appearance</h2>
<Select <SubTitle title="Theme"/>
options={this.themeOptions} <Select
value={preferences.colorTheme} options={this.themeOptions}
onChange={({ value }: SelectOption) => preferences.colorTheme = value} value={preferences.colorTheme}
/> onChange={({ value }: SelectOption) => preferences.colorTheme = value}
</section> />
<section id="proxy"> </section>
<h2>Proxy</h2> <section id="proxy">
<SubTitle title="HTTP Proxy"/> <h2>Proxy</h2>
<Input <SubTitle title="HTTP Proxy"/>
theme="round-black" <Input
placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)" theme="round-black"
value={this.httpProxy} placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
onChange={v => this.httpProxy = v} value={this.httpProxy}
onBlur={() => preferences.httpsProxy = this.httpProxy} onChange={v => this.httpProxy = v}
/> onBlur={() => preferences.httpsProxy = this.httpProxy}
<small className="hint"> />
Proxy is used only for non-cluster communication. <small className="hint">
</small> Proxy is used only for non-cluster communication.
</small>
<SubTitle title="Certificate Trust"/> <SubTitle title="Certificate Trust"/>
<Checkbox <Checkbox
label="Allow untrusted Certificate Authorities" label="Allow untrusted Certificate Authorities"
value={preferences.allowUntrustedCAs} value={preferences.allowUntrustedCAs}
onChange={v => preferences.allowUntrustedCAs = v} onChange={v => preferences.allowUntrustedCAs = v}
/> />
<small className="hint"> <small className="hint">
This will make Lens to trust ANY certificate authority without any validations.{" "} This will make Lens to trust ANY certificate authority without any validations.{" "}
Needed with some corporate proxies that do certificate re-writing.{" "} Needed with some corporate proxies that do certificate re-writing.{" "}
Does not affect cluster communications! Does not affect cluster communications!
</small> </small>
</section>
<section id="startup">
<h2>Start-up</h2>
<SubTitle title="Automatic Start-up"/>
<Checkbox
label="Automatically start Lens on login"
value={preferences.openAtLogin}
onChange={v => preferences.openAtLogin = v}
/>
</section>
</section> </section>
<section id="startup">
<h2>Start-up</h2>
<SubTitle title="Automatic Start-up"/>
<Checkbox
label="Automatically start Lens on login"
value={preferences.openAtLogin}
onChange={v => preferences.openAtLogin = v}
/>
</section>
</section>
<section id="kubernetes"> <section id="kubernetes">
<section> <section>
<h1>Kubernetes</h1> <h1>Kubernetes</h1>
</section>
<section id="kubectl">
<h2>Kubectl binary</h2>
<KubectlBinaries preferences={preferences}/>
</section>
<section id="helm">
<h2>Helm Charts</h2>
<HelmCharts/>
</section>
</section> </section>
<section id="kubectl">
<h2>Kubectl binary</h2>
<KubectlBinaries preferences={preferences}/>
</section>
<section id="helm">
<h2>Helm Charts</h2>
<HelmCharts/>
</section>
</section>
<section id="extensions"> <section id="extensions">
<section> <section>
<h1>Extensions</h1> <h1>Extensions</h1>
</section>
{appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
return (
<section key={index} id={title}>
<h2>{title}</h2>
<Input/>
<small className="hint">
<Hint/>
</small>
</section>
);
})}
</section> </section>
{appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => { </PageLayout>
return ( )}/>
<section key={index} id={title}>
<h2>{title}</h2>
<Input/>
<small className="hint">
<Hint/>
</small>
</section>
);
})}
</section>
</PageLayout>
); );
} }
} }

52
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,36 +59,35 @@ 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} {provideBackButtonNavigation && (
{provideBackButtonNavigation && ( <Icon
<Icon big material="close"
big material="close" className="back box right"
className="back box right" onClick={this.back}
onClick={this.back} />
/> )}
</div>
<div className="content-scrollable-area">
<div className="content-wrapper">
{ navigation && (
<nav className="content-navigation">
<RecursiveTreeView data={navigation}/>
</nav>
)} )}
</div> <div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
<div className="content-scrollable-area"> {children}
<div className="content-wrapper">
{ showNavigation && (
<nav className="content-navigation">
<RecursiveTreeView data={navigation}/>
</nav>
)}
<div className={cssNames("content", contentGaps && "flex column gaps", contentClass)}>
{children}
</div>
</div> </div>
</div> </div>
</div> </div>
)} />); </div>
);
} }
} }