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

replaced browse/reset buttons to icons, extended drop area for custom kube-config file

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-08-25 18:58:48 +03:00
parent a5e5a4c0c2
commit cb669d15df
6 changed files with 66 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
locales/en/messages.po
View File

@ -87,7 +87,7 @@ msgstr "Account Name"
msgid "Active"
msgstr "Active"
#: src/renderer/components/+add-cluster/add-cluster.tsx:225
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
#: src/renderer/components/cluster-manager/clusters-menu.tsx:116
msgid "Add Cluster"
msgstr "Add Cluster"
@ -112,7 +112,7 @@ msgstr "Add bindings to {name}"
#~ msgid "Add cluster"
#~ msgstr "Add cluster"
#: src/renderer/components/+add-cluster/add-cluster.tsx:243
#: src/renderer/components/+add-cluster/add-cluster.tsx:246
msgid "Add cluster(s)"
msgstr "Add cluster(s)"
@ -319,7 +319,7 @@ msgstr "Binding targets"
msgid "Bindings"
msgstr "Bindings"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#: src/renderer/components/+add-cluster/add-cluster.tsx:210
msgid "Browse"
msgstr "Browse"
@ -1860,7 +1860,7 @@ msgstr "Provisioner"
msgid "Proxy is used only for non-cluster communication."
msgstr "Proxy is used only for non-cluster communication."
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
#: src/renderer/components/+add-cluster/add-cluster.tsx:234
msgid "Proxy settings"
msgstr "Proxy settings"
@ -2041,7 +2041,7 @@ msgstr "Required Drop Capabilities"
msgid "Required field"
msgstr "Required field"
#: src/renderer/components/+add-cluster/add-cluster.tsx:217
#: src/renderer/components/+add-cluster/add-cluster.tsx:209
#: src/renderer/components/item-object-list/page-filters-list.tsx:31
msgid "Reset"
msgstr "Reset"
@ -2245,7 +2245,7 @@ msgstr "Secret type"
msgid "Secrets"
msgstr "Secrets"
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
msgid "Select a context"
msgstr "Select a context"

12
locales/fi/messages.po
View File

@ -87,7 +87,7 @@ msgstr ""
msgid "Active"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:225
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
#: src/renderer/components/cluster-manager/clusters-menu.tsx:116
msgid "Add Cluster"
msgstr ""
@ -112,7 +112,7 @@ msgstr ""
#~ msgid "Add cluster"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:243
#: src/renderer/components/+add-cluster/add-cluster.tsx:246
msgid "Add cluster(s)"
msgstr ""
@ -319,7 +319,7 @@ msgstr ""
msgid "Bindings"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#: src/renderer/components/+add-cluster/add-cluster.tsx:210
msgid "Browse"
msgstr ""
@ -1843,7 +1843,7 @@ msgstr ""
msgid "Proxy is used only for non-cluster communication."
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
#: src/renderer/components/+add-cluster/add-cluster.tsx:234
msgid "Proxy settings"
msgstr ""
@ -2024,7 +2024,7 @@ msgstr ""
msgid "Required field"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:217
#: src/renderer/components/+add-cluster/add-cluster.tsx:209
#: src/renderer/components/item-object-list/page-filters-list.tsx:31
msgid "Reset"
msgstr ""
@ -2228,7 +2228,7 @@ msgstr ""
msgid "Secrets"
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
msgid "Select a context"
msgstr ""

12
locales/ru/messages.po
View File

@ -88,7 +88,7 @@ msgstr "Название аккаунта"
msgid "Active"
msgstr "Активный"
#: src/renderer/components/+add-cluster/add-cluster.tsx:225
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
#: src/renderer/components/cluster-manager/clusters-menu.tsx:116
msgid "Add Cluster"
msgstr ""
@ -113,7 +113,7 @@ msgstr "Добавить привязки к {name}"
#~ msgid "Add cluster"
#~ msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:243
#: src/renderer/components/+add-cluster/add-cluster.tsx:246
msgid "Add cluster(s)"
msgstr ""
@ -320,7 +320,7 @@ msgstr "Цели привязки"
msgid "Bindings"
msgstr "Привязки"
#: src/renderer/components/+add-cluster/add-cluster.tsx:218
#: src/renderer/components/+add-cluster/add-cluster.tsx:210
msgid "Browse"
msgstr ""
@ -1861,7 +1861,7 @@ msgstr "Комиссия"
msgid "Proxy is used only for non-cluster communication."
msgstr ""
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
#: src/renderer/components/+add-cluster/add-cluster.tsx:234
msgid "Proxy settings"
msgstr ""
@ -2042,7 +2042,7 @@ msgstr ""
msgid "Required field"
msgstr "Обязательное поле"
#: src/renderer/components/+add-cluster/add-cluster.tsx:217
#: src/renderer/components/+add-cluster/add-cluster.tsx:209
#: src/renderer/components/item-object-list/page-filters-list.tsx:31
msgid "Reset"
msgstr "Сбросить"
@ -2246,7 +2246,7 @@ msgstr "Тип секрета"
msgid "Secrets"
msgstr "Secrets"
#: src/renderer/components/+add-cluster/add-cluster.tsx:228
#: src/renderer/components/+add-cluster/add-cluster.tsx:231
msgid "Select a context"
msgstr ""

