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 Tab navigation to Preferences

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-03-25 16:18:00 +03:00
parent 3d0208a271
commit 137f09c2c0
1 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,13 +15,20 @@ 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";
import { navigation } from "../../navigation"; import { navigation } from "../../navigation";
import { Tab, Tabs } from "../tabs";
enum PreferencesTab {
Application = "application",
Kubernetes = "kubernetes",
Extensions = "extensions"
}
@observer @observer
export class Preferences extends React.Component { export class Preferences extends React.Component {
@observable httpProxy = userStore.preferences.httpsProxy || ""; @observable httpProxy = userStore.preferences.httpsProxy || "";
@observable shell = userStore.preferences.shell || ""; @observable shell = userStore.preferences.shell || "";
@observable activeTab = PreferencesTab.Application;
@computed get themeOptions(): SelectOption<string>[] { @computed get themeOptions(): SelectOption<string>[] {
return themeStore.themes.map(theme => ({ return themeStore.themes.map(theme => ({
@ -45,9 +52,35 @@ export class Preferences extends React.Component {
]); ]);
} }
onTabChange = (tabId: PreferencesTab) => {
this.activeTab = tabId;
};
renderNavigation() {
return (
<Tabs className="flex column" scrollable={false} onChange={this.onTabChange}>
<div className="header">Preferences</div>
<Tab
value={PreferencesTab.Application}
label="Application"
active={this.activeTab == PreferencesTab.Application}
/>
<Tab
value={PreferencesTab.Kubernetes}
label="Kubernetes"
active={this.activeTab == PreferencesTab.Kubernetes}
/>
<Tab
value={PreferencesTab.Extensions}
label="Extensions"
active={this.activeTab == PreferencesTab.Extensions}
/>
</Tabs>
);
}
render() { render() {
const { preferences } = userStore; const { preferences } = userStore;
const header = <h2>Preferences</h2>;
let defaultShell = process.env.SHELL || process.env.PTYSHELL; let defaultShell = process.env.SHELL || process.env.PTYSHELL;
if (!defaultShell) { if (!defaultShell) {
@ -59,18 +92,14 @@ export class Preferences extends React.Component {
} }
return ( return (
<ScrollSpy htmlFor="ScrollSpyRoot" render={navigation => (
<PageLayout <PageLayout
showOnTop showOnTop
navigation={navigation} navigation={this.renderNavigation()}
className="Preferences" className="Preferences"
contentGaps={false} contentGaps={false}
header={header}
> >
<section id="application" title="Application"> {this.activeTab == PreferencesTab.Application && (
<section> <section id="application">
<h1>Application</h1>
</section>
<section id="appearance"> <section id="appearance">
<h2>Appearance</h2> <h2>Appearance</h2>
<SubTitle title="Theme"/> <SubTitle title="Theme"/>
@ -130,7 +159,9 @@ export class Preferences extends React.Component {
/> />
</section> </section>
</section> </section>
)}
{this.activeTab == PreferencesTab.Kubernetes && (
<section id="kubernetes"> <section id="kubernetes">
<section> <section>
<h1>Kubernetes</h1> <h1>Kubernetes</h1>
@ -144,7 +175,9 @@ export class Preferences extends React.Component {
<HelmCharts/> <HelmCharts/>
</section> </section>
</section> </section>
)}
{this.activeTab == PreferencesTab.Extensions && (
<section id="extensions"> <section id="extensions">
<section> <section>
<h1>Extensions</h1> <h1>Extensions</h1>
@ -161,8 +194,8 @@ export class Preferences extends React.Component {
); );
})} })}
</section> </section>
)}
</PageLayout> </PageLayout>
)}/>
); );
} }
} }