mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Restyling Preferences section
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront
parent
f4ff0ac2ec
commit
bba4d96386
@ -1,23 +1,51 @@
|
|||||||
.Preferences {
|
.Preferences {
|
||||||
h2 {
|
position: fixed!important; // Allows to cover ClustersMenu
|
||||||
&:not(:first-child) {
|
z-index: 1;
|
||||||
margin-top: $padding * 3;
|
|
||||||
|
.WizardLayout {
|
||||||
|
grid-template-columns: unset;
|
||||||
|
grid-template-rows: 76px 1fr;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.content-col {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: $padding * 8 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: $margin * 2;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: $margin * 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.repos {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.Badge {
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
padding: $padding $padding * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-top: -$margin;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-block {
|
.is-mac & {
|
||||||
--flex-gap: #{$padding};
|
.WizardLayout .head-col {
|
||||||
|
padding-top: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.repos {
|
.Select {
|
||||||
--flex-gap: #{$padding};
|
&__control {
|
||||||
|
box-shadow: 0 0 0 1px $borderFaintColor;
|
||||||
> .title {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Badge {
|
|
||||||
margin: $padding / 2;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import "./preferences.scss"
|
import "./preferences.scss"
|
||||||
import React, { Fragment } from "react";
|
import React from "react";
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { action, computed, observable } from "mobx";
|
import { action, computed, observable } from "mobx";
|
||||||
import { t, Trans } from "@lingui/macro";
|
import { t, Trans } from "@lingui/macro";
|
||||||
@ -15,6 +15,8 @@ import { Notifications } from "../notifications";
|
|||||||
import { Badge } from "../badge";
|
import { Badge } from "../badge";
|
||||||
import { Spinner } from "../spinner";
|
import { Spinner } from "../spinner";
|
||||||
import { themeStore } from "../../theme.store";
|
import { themeStore } from "../../theme.store";
|
||||||
|
import { history } from "../../navigation";
|
||||||
|
import { Tooltip } from "../tooltip";
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
export class Preferences extends React.Component {
|
export class Preferences extends React.Component {
|
||||||
@ -103,104 +105,96 @@ export class Preferences extends React.Component {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderInfo() {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<h2>
|
|
||||||
<Trans>Preferences</Trans>
|
|
||||||
</h2>
|
|
||||||
<div className="info-block flex gaps align-flex-start">
|
|
||||||
<Icon small material="info"/>
|
|
||||||
<p>
|
|
||||||
<Trans>Lens Global Settings</Trans> (<Trans>applicable to all clusters</Trans>)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { preferences } = userStore;
|
const { preferences } = userStore;
|
||||||
|
const header = (
|
||||||
|
<>
|
||||||
|
<h2>Preferences</h2>
|
||||||
|
<Icon material="close" big onClick={history.goBack}/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<WizardLayout className="Preferences" infoPanel={this.renderInfo()}>
|
<div className="Preferences">
|
||||||
<h2><Trans>Color Theme</Trans></h2>
|
<WizardLayout header={header} centered>
|
||||||
<Select
|
<h2><Trans>Color Theme</Trans></h2>
|
||||||
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}
|
||||||
|
/>
|
||||||
|
|
||||||
<h2><Trans>Download Mirror</Trans></h2>
|
<h2><Trans>Download Mirror</Trans></h2>
|
||||||
<Select
|
<Select
|
||||||
placeholder={<Trans>Download mirror for kubectl</Trans>}
|
placeholder={<Trans>Download mirror for kubectl</Trans>}
|
||||||
options={this.downloadMirrorOptions}
|
options={this.downloadMirrorOptions}
|
||||||
value={preferences.downloadMirror}
|
value={preferences.downloadMirror}
|
||||||
onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
|
onChange={({ value }: SelectOption) => preferences.downloadMirror = value}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<h2><Trans>Helm</Trans></h2>
|
<h2><Trans>Helm</Trans></h2>
|
||||||
<Select
|
<Select
|
||||||
placeholder={<Trans>Repositories</Trans>}
|
placeholder={<Trans>Repositories</Trans>}
|
||||||
isLoading={this.helmLoading}
|
isLoading={this.helmLoading}
|
||||||
isDisabled={this.helmUpdating}
|
isDisabled={this.helmUpdating}
|
||||||
options={this.helmOptions}
|
options={this.helmOptions}
|
||||||
onChange={this.onRepoSelect}
|
onChange={this.onRepoSelect}
|
||||||
formatOptionLabel={this.formatHelmOptionLabel}
|
formatOptionLabel={this.formatHelmOptionLabel}
|
||||||
controlShouldRenderValue={false}
|
controlShouldRenderValue={false}
|
||||||
/>
|
/>
|
||||||
<div className="repos flex gaps align-center">
|
<div className="repos flex gaps column">
|
||||||
<div className="title">
|
{this.helmLoading && <Spinner center />}
|
||||||
<Trans>Added repos:</Trans>
|
|
||||||
</div>
|
|
||||||
<div className="repos-list">
|
|
||||||
{this.helmLoading && <Spinner/>}
|
|
||||||
{Array.from(this.helmAddedRepos).map(([name, repo]) => {
|
{Array.from(this.helmAddedRepos).map(([name, repo]) => {
|
||||||
|
const tooltipId = `message-${name}`;
|
||||||
return (
|
return (
|
||||||
<Badge key={name} className="added-repo flex gaps align-center" title={repo.url}>
|
<Badge key={name} className="added-repo flex gaps align-center justify-space-between">
|
||||||
<span className="repo">{name}</span>
|
<span id={tooltipId} className="repo">{name}</span>
|
||||||
<Icon
|
<Icon
|
||||||
material="remove_circle_outline"
|
material="delete"
|
||||||
onClick={() => this.removeRepo(repo)}
|
onClick={() => this.removeRepo(repo)}
|
||||||
tooltip={<Trans>Remove</Trans>}
|
tooltip={<Trans>Remove</Trans>}
|
||||||
/>
|
/>
|
||||||
|
<Tooltip targetId={tooltipId} formatters={{ narrow: true }}>
|
||||||
|
{repo.url}
|
||||||
|
</Tooltip>
|
||||||
</Badge>
|
</Badge>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2><Trans>HTTP Proxy</Trans></h2>
|
<h2><Trans>HTTP Proxy</Trans></h2>
|
||||||
<Input
|
<Input
|
||||||
placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
|
theme="round-black"
|
||||||
value={preferences.httpsProxy || ""}
|
placeholder={_i18n._(t`Type HTTP proxy url (example: http://proxy.acme.org:8080)`)}
|
||||||
onChange={v => preferences.httpsProxy = v}
|
value={preferences.httpsProxy || ""}
|
||||||
/>
|
onChange={v => preferences.httpsProxy = v}
|
||||||
<small className="hint">
|
/>
|
||||||
<Trans>Proxy is used only for non-cluster communication.</Trans>
|
<small className="hint">
|
||||||
</small>
|
<Trans>Proxy is used only for non-cluster communication.</Trans>
|
||||||
|
</small>
|
||||||
|
|
||||||
<h2><Trans>Certificate Trust</Trans></h2>
|
<h2><Trans>Certificate Trust</Trans></h2>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
label={<Trans>Allow untrusted Certificate Authorities</Trans>}
|
label={<Trans>Allow untrusted Certificate Authorities</Trans>}
|
||||||
value={preferences.allowUntrustedCAs}
|
value={preferences.allowUntrustedCAs}
|
||||||
onChange={v => preferences.allowUntrustedCAs = v}
|
onChange={v => preferences.allowUntrustedCAs = v}
|
||||||
/>
|
/>
|
||||||
<small className="hint">
|
<small className="hint">
|
||||||
<Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
|
<Trans>This will make Lens to trust ANY certificate authority without any validations.</Trans>{" "}
|
||||||
<Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
|
<Trans>Needed with some corporate proxies that do certificate re-writing.</Trans>{" "}
|
||||||
<Trans>Does not affect cluster communications!</Trans>
|
<Trans>Does not affect cluster communications!</Trans>
|
||||||
</small>
|
</small>
|
||||||
|
|
||||||
<h2><Trans>Telemetry & Usage Tracking</Trans></h2>
|
<h2><Trans>Telemetry & Usage Tracking</Trans></h2>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
label={<Trans>Allow telemetry & usage tracking</Trans>}
|
label={<Trans>Allow telemetry & usage tracking</Trans>}
|
||||||
value={preferences.allowTelemetry}
|
value={preferences.allowTelemetry}
|
||||||
onChange={v => preferences.allowTelemetry = v}
|
onChange={v => preferences.allowTelemetry = v}
|
||||||
/>
|
/>
|
||||||
<small className="hint">
|
<small className="hint">
|
||||||
<Trans>Telemetry & usage data is collected to continuously improve the Lens experience.</Trans>
|
<Trans>Telemetry & usage data is collected to continuously improve the Lens experience.</Trans>
|
||||||
</small>
|
</small>
|
||||||
</WizardLayout>
|
</WizardLayout>
|
||||||
)
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user