3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-09 01:11:39 +02:00
Code Issues Projects Releases Packages Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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

@ -215,7 +215,7 @@
(mf/defc form (mf/defc form
{::mf/wrap-props false} {::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)) (let [create? (not (instance? ctob/Token token))
token (or token {:type token-type}) token (or token {:type token-type})
token-properties (wtty/get-token-properties token) token-properties (wtty/get-token-properties token)
@ -290,7 +290,8 @@
;; Value ;; Value
color (mf/use-state (when color? (:value token))) 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-input-ref (mf/use-ref nil)
value-ref (mf/use-var (:value token)) value-ref (mf/use-var (:value token))
token-resolve-result* (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])) 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) (dom/set-value! (mf/ref-val value-input-ref) color-value)
(on-update-value-debounced color-value)))) (on-update-value-debounced color-value))))
on-display-colorpicker (mf/use-fn on-display-colorpicker'
(mf/deps color-ramp-open?) (mf/use-fn
(mf/deps color-ramp-open? on-display-colorpicker)
(fn [] (fn []
(swap! color-ramp-open? not))) (let [open? (not color-ramp-open?)]
(reset! color-ramp-open* open?)
(on-display-colorpicker open?))))
value-error? (seq (:errors token-resolve-result)) value-error? (seq (:errors token-resolve-result))
valid-value-field? (and valid-value-field? (and
@ -464,8 +468,8 @@
:on-blur on-update-value} :on-blur on-update-value}
(when color? (when color?
[:> input-token-color-bullet* [:> input-token-color-bullet*
{:color @color :on-click on-display-colorpicker}])] {:color @color :on-click on-display-colorpicker'}])]
(when @color-ramp-open? (when color-ramp-open?
[:> ramp* {:color (some-> (or token-resolve-result (:value token)) [:> ramp* {:color (some-> (or token-resolve-result (:value token))
(tinycolor/valid-color)) (tinycolor/valid-color))
:on-change on-update-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} {::mf/wrap-props false}
[{:keys [x y position token token-type action selected-token-set-name] :as _args}] [{:keys [x y position token token-type action selected-token-set-name] :as _args}]
(let [wrapper-style (use-viewport-position-style x y position) (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 close-modal (mf/use-fn
(fn [] (fn []
(modal/hide!)))] (modal/hide!)))
[:div {:class (stl/css :token-modal-wrapper) 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 :style wrapper-style
:data-testid "token-update-create-modal"} :data-testid "token-update-create-modal"}
[:> icon-button* {:on-click close-modal [:> icon-button* {:on-click close-modal
@ -58,7 +65,8 @@
[:& form {:token token [:& form {:token token
:action action :action action
:selected-token-set-name selected-token-set-name :selected-token-set-name selected-token-set-name
:token-type token-type}]])) :token-type token-type
:on-display-colorpicker update-modal-size}]]))
;; Modals ---------------------------------------------------------------------- ;; Modals ----------------------------------------------------------------------

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

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