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

Fixing Cluster Settings general layout bugs

Browse Source 
Signed-off-by: alexfront <alex.andreev.email@gmail.com>
This commit is contained in:
alexfront 2020-08-04 15:46:42 +03:00
parent eca727bef6
commit 06d76ead74
2 changed files with 113 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/renderer/components/+cluster-settings/cluster-settings.scss
View File

@ -1,86 +1,101 @@
.ClusterSettings {
overflow-y: scroll;
grid-template-columns: unset;
grid-template-columns: unset;
.info-col {
display: none;
.info-col {
display: none;
}
.content-col {
margin: 0;
padding-top: $padding * 3;
.SubTitle {
text-transform: none;
}
.content-col {
margin-right: unset;
}
.settings-wrapper {
margin: 0 auto;
width: 70%;
min-width: 800px;
* {
margin-top: 40px;
> div {
margin-top: $margin * 3;
}
&:first-child {
margin-top: 0px;
}
}
h4 {
margin-top: 20px;
}
.status-table {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 10px;
}
.loading {
margin-top: 20px;
text-align: center;
.Spinner {
display: inline-block;
}
}
.Input,.Select {
margin-top: 10px;
}
.Icon:not(.updated):not(.clean) {
color: #ad0000;
}
.Icon.updated {
color: #00dd1d;
}
.updated {
animation: updated-name 1s 1;
animation-fill-mode: forwards;
animation-delay: 3s;
}
@keyframes updated-name {
from {opacity :1;}
to {opacity :0;}
}
.center {
text-align: center;
}
input[type="text"]::placeholder {
.admin-note {
font-size: small;
color: #707070;
opacity: 0.5;
margin-left: $margin;
}
}
}
input[type="text"] {
color: white;
}
.status-table {
margin: $margin * 3 0;
button {
margin-top: 5px;
.Table {
border: 1px solid var(--drawerSubtitleBackground);
border-radius: $radius;
.Spinner {
width: 10px;
height: 10px;
border-color: transparent black;
.TableCell {
border-bottom: 1px solid var(--drawerSubtitleBackground);
&.value {
color: var(--textColorSecondary);
}
}
}
}
.loading {
margin-top: 20px;
text-align: center;
.Spinner {
display: inline-block;
}
}
.Input,.Select {
margin-top: 10px;
}
.Icon:not(.updated):not(.clean) {
color: #ad0000;
}
.Icon.updated {
color: #00dd1d;
}
.updated {
animation: updated-name 1s 1;
animation-fill-mode: forwards;
animation-delay: 3s;
}
@keyframes updated-name {
from {opacity :1;}
to {opacity :0;}
}
input[type="text"]::placeholder {
font-size: small;
color: #707070;
}
input[type="text"] {
color: white;
}
button {
margin-top: 5px;
.Spinner {
width: 10px;
height: 10px;
border-color: transparent black;
}
}
}

39
src/renderer/components/+cluster-settings/cluster-settings.tsx
View File

@ -1,25 +1,38 @@
import "./cluster-settings.scss"
import "./cluster-settings.scss";
import React from "react";
import { observer } from "mobx-react";
import { Features } from "./features"
import { Removal } from "./removal"
import { Status } from "./status"
import { General } from "./general"
import { getHostedCluster } from "../../../common/cluster-store"
import { Features } from "./features";
import { Removal } from "./removal";
import { Status } from "./status";
import { General } from "./general";
import { getHostedCluster } from "../../../common/cluster-store";
import { WizardLayout } from "../layout/wizard-layout";
import { ClusterIcon } from "../cluster-icon";
@observer
export class ClusterSettings extends React.Component {
render() {
const cluster = getHostedCluster();
const header = (
<>
<ClusterIcon
cluster={cluster}
showErrors={false}
showTooltip={false}
/>
<h2>{cluster.preferences.clusterName}</h2>
</>
);
return (
<WizardLayout className="ClusterSettings">
<Status cluster={cluster}></Status>
<General cluster={cluster}></General>
<Features cluster={cluster}></Features>
<Removal cluster={cluster}></Removal>
<WizardLayout header={header} className="ClusterSettings">
<div className="settings-wrapper">
<Status cluster={cluster}></Status>
<General cluster={cluster}></General>
<Features cluster={cluster}></Features>
<Removal cluster={cluster}></Removal>
</div>
</WizardLayout>
)
);
}
}