mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Add double click to reset sidebar width (#4109)
This commit is contained in:
parent
cd14097668
commit
8fa2adf870
@ -26,7 +26,7 @@ import { observer } from "mobx-react";
|
|||||||
import { cssNames } from "../../utils";
|
import { cssNames } from "../../utils";
|
||||||
import { ErrorBoundary } from "../error-boundary";
|
import { ErrorBoundary } from "../error-boundary";
|
||||||
import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
|
import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
|
||||||
import { sidebarStorage } from "./sidebar-storage";
|
import { defaultSidebarWidth, sidebarStorage } from "./sidebar-storage";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
sidebar: React.ReactNode;
|
sidebar: React.ReactNode;
|
||||||
@ -46,7 +46,6 @@ export class MainLayout extends React.Component<Props> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { onSidebarResize } = this;
|
|
||||||
const { className, footer, children, sidebar } = this.props;
|
const { className, footer, children, sidebar } = this.props;
|
||||||
const { width: sidebarWidth } = sidebarStorage.get();
|
const { width: sidebarWidth } = sidebarStorage.get();
|
||||||
const style = { "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties;
|
const style = { "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties;
|
||||||
@ -60,7 +59,8 @@ export class MainLayout extends React.Component<Props> {
|
|||||||
placement={ResizeSide.TRAILING}
|
placement={ResizeSide.TRAILING}
|
||||||
growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
|
growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
|
||||||
getCurrentExtent={() => sidebarWidth}
|
getCurrentExtent={() => sidebarWidth}
|
||||||
onDrag={onSidebarResize}
|
onDrag={this.onSidebarResize}
|
||||||
|
onDoubleClick={() => this.onSidebarResize(defaultSidebarWidth)}
|
||||||
minExtent={120}
|
minExtent={120}
|
||||||
maxExtent={400}
|
maxExtent={400}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -28,7 +28,9 @@ export interface SidebarStorageState {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const defaultSidebarWidth = 200;
|
||||||
|
|
||||||
export const sidebarStorage = createStorage<SidebarStorageState>("sidebar", {
|
export const sidebarStorage = createStorage<SidebarStorageState>("sidebar", {
|
||||||
width: 200,
|
width: defaultSidebarWidth,
|
||||||
expanded: {},
|
expanded: {},
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user