24
src/renderer/components/+add-cluster/add-cluster.scss
View File

@ -1,4 +1,12 @@
.AddCluster {
.droppable {
box-shadow: 0 0 0 5px inset $primary;
> * {
pointer-events: none;
}
}
.Select {
.kube-context {
--flex-gap: #{$padding};
@ -9,19 +17,7 @@
}
}
.kube-config-select {
&.droppable {
box-shadow: 0 0 3px 2px $primary;
> * {
pointer-events: none;
}
}
}
.info-col {
code {
color: $pink-400;
}
code {
color: $pink-400;
}
}

48
src/renderer/components/+add-cluster/add-cluster.tsx
View File

@ -24,7 +24,7 @@ import { Notifications } from "../notifications";
import { Tab, Tabs } from "../tabs";
// todo: improve UI/UX kube-config consuming: FILE (input + button) | PASTE TEXT (editor)
// todo: allow to manually input kube-config file path
// todo: allow to manually input kube-config file path (edit + save on blur + auto-replace "~" => os.homedir()
// todo: allow to create multiple clusters at once (multi-select)
enum KubeConfigSourceTab {
@ -216,21 +216,7 @@ export class AddCluster extends React.Component {
/>
</Tabs>
{this.sourceTab === KubeConfigSourceTab.FILE && (
<div
className={cssNames("kube-config-select flex gaps align-center", {
droppable: this.dropAreaActive
})}
onDragEnter={event => this.dropAreaActive = true}
onDragLeave={event => this.dropAreaActive = false}
onDragOver={event => {
event.preventDefault(); // enable onDrop()-callback
event.dataTransfer.dropEffect = "move"
}}
onDrop={event => {
this.dropAreaActive = false
this.kubeConfigPath = event.dataTransfer.files[0].path;
}}
>
<div className="kube-config-select flex gaps align-center">
<Input
autoSelectOnFocus
theme="round-black"
@ -239,9 +225,17 @@ export class AddCluster extends React.Component {
onChange={value => console.log('change', value)}
/>
{this.kubeConfigPath !== kubeConfigDefaultPath && (
<Button accent label={<Trans>Reset</Trans>} onClick={this.resetKubeConfig}/>
<Icon
material="settings_backup_restore"
onClick={this.resetKubeConfig}
tooltip={<Trans>Reset</Trans>}
/>
)}
<Button primary label={<Trans>Browse</Trans>} onClick={this.selectKubeConfig}/>
<Icon
material="folder"
onClick={this.selectKubeConfig}
tooltip={<Trans>Browse</Trans>}
/>
</div>
)}
{this.sourceTab === KubeConfigSourceTab.TEXT && (
@ -259,7 +253,23 @@ export class AddCluster extends React.Component {
render() {
return (
<WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
<WizardLayout
className="AddCluster"
infoPanel={this.renderInfo()}
contentClass={{ droppable: this.dropAreaActive }}
contentProps={{
onDragEnter: event => this.dropAreaActive = true,
onDragLeave: event => this.dropAreaActive = false,
onDragOver: event => {
event.preventDefault(); // enable onDrop()-callback
event.dataTransfer.dropEffect = "move"
},
onDrop: event => {
this.dropAreaActive = false
this.kubeConfigPath = event.dataTransfer.files[0].path;
}
}}
>
<h2><Trans>Add Cluster</Trans></h2>
{this.renderKubeConfigSource()}
<Select

14
src/renderer/components/layout/wizard-layout.tsx
View File

@ -3,7 +3,7 @@ import React from "react";
import { observer } from "mobx-react";
import { cssNames, IClassName } from "../../utils";
interface Props {
interface Props extends React.DOMAttributes<any> {
className?: IClassName;
header?: React.ReactNode;
headerClass?: IClassName;
@ -11,22 +11,26 @@ interface Props {
infoPanelClass?: IClassName;
infoPanel?: React.ReactNode;
centered?: boolean; // Centering content horizontally
contentProps?: React.DOMAttributes<HTMLElement>
}
@observer
export class WizardLayout extends React.Component<Props> {
render() {
const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
const {
className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered,
children, contentProps = {}, ...props
} = this.props;
return (
<div className={cssNames("WizardLayout", { centered }, className)}>
<div {...props} className={cssNames("WizardLayout", { centered }, className)}>
{header && (
<div className={cssNames("head-col flex gaps align-center", headerClass)}>
{header}
</div>
)}
<div className={cssNames("content-col flex column gaps", contentClass)}>
<div {...contentProps} className={cssNames("content-col flex column gaps", contentClass)}>
<div className="flex column gaps">
{content}
{children}
</div>
</div>
{infoPanel && (