From 1782837a38bc7d92a3b4e8168ee2c758aae27b50 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Tue, 20 Aug 2024 13:59:54 +0200
Subject: [PATCH] :recycle: Replace colorpicker modal tab component

---
 .../app/main/ui/workspace/colorpicker.cljs    | 91 ++++++++++---------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 2170ebfebd..08c7bae9c3 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -21,7 +21,8 @@
    [app.main.store :as st]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
+   [app.main.ui.ds.foundations.assets.icon :as ic]
+   [app.main.ui.ds.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
    [app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
@@ -208,7 +209,50 @@
              [{:value :linear-gradient :label (tr "media.linear")}
               {:value :radial-gradient :label (tr "media.radial")}])
            (when (not disable-image)
-             [{:value :image :label (tr "media.image")}])))]
+             [{:value :image :label (tr "media.image")}])))
+
+        tabs
+        #js [#js {:aria-label (tr "workspace.libraries.colors.rgba")
+                  :icon ic/rgba
+                  :id "ramp"
+                  :content (mf/html (if picking-color?
+                                      [:div {:class (stl/css :picker-detail-wrapper)}
+                                       [:div {:class (stl/css :center-circle)}]
+                                       [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
+                                      [:& ramp-selector
+                                       {:color current-color
+                                        :disable-opacity disable-opacity
+                                        :on-change handle-change-color
+                                        :on-start-drag on-start-drag
+                                        :on-finish-drag on-finish-drag}]))}
+
+             #js {:aria-label "Harmony"
+                  :icon ic/rgba-complementary
+                  :id "harmony"
+                  :content (mf/html (if picking-color?
+                                      [:div {:class (stl/css :picker-detail-wrapper)}
+                                       [:div {:class (stl/css :center-circle)}]
+                                       [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
+                                      [:& harmony-selector
+                                       {:color current-color
+                                        :disable-opacity disable-opacity
+                                        :on-change handle-change-color
+                                        :on-start-drag on-start-drag
+                                        :on-finish-drag on-finish-drag}]))}
+
+             #js {:aria-label "HSVA"
+                  :icon ic/hsva
+                  :id "hsva"
+                  :content (mf/html (if picking-color?
+                                      [:div {:class (stl/css :picker-detail-wrapper)}
+                                       [:div {:class (stl/css :center-circle)}]
+                                       [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
+                                      [:& hsva-selector
+                                       {:color current-color
+                                        :disable-opacity disable-opacity
+                                        :on-change handle-change-color
+                                        :on-start-drag on-start-drag
+                                        :on-finish-drag on-finish-drag}]))}]]
 
     ;; Initialize colorpicker state
     (mf/with-effect []
@@ -306,46 +350,9 @@
              :on-selected on-fill-image-selected}]]])
        [:*
         [:div {:class (stl/css :colorpicker-tabs)}
-         [:& tab-container
-          {:on-change-tab on-change-tab
-           :selected @active-color-tab
-           :collapsable false}
-
-          [:& tab-element {:id :ramp :title i/rgba}
-           (if picking-color?
-             [:div {:class (stl/css :picker-detail-wrapper)}
-              [:div {:class (stl/css :center-circle)}]
-              [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
-             [:& ramp-selector
-              {:color current-color
-               :disable-opacity disable-opacity
-               :on-change handle-change-color
-               :on-start-drag on-start-drag
-               :on-finish-drag on-finish-drag}])]
-
-          [:& tab-element {:id :harmony :title i/rgba-complementary}
-           (if picking-color?
-             [:div {:class (stl/css :picker-detail-wrapper)}
-              [:div {:class (stl/css :center-circle)}]
-              [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
-             [:& harmony-selector
-              {:color current-color
-               :disable-opacity disable-opacity
-               :on-change handle-change-color
-               :on-start-drag on-start-drag
-               :on-finish-drag on-finish-drag}])]
-
-          [:& tab-element {:id :hsva :title i/hsva}
-           (if picking-color?
-             [:div {:class (stl/css :picker-detail-wrapper)}
-              [:div {:class (stl/css :center-circle)}]
-              [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
-             [:& hsva-selector
-              {:color current-color
-               :disable-opacity disable-opacity
-               :on-change handle-change-color
-               :on-start-drag on-start-drag
-               :on-finish-drag on-finish-drag}])]]]
+         [:> tab-switcher* {:tabs tabs
+                            :default-selected "ramp"
+                            :on-change-tab on-change-tab}]]
 
         [:& color-inputs
          {:type (if (= @active-color-tab :hsva) :hsv :rgb)