🎉 Show master component in options

common/app/common/pages_helpers.cljc

@@ -53,9 +53,9 @@
   (get-in container [:objects shape-id]))
 
 (defn get-component
-  [component-id file-id local-file libraries]
+  [component-id file-id local-library libraries]
   (let [file (if (nil? file-id)
-               local-file
+               local-library
                (get-in libraries [file-id :data]))]
     (get-in file [:components component-id])))
 

frontend/resources/locales.json

@@ -2693,6 +2693,12 @@
       "es" : "Color de fondo"
     }
   },
+  "workspace.options.component" : {
+    "translations" : {
+      "en" : "Component",
+      "es" : "Componente"
+    }
+  },
   "workspace.options.design" : {
     "used-in" : [ "src/app/main/ui/workspace/sidebar/options.cljs:69" ],
     "translations" : {

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

@@ -295,6 +295,7 @@
     }
 
   }
+
   .custom-select-dropdown {
     background-color: $color-white;
     border-radius: $br-small;
@@ -307,7 +308,6 @@
     top: 30px;
     z-index: 12;
 
-
     .presets {
       width: 200px;
     }
@@ -471,6 +471,37 @@
   }
 }
 
+.element-set-content .component-row {
+  display: flex;
+  align-items: center;
+  font-size: $fs12;
+  color: $color-gray-10;
+
+  svg {
+    fill: $color-gray-20;
+    height: 16px;
+    width: 16px;
+    margin-right: $small;
+  }
+
+  .row-actions {
+    margin-left: auto;
+    cursor: pointer;
+
+    svg {
+      fill: $color-gray-20;
+      height: 8px;
+      width: 8px;
+    }
+
+    .context-menu-items {
+      right: 0.5rem;
+      left: unset;
+      top: 0;
+    }
+  }
+}
+
 .grid-option .custom-select {
   margin-bottom: 0;
 }
@@ -921,8 +952,6 @@
     border-right: none;
 }
 
-
-
 .size-option .custom-select-dropdown {
     position: fixed;
     max-height: 16rem;

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

@@ -345,13 +345,6 @@
     (get-in state [:workspace-data asset-type])
     (get-in state [:workspace-libraries library-id :data asset-type])))
 
-(defn- get-component
-  [state file-id component-id]
-  (let [components (if (nil? file-id)
-                     (get-in state [:workspace-data :components])
-                     (get-in state [:workspace-libraries file-id :data :components]))]
-    (get components component-id)))
-
 (defn generate-sync-shape-and-children-components
   "Generate changes to synchronize one shape that the root of a component
   instance, and all its children, from the given component.

frontend/src/app/main/refs.cljs

@@ -39,7 +39,6 @@
 
 ;; ---- Workspace refs
 
-
 (def workspace-local
   (l/derived :workspace-local st/state))
 
@@ -56,7 +55,6 @@
 (def selected-zoom
   (l/derived :zoom workspace-local))
 
-
 (def selected-drawing-tool
   (l/derived :tool workspace-drawing))
 
@@ -89,7 +87,6 @@
                      (assoc :pages (get-in file [:data :pages])))))
              st/state =))
 
-
 (def workspace-file-colors
   (l/derived (fn [state]
                (when-let [file (:workspace-file state)]
@@ -113,6 +110,15 @@
 (def workspace-shared-files
   (l/derived :workspace-shared-files st/state))
 
+(def workspace-local-library
+  (l/derived (fn [state]
+               (select-keys (get state :workspace-data)
+                            [:colors
+                             :media
+                             :typographies
+                             :components]))
+             st/state))
+
 (def workspace-libraries
   (l/derived :workspace-libraries st/state))
 

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

@@ -0,0 +1,76 @@
+;; 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/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.workspace.sidebar.options.component
+  (:require
+   [rumext.alpha :as mf]
+   [app.common.pages-helpers :as cph]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.icons :as i]
+   [app.main.ui.components.context-menu :refer [context-menu]]
+   [app.main.data.workspace.common :as dwc]
+   [app.main.data.workspace.libraries :as dwl]
+   [app.util.i18n :as i18n :refer [t]]
+   [app.util.dom :as dom]))
+
+(def component-attrs [:component-id :component-file :shape-ref])
+
+(mf/defc component-menu
+  [{:keys [ids values] :as props}]
+  (let [id     (first ids)
+        locale (mf/deref i18n/locale)
+        local  (mf/use-state {:menu-open false})
+
+        show?         (some? (:component-id values))
+        local-library (mf/deref refs/workspace-local-library)
+        libraries     (mf/deref refs/workspace-libraries)
+        component     (cph/get-component (:component-id values)
+                                         (:component-file values)
+                                         local-library
+                                         libraries)
+
+        on-menu-click (mf/use-callback
+                        (fn [event]
+                          (dom/prevent-default event)
+                          (dom/stop-propagation event)
+                          (swap! local assoc :menu-open true)))
+
+        on-menu-close (mf/use-callback
+                        #(swap! local assoc :menu-open false))
+
+        do-detach-component #(st/emit! (dwl/detach-component id))
+        do-reset-component #(st/emit! (dwl/reset-component id))
+        do-update-component #(do
+                               (st/emit! dwc/start-undo-transaction)
+                               (st/emit! (dwl/update-component id))
+                               (st/emit! (dwl/sync-file nil))
+                               (st/emit! dwc/commit-undo-transaction))
+        do-navigate-component-file #(st/emit! (dwl/nav-to-component-file
+                                                (:component-file values)))]
+    (when show?
+      [:div.element-set
+       [:div.element-set-title
+        [:span (t locale "workspace.options.component")]]
+       [:div.element-set-content
+        [:div.row-flex.component-row
+         i/component
+         (:name component)
+         [:div.row-actions
+          {:on-click on-menu-click}
+          i/actions
+          [:& 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])]
+         }]]]]])))
+

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

@@ -17,6 +17,7 @@
    [app.main.data.workspace.texts :as dwt]
    [app.main.ui.workspace.sidebar.options.multiple :refer [get-shape-attrs]]
    [app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
+   [app.main.ui.workspace.sidebar.options.component :refer [component-attrs component-menu]]
    [app.main.ui.workspace.sidebar.options.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.blur :refer [blur-menu]]
    [app.main.ui.workspace.sidebar.options.stroke :refer [stroke-attrs stroke-menu]]
@@ -59,6 +60,9 @@
                                      shape-with-children)
                                 [:rx :ry]))
 
+        component-values
+        (select-keys shape component-attrs)
+
         fill-values
         (geom/get-attrs-multi shape-with-children fill-attrs)
 
@@ -136,13 +140,15 @@
                         :ids-with-children ids-with-children
                         :type type
                         :values measure-values}]
+     [:& component-menu {:ids [id]
+                         :values component-values}]
      [:& fill-menu {:ids ids-with-children
                     :type type
                     :values fill-values}]
 
      [:& blur-menu {:ids [id]
                     :values (select-keys shape [:blur])}]
-     
+
      (when-not (empty? other-ids)
        [:& stroke-menu {:ids other-ids
                         :type type

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

@@ -28,6 +28,7 @@
      [:& measures-menu {:ids ids
                         :type type
                         :values measure-values}]
+
      [:& fill-menu {:ids ids
                     :type type
                     :values fill-values}]