Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 15:26:29 -05:00
Code Issues Activity

💄 Fix tokens modal block size when colorpicker is displayed (#5713)

Browse source
This commit is contained in:
Xaviju 2025-01-29 18:03:26 +01:00 • committed by GitHub
parent 6fa08fc75e
commit 995235d669
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -215,7 +215,7 @@
(mf/defc form
{::mf/wrap-props false}
[{:keys [token token-type action selected-token-set-name]}]
[{:keys [token token-type action selected-token-set-name on-display-colorpicker]}]
(let [create? (not (instance? ctob/Token token))
token (or token {:type token-type})
token-properties (wtty/get-token-properties token)
@ -290,7 +290,8 @@
;; Value
color (mf/use-state (when color? (:value token)))
color-ramp-open? (mf/use-state false)
color-ramp-open* (mf/use-state false)
color-ramp-open? (deref color-ramp-open*)
value-input-ref (mf/use-ref nil)
value-ref (mf/use-var (:value token))
token-resolve-result* (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
@ -323,10 +324,13 @@
(dom/set-value! (mf/ref-val value-input-ref) color-value)
(on-update-value-debounced color-value))))
on-display-colorpicker (mf/use-fn
(mf/deps color-ramp-open?)
(fn []
(swap! color-ramp-open? not)))
on-display-colorpicker'
(mf/use-fn
(mf/deps color-ramp-open? on-display-colorpicker)
(fn []
(let [open? (not color-ramp-open?)]
(reset! color-ramp-open* open?)
(on-display-colorpicker open?))))
value-error? (seq (:errors token-resolve-result))
valid-value-field? (and
@ -464,8 +468,8 @@
:on-blur on-update-value}
(when color?
[:> input-token-color-bullet*
{:color @color :on-click on-display-colorpicker}])]
(when @color-ramp-open?
{:color @color :on-click on-display-colorpicker'}])]
(when color-ramp-open?
[:> ramp* {:color (some-> (or token-resolve-result (:value token))
(tinycolor/valid-color))
:on-change on-update-color}])

14
frontend/src/app/main/ui/workspace/tokens/modals.cljs
View file

@ -44,10 +44,17 @@
{::mf/wrap-props false}
[{:keys [x y position token token-type action selected-token-set-name] :as _args}]
(let [wrapper-style (use-viewport-position-style x y position)
modal-size-large* (mf/use-state false)
modal-size-large? (deref modal-size-large*)
close-modal (mf/use-fn
(fn []
(modal/hide!)))]
[:div {:class (stl/css :token-modal-wrapper)
(modal/hide!)))
update-modal-size (mf/use-fn
(fn [visible]
(reset! modal-size-large* visible)))]
[:div {:class (stl/css-case
:token-modal-wrapper true
:token-modal-large modal-size-large?)
:style wrapper-style
:data-testid "token-update-create-modal"}
[:> icon-button* {:on-click close-modal
@ -58,7 +65,8 @@
[:& form {:token token
:action action
:selected-token-set-name selected-token-set-name
:token-type token-type}]]))
:token-type token-type
:on-display-colorpicker update-modal-size}]]))
;; Modals ----------------------------------------------------------------------

3
frontend/src/app/main/ui/workspace/tokens/modals.scss
View file

@ -15,6 +15,9 @@
z-index: 11;
overflow-y: auto;
overflow-x: hidden;
&.token-modal-large {
min-block-size: 38rem;
}
}
.close-btn {