Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-07 23:08:24 -05:00
Code Issues Activity

💄 add removed labeled input CSS and improve component slot

Browse source
This commit is contained in:
Xaviju 2024-11-21 13:52:57 +01:00 • committed by Xaviju
parent 0a70f3ccfc
commit 0294695acf
2 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/main/ui/workspace/tokens/common.scss
View file

@ -6,6 +6,22 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.input {
@extend .input-element;
}
.labeled-input {
@extend .input-element;
.label {
width: auto;
text-wrap: nowrap;
}
}
.labeled-input-error {
border: 1px solid var(--status-color-error-500) !important;
}
.button { .button {
@extend .button-primary; @extend .button-primary;
} }

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

@ -283,6 +283,11 @@ Token names should only contain letters and digits separated by . characters.")}
(set! (.-value (mf/ref-val value-input-ref)) hex-value) (set! (.-value (mf/ref-val value-input-ref)) hex-value)
(on-update-value-debounced hex-value))) (on-update-value-debounced hex-value)))
on-display-colorpicker (mf/use-fn
(mf/deps color-ramp-open?)
(fn []
(swap! color-ramp-open? not)))
value-error? (seq (:errors @token-resolve-result)) value-error? (seq (:errors @token-resolve-result))
valid-value-field? (and valid-value-field? (and
(not value-error?) (not value-error?)
@ -393,9 +398,9 @@ Token names should only contain letters and digits separated by . characters.")}
:external-ref value-input-ref :external-ref value-input-ref
:on-change on-update-value :on-change on-update-value
:on-blur on-update-value} :on-blur on-update-value}
(when color?
[:> input-token-color-bullet* [:> input-token-color-bullet*
{:color @color :on-click #(swap! color-ramp-open? not)}])] {: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))