🐛 Fix unreachable Save color style button (#5879)

* 🐛 Fix unreachable Save color style button

* 📎 Fix unreachable Save color style button code review
This commit is contained in:
María Valderrama 2025-02-18 11:32:00 +01:00 committed by GitHub
parent 0900b7a572
commit 6a5538bb15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 113 additions and 100 deletions

View file

@ -403,104 +403,104 @@
:h h :s s :v v :h h :s s :v v
:alpha (/ alpha 255)})))) :alpha (/ alpha 255)}))))
[:div {:class (stl/css :colorpicker) [:*
:ref node-ref [:div {:class (stl/css :colorpicker)
:style {:touch-action "none"}} :ref node-ref
[:div {:class (stl/css :top-actions)} :style {:touch-action "none"}}
[:div {:class (stl/css :top-actions-right)} [:div {:class (stl/css :top-actions)}
(when (= :gradient selected-mode) [:div {:class (stl/css :top-actions-right)}
[:div {:class (stl/css :opacity-input-wrapper)} (when (= :gradient selected-mode)
[:span {:class (stl/css :icon-text)} "%"] [:div {:class (stl/css :opacity-input-wrapper)}
[:> numeric-input* [:span {:class (stl/css :icon-text)} "%"]
{:value (-> data :opacity opacity->string) [:> numeric-input*
:on-change handle-change-gradient-opacity {:value (-> data :opacity opacity->string)
:default 100 :on-change handle-change-gradient-opacity
:min 0 :default 100
:max 100}]]) :min 0
:max 100}]])
(when (or (not disable-gradient) (not disable-image)) (when (or (not disable-gradient) (not disable-image))
[:div {:class (stl/css :select)} [:div {:class (stl/css :select)}
[:& select [:& select
{:default-value selected-mode {:default-value selected-mode
:options options :options options
:on-change handle-change-mode}]])] :on-change handle-change-mode}]])]
(when (not= selected-mode :image) (when (not= selected-mode :image)
[:button {:class (stl/css-case :picker-btn true [:button {:class (stl/css-case :picker-btn true
:selected picking-color?) :selected picking-color?)
:on-click handle-click-picker} :on-click handle-click-picker}
i/picker])] i/picker])]
(when (= selected-mode :gradient) (when (= selected-mode :gradient)
[:> gradients* [:> gradients*
{:type (:type state) {:type (:type state)
:stops (:stops state) :stops (:stops state)
:editing-stop (:editing-stop state) :editing-stop (:editing-stop state)
:on-stop-edit-start handle-stop-edit-start :on-stop-edit-start handle-stop-edit-start
:on-stop-edit-finish handle-stop-edit-finish :on-stop-edit-finish handle-stop-edit-finish
:on-select-stop handle-change-gradient-selected-stop :on-select-stop handle-change-gradient-selected-stop
:on-change-type handle-change-gradient-type :on-change-type handle-change-gradient-type
:on-change-stop handle-gradient-change-stop :on-change-stop handle-gradient-change-stop
:on-add-stop-auto handle-gradient-add-stop-auto :on-add-stop-auto handle-gradient-add-stop-auto
:on-add-stop-preview handle-gradient-add-stop-preview :on-add-stop-preview handle-gradient-add-stop-preview
:on-remove-stop handle-gradient-remove-stop :on-remove-stop handle-gradient-remove-stop
:on-rotate-stops handle-rotate-stops :on-rotate-stops handle-rotate-stops
:on-reverse-stops handle-reverse-stops :on-reverse-stops handle-reverse-stops
:on-reorder-stops handle-reorder-stops}]) :on-reorder-stops handle-reorder-stops}])
(if (= selected-mode :image) (if (= selected-mode :image)
(let [uri (cfg/resolve-file-media (:image current-color)) (let [uri (cfg/resolve-file-media (:image current-color))
keep-aspect-ratio? (-> current-color :image :keep-aspect-ratio)] keep-aspect-ratio? (-> current-color :image :keep-aspect-ratio)]
[:div {:class (stl/css :select-image)} [:div {:class (stl/css :select-image)}
[:div {:class (stl/css :content)} [:div {:class (stl/css :content)}
(when (:image current-color) (when (:image current-color)
[:img {:src uri}])] [:img {:src uri}])]
(when (some? (:image current-color)) (when (some? (:image current-color))
[:div {:class (stl/css :checkbox-option)} [:div {:class (stl/css :checkbox-option)}
[:label {:for "keep-aspect-ratio" [:label {:for "keep-aspect-ratio"
:class (stl/css-case :global/checked keep-aspect-ratio?)} :class (stl/css-case :global/checked keep-aspect-ratio?)}
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)} [:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
(when keep-aspect-ratio? (when keep-aspect-ratio?
i/status-tick)] i/status-tick)]
(tr "media.keep-aspect-ratio") (tr "media.keep-aspect-ratio")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "keep-aspect-ratio" :id "keep-aspect-ratio"
:checked keep-aspect-ratio? :checked keep-aspect-ratio?
:on-change handle-change-keep-aspect-ratio}]]]) :on-change handle-change-keep-aspect-ratio}]]])
[:button [:button
{:class (stl/css :choose-image) {:class (stl/css :choose-image)
:title (tr "media.choose-image") :title (tr "media.choose-image")
:aria-label (tr "media.choose-image") :aria-label (tr "media.choose-image")
:on-click on-fill-image-click} :on-click on-fill-image-click}
(tr "media.choose-image") (tr "media.choose-image")
[:& file-uploader [:& file-uploader
{:input-id "fill-image-upload" {:input-id "fill-image-upload"
:accept "image/jpeg,image/png" :accept "image/jpeg,image/png"
:multi false :multi false
:ref fill-image-ref :ref fill-image-ref
: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-switcher* {:tabs tabs [:> tab-switcher* {:tabs tabs
:default-selected "ramp" :default-selected "ramp"
:on-change-tab on-change-tab}]] :on-change-tab on-change-tab}]]
[:& color-inputs [:& color-inputs
{:type type {:type type
:disable-opacity disable-opacity :disable-opacity disable-opacity
:color current-color :color current-color
:on-change handle-change-color}] :on-change handle-change-color}]
[:& libraries
{:state state
:current-color current-color
:disable-gradient disable-gradient
:disable-opacity disable-opacity
:disable-image disable-image
:on-select-color on-select-library-color
:on-add-library-color on-add-library-color}]])
[:& libraries
{:state state
:current-color current-color
:disable-gradient disable-gradient
:disable-opacity disable-opacity
:disable-image disable-image
:on-select-color on-select-library-color
:on-add-library-color on-add-library-color}]])]
(when (fn? on-accept) (when (fn? on-accept)
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css-case [:button {:class (stl/css-case
@ -520,32 +520,41 @@
max-y (- vh h) max-y (- vh h)
rulers? (mf/deref refs/rulers?) rulers? (mf/deref refs/rulers?)
left-offset (if rulers? 40 18) left-offset (if rulers? 40 18)
right-offset (+ w 40)] right-offset (+ w 40)
top-offset (dm/str (- y 70) "px")
bottom-offset "1rem"
max-height-top (str "calc(100vh - " top-offset)
max-height-bottom (str "calc(100vh -" bottom-offset)]
(cond (cond
(or (nil? x) (nil? y)) (or (nil? x) (nil? y))
#js {:left "auto" :right "16rem" :top "4rem"} #js {:left "auto" :right "16rem" :top "4rem" :maxHeight "calc(100vh - 4rem)"}
(= position :left) (= position :left)
(if (> y max-y) (if (> y max-y)
#js {:left (dm/str (- x right-offset) "px") #js {:left (dm/str (- x right-offset) "px")
:bottom "1rem"} :bottom bottom-offset
:maxHeight max-height-bottom}
#js {:left (dm/str (- x right-offset) "px") #js {:left (dm/str (- x right-offset) "px")
:top (dm/str (- y 70) "px")}) :top top-offset
:maxHeight max-height-top})
(= position :right) (= position :right)
(if (> y max-y) (if (> y max-y)
#js {:left (dm/str (+ x 80) "px") #js {:left (dm/str (+ x 80) "px")
:bottom "1rem"} :bottom bottom-offset
:maxHeight max-height-bottom}
#js {:left (dm/str (+ x 80) "px") #js {:left (dm/str (+ x 80) "px")
:top (dm/str (- y 70) "px")}) :top top-offset
:maxHeight max-height-top})
:else :else
(if (> y max-y) (if (> y max-y)
#js {:left (dm/str (+ x left-offset) "px") #js {:left (dm/str (+ x left-offset) "px")
:bottom "1rem"} :bottom bottom-offset
:maxHeight max-height-bottom}
#js {:left (dm/str (+ x left-offset) "px") #js {:left (dm/str (+ x left-offset) "px")
:top (dm/str (- y 70) "px")})))) :top top-offset
:maxHeight max-height-top}))))
(mf/defc colorpicker-modal (mf/defc colorpicker-modal
{::mf/register modal/components {::mf/register modal/components

View file

@ -13,10 +13,14 @@
width: auto; width: auto;
padding: var(--sp-m); padding: var(--sp-m);
width: $sz-284; width: $sz-284;
overflow: auto;
display: flex;
flex-direction: column;
} }
.colorpicker { .colorpicker {
border-radius: $br-8; border-radius: $br-8;
overflow: auto;
} }
.colorpicker-tabs { .colorpicker-tabs {