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

Styling Kubernetes tab

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-02 11:57:36 +03:00
parent f8db743bb6
commit b769335dd2
5 changed files with 66 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/renderer/components/+preferences/kubectl-binaries.tsx
View File

@ -1,11 +1,11 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Checkbox } from "../checkbox";
import { Input, InputValidators } from "../input"; import { Input, InputValidators } from "../input";
import { SubTitle } from "../layout/sub-title"; import { SubTitle } from "../layout/sub-title";
import { UserPreferences, userStore } from "../../../common/user-store"; import { UserPreferences, userStore } from "../../../common/user-store";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { bundledKubectlPath } from "../../../main/kubectl"; import { bundledKubectlPath } from "../../../main/kubectl";
import { SelectOption, Select } from "../select"; import { SelectOption, Select } from "../select";
import { FormSwitch, Switcher } from "../switch";
export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => { export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || ""); const [downloadPath, setDownloadPath] = useState(preferences.downloadBinariesPath || "");
@ -24,12 +24,23 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
return ( return (
<> <>
<SubTitle title="Automatic kubectl binary download"/> <section className="small">
<Checkbox <SubTitle title="Kubectl binary download"/>
label="Download kubectl binaries matching the Kubernetes cluster version" <FormSwitch
value={preferences.downloadKubectlBinaries} control={
onChange={downloadKubectlBinaries => preferences.downloadKubectlBinaries = downloadKubectlBinaries} <Switcher
checked={preferences.downloadKubectlBinaries}
onChange={v => preferences.downloadKubectlBinaries = v.target.checked}
name="kubectl-download"
/> />
}
label="Download kubectl binaries matching the Kubernetes cluster version"
/>
</section>
<hr className="small"/>
<section className="small">
<SubTitle title="Download mirror" /> <SubTitle title="Download mirror" />
<Select <Select
placeholder="Download mirror for kubectl" placeholder="Download mirror for kubectl"
@ -38,6 +49,11 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
onChange={({ value }: SelectOption) => preferences.downloadMirror = value} onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
disabled={!preferences.downloadKubectlBinaries} disabled={!preferences.downloadKubectlBinaries}
/> />
</section>
<hr className="small"/>
<section className="small">
<SubTitle title="Directory for binaries" /> <SubTitle title="Directory for binaries" />
<Input <Input
theme="round-black" theme="round-black"
@ -48,9 +64,14 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
onBlur={save} onBlur={save}
disabled={!preferences.downloadKubectlBinaries} disabled={!preferences.downloadKubectlBinaries}
/> />
<small className="hint"> <div className="hint">
The directory to download binaries into. The directory to download binaries into.
</small> </div>
</section>
<hr className="small"/>
<section className="small">
<SubTitle title="Path to kubectl binary" /> <SubTitle title="Path to kubectl binary" />
<Input <Input
theme="round-black" theme="round-black"
@ -61,9 +82,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
onBlur={save} onBlur={save}
disabled={preferences.downloadKubectlBinaries} disabled={preferences.downloadKubectlBinaries}
/> />
<small className="hint"> </section>
The path to the kubectl binary on the system.
</small>
</> </>
); );
}); });

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

@ -181,13 +181,11 @@ export class Preferences extends React.Component {
{this.activeTab == PreferencesTab.Kubernetes && ( {this.activeTab == PreferencesTab.Kubernetes && (
<section id="kubernetes"> <section id="kubernetes">
<section>
<h1>Kubernetes</h1>
</section>
<section id="kubectl"> <section id="kubectl">
<h2>Kubectl binary</h2> <h2>Kubernetes</h2>
<KubectlBinaries preferences={preferences}/> <KubectlBinaries preferences={preferences}/>
</section> </section>
<hr/>
<section id="helm"> <section id="helm">
<h2>Helm Charts</h2> <h2>Helm Charts</h2>
<HelmCharts/> <HelmCharts/>

2
src/renderer/components/input/input.scss
View File

@ -97,7 +97,7 @@
label { label {
background: #00000021; background: #00000021;
border: 1px solid #20222580; border: 1px solid #202225bf;
border-radius: 4px; border-radius: 4px;
padding: $padding; padding: $padding;

3
src/renderer/components/layout/page-layout.scss
View File

@ -145,7 +145,7 @@
.Select { .Select {
&__control { &__control {
box-shadow: 0 0 0 1px #20222580; box-shadow: 0 0 0 1px #202225bf;
background: #00000021; background: #00000021;
} }
@ -196,6 +196,7 @@
margin-bottom: 8px; margin-bottom: 8px;
padding-bottom: 0; padding-bottom: 0;
font-size: 12px; font-size: 12px;
line-height: 1;
} }
hr { hr {

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

@ -77,7 +77,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
</div> </div>
<div className="toolsRegion"> <div className="toolsRegion">
<div className="fixedTools"> <div className="fixedTools">
<div className="closeBtn" role="button" aria-label="Close"> <div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
<Icon material="close"/> <Icon material="close"/>
</div> </div>
<div className="esc" aria-hidden="true"> <div className="esc" aria-hidden="true">