Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

Add placeholder color swatch

Browse source
This commit is contained in:
Florian Schroedl 2024-09-16 15:59:04 +02:00
parent 2b886c54e0
commit ac51309f81
3 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/workspace/tokens/common.cljs
View file

@ -125,7 +125,7 @@
(mf/defc labeled-input
{::mf/wrap-props false}
[{:keys [label input-props auto-complete? error? icon render-right]}]
[{:keys [label input-props auto-complete? error? render-right]}]
(let [input-props (cond-> input-props
:always camel-keys
;; Disable auto-complete on form fields for proprietary password managers

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

@ -13,6 +13,7 @@
[app.main.data.tokens :as dt]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.workspace.colorpicker :refer [colorpicker]]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
[app.main.ui.workspace.tokens.common :as tokens.common]
@ -199,6 +200,7 @@ Token names should only contain letters and digits separated by . characters.")}
(valid-name? @name-ref))
;; Value
color (mf/use-state (when color? (: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]))
set-resolve-value (mf/use-callback
@ -207,13 +209,13 @@ Token names should only contain letters and digits separated by . characters.")}
(= token-or-err :error/token-direct-self-reference) token-or-err
(= token-or-err :error/token-missing-reference) token-or-err
(:resolved-value token-or-err) (:resolved-value token-or-err))]
(when color? (reset! color v))
(reset! token-resolve-result v))))
on-update-value-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value)
on-update-value (mf/use-callback
(mf/deps on-update-value-debounced)
(fn [e]
(reset! value-ref (dom/get-target-val e))
(js/console.log "e" e (dom/get-target-val e))
(on-update-value-debounced e)))
value-error? (when (keyword? @token-resolve-result)
(= (namespace @token-resolve-result) "error"))
@ -295,8 +297,14 @@ Token names should only contain letters and digits separated by . characters.")}
[:& tokens.common/labeled-input {:label "Value"
:input-props {:default-value @value-ref
:on-blur on-update-value
:on-change on-update-value
:type (when color? "color")}}]
:on-change on-update-value}
:render-right (when color?
(mf/fnc []
[:div {:class (stl/css :color-bullet)}
(if @color
[:& color-bullet {:color @color
:mini? true}]
[:div {:class (stl/css :color-bullet-placeholder)}])]))}]
[:div {:class (stl/css-case :resolved-value true
:resolved-value-placeholder (nil? @token-resolve-result)
:resolved-value-error value-error?)}

15
frontend/src/app/main/ui/workspace/tokens/form.scss
View file

@ -48,3 +48,18 @@
.resolved-value-error {
color: var(--status-color-error-500);
}
.color-bullet {
margin-right: $s-8;
}
.color-bullet-placeholder {
width: var(--bullet-size, $s-16);
height: var(--bullet-size, $s-16);
min-width: var(--bullet-size, $s-16);
min-height: var(--bullet-size, $s-16);
margin-top: 0;
background-color: color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
border-radius: $br-4;
cursor: pointer;
}