From 625cbfc50a56cb3a4d6bb55161427f7b83ec0353 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Mon, 10 Mar 2025 17:28:41 +0100 Subject: [PATCH] :tada: Add variants properties to inspect panel --- common/src/app/common/logic/variants.cljc | 11 +++- .../src/app/main/data/workspace/variants.cljs | 2 +- .../src/app/main/ui/inspect/attributes.cljs | 40 +++++++++---- .../main/ui/inspect/attributes/layout.cljs | 4 +- .../main/ui/inspect/attributes/variant.cljs | 56 +++++++++++++++++++ .../main/ui/inspect/attributes/variant.scss | 25 +++++++++ .../sidebar/options/menus/component.cljs | 20 +------ frontend/translations/en.po | 10 ++++ frontend/translations/es.po | 10 ++++ 9 files changed, 146 insertions(+), 32 deletions(-) create mode 100644 frontend/src/app/main/ui/inspect/attributes/variant.cljs create mode 100644 frontend/src/app/main/ui/inspect/attributes/variant.scss diff --git a/common/src/app/common/logic/variants.cljc b/common/src/app/common/logic/variants.cljc index cdd24f80d..c624c757b 100644 --- a/common/src/app/common/logic/variants.cljc +++ b/common/src/app/common/logic/variants.cljc @@ -60,6 +60,11 @@ :value v}) remaining)] (into assigned new-properties))) +(defn- dashes-to-end + [property-values] + (let [dashes (if (some #(= % "--") property-values) ["--"] [])] + (concat (remove #(= % "--") property-values) dashes))) + (defn extract-properties-values [data objects variant-id] @@ -68,8 +73,10 @@ (group-by :name) (map (fn [[k v]] {:name k - :values (distinct - (map #(if (str/empty? (:value %)) "--" (:value %)) v))})))) + :value (->> v + (map #(if (str/empty? (:value %)) "--" (:value %))) + distinct + dashes-to-end)})))) (defn generate-update-property-name diff --git a/frontend/src/app/main/data/workspace/variants.cljs b/frontend/src/app/main/data/workspace/variants.cljs index 45a5ba52a..1c38fc82f 100644 --- a/frontend/src/app/main/data/workspace/variants.cljs +++ b/frontend/src/app/main/data/workspace/variants.cljs @@ -180,7 +180,7 @@ value (str clv/value-prefix (-> (clv/extract-properties-values data objects (:variant-id component)) last - :values + :value count inc)) diff --git a/frontend/src/app/main/ui/inspect/attributes.cljs b/frontend/src/app/main/ui/inspect/attributes.cljs index b95e5b868..107010049 100644 --- a/frontend/src/app/main/ui/inspect/attributes.cljs +++ b/frontend/src/app/main/ui/inspect/attributes.cljs @@ -7,6 +7,8 @@ (ns app.main.ui.inspect.attributes (:require-macros [app.main.style :as stl]) (:require + [app.common.data.macros :as dm] + [app.common.types.component :as ctc] [app.common.types.components-list :as ctkl] [app.main.ui.hooks :as hooks] [app.main.ui.inspect.annotation :refer [annotation]] @@ -20,6 +22,7 @@ [app.main.ui.inspect.attributes.stroke :refer [stroke-panel]] [app.main.ui.inspect.attributes.svg :refer [svg-panel]] [app.main.ui.inspect.attributes.text :refer [text-panel]] + [app.main.ui.inspect.attributes.variant :refer [variant-panel*]] [app.main.ui.inspect.exports :refer [exports]] [rumext.v2 :as mf])) @@ -31,15 +34,29 @@ :circle [:geometry :fill :stroke :shadow :blur :svg :layout-element] :path [:geometry :fill :stroke :shadow :blur :svg :layout-element] :image [:image :geometry :fill :stroke :shadow :blur :svg :layout-element] - :text [:geometry :text :shadow :blur :stroke :layout-element]}) + :text [:geometry :text :shadow :blur :stroke :layout-element] + :variant [:variant :geometry :fill :stroke :shadow :blur :layout :layout-element]}) (mf/defc attributes [{:keys [page-id file-id shapes frame from libraries share-id objects]}] - (let [shapes (hooks/use-equal-memo shapes) - type (if (= (count shapes) 1) (-> shapes first :type) :multiple) - options (type->options type) - content (when (= (count shapes) 1) - (ctkl/get-component-annotation (first shapes) libraries))] + (let [shapes (hooks/use-equal-memo shapes) + first-shape (first shapes) + data (dm/get-in libraries [file-id :data]) + first-component (ctkl/get-component data (:component-id first-shape)) + type (cond + (and (= (count shapes) 1) + (or (ctc/is-variant-container? first-shape) + (ctc/is-variant? first-component))) + :variant + + (= (count shapes) 1) + (:type first-shape) + + :else + :multiple) + options (type->options type) + annotation-content (when (= (count shapes) 1) + (ctkl/get-component-annotation first-shape libraries))] [:div {:class (stl/css-case :element-options true :workspace-element-options (= from :workspace))} @@ -54,14 +71,17 @@ :blur blur-panel :image image-panel :text text-panel - :svg svg-panel) + :svg svg-panel + :variant variant-panel*) {:key idx :shapes shapes :objects objects :frame frame - :from from}]) - (when content - [:& annotation {:content content}]) + :from from + :libraries libraries + :file-id file-id}]) + (when annotation-content + [:& annotation {:content annotation-content}]) [:& exports {:shapes shapes :type type diff --git a/frontend/src/app/main/ui/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/inspect/attributes/layout.cljs index d9b754d22..94fa854ae 100644 --- a/frontend/src/app/main/ui/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/layout.cljs @@ -36,9 +36,9 @@ (for [property properties] (when-let [value (css/get-css-value objects shape property)] (let [property-name (cmm/get-css-rule-humanized property)] - [:div {:class (stl/css :layout-row)} + [:div {:class (stl/css :layout-row) + :key (dm/str "layout-" (:id shape) "-" (d/name property))} [:div {:title property-name - :key (dm/str "layout-" (:id shape) "-" (d/name property)) :class (stl/css :global/attr-label)} property-name] [:div {:class (stl/css :global/attr-value)} diff --git a/frontend/src/app/main/ui/inspect/attributes/variant.cljs b/frontend/src/app/main/ui/inspect/attributes/variant.cljs new file mode 100644 index 000000000..30b20dc55 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/attributes/variant.cljs @@ -0,0 +1,56 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.main.ui.inspect.attributes.variant + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data.macros :as dm] + [app.common.logic.variants :as clv] + [app.common.types.component :as ctc] + [app.common.types.components-list :as ctkl] + [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [inspect-title-bar]] + [app.util.i18n :refer [tr]] + [cuerdas.core :as str] + [rumext.v2 :as mf])) + +(mf/defc variant-block* + [{:keys [name value]}] + [:div {:title value + :class (stl/css :variant-row)} + [:div {:class (stl/css :global/attr-label)} name] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data value} + [:div {:class (stl/css :button-children)} value]]]]) + + +(mf/defc variant-panel* + [{:keys [objects shapes libraries file-id] :as kk} ] + (let [shape (->> shapes first) + title (cond + (ctc/is-variant-container? shape) + "inspect.attributes.variant.component" + (ctc/main-instance? shape) + "inspect.attributes.variant.variant" + :else + "inspect.attributes.variant.copy") + + properties (mf/with-memo [objects shape] + (let [data (dm/get-in libraries [file-id :data]) + is-container? (ctc/is-variant-container? shape) + component (when-not is-container? (ctkl/get-component data (:component-id shape)))] + (if is-container? + (->> (clv/extract-properties-values data objects (:id shape)) + (map #(update % :value (partial str/join ", ")))) + (->> (:variant-properties component) + (map #(update % :value (fn [v] (if (str/blank? v) "--" v))))))))] + [:div {:class (stl/css :attributes-block)} + [:& inspect-title-bar + {:title (tr title) + :class (stl/css :title-spacing-variant)}] + + (for [[pos property] (map-indexed vector properties)] + [:> variant-block* {:key (dm/str "variant-property-" pos) :name (:name property) :value (:value property)}])])) diff --git a/frontend/src/app/main/ui/inspect/attributes/variant.scss b/frontend/src/app/main/ui/inspect/attributes/variant.scss new file mode 100644 index 000000000..ef8af2983 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/attributes/variant.scss @@ -0,0 +1,25 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; +} + +.title-spacing-variant { + @extend .attr-title; +} + +.variant-row { + @extend .attr-row; + height: fit-content; +} + +.button-children { + @extend .copy-button-children; + word-break: break-word; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index 8233c87c9..d9661d7d9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -9,6 +9,7 @@ (:require [app.common.data.macros :as dm] [app.common.files.helpers :as cfh] + [app.common.logic.variants :as clv] [app.common.types.component :as ctk] [app.common.types.file :as ctf] [app.main.data.helpers :as dsh] @@ -758,23 +759,8 @@ first-variant (get objects (first (:shapes shape))) variant-id (:variant-id first-variant) - dashes-to-end (mf/use-fn - (fn [data] - (let [dashes (if (some #(= % "--") data) ["--"] [])] - (concat (remove #(= % "--") data) dashes)))) - properties (mf/with-memo [data objects variant-id] - (->> (dwv/find-related-components data objects variant-id) - (mapcat :variant-properties) - (group-by :name) - (map-indexed (fn [index [k v]] - {:name k - :pos index - :values (->> v - (map #(if (str/empty? (:value %)) "--" (:value %))) - distinct - dashes-to-end)})))) - + (clv/extract-properties-values data objects (:id shape))) menu-open* (mf/use-state false) menu-open? (deref menu-open*) @@ -860,7 +846,7 @@ (when-not multi? [:* (for [[pos property] (map vector (range) properties)] - (let [val (str/join ", " (:values property))] + (let [val (str/join ", " (:value property))] [:div {:key (str (:id shape) pos) :class (stl/css :variant-property-row)} [:> input-with-values* {:name (:name property) :values val diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a14ec64d2..cbdd7d04c 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1530,6 +1530,16 @@ msgstr "Shadow" msgid "inspect.attributes.size" msgstr "Size and position" +#: src/app/main/ui/viewer/inspect/attributes/variant.cljs:40 +msgid "inspect.attributes.variant.variant" +msgstr "Variant properties" + +msgid "inspect.attributes.variant.component" +msgstr "Component properties" + +msgid "inspect.attributes.variant.copy" +msgstr "Copy properties" + #: src/app/main/ui/viewer/inspect/attributes/stroke.cljs:52 msgid "inspect.attributes.stroke" msgstr "Stroke" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1cbe5ab65..b700fadbc 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1532,6 +1532,16 @@ msgstr "Sombra" msgid "inspect.attributes.size" msgstr "Tamaño y posición" +#: src/app/main/ui/viewer/inspect/attributes/variant.cljs:40 +msgid "inspect.attributes.variant.variant" +msgstr "Propiedades de la variante" + +msgid "inspect.attributes.variant.component" +msgstr "Propiedades del componente" + +msgid "inspect.attributes.variant.copy" +msgstr "Propiedades de la copia" + #: src/app/main/ui/viewer/inspect/attributes/stroke.cljs:52 msgid "inspect.attributes.stroke" msgstr "Borde"