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:
parent
c0cd980f5f
commit
1782837a38
1 changed files with 49 additions and 42 deletions
|
@ -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)
|
||||
|
|
Loading…
Add table
Reference in a new issue