diff --git a/common/app/common/pages_helpers.cljc b/common/app/common/pages_helpers.cljc index b53f2714b..e9722ec2d 100644 --- a/common/app/common/pages_helpers.cljc +++ b/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]))) diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 43cd97eee..37ce988d8 100644 --- a/frontend/resources/locales.json +++ b/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" : { diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 11275e5c2..25496e094 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/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; diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index 0c91cfffa..929839973 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/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. diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 06b44ffda..fd3a2c2cd 100644 --- a/frontend/src/app/main/refs.cljs +++ b/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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/component.cljs new file mode 100644 index 000000000..06527d489 --- /dev/null +++ b/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])] + }]]]]]))) + diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/group.cljs index 0d6254a87..43711deb7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/group.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rect.cljs index a5c8c6fb1..e735a8cc3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rect.cljs +++ b/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}]