From ddae26b48b8f156e3f62928a837c4d14a272bd77 Mon Sep 17 00:00:00 2001
From: Eva <evamarcod@gmail.com>
Date: Wed, 23 Feb 2022 17:13:09 +0100
Subject: [PATCH] :bug: Fix color palette animation

---
 CHANGES.md                                            |  1 +
 .../styles/common/dependencies/animations.scss        |  2 ++
 .../resources/styles/main/partials/color-palette.scss |  4 ++--
 .../resources/styles/main/partials/workspace.scss     |  1 -
 frontend/src/app/main/ui/workspace/left_toolbar.cljs  | 11 +++++++----
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 64856913c..12d4b38e4 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -12,6 +12,7 @@
 
 ### :bug: Bugs fixed
 
+- Fix color palette animation [Taiga #2852](https://tree.taiga.io/project/penpot/issue/2852)
 - Fix display code icon on preview hover [Taiga #2838](https://tree.taiga.io/project/penpot/us/2838)
 
 ### :arrow_up: Deps updates
diff --git a/frontend/resources/styles/common/dependencies/animations.scss b/frontend/resources/styles/common/dependencies/animations.scss
index 00b09bf21..274770411 100644
--- a/frontend/resources/styles/common/dependencies/animations.scss
+++ b/frontend/resources/styles/common/dependencies/animations.scss
@@ -1494,6 +1494,7 @@
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
+    max-height: 0px;
   }
 
   100% {
@@ -1587,6 +1588,7 @@
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
+    max-height: 0px;
   }
 }
 
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 2edac7457..78eeed013 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -5,7 +5,7 @@
 // Copyright (c) UXBOX Labs SL
 
 .color-palette {
-  @include animation(0, 0.5s, fadeInUp);
+  @include animation(0, 0.3s, fadeInUp);
   align-items: center;
   background-color: $color-gray-50;
   border-top: 1px solid $color-gray-60;
@@ -42,7 +42,7 @@
   }
 
   &.fade-out-down {
-    @include animation(0, 0.5s, fadeOutDown);
+    @include animation(0, 0.3s, fadeOutDown);
   }
 
   & .context-menu-items {
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 2bba2d53a..1ff81f3c4 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -63,7 +63,6 @@ $height-palette-max: 80px;
 
   .color-palette {
     grid-area: color-palette;
-    min-height: $height-palette-min;
     max-height: $height-palette-max;
     height: var(--height, $height-palette);
   }
diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
index dbddf0777..10f2c0d4f 100644
--- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs
+++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs
@@ -19,6 +19,7 @@
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
+   [app.util.timers :as ts]
    [rumext.alpha :as mf]))
 
 (mf/defc image-upload
@@ -124,8 +125,9 @@
          :class (when (contains? layout :textpalette) "selected")
          :on-click (fn []
                      (r/set-resize-type! :bottom)
-                     (st/emit! (dw/remove-layout-flags :colorpalette)
-                               (dw/toggle-layout-flags :textpalette)))}
+                     (dom/add-class!  (dom/get-element-by-class "color-palette") "fade-out-down")
+                     (ts/schedule 300 #(st/emit! (dw/remove-layout-flags :colorpalette)
+                               (dw/toggle-layout-flags :textpalette))))}
         "Ag"]
        
        [:li.tooltip.tooltip-right
@@ -133,6 +135,7 @@
          :class (when (contains? layout :colorpalette) "selected")
          :on-click (fn []
                      (r/set-resize-type! :bottom)
-                     (st/emit! (dw/remove-layout-flags :textpalette)
-                               (dw/toggle-layout-flags :colorpalette)))}
+                     (dom/add-class!  (dom/get-element-by-class "color-palette") "fade-out-down")
+                     (ts/schedule 300 #(st/emit! (dw/remove-layout-flags :textpalette)
+                                                 (dw/toggle-layout-flags :colorpalette))))}
         i/palette]]]]))