mirror of
https://github.com/penpot/penpot.git
synced 2025-05-30 01:06:45 +02:00
Merge pull request #5581 from penpot/eva-fix-broken-token-context-menu
This commit is contained in:
commit
b81f4e913f
34 changed files with 152 additions and 137 deletions
|
@ -198,7 +198,6 @@
|
|||
(tr "shortcuts.toggle-lock")
|
||||
(tr "shortcuts.toggle-lock-size")
|
||||
(tr "shortcuts.toggle-rulers")
|
||||
(tr "shortcuts.toggle-rules")
|
||||
(tr "shortcuts.toggle-snap-guides")
|
||||
(tr "shortcuts.toggle-snap-ruler-guide")
|
||||
(tr "shortcuts.toggle-textpalette")
|
||||
|
|
|
@ -321,8 +321,9 @@
|
|||
children]])]))
|
||||
|
||||
(mf/defc menu-tree
|
||||
[{:keys [selected-shapes submenu-offset submenu-direction type] :as context-data}]
|
||||
(let [entries (if (seq selected-shapes)
|
||||
[{:keys [selected-shapes submenu-offset submenu-direction type errors] :as context-data}]
|
||||
(let [entries (if (and (not (some? errors))
|
||||
(seq selected-shapes))
|
||||
(if (some? type)
|
||||
(submenu-actions-selection-actions context-data)
|
||||
(selection-actions context-data))
|
||||
|
@ -343,7 +344,7 @@
|
|||
:selected? selected?}])])))
|
||||
|
||||
(mf/defc token-context-menu-tree
|
||||
[{:keys [width direction] :as mdata}]
|
||||
[{:keys [width direction errors] :as mdata}]
|
||||
(let [objects (mf/deref refs/workspace-page-objects)
|
||||
selected (mf/deref refs/selected-shapes)
|
||||
selected-shapes (into [] (keep (d/getf objects)) selected)
|
||||
|
@ -354,6 +355,7 @@
|
|||
[:& menu-tree {:submenu-offset width
|
||||
:submenu-direction direction
|
||||
:token token
|
||||
:errors errors
|
||||
:selected-token-set-path selected-token-set-path
|
||||
:selected-shapes selected-shapes}]]))
|
||||
|
||||
|
|
|
@ -83,6 +83,7 @@
|
|||
(st/emit! (dt/show-token-context-menu
|
||||
{:type :token
|
||||
:position (dom/get-client-position event)
|
||||
:errors (:errors token)
|
||||
:token-name (:name token)}))))
|
||||
|
||||
on-toggle-open-click (mf/use-fn
|
||||
|
@ -121,6 +122,7 @@
|
|||
[:> icon-button* {:on-click on-popover-open-click
|
||||
:variant "ghost"
|
||||
:icon "add"
|
||||
;; TODO: This needs translation
|
||||
:aria-label (str "Add token: " title)}]]
|
||||
(when open?
|
||||
[:& cmm/asset-section-block {:role :content}
|
||||
|
|
|
@ -174,6 +174,7 @@
|
|||
[err]
|
||||
(let [[header-1 header-2 & errors] (str/split err "\n")]
|
||||
(when (and
|
||||
;; TODO: This needs translations
|
||||
(= header-1 "Error: ")
|
||||
(= header-2 "Reference Errors:"))
|
||||
errors)))
|
||||
|
@ -206,10 +207,11 @@
|
|||
|
||||
;; === Errors
|
||||
|
||||
(defn humanize-errors [{:keys [errors value] :as _token}]
|
||||
(defn humanize-errors [{:keys [errors] :as token}]
|
||||
(->> (map (fn [err]
|
||||
(case err
|
||||
:error.style-dictionary/missing-reference (str "Could not resolve reference token with the name: " value)
|
||||
(case (:error/code err)
|
||||
;; TODO: This needs translations
|
||||
:error.style-dictionary/missing-reference (str "Could not resolve reference token with the name: " (:error/value err))
|
||||
nil))
|
||||
errors)
|
||||
(str/join "\n")))
|
||||
|
|
|
@ -1,12 +1,14 @@
|
|||
(ns app.main.ui.workspace.tokens.token-pill
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.files.helpers :as cfh]
|
||||
[app.common.types.tokens-lib :as ctob]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
||||
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
|
||||
[app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]]
|
||||
[app.main.ui.workspace.tokens.style-dictionary :as sd]
|
||||
[app.main.ui.workspace.tokens.token :as wtt]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
@ -16,11 +18,18 @@
|
|||
[{:keys [on-click token theme-token full-applied on-context-menu half-applied]}]
|
||||
(let [{:keys [name value resolved-value errors]} token
|
||||
errors? (or (nil? theme-token) (and (seq errors) (seq (:errors theme-token))))
|
||||
|
||||
color (when (seq (ctob/find-token-value-references value))
|
||||
(wtt/resolved-value-hex theme-token))
|
||||
|
||||
contains-path? (str/includes? name ".")
|
||||
splitted-name (cfh/split-string-half name)
|
||||
color (or color (wtt/resolved-value-hex token))
|
||||
on-click
|
||||
(mf/use-callback
|
||||
(mf/deps errors? on-click)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(when (and (not (seq errors)) on-click)
|
||||
(on-click event))))
|
||||
|
||||
token-status-id (cond
|
||||
half-applied
|
||||
|
@ -35,25 +44,34 @@
|
|||
:token-pill-invalid-applied (and full-applied errors?))
|
||||
:type "button"
|
||||
:title (cond
|
||||
errors? (sd/humanize-errors token)
|
||||
errors? (if (nil? theme-token)
|
||||
(tr "workspace.token-set.not-active")
|
||||
(sd/humanize-errors token))
|
||||
:else (->> [(str "Token: " name)
|
||||
(tr "workspace.token.original-value" value)
|
||||
(tr "workspace.token.resolved-value" resolved-value)]
|
||||
(str/join "\n")))
|
||||
:on-click on-click
|
||||
:on-context-menu on-context-menu
|
||||
:disabled errors?}
|
||||
:on-context-menu on-context-menu}
|
||||
(cond
|
||||
color
|
||||
[:& color-bullet {:color color
|
||||
:mini true}]
|
||||
errors?
|
||||
[:> icon*
|
||||
{:icon-id "broken-link"
|
||||
:class (stl/css :token-pill-icon)}]
|
||||
|
||||
color
|
||||
[:& color-bullet {:color color
|
||||
:mini true}]
|
||||
:else
|
||||
[:> token-status-icon*
|
||||
{:icon-id token-status-id
|
||||
:class (stl/css :token-pill-icon)}])
|
||||
name]))
|
||||
(if contains-path?
|
||||
[:span {:class (stl/css :divided-name-wrapper)
|
||||
:aria-label name}
|
||||
[:span {:class (stl/css :first-name-wrapper)}
|
||||
(first splitted-name)]
|
||||
[:span {:class (stl/css :last-name-wrapper)}
|
||||
(last splitted-name)]]
|
||||
[:span {:class (stl/css :name-wrapper)
|
||||
:aria-label name}
|
||||
name])]))
|
|
@ -53,6 +53,32 @@
|
|||
--token-pill-accent: var(--color-background-tertiary);
|
||||
}
|
||||
}
|
||||
.name-wrapper {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.divided-name-wrapper {
|
||||
height: $s-16;
|
||||
}
|
||||
|
||||
.first-name-wrapper {
|
||||
display: inline-block;
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.last-name-wrapper {
|
||||
display: inline-block;
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.token-pill-applied {
|
||||
--token-pill-background: var(--color-token-background);
|
||||
|
@ -84,8 +110,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.token-pill-invalid,
|
||||
.token-pill-invalid-applied {
|
||||
.token-pill-invalid {
|
||||
--token-pill-background: var(--color-background-tertiary);
|
||||
--token-pill-foreground: var(--color-foreground-error);
|
||||
--token-pill-border: var(--color-background-tertiary);
|
||||
|
@ -101,6 +126,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.token-pill-invalid-applied {
|
||||
--token-pill-border: var(--color-foreground-error);
|
||||
&:hover,
|
||||
&:focus-visible,
|
||||
&:disabled {
|
||||
--token-pill-border: var(--color-foreground-error);
|
||||
}
|
||||
}
|
||||
|
||||
.token-pill-icon {
|
||||
color: var(--token-pill-accent);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue