Merge pull request #6865 from penpot/xaviju-11283-info-tab-visibility-attrs

✨ Add visibility group and attributes to info tab

CHANGES.md

@@ -14,6 +14,7 @@
 - Improve dashboard's sidebar [Taiga #10700](https://tree.taiga.io/project/penpot/us/10700)
 - Change "Save color" button to primary button [Taiga #9410](https://tree.taiga.io/project/penpot/issue/9410)
 - Support for exif rotated images [GitHub #6767](https://github.com/penpot/penpot/issues/6767)
+- Display Blend Mode and Layer Opacity properties in the Inspect tab [Taiga #11283](https://tree.taiga.io/project/penpot/issue/11283)
 
 ### :bug: Bugs fixed
 - Copying font size does not copy the unit [Taiga #11143](https://tree.taiga.io/project/penpot/issue/11143)

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

@@ -22,18 +22,19 @@
    [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.attributes.visibility :refer [visibility-panel*]]
    [app.main.ui.inspect.exports :refer [exports]]
    [rumext.v2 :as mf]))
 
 (def type->options
   {:multiple [:fill :stroke :image :text :shadow :blur :layout-element]
-   :frame    [:geometry :fill :stroke :shadow :blur :layout :layout-element]
+   :frame    [:visibility :geometry :fill :stroke :shadow :blur :layout :layout-element]
-   :group    [:geometry :svg :layout-element]
+   :group    [:visibility :geometry :svg :layout-element]
-   :rect     [:geometry :fill :stroke :shadow :blur :svg :layout-element]
+   :rect     [:visibility :geometry :fill :stroke :shadow :blur :svg :layout-element]
-   :circle   [:geometry :fill :stroke :shadow :blur :svg :layout-element]
+   :circle   [:visibility :geometry :fill :stroke :shadow :blur :svg :layout-element]
-   :path     [:geometry :fill :stroke :shadow :blur :svg :layout-element]
+   :path     [:visibility :geometry :fill :stroke :shadow :blur :svg :layout-element]
-   :image    [:image :geometry :fill :stroke :shadow :blur :svg :layout-element]
+   :image    [:visibility :image :geometry :fill :stroke :shadow :blur :svg :layout-element]
-   :text     [:geometry :text :shadow :blur :stroke :layout-element]
+   :text     [:visibility :geometry :text :shadow :blur :stroke :layout-element]
    :variant  [:variant :geometry :fill :stroke :shadow :blur :layout :layout-element]})
 
 (mf/defc attributes
@@ -68,6 +69,7 @@
              :stroke           stroke-panel
              :shadow           shadow-panel
              :blur             blur-panel
+             :visibility       visibility-panel*
              :text             text-panel
              :svg              svg-panel
              :variant          variant-panel*)

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

@@ -16,7 +16,13 @@
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(def properties [:width :height :left :top :border-radius :transform])
+(def properties
+  [:width
+   :height
+   :left
+   :top
+   :border-radius
+   :transform])
 
 (mf/defc geometry-block
   [{:keys [objects shape]}]

frontend/src/app/main/ui/inspect/attributes/image.scss

@@ -1,45 +0,0 @@
-// 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;
-  margin-bottom: $s-16;
-}
-
-.image-wrapper {
-  background-color: var(--menu-background-color);
-  position: relative;
-  @include flexCenter;
-  width: $s-248;
-  height: $s-160;
-  max-height: $s-160;
-  max-width: $s-248;
-  margin: $s-8 0;
-  border-radius: $br-8;
-
-  img {
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-  }
-}
-
-.image-row {
-  @extend .attr-row;
-}
-
-.button-children {
-  @extend .copy-button-children;
-}
-
-.download-button {
-  @extend .button-secondary;
-  @include uppercaseTitleTipography;
-  height: $s-32;
-  margin-top: $s-4;
-}

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

@@ -0,0 +1,62 @@
+;; 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.visibility
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [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 :as cmm]
+   [app.util.code-gen.style-css :as css]
+   [rumext.v2 :as mf]))
+
+(def properties
+  [:opacity
+   :blend-mode
+   :visibility])
+
+(defn has-visibility-props? [shape]
+  (let [shape-type (:type shape)]
+    (and
+     (not (or (= shape-type :text) (= shape-type :group)))
+     (or (:opacity shape)
+         (:blend-mode shape)
+         (:visibility shape)))))
+
+(mf/defc visibility-block*
+  [{:keys [objects shape]}]
+  (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 :visibility-row)
+               :key   (d/name property)}
+         [:div {:title property-name
+                :class (stl/css :global/attr-label)}
+          property-name]
+         [:div {:class (stl/css :global/attr-value)}
+
+          [:> copy-button* {:data (css/get-css-property objects shape property)}
+           [:div {:class (stl/css :button-children)} value]]]]))))
+
+(mf/defc visibility-panel*
+  [{:keys [objects shapes]}]
+  (let [shapes (mf/with-memo (filter has-visibility-props? shapes))]
+
+    (when (seq shapes)
+      [:div {:class (stl/css :attributes-block)}
+       [:> inspect-title-bar*
+        {:title "Visibility"
+         :class (stl/css :title-spacing-visibility)}
+
+        (when (= (count shapes) 1)
+          [:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
+                            :class (stl/css :copy-btn-title)}])]
+
+       (for [shape shapes]
+         [:> visibility-block* {:shape shape
+                                :objects objects
+                                :key (:id shape)}])])))

frontend/src/app/main/ui/inspect/attributes/visibility.scss

@@ -0,0 +1,27 @@
+// 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-visibility {
+  @extend .attr-title;
+}
+
+.visibility-row {
+  @extend .attr-row;
+}
+
+.button-children {
+  @extend .copy-button-children;
+}
+
+.copy-btn-title {
+  max-width: $s-28;
+}

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

@@ -77,6 +77,7 @@ body {
    :filter
    :opacity
    :overflow
+   :blend-mode
 
    ;; Flex/grid related properties
    :display
@@ -173,8 +174,12 @@ body {
 (defn format-css-property
   [[property value] options]
   (when (some? value)
-    (let [formatted-value (format-css-value property value options)]
+    (let [formatted-value (format-css-value property value options)
-      (dm/fmt "%: %;" (d/name property) formatted-value))))
+          ;; If the property is blend-mode, we should use a different property name.
+          property-name (if (= property :blend-mode)
+                          (dm/str "mix-" (d/name property))
+                          (d/name property))]
+      (dm/fmt "%: %;" property-name formatted-value))))
 
 (defn format-css-properties
   "Format a list of [property value] into a list of css properties in the format 'property: value;'"