🎉 Add inspect tab to workspace

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -53,6 +53,12 @@
     }
   }
 
+  &.inspect {
+    & > :first-child {
+      margin-top: 7px;
+    }
+  }
+
   .element-set {
     border-bottom: 1px solid $color-gray-60;
     color: $color-gray-20;

frontend/resources/styles/main/partials/sidebar.scss

@@ -197,6 +197,24 @@
   height: 100%;
   width: 100%;
   overflow-y: auto;
+
+  &.inspect {
+    .tab-container-tabs {
+      padding-bottom: 0.5rem;
+      background-color: $color-gray-50;
+      border-bottom: 1px solid $color-gray-60;
+      height: 3rem;
+    }
+
+    .tab-container-tab-title {
+      border-radius: 4px;
+
+      &.current {
+        background-color: $color-primary;
+        color: black;
+      }
+    }
+  }
 }
 
 .element-list {

frontend/resources/styles/main/partials/workspace.scss

@@ -47,10 +47,15 @@ $height-palette-max: 80px;
   }
 
   .settings-bar.settings-bar-right {
+    transition: width 0.2s;
     min-width: $width-settings-bar;
-    max-width: 500px;
+    max-width: $width-settings-bar * 3;
     width: $width-settings-bar;
     grid-area: right-sidebar;
+
+    &.expanded {
+      width: $width-settings-bar * 3;
+    }
   }
 
   .workspace-loader {

frontend/src/app/main/data/workspace.cljs

@@ -1818,6 +1818,19 @@
         (rx/empty)))))
 
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Inspect
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+
+(defn set-inspect-expanded
+  [expanded?]
+  (ptk/reify ::set-inspect-expanded
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:workspace-local :inspect-expanded] expanded?))))
+
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Exports
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/src/app/main/data/workspace/layout.cljs

@@ -44,7 +44,7 @@
    {:del #{:document-history :assets}
     :add #{:sitemap :layers}}})
 
-(s/def ::options-mode #{:design :prototype})
+(s/def ::options-mode #{:design :prototype :inspect})
 
 (def default-layout
   #{:sitemap

frontend/src/app/main/refs.cljs

@@ -165,6 +165,12 @@
 (def options-mode
   (l/derived :options-mode workspace-local))
 
+(def options-mode-global
+  (l/derived :options-mode workspace-global))
+
+(def inspect-expanded
+  (l/derived :inspect-expanded workspace-local))
+
 (def vbox
   (l/derived :vbox workspace-local))
 

frontend/src/app/main/ui/viewer/handoff/code.cljs

@@ -7,7 +7,9 @@
 (ns app.main.ui.viewer.handoff.code
   (:require
    ["js-beautify" :as beautify]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
+   [app.common.uuid :as uuid]
    [app.main.data.events :as ev]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -21,8 +23,10 @@
    [potok.core :as ptk]
    [rumext.v2 :as mf]))
 
-(defn generate-markup-code [_type shapes]
+(defn generate-markup-code [_type shapes from]
-  (let [frame (dom/query js/document "#svg-frame")
+  (let [frame (if (= from :workspace)
+                (dom/query js/document (dm/str "#shape-" uuid/zero))
+                (dom/query js/document "#svg-frame"))
         markup-shape
         (fn [shape]
           (let [selector (str "#shape-" (:id shape) (when (= :text (:type shape)) " .root"))]
@@ -50,7 +54,7 @@
     (mf/deref get-layout-children-refs)))
 
 (mf/defc code
-  [{:keys [shapes frame on-expand]}]
+  [{:keys [shapes frame on-expand from]}]
   (let [style-type  (mf/use-state "css")
         markup-type (mf/use-state "svg")
         shapes      (->> shapes
@@ -62,7 +66,7 @@
         style-code (-> (cg/generate-style-code @style-type shapes)
                        (format-code "css"))
 
-        markup-code (-> (mf/use-memo (mf/deps shapes) #(generate-markup-code @markup-type shapes))
+        markup-code (-> (mf/use-memo (mf/deps shapes) #(generate-markup-code @markup-type shapes from))
                         (format-code "svg"))
 
         on-markup-copied

frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.viewer.handoff.right-sidebar
   (:require
+   [app.main.data.workspace :as dw]
    [app.main.ui.components.shape-icon :as si]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.icons :as i]
@@ -16,12 +17,16 @@
    [rumext.v2 :as mf]))
 
 (mf/defc right-sidebar
-  [{:keys [frame page file selected]}]
+  [{:keys [frame page file selected shapes page-id file-id from]
+    :or {from :handoff}}]
   (let [expanded      (mf/use-state false)
         section       (mf/use-state :info #_:code)
-        shapes        (resolve-shapes (:objects page) selected)
+        shapes        (or shapes
+                          (resolve-shapes (:objects page) selected))
 
-        first-shape   (first shapes)]
+        first-shape   (first shapes)
+        page-id       (or page-id (:id page))
+        file-id       (or file-id (:id file))]
 
     [:aside.settings-bar.settings-bar-right {:class (when @expanded "expanded")}
      [:div.settings-bar-inside
@@ -48,18 +53,24 @@
              ;;   handoff.tabs.code.selected.svg-raw
              ;;   handoff.tabs.code.selected.text
              [:span.tool-window-bar-title (:name first-shape)]])]
-         [:div.tool-window-content
+         [:div.tool-window-content.inspect
           [:& tab-container {:on-change-tab #(do
                                                (reset! expanded false)
-                                               (reset! section %))
+                                               (reset! section %)
+                                               (when (= from :workspace)
+                                                 (dw/set-inspect-expanded false)))
                              :selected @section}
            [:& tab-element {:id :info :title (tr "handoff.tabs.info")}
-            [:& attributes {:page-id (:id page)
+            [:& attributes {:page-id page-id
-                            :file-id (:id file)
+                            :file-id file-id
                             :frame frame
                             :shapes shapes}]]
 
            [:& tab-element {:id :code :title (tr "handoff.tabs.code")}
             [:& code {:frame frame
                       :shapes shapes
-                      :on-expand #(swap! expanded not)}]]]]])]]))
+                      :on-expand (fn[]
+                                   (when (= from :workspace)
+                                     (dw/set-inspect-expanded (not expanded)))
+                                   (swap! expanded not))
+                      :from from}]]]]])]]))

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -29,8 +29,10 @@
 (mf/defc left-sidebar
   {:wrap [mf/memo]}
   [{:keys [layout] :as props}]
-  (let [section    (cond (contains? layout :layers) :layers
+  (let [options-mode        (mf/deref refs/options-mode-global)
-                         (contains? layout :assets) :assets)
+        mode-inspect?       (= options-mode :inspect)
+        section             (cond (or mode-inspect? (contains? layout :layers)) :layers
+                                  (contains? layout :assets) :assets)
         shortcuts? (contains? layout :shortcuts)
 
         {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
@@ -68,8 +70,9 @@
                 [:& sitemap {:layout layout}]
                 [:& layers-toolbox]]]
 
-              [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
+              (when-not mode-inspect?
-               [:& assets-toolbox]]]])]]]))
+                [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
+                 [:& assets-toolbox]])]])]]]))
 
 ;; --- Right Sidebar (Component)
 
