🎉 Allow to show master component in assets panel

frontend/resources/locales.json

@@ -3447,6 +3447,11 @@
       "en" : "Go to master component file"
     }
   },
+  "workspace.shape.menu.show-master" : {
+    "translations" : {
+      "en" : "Show master component"
+    }
+  },
   "workspace.shape.menu.group" : {
     "used-in" : [ "src/app/main/ui/workspace/context_menu.cljs:110" ],
     "translations" : {

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

@@ -43,6 +43,7 @@
    [clojure.set :as set]
    [clojure.set :as set]
    [cuerdas.core :as str]
+   [cljs.pprint :refer [pprint]]
    [potok.core :as ptk]))
 
 ;; (log/set-level! :trace)
@@ -84,6 +85,19 @@
     :snap-grid
     :dynamic-alignment})
 
+(def layout-flags
+  {:assets
+   {:del #{:sitemap :layers :document-history }
+    :add #{:assets}}
+
+   :document-history
+   {:del #{:assets :layers :sitemap}
+    :add #{:document-history}}
+
+   :layers
+   {:del #{:document-history :assets}
+    :add #{:sitemap :layers}}})
+
 (s/def ::options-mode #{:design :prototype})
 
 (def workspace-local-default
@@ -103,11 +117,22 @@
    :picked-color nil
    :picked-color-select false})
 
-(def initialize-layout
+(declare ensure-layout)
+
+(defn initialize-layout
+  [layout]
+  (us/verify (s/nilable ::us/string) layout)
   (ptk/reify ::initialize-layout
     ptk/UpdateEvent
     (update [_ state]
-      (assoc state :workspace-layout default-layout))))
+      (assoc state :workspace-layout default-layout))
+
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (when layout
+        (let [layout-flag (keyword layout)]
+          (when (contains? layout-flags layout-flag)
+            (rx/of (ensure-layout layout-flag))))))))
 
 (defn initialize-file
   [project-id file-id]
@@ -388,20 +413,7 @@
 
 ;; --- Toggle layout flag
 
-(def layout-flags
-  {:assets
-   {:del #{:sitemap :layers :document-history }
-    :add #{:assets}}
-
-   :document-history
-   {:del #{:assets :layers :sitemap}
-    :add #{:document-history}}
-
-   :layers
-   {:del #{:document-history :assets}
-    :add #{:sitemap :layers}}})
-
-(defn- ensure-layout
+(defn ensure-layout
   [layout]
   (assert (contains? layout-flags layout)
           (str "unexpected layout name: " layout))
@@ -416,7 +428,7 @@
                       (set/difference todel)
                       (set/union toadd))))))))
 
-(defn- toggle-layout-flags
+(defn toggle-layout-flags
   [& flags]
   (ptk/reify ::toggle-layout-flags
     ptk/UpdateEvent
@@ -1187,6 +1199,18 @@
             qparams    {:page-id page-id}]
         (rx/of (rt/nav :workspace pparams qparams))))))
 
+(defn go-to-layout
+  [layout]
+  (us/verify ::layout-flag layout)
+  (ptk/reify ::go-to-layout
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (let [project-id (get-in state [:workspace-project :id])
+            file-id    (get-in state [:workspace-file :id])
+            page-id    (get-in state [:current-page-id])
+            pparams    {:file-id file-id :project-id project-id}
+            qparams    {:page-id page-id :layout (name layout)}]
+        (rx/of (rt/nav :workspace pparams qparams))))))
 
 (def go-to-file
   (ptk/reify ::go-to-file

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

@@ -443,7 +443,8 @@
       (let [file (get-in state [:workspace-libraries file-id])
             pparams {:project-id (:project-id file)
                      :file-id (:id file)}
-            qparams {:page-id (first (get-in file [:data :pages]))}]
+            qparams {:page-id (first (get-in file [:data :pages]))
+                     :layout :assets}]
         (st/emit! (rt/nav-new-window :workspace pparams qparams))))))
 
 (defn ext-library-changed

frontend/src/app/main/ui.cljs

@@ -149,10 +149,12 @@
     :workspace
     (let [project-id (uuid (get-in route [:params :path :project-id]))
           file-id (uuid (get-in route [:params :path :file-id]))
-          page-id (uuid (get-in route [:params :query :page-id]))]
+          page-id (uuid (get-in route [:params :query :page-id]))
+          layout (get-in route [:params :query :layout])]
       [:& workspace/workspace {:project-id project-id
                                :file-id file-id
                                :page-id page-id
+                               :layout layout
                                :key file-id}])
 
     :not-authorized

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

