Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -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/defc labeled-input
{::mf/wrap-props false} {::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 (let [input-props (cond-> input-props
:always camel-keys :always camel-keys
;; Disable auto-complete on form fields for proprietary password managers ;; 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.data.tokens :as dt]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [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 :refer [colorpicker]]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
[app.main.ui.workspace.tokens.common :as tokens.common] [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)) (valid-name? @name-ref))
;; Value ;; Value
color (mf/use-state (when color? (:value token)))
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]))
set-resolve-value (mf/use-callback 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-direct-self-reference) token-or-err
(= token-or-err :error/token-missing-reference) token-or-err (= token-or-err :error/token-missing-reference) token-or-err
(:resolved-value token-or-err) (:resolved-value token-or-err))] (:resolved-value token-or-err) (:resolved-value token-or-err))]
(when color? (reset! color v))
(reset! token-resolve-result 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-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value)
on-update-value (mf/use-callback on-update-value (mf/use-callback
(mf/deps on-update-value-debounced) (mf/deps on-update-value-debounced)
(fn [e] (fn [e]
(reset! value-ref (dom/get-target-val e)) (reset! value-ref (dom/get-target-val e))
(js/console.log "e" e (dom/get-target-val e))
(on-update-value-debounced e))) (on-update-value-debounced e)))
value-error? (when (keyword? @token-resolve-result) value-error? (when (keyword? @token-resolve-result)
(= (namespace @token-resolve-result) "error")) (= (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" [:& tokens.common/labeled-input {:label "Value"
:input-props {:default-value @value-ref :input-props {:default-value @value-ref
:on-blur on-update-value :on-blur on-update-value
:on-change on-update-value :on-change on-update-value}
:type (when color? "color")}}] :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 [:div {:class (stl/css-case :resolved-value true
:resolved-value-placeholder (nil? @token-resolve-result) :resolved-value-placeholder (nil? @token-resolve-result)
:resolved-value-error value-error?)} :resolved-value-error value-error?)}

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

@ -48,3 +48,18 @@
.resolved-value-error { .resolved-value-error {
color: var(--status-color-error-500); 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;
}