fix: Content jump when leaving edit mode
This commit is contained in:
@@ -141,6 +141,7 @@ class Layout extends React.Component<Props> {
|
|||||||
<Content
|
<Content
|
||||||
auto
|
auto
|
||||||
justify="center"
|
justify="center"
|
||||||
|
$isResizing={ui.sidebarIsResizing}
|
||||||
$sidebarCollapsed={sidebarCollapsed}
|
$sidebarCollapsed={sidebarCollapsed}
|
||||||
style={
|
style={
|
||||||
sidebarCollapsed
|
sidebarCollapsed
|
||||||
@@ -192,7 +193,7 @@ const MobileMenuButton = styled(Button)`
|
|||||||
const Content = styled(Flex)`
|
const Content = styled(Flex)`
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: ${(props) =>
|
transition: ${(props) =>
|
||||||
props.$sidebarCollapsed ? `margin-left 100ms ease-out` : "none"};
|
props.$isResizing ? "none" : `margin-left 100ms ease-out`};
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -111,6 +111,10 @@ function Sidebar({ location, children }: Props) {
|
|||||||
ui.setSidebarWidth(theme.sidebarWidth);
|
ui.setSidebarWidth(theme.sidebarWidth);
|
||||||
}, [ui, theme.sidebarWidth]);
|
}, [ui, theme.sidebarWidth]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
ui.setSidebarResizing(isResizing);
|
||||||
|
}, [ui, isResizing]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (location !== previousLocation) {
|
if (location !== previousLocation) {
|
||||||
ui.hideMobileSidebar();
|
ui.hideMobileSidebar();
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ class UiStore {
|
|||||||
@observable mobileSidebarVisible: boolean = false;
|
@observable mobileSidebarVisible: boolean = false;
|
||||||
@observable sidebarWidth: number;
|
@observable sidebarWidth: number;
|
||||||
@observable sidebarCollapsed: boolean = false;
|
@observable sidebarCollapsed: boolean = false;
|
||||||
|
@observable sidebarIsResizing: boolean = false;
|
||||||
@observable toasts: Map<string, Toast> = new Map();
|
@observable toasts: Map<string, Toast> = new Map();
|
||||||
lastToastId: string;
|
lastToastId: string;
|
||||||
|
|
||||||
@@ -97,6 +98,11 @@ class UiStore {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@action
|
||||||
|
setSidebarResizing = (sidebarIsResizing: boolean): void => {
|
||||||
|
this.sidebarIsResizing = sidebarIsResizing;
|
||||||
|
};
|
||||||
|
|
||||||
@action
|
@action
|
||||||
setActiveCollection = (collection: Collection): void => {
|
setActiveCollection = (collection: Collection): void => {
|
||||||
this.activeCollectionId = collection.id;
|
this.activeCollectionId = collection.id;
|
||||||
|
|||||||
Reference in New Issue
Block a user