@@ -99,8 +99,10 @@
    i/loader-pencil])
 
 (mf/defc workspace
-  [{:keys [project-id file-id page-id] :as props}]
-  (mf/use-effect #(st/emit! dw/initialize-layout))
+  [{:keys [project-id file-id page-id layout] :as props}]
+  (mf/use-effect
+    (mf/deps layout)
+    #(st/emit! (dw/initialize-layout layout)))
 
   (mf/use-effect
    (mf/deps project-id file-id)

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

@@ -75,6 +75,7 @@
                                (st/emit! (dwl/update-component id))
                                (st/emit! (dwl/sync-file nil))
                                (st/emit! dwc/commit-undo-transaction))
+        do-show-component #(st/emit! (dw/go-to-layout :assets))
         do-navigate-component-file #(st/emit! (dwl/nav-to-component-file
                                                 (:component-file shape)))]
     [:*
@@ -149,17 +150,28 @@
 
      (when (and (:component-id shape)
                 (= (count selected) 1))
-       [:*
-        [:& menu-separator]
-        [:& menu-entry {:title (t locale "workspace.shape.menu.detach-instance")
-                        :on-click do-detach-component}]
-        [:& menu-entry {:title (t locale "workspace.shape.menu.reset-overrides")
-                        :on-click do-reset-component}]
-        (if (nil? (:component-file shape))
+       ;; WARNING: this menu is the same as the context menu at the sidebar.
+       ;;          If you change it, you must change equally the file
+       ;;          app/main/ui/workspace/sidebar/options/component.cljs
+       (if (nil? (:component-file shape))
+         [:*
+          [:& menu-separator]
+          [:& menu-entry {:title (t locale "workspace.shape.menu.detach-instance")
+                          :on-click do-detach-component}]
+          [:& menu-entry {:title (t locale "workspace.shape.menu.reset-overrides")
+                          :on-click do-reset-component}]
           [:& menu-entry {:title (t locale "workspace.shape.menu.update-master")
                           :on-click do-update-component}]
+          [:& menu-entry {:title (t locale "workspace.shape.menu.show-master")
+                          :on-click do-show-component}]]
+         [:*
+          [:& menu-separator]
+          [:& menu-entry {:title (t locale "workspace.shape.menu.detach-instance")
+                          :on-click do-detach-component}]
+          [:& menu-entry {:title (t locale "workspace.shape.menu.reset-overrides")
+                          :on-click do-reset-component}]
           [:& menu-entry {:title (t locale "workspace.shape.menu.go-master")
-                          :on-click do-navigate-component-file}])])
+                          :on-click do-navigate-component-file}]]))
 
      [:& menu-separator]
      [:& menu-entry {:title (t locale "workspace.shape.menu.delete")

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

@@ -105,17 +105,17 @@
        [:li.tooltip.tooltip-right
         {:alt "Layers"
          :class (when (contains? layout :layers) "selected")
-         :on-click (st/emitf (dw/ensure-layout :layers))}
+         :on-click (st/emitf (dw/go-to-layout :layers))}
         i/layers]
        [:li.tooltip.tooltip-right
         {:alt (t locale "workspace.toolbar.assets")
          :class (when (contains? layout :assets) "selected")
-         :on-click (st/emitf (dw/ensure-layout :assets))}
+         :on-click (st/emitf (dw/go-to-layout :assets))}
         i/library]
        [:li.tooltip.tooltip-right
         {:alt "History"
          :class (when (contains? layout :document-history) "selected")
-         :on-click (st/emitf (dw/ensure-layout :document-history))}
+         :on-click (st/emitf (dw/go-to-layout :document-history))}
         i/undo-history]
        [:li.tooltip.tooltip-right
         {:alt (t locale "workspace.toolbar.color-palette")

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

@@ -15,6 +15,7 @@
    [app.main.store :as st]
    [app.main.ui.icons :as i]
    [app.main.ui.components.context-menu :refer [context-menu]]
+   [app.main.data.workspace :as dw]
    [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.libraries :as dwl]
    [app.util.i18n :as i18n :refer [t]]
@@ -52,6 +53,7 @@
                                (st/emit! (dwl/update-component id))
                                (st/emit! (dwl/sync-file nil))
                                (st/emit! dwc/commit-undo-transaction))
+        do-show-component #(st/emit! (dw/go-to-layout :assets))
         do-navigate-component-file #(st/emit! (dwl/nav-to-component-file
                                                 (:component-file values)))]
     (when show?
@@ -65,12 +67,18 @@
          [:div.row-actions
           {:on-click on-menu-click}
           i/actions
+          ;; WARNING: this menu is the same as the shape context menu.
+          ;;          If you change it, you must change equally the file
+          ;;          app/main/ui/workspace/context_menu.cljs
           [:& context-menu {:on-close on-menu-close
                             :show (:menu-open @local)
-                            :options [[(t locale "workspace.shape.menu.detach-instance") do-detach-component]
-                                      [(t locale "workspace.shape.menu.reset-overrides") do-reset-component]
-                                      (if (:component-file values)
-                                        [(t locale "workspace.shape.menu.go-master") do-navigate-component-file]
-                                        [(t locale "workspace.shape.menu.update-master") do-update-component])]
-         }]]]]])))
+                            :options (if (nil? (:component-file values))
+                                       [[(t locale "workspace.shape.menu.detach-instance") do-detach-component]
+                                        [(t locale "workspace.shape.menu.reset-overrides") do-reset-component]
+                                        [(t locale "workspace.shape.menu.update-master") do-update-component]
+                                        [(t locale "workspace.shape.menu.show-master") do-show-component]]
+
+                                       [[(t locale "workspace.shape.menu.detach-instance") do-detach-component]
+                                        [(t locale "workspace.shape.menu.reset-overrides") do-reset-component]
+                                        [(t locale "workspace.shape.menu.go-master") do-navigate-component-file]])}]]]]])))