@@ -78,9 +81,10 @@
    ::mf/wrap [mf/memo]}
   [props]
   (let [layout (obj/get props "layout")
-        drawing-tool (:tool (mf/deref refs/workspace-drawing))]
+        drawing-tool (:tool (mf/deref refs/workspace-drawing))
+        expanded (mf/deref refs/inspect-expanded)]
 
-    [:aside.settings-bar.settings-bar-right
+    [:aside.settings-bar {:class (when expanded "expanded")}
      [:div.settings-bar-inside
       (cond
         (= drawing-tool :comments)

frontend/src/app/main/ui/workspace/sidebar/options.cljs

@@ -8,11 +8,13 @@
   (:require
    [app.common.data :as d]
    [app.common.geom.shapes :as gsh]
+   [app.common.pages.helpers :as cph]
    [app.main.data.workspace :as udw]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.viewer.handoff.right-sidebar :as hrs]
    [app.main.ui.workspace.sidebar.options.menus.align :refer [align-options]]
    [app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options]]
    [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]]
@@ -62,17 +64,21 @@
 (mf/defc options-content
   {::mf/wrap [mf/memo]}
   [{:keys [selected section shapes shapes-with-children page-id file-id]}]
-  (let [drawing           (mf/deref refs/workspace-drawing)
+  (let [drawing              (mf/deref refs/workspace-drawing)
-        objects           (mf/deref refs/workspace-page-objects)
+        objects              (mf/deref refs/workspace-page-objects)
-        shared-libs       (mf/deref refs/workspace-libraries)
+        shared-libs          (mf/deref refs/workspace-libraries)
-        selected-shapes   (into [] (keep (d/getf objects)) selected)]
+        selected-shapes      (into [] (keep (d/getf objects)) selected)
+        first-selected-shape (first selected-shapes)
+        shape-parent-frame   (cph/get-frame objects (:frame-id first-selected-shape))
+        on-change-tab
+        (fn [options-mode]
+          (st/emit! (udw/set-options-mode options-mode))
+          (if (= options-mode :inspect) ;;TODO maybe move this logic to set-options-mode
+            (st/emit! :interrupt (udw/set-workspace-read-only true))
+            (st/emit! :interrupt (udw/set-workspace-read-only false))))]
     [:div.tool-window
      [:div.tool-window-content
-      [:& tab-container {:on-change-tab (fn [options-mode]
+      [:& tab-container {:on-change-tab on-change-tab
-                                          (st/emit! (udw/set-options-mode options-mode))
-                                          (if (= options-mode :prototype) ;;TODO remove, only for test palba
-                                            (st/emit! :interrupt (udw/deselect-all true) (udw/set-workspace-read-only true))
-                                            (st/emit! :interrupt (udw/set-workspace-read-only false))))
                          :selected section}
        [:& tab-element {:id :design
                         :title (tr "workspace.options.design")}
@@ -99,7 +105,16 @@
        [:& tab-element {:id :prototype
                         :title (tr "workspace.options.prototype")}
         [:div.element-options
-         [:& interactions-menu {:shape (first shapes)}]]]]]]))
+         [:& interactions-menu {:shape (first shapes)}]]]
+
+       [:& tab-element {:id :inspect
+                        :title (tr "workspace.options.inspect")}
+        [:div.element-options
+         [:& hrs/right-sidebar {:page-id  page-id
+                                :file-id  file-id
+                                :frame    shape-parent-frame
+                                :shapes   selected-shapes
+                                :from :workspace}]]]]]]))
 
 ;; TODO: this need optimizations, selected-objects and
 ;; selected-objects-with-children are derefed always but they only

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -132,6 +132,7 @@
         text-editing?     (and edition (= :text (get-in base-objects [edition :type])))
 
         workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
