0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-12 18:18:24 -05:00

♻️ Replace colorpicker modal tab component

This commit is contained in:
Eva Marco 2024-08-20 13:59:54 +02:00
parent c0cd980f5f
commit 1782837a38

View file

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