waveterm/backup
0
0
Fork 0
mirror of https://github.com/wavetermdev/backup.git synced 2026-08-05 13:57:07 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix sidebar width not persisting when un-collapsing (#267)

Browse Source 
* Do not persist collapsed width to db

* remove console.logs

* one more

* one more

* remove setTemp from getWidth and add to the startResize call
This commit is contained in:
Evan Simkowitz
2024-01-30 22:04:25 -08:00
committed by GitHub
parent da69a0f583
commit 679e85a84a
2 changed files with 33 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/common/common.tsx
+20 -25
View File
@@ -1304,7 +1304,9 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
document.body.style.cursor = "col-resize";
mobx.action(() => {
GlobalModel.mainSidebarModel.isDragging.set(true);
const sbm = GlobalModel.mainSidebarModel;
sbm.setTempWidthAndTempCollapsed(this.resizeStartWidth, sbm.getCollapsed());
sbm.isDragging.set(true);
})();
}
@@ -1312,13 +1314,13 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
onMouseMove(event: MouseEvent) {
event.preventDefault();
let { parentRef, enableSnap, position } = this.props;
let parentRect = parentRef.current?.getBoundingClientRect();
let mainSidebarModel = GlobalModel.mainSidebarModel;
const { parentRef, enableSnap, position } = this.props;
const parentRect = parentRef.current?.getBoundingClientRect();
const mainSidebarModel = GlobalModel.mainSidebarModel;
if (!mainSidebarModel.isDragging.get() || !parentRect) return;
let delta, newWidth;
let delta: number, newWidth: number;
if (position === "right") {
delta = parentRect.right - event.clientX - this.startX;
@@ -1329,10 +1331,10 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
newWidth = this.resizeStartWidth + delta;
if (enableSnap) {
let minWidth = MagicLayout.MainSidebarMinWidth;
let snapPoint = minWidth + MagicLayout.MainSidebarSnapThreshold;
let dragResistance = MagicLayout.MainSidebarDragResistance;
let dragDirection;
const minWidth = MagicLayout.MainSidebarMinWidth;
const snapPoint = minWidth + MagicLayout.MainSidebarSnapThreshold;
const dragResistance = MagicLayout.MainSidebarDragResistance;
let dragDirection: string;
if (delta - this.prevDelta > 0) {
dragDirection = "+";
@@ -1387,26 +1389,19 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
@boundMethod
toggleCollapsed() {
let mainSidebarModel = GlobalModel.mainSidebarModel;
const mainSidebarModel = GlobalModel.mainSidebarModel;
let tempCollapsed = mainSidebarModel.getCollapsed();
let width = MagicLayout.MainSidebarDefaultWidth;
let newWidth;
if (tempCollapsed) {
newWidth = width;
} else {
newWidth = MagicLayout.MainSidebarMinWidth;
}
mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, !tempCollapsed);
GlobalCommandRunner.clientSetSidebar(newWidth, !tempCollapsed);
const tempCollapsed = mainSidebarModel.getCollapsed();
const width = mainSidebarModel.getWidth(true);
mainSidebarModel.setTempWidthAndTempCollapsed(width, !tempCollapsed);
GlobalCommandRunner.clientSetSidebar(width, !tempCollapsed);
}
render() {
let { className, children } = this.props;
let mainSidebarModel = GlobalModel.mainSidebarModel;
let width = mainSidebarModel.getWidth();
let isCollapsed = mainSidebarModel.getCollapsed();
const { className, children } = this.props;
const mainSidebarModel = GlobalModel.mainSidebarModel;
const width = mainSidebarModel.getWidth();
const isCollapsed = mainSidebarModel.getCollapsed();
return (
<div className={cn("sidebar", className, { collapsed: isCollapsed })} style={{ width }}>
src/model/model.ts
+13 -10
View File
@@ -2638,7 +2638,12 @@ class MainSidebarModel {
})();
}
getWidth(): number {
/**
* Gets the intended width for the sidebar. If the sidebar is being dragged, returns the tempWidth. If the sidebar is collapsed, returns the default width.
* @param ignoreCollapse If true, returns the persisted width even if the sidebar is collapsed.
* @returns The intended width for the sidebar or the default width if the sidebar is collapsed. Can be overridden using ignoreCollapse.
*/
getWidth(ignoreCollapse: boolean = false): number {
const clientData = GlobalModel.clientData.get();
let width = clientData?.clientopts?.mainsidebar?.width ?? MagicLayout.MainSidebarDefaultWidth;
if (this.isDragging.get()) {
@@ -2651,12 +2656,13 @@ class MainSidebarModel {
return this.tempWidth.get();
}
// Set by CLI and collapsed
if (this.getCollapsed() && width != MagicLayout.MainSidebarMinWidth) {
this.setTempWidthAndTempCollapsed(MagicLayout.MainSidebarMinWidth, true);
return MagicLayout.MainSidebarMinWidth;
}
// Set by CLI and not collapsed
if (!this.getCollapsed()) {
if (this.getCollapsed()) {
if (ignoreCollapse) {
return width;
} else {
return MagicLayout.MainSidebarMinWidth;
}
} else {
if (width <= MagicLayout.MainSidebarMinWidth) {
width = MagicLayout.MainSidebarDefaultWidth;
}
@@ -2664,10 +2670,7 @@ class MainSidebarModel {
if (width < snapPoint || width > MagicLayout.MainSidebarMaxWidth) {
width = MagicLayout.MainSidebarDefaultWidth;
}
this.setTempWidthAndTempCollapsed(width, false);
return width;
}
this.setTempWidthAndTempCollapsed(width, this.getCollapsed());
return width;
}