mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Preferences page redesign (#2446)
* Removing header part Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Restyling PageLayout Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Restyling .round-black Input Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding Tab navigation to Preferences Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Styling Application tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add esc button Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add media queries Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Introducting Switcher component Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Styling Proxy tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Moving start-up switcher to Other tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Styling Kubernetes tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Styling Extensions tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Styling inputs and selects Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Styling helm chart section Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Create a telemetry tab with extensions Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding lens Select theme Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Remove Other tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix mainBackground color Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Simplifying Tabs boilerplate Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Replacing button font Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing one-column settings layout Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing integration tests Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixin tests harder Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Showing bottom bar in workspaces Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and 
GitHub committed
1 parent
33c405bdcf
commit
84cc0cdf55
23 files changed
+572
-237
No files matched your search
@@ -1,30 +1,22 @@
|
||||
.PageLayout {
|
||||
--width: 60%;
|
||||
--width: 75%;
|
||||
--nav-width: 180px;
|
||||
--nav-column-width: 30vw;
|
||||
--spacing: calc(var(--unit) * 2);
|
||||
--wrapper-padding: calc(var(--spacing) * 2);
|
||||
--header-height: 64px;
|
||||
--header-height-mac: 80px;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid !important;
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@include media("<1000px") {
|
||||
--width: 85%;
|
||||
}
|
||||
|
||||
&.showNavigation {
|
||||
--width: 70%;
|
||||
|
||||
grid-template-columns: var(--nav-column-width) 1fr;
|
||||
|
||||
> .content-wrapper {
|
||||
> .content {
|
||||
width: 100%;
|
||||
padding-left: 1px; // Fix visual content crop
|
||||
padding-right: calc(var(--nav-column-width) - var(--nav-width));
|
||||
}
|
||||
> .contentRegion {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,96 +27,172 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 24px;
|
||||
bottom: 0;
|
||||
height: unset;
|
||||
background-color: var(--mainBackground);
|
||||
|
||||
// adds extra space for traffic-light top buttons (mac only)
|
||||
.is-mac & > .header {
|
||||
height: var(--header-height-mac);
|
||||
padding-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
background-color: var(--settingsBackground);
|
||||
}
|
||||
|
||||
> .header {
|
||||
position: sticky;
|
||||
padding: var(--spacing);
|
||||
background-color: var(--layoutTabsBackground);
|
||||
height: var(--header-height);
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
> .content-navigation {
|
||||
> .sidebarRegion {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow-y: auto;
|
||||
margin-top: 32px;
|
||||
background-color: var(--secondaryBackground);
|
||||
|
||||
ul.TreeView {
|
||||
width: var(--nav-width);
|
||||
padding-right: 24px;
|
||||
.sidebar {
|
||||
width: 218px;
|
||||
padding: 60px 10px 60px 20px;
|
||||
|
||||
.Tabs {
|
||||
.header {
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Tab {
|
||||
padding: 6px 10px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--textColorSecondary);
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--navHoverBackground);
|
||||
color: var(--navHoverColor);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--navSelectedBackground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content-wrapper {
|
||||
padding: 32px;
|
||||
> .contentRegion {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
justify-content: center;
|
||||
|
||||
> .content {
|
||||
width: var(--width);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
padding: 60px 40px 80px;
|
||||
|
||||
p {
|
||||
line-height: 140%;
|
||||
> section {
|
||||
&:last-of-type {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .toolsRegion {
|
||||
.fixedTools {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
|
||||
.closeBtn {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid var(--textColorDimmed);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #72767d4d;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.Icon {
|
||||
color: var(--textColorSecondary);
|
||||
}
|
||||
}
|
||||
|
||||
.esc {
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--textColorDimmed);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--colorInfo);
|
||||
}
|
||||
|
||||
.SubTitle {
|
||||
text-transform: none;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.Select {
|
||||
&__control {
|
||||
box-shadow: 0 0 0 1px var(--borderFaintColor);
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-bottom: var(--spacing);
|
||||
&:not(:first-of-type) {
|
||||
margin-top: 40px;
|
||||
|
||||
&.small {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: var(--textColorAccent);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: x-large;
|
||||
border-bottom: 1px solid var(--borderFaintColor);
|
||||
padding-bottom: var(--padding);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: large;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
small.hint {
|
||||
margin-top: calc(var(--unit) * -1.5);
|
||||
.hint {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.SubTitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 40px;
|
||||
height: 1px;
|
||||
border-top: thin solid var(--hrColor);
|
||||
|
||||
&.small {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,19 +3,18 @@ import "./page-layout.scss";
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { autobind, cssNames, IClassName } from "../../utils";
|
||||
import { Icon } from "../icon";
|
||||
import { navigation } from "../../navigation";
|
||||
import { NavigationTree, RecursiveTreeView } from "../tree-view";
|
||||
import { Icon } from "../icon";
|
||||
|
||||
export interface PageLayoutProps extends React.DOMAttributes<any> {
|
||||
className?: IClassName;
|
||||
header: React.ReactNode;
|
||||
header?: React.ReactNode;
|
||||
headerClass?: IClassName;
|
||||
contentClass?: IClassName;
|
||||
provideBackButtonNavigation?: boolean;
|
||||
contentGaps?: boolean;
|
||||
showOnTop?: boolean; // covers whole app view
|
||||
navigation?: NavigationTree[];
|
||||
navigation?: React.ReactNode;
|
||||
back?: (evt: React.MouseEvent | KeyboardEvent) => void;
|
||||
}
|
||||
|
||||
@@ -58,32 +57,34 @@ export class PageLayout extends React.Component<PageLayoutProps> {
|
||||
|
||||
render() {
|
||||
const {
|
||||
contentClass, header, headerClass, provideBackButtonNavigation,
|
||||
contentClass, headerClass, provideBackButtonNavigation,
|
||||
contentGaps, showOnTop, navigation, children, ...elemProps
|
||||
} = this.props;
|
||||
const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);
|
||||
|
||||
return (
|
||||
<div {...elemProps} className={className}>
|
||||
<div className={cssNames("header flex gaps align-center", headerClass)}>
|
||||
{header}
|
||||
{provideBackButtonNavigation && (
|
||||
<Icon
|
||||
big material="close"
|
||||
className="back box right"
|
||||
onClick={this.back}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{ navigation && (
|
||||
<nav className="content-navigation">
|
||||
<RecursiveTreeView data={navigation}/>
|
||||
<nav className="sidebarRegion">
|
||||
<div className="sidebar">
|
||||
{navigation}
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
<div className="content-wrapper" id="ScrollSpyRoot">
|
||||
<div className="contentRegion" id="ScrollSpyRoot">
|
||||
<div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
|
||||
{children}
|
||||
</div>
|
||||
<div className="toolsRegion">
|
||||
<div className="fixedTools">
|
||||
<div className="closeBtn" role="button" aria-label="Close" onClick={this.back}>
|
||||
<Icon material="close"/>
|
||||
</div>
|
||||
<div className="esc" aria-hidden="true">
|
||||
ESC
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user