mirror of
https://github.com/penpot/penpot.git
synced 2025-06-13 07:31:45 +02:00
🐛 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
GitHub
parent
0900b7a572
commit
6a5538bb15
2 changed files with 113 additions and 100 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue