Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 03:28:25 -05:00
Code Issues Activity

♻️ Replace colorpicker modal tab component

Browse source
This commit is contained in:
Eva Marco 2024-08-20 13:59:54 +02:00
parent c0cd980f5f
commit 1782837a38
1 changed files with 49 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -21,7 +21,8 @@
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.components.select :refer [select]] [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.icons :as i]
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]] [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
[app.main.ui.workspace.colorpicker.gradients :refer [gradients]] [app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
@ -208,7 +209,50 @@
[{:value :linear-gradient :label (tr "media.linear")} [{:value :linear-gradient :label (tr "media.linear")}
{:value :radial-gradient :label (tr "media.radial")}]) {:value :radial-gradient :label (tr "media.radial")}])
(when (not disable-image) (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 ;; Initialize colorpicker state
(mf/with-effect [] (mf/with-effect []
@ -306,46 +350,9 @@
:on-selected on-fill-image-selected}]]]) :on-selected on-fill-image-selected}]]])
[:* [:*
[:div {:class (stl/css :colorpicker-tabs)} [:div {:class (stl/css :colorpicker-tabs)}
[:& tab-container [:> tab-switcher* {:tabs tabs
{:on-change-tab on-change-tab :default-selected "ramp"
:selected @active-color-tab :on-change-tab on-change-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}])]]]
[:& color-inputs [:& color-inputs
{:type (if (= @active-color-tab :hsva) :hsv :rgb) {:type (if (= @active-color-tab :hsva) :hsv :rgb)