fix: Width transition on manually resizing sections (#759)

standardnotes · Dec 3, 2021 · d7c36da · d7c36da
1 parent 1a138ef
commit d7c36da
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx b/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -25,6 +25,8 @@ import {
 import { FocusModeSwitch } from './FocusModeSwitch';
 import { ThemesMenuButton } from './ThemesMenuButton';
 
+const focusModeAnimationDuration = 1255;
+
 const MENU_CLASSNAME =
   'sn-menu-border sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto';
 
@@ -42,7 +44,7 @@ const toggleFocusMode = (enabled: boolean) => {
       document.body.classList.remove('focus-mode');
       setTimeout(() => {
         document.body.classList.remove('disable-focus-mode');
-      }, 315);
+      }, focusModeAnimationDuration);
     }
   }
 };

diff --git a/app/assets/stylesheets/_focused.scss b/app/assets/stylesheets/_focused.scss
@@ -1,8 +1,3 @@
-.section.tags,
-.section.notes {
-  transition: width 1.25s;
-}
-
 .focus-mode {
   .mac-desktop #editor-column {
     // To offset colored circles in Mac
@@ -44,6 +39,7 @@
   .section.notes {
     will-change: opacity;
     animation: fade-out 1.25s forwards;
+    transition: width 1.25s;
     transition-delay: 0s;
     width: 0px !important;
     flex: none !important;
@@ -63,6 +59,7 @@
 .disable-focus-mode {
   .section.tags,
   .section.notes {
+    transition: width 1.25s;
     will-change: opacity;
     animation: fade-in 1.25s forwards;
   }