+        mode-inspect?       (= options-mode :inspect)
 
         on-click          (actions/on-click hover selected edition drawing-path? drawing-tool space? selrect)
         on-context-menu   (actions/on-context-menu hover hover-ids workspace-read-only?)
@@ -181,7 +182,9 @@
                                           (contains? layout :snap-grid))
                                       (or drawing-obj transform))
         show-selrect?            (and selrect (empty? drawing) (not text-editing?))
-        show-measures?           (and (not transform) (not node-editing?) show-distances?)
+        show-measures?           (and (not transform)
+                                      (not node-editing?)
+                                      (or show-distances? mode-inspect?))
         show-artboard-names?     (contains? layout :display-artboard-names)
         show-rules?              (and (contains? layout :rules) (not (contains? layout :hide-ui)))
 
@@ -190,7 +193,7 @@
 
     (hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport? workspace-read-only?)
     (hooks/setup-viewport-size viewport-ref)
-    (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing?)
+    (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? workspace-read-only?)
     (hooks/setup-keyboard alt? mod? space?)
     (hooks/setup-hover-shapes page-id move-stream base-objects transform selected mod? hover hover-ids hover-top-frame-id @hover-disabled? focus zoom)
     (hooks/setup-viewport-modifiers modifiers base-objects)

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -63,16 +63,16 @@
        ;; We schedule the event so it fires after `initialize-page` event
        (timers/schedule #(st/emit! (dw/initialize-viewport size)))))))
 
-(defn setup-cursor [cursor alt? mod? space? panning drawing-tool drawing-path? path-editing?]
+(defn setup-cursor [cursor alt? mod? space? panning drawing-tool drawing-path? path-editing? workspace-read-only?]
   (mf/use-effect
-   (mf/deps @cursor @alt? @mod? @space? panning drawing-tool drawing-path? path-editing?)
+   (mf/deps @cursor @alt? @mod? @space? panning drawing-tool drawing-path? path-editing? workspace-read-only?)
    (fn []
      (let [show-pen? (or (= drawing-tool :path)
                          (and drawing-path?
                               (not= drawing-tool :curve)))
            new-cursor
            (cond
-             (and @mod? @space?)            (utils/get-cursor :zoom)
+             (and @mod? @space?)             (utils/get-cursor :zoom)
              (or panning @space?)            (utils/get-cursor :hand)
              (= drawing-tool :comments)      (utils/get-cursor :comments)
              (= drawing-tool :frame)         (utils/get-cursor :create-artboard)
@@ -81,7 +81,10 @@
              show-pen?                       (utils/get-cursor :pen)
              (= drawing-tool :curve)         (utils/get-cursor :pencil)
              drawing-tool                    (utils/get-cursor :create-shape)
-             (and @alt? (not path-editing?)) (utils/get-cursor :duplicate)
+             (and
+              @alt?
+              (not path-editing?)
+              (not workspace-read-only?))    (utils/get-cursor :duplicate)
              :else                           (utils/get-cursor :pointer-inner))]
 
        (when (not= @cursor new-cursor)

frontend/translations/en.po

@@ -3619,6 +3619,9 @@ msgstr "Position"
 msgid "workspace.options.prototype"
 msgstr "Prototype"
 
+msgid "workspace.options.inspect"
+msgstr "Inspect"
+
 msgid "workspace.options.radius"
 msgstr "Radius"
 

frontend/translations/es.po

@@ -4019,6 +4019,9 @@ msgstr "Posición"
 msgid "workspace.options.prototype"
 msgstr "Prototipo"
 
+msgid "workspace.options.inspect"
+msgstr "Inspeccionar"
+
 msgid "workspace.options.radius"
 msgstr "Radio"