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

fixed sidebar not floating while isPinned is false, capped width at 400, removed double click to open

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2020-10-02 11:13:04 -04:00
parent eb144a7cfd
commit 372e0f233b
4 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/components/layout/main-layout.scss
View File

@ -6,7 +6,7 @@
"aside main" "aside main"
"aside footer"; "aside footer";
grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto; grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
grid-template-columns: [sidebar] auto [main] 1fr; grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
height: 100%; height: 100%;
@ -31,9 +31,13 @@
background: $sidebarBackground; background: $sidebarBackground;
white-space: nowrap; white-space: nowrap;
transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
width: var(--sidebar-width);
&.pinned {
width: var(--sidebar-width);
}
&:not(.pinned) { &:not(.pinned) {
position: absolute;
width: var(--main-layout-header); width: var(--main-layout-header);
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;

6
src/renderer/components/layout/main-layout.tsx
View File

@ -64,10 +64,6 @@ export class MainLayout extends React.Component<Props> {
return headerPadding + appIcon + appName + pinningIcon + goodMeasure return headerPadding + appIcon + appName + pinningIcon + goodMeasure
} }
sidebarMaxWidth(): number {
return (window.innerWidth || 500) * 0.4
}
render() { render() {
const { className, headerClass, footer, footerClass, children } = this.props; const { className, headerClass, footer, footerClass, children } = this.props;
const cluster = getHostedCluster(); const cluster = getHostedCluster();
@ -91,7 +87,7 @@ export class MainLayout extends React.Component<Props> {
onDoubleClick={this.toggleSidebar} onDoubleClick={this.toggleSidebar}
disabled={!this.isPinned} disabled={!this.isPinned}
minExtent={this.sidebarMinWidth()} minExtent={this.sidebarMinWidth()}
maxExtent={this.sidebarMaxWidth()} maxExtent={400}
/> />
</aside> </aside>

11
src/renderer/components/layout/sidebar.tsx
View File

@ -6,7 +6,7 @@ import { computed, observable, reaction } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { matchPath, NavLink } from "react-router-dom"; import { matchPath, NavLink } from "react-router-dom";
import { Trans } from "@lingui/macro"; import { Trans } from "@lingui/macro";
import { autobind, createStorage, cssNames } from "../../utils"; import { createStorage, cssNames } from "../../utils";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route"; import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
import { namespacesURL } from "../+namespaces/namespaces.route"; import { namespacesURL } from "../+namespaces/namespaces.route";
@ -71,19 +71,12 @@ export class Sidebar extends React.Component<Props> {
}); });
} }
@autobind()
onDoubleClick() {
if (!this.props.isPinned) {
this.props.toggle()
}
}
render() { render() {
const { toggle, isPinned, className } = this.props; const { toggle, isPinned, className } = this.props;
const query = namespaceStore.getContextParams(); const query = namespaceStore.getContextParams();
return ( return (
<SidebarContext.Provider value={{ pinned: isPinned }}> <SidebarContext.Provider value={{ pinned: isPinned }}>
<div className={cssNames("Sidebar flex column", className, { pinned: isPinned })} onDoubleClick={this.onDoubleClick}> <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
<div className="header flex align-center"> <div className="header flex align-center">
<NavLink exact to="/" className="box grow"> <NavLink exact to="/" className="box grow">
<Icon svg="logo-full" className="logo-icon" /> <Icon svg="logo-full" className="logo-icon" />

3
src/renderer/components/resizing-anchor/resizing-anchor.scss
View File

@ -11,8 +11,7 @@ body.resizing {
z-index: 10; z-index: 10;
&.disabled { &.disabled {
pointer-events: none; display: none;
cursor: unset;
} }
&.vertical { &.vertical {