🎉 Add shadow panel to inspect styles tab (#7566)

frontend/src/app/main/ui/inspect/attributes/shadow.cljs

@@ -7,11 +7,10 @@
 (ns app.main.ui.inspect.attributes.shadow
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button*]]
    [app.main.ui.components.title-bar :refer [inspect-title-bar*]]
-   [app.main.ui.inspect.attributes.common :refer [color-row]]
+   [app.main.ui.inspect.attributes.common :as cmm]
    [app.util.code-gen.style-css :as css]
    [app.util.code-gen.style-css-formats :refer [format-color-value]]
    [app.util.i18n :refer [tr]]
@@ -31,13 +30,14 @@
 (mf/defc shadow-block [{:keys [shadow]}]
   (let [color-format (mf/use-state :hex)
         color-format* (deref color-format)
+        label (cmm/get-css-rule-humanized (:style shadow))
         on-change-format
         (mf/use-fn
          (fn [format]
            (reset! color-format format)))]
     [:div {:class (stl/css :attributes-shadow-block)}
      [:div {:class (stl/css :shadow-row)}
-      [:div {:class (stl/css :global/attr-label)} (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))]
+      [:div {:class (stl/css :global/attr-label)} label]
       [:div {:class (stl/css :global/attr-value)}
        [:> copy-button* {:data  (shadow-copy-data shadow)
                          :class (stl/css :color-row-copy-btn)}
@@ -51,10 +51,10 @@
          (str (:blur shadow) "px") " "
          (str (:spread shadow) "px")]]]]
 
-     [:& color-row {:color (:color shadow)
-                    :format @color-format
-                    :copy-data (copy-color-data (:color shadow) color-format*)
-                    :on-change-format on-change-format}]]))
+     [:& cmm/color-row {:color (:color shadow)
+                        :format @color-format
+                        :copy-data (copy-color-data (:color shadow) color-format*)
+                        :on-change-format on-change-format}]]))
 
 (mf/defc shadow-panel [{:keys [shapes]}]
   (let [shapes (->> shapes (filter has-shadow?))]

frontend/src/app/main/ui/inspect/styles.cljs

@@ -20,6 +20,7 @@
    [app.main.ui.inspect.styles.panels.geometry :refer [geometry-panel*]]
    [app.main.ui.inspect.styles.panels.layout :refer [layout-panel*]]
    [app.main.ui.inspect.styles.panels.layout-element :refer [layout-element-panel*]]
+   [app.main.ui.inspect.styles.panels.shadow :refer [shadow-panel*]]
    [app.main.ui.inspect.styles.panels.stroke :refer [stroke-panel*]]
    [app.main.ui.inspect.styles.panels.svg :refer [svg-panel*]]
    [app.main.ui.inspect.styles.panels.text :refer [text-panel*]]
@@ -75,6 +76,9 @@
 (defn- has-text? [shape]
   (:content shape))
 
+(defn- has-shadow? [shape]
+  (:shadow shape))
+
 (defn- get-shape-type
   [shapes first-shape first-component]
   (if (= (count shapes) 1)
@@ -199,6 +203,7 @@
               [:> style-box* {:panel :blur}
                [:> blur-panel* {:shapes shapes
                                 :objects objects}]]))
+          ;; TEXT PANEL
           :text
           (let [shapes (filter has-text? shapes)]
             (when (seq shapes)
@@ -207,6 +212,13 @@
                                 :color-space color-space
                                 :objects objects
                                 :resolved-tokens resolved-active-tokens}]]))
+          ;; SHADOW PANEL
+          :shadow
+          (let [shapes (filter has-shadow? shapes)]
+            (when (seq shapes)
+              [:> style-box* {:panel :shadow}
+               [:> shadow-panel* {:shapes shapes
+                                  :color-space color-space}]]))
           ;; DEFAULT WIP
           [:> style-box* {:panel panel}
            [:div color-space]])])]))

frontend/src/app/main/ui/inspect/styles/panels/shadow.cljs

@@ -0,0 +1,33 @@
+;; 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.styles.panels.shadow
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.inspect.attributes.common :as cmm]
+   [app.main.ui.inspect.styles.rows.color-properties-row :refer [color-properties-row*]]
+   [app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]]
+   [app.util.code-gen.style-css :as css]
+   [rumext.v2 :as mf]))
+
+(mf/defc shadow-panel*
+  [{:keys [shapes color-space]}]
+  [:div {:class (stl/css :shadow-panel)}
+   (for [shape shapes]
+     (for [shadow (:shadow shape)]
+       [:div {:key (dm/str (:id shape) (:type shadow)) :class "shadow-shape"}
+        [:> color-properties-row* {:term "Shadow Color"
+                                   :color (:color shadow)
+                                   :format color-space
+                                   :copiable true}]
+        (let [value (dm/str (:offset-x shadow) "px" " " (:offset-y shadow) "px" " " (:blur shadow) "px" " " (:spread shadow) "px")
+              property-name (cmm/get-css-rule-humanized (:style shadow))
+              property-value (css/shadow->css shadow)]
+          [:> properties-row* {:term property-name
+                               :detail (dm/str value)
+                               :property property-value
+                               :copiable true}])]))])

frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs

@@ -8,8 +8,8 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.main.refs :as refs]
-   [app.main.ui.components.color-bullet :as bc]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
+   [app.main.ui.ds.utilities.swatch :refer [swatch*]]
    [app.main.ui.inspect.common.colors :as isc]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -29,8 +29,8 @@
                                  :property-detail-copiable-color (some? color))
             :on-click on-click}
    (when color
-     [:> bc/color-bullet {:color color
-                          :mini true}])
+     [:> swatch* {:background color
+                  :size "small"}])
    (if token
      [:span {:class (stl/css :property-detail-text :property-detail-text-token)}
       (:name token)]

frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs

@@ -50,7 +50,7 @@
                                     (fmt/format-number)) "%"))
 
         formatted-color-value (mf/use-memo
-                               (mf/deps color)
+                               (mf/deps color format color-opacity)
                                #(cond
                                   (some? (:color color)) (case format
                                                            "hex" (dm/str color-value " " color-opacity)

frontend/src/app/util/code_gen/style_css.cljs

@@ -332,4 +332,4 @@ body {
 
 (defn shadow->css
   [shadow]
-  (dm/str "box-shadow: " (format-shadow->css shadow {})))
+  (dm/str "box-shadow: " (format-shadow->css shadow {}) ";"))