fix: Content jump when leaving edit mode

This commit is contained in:
Tom Moor
2021-01-22 23:58:34 -08:00
parent b3cd78c833
commit 4106f15450
3 changed files with 12 additions and 1 deletions

View File

@@ -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;

View File

@@ -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();

View File

@@ -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;