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 cluster icon settings on top

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-06-23 09:49:41 +03:00
parent 1f3b733d83
commit a1437ad8ac
3 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/renderer/components/cluster-settings/cluster-settings.tsx
View File

@ -39,18 +39,17 @@ export function GeneralSettings({ entity }: EntitySettingViewProps) {
return ( return (
<section> <section>
<section>
<div className="flex">
<div className="flex-grow pr-8">
<components.ClusterNameSetting cluster={cluster} />
</div>
<div>
<components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
</div>
</div>
</section>
<section className="small"> <section className="small">
<p>General Cluster settings.</p>
</section>
<section>
<components.ClusterNameSetting cluster={cluster} />
</section>
<hr/>
<section>
<components.ClusterIconSetting cluster={cluster} entity={entity as KubernetesCluster} />
</section>
<hr/>
<section>
<components.ClusterKubeconfig cluster={cluster} /> <components.ClusterKubeconfig cluster={cluster} />
</section> </section>
</section> </section>

50
src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx
View File

@ -22,13 +22,12 @@
import React from "react"; import React from "react";
import type { Cluster } from "../../../../main/cluster"; import type { Cluster } from "../../../../main/cluster";
import { boundMethod } from "../../../utils"; import { boundMethod } from "../../../utils";
import { Button } from "../../button";
import { observable } from "mobx"; import { observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { SubTitle } from "../../layout/sub-title";
import { HotbarIcon } from "../../hotbar/hotbar-icon"; import { HotbarIcon } from "../../hotbar/hotbar-icon";
import type { KubernetesCluster } from "../../../../common/catalog-entities"; import type { KubernetesCluster } from "../../../../common/catalog-entities";
import { FilePicker, OverSizeLimitStyle } from "../../file-picker"; import { FilePicker, OverSizeLimitStyle } from "../../file-picker";
import { MenuActions, MenuItem } from "../../menu";
enum GeneralInputStatus { enum GeneralInputStatus {
CLEAN = "clean", CLEAN = "clean",
@ -45,6 +44,8 @@ export class ClusterIconSetting extends React.Component<Props> {
@observable status = GeneralInputStatus.CLEAN; @observable status = GeneralInputStatus.CLEAN;
@observable errorText?: string; @observable errorText?: string;
private element = React.createRef<HTMLDivElement>();
@boundMethod @boundMethod
async onIconPick([file]: File[]) { async onIconPick([file]: File[]) {
const { cluster } = this.props; const { cluster } = this.props;
@ -65,13 +66,11 @@ export class ClusterIconSetting extends React.Component<Props> {
} }
} }
getClearButton() { @boundMethod
return <Button onUploadClick() {
label="Clear" const input = this.element.current.querySelector("input[type=file]") as HTMLInputElement;
onClick={() => this.onIconPick([])}
disabled={!this.props.cluster.preferences.icon} input.click();
className="ml-5"
/>;
} }
render() { render() {
@ -83,25 +82,32 @@ export class ClusterIconSetting extends React.Component<Props> {
title={entity.metadata.name} title={entity.metadata.name}
source={entity.metadata.source} source={entity.metadata.source}
src={entity.spec.icon?.src} src={entity.spec.icon?.src}
size={50} size={53}
/> />
<Button className="ml-5">Upload Icon</Button>
</> </>
); );
return ( return (
<> <div ref={this.element}>
<SubTitle title="Cluster Icon" /> <div className="file-loader flex flex-row items-center">
<div className="file-loader flex flex-row items-center mt-2"> <div className="mr-5">
<FilePicker <FilePicker
accept="image/*" accept="image/*"
label={label} label={label}
onOverSizeLimit={OverSizeLimitStyle.FILTER} onOverSizeLimit={OverSizeLimitStyle.FILTER}
handler={this.onIconPick} handler={this.onIconPick}
/> />
{this.getClearButton()} </div>
<MenuActions toolbar={false} autoCloseOnSelect={true} triggerIcon={{ material: "more_horiz" }}>
<MenuItem onClick={this.onUploadClick}>
Upload Icon
</MenuItem>
<MenuItem onClick={() => this.onIconPick([])} disabled={!this.props.cluster.preferences.icon}>
Clear
</MenuItem>
</MenuActions>
</div> </div>
</> </div>
); );
} }
} }

2
src/renderer/components/layout/setting-layout.scss
View File

@ -211,7 +211,7 @@
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 30px;
} }
a { a {