mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
"✨ Add new context menu options for components"
This commit is contained in:
Eva
Andrés Moya
parent
f94571b3b4
commit
843e1e91c2
5 changed files with 146 additions and 92 deletions
|
|
@ -120,6 +120,14 @@
|
|||
|
||||
;; Asset helpers
|
||||
|
||||
(defn get-component
|
||||
"Retrieve a component from libraries, if no library-id is provided, we
|
||||
iterate over all libraries and find the component on it."
|
||||
([libraries component-id]
|
||||
(some #(ctkl/get-component (:data %) component-id) (vals libraries)))
|
||||
([libraries library-id component-id]
|
||||
(ctkl/get-component (get-in libraries [library-id :data]) component-id)))
|
||||
|
||||
(defn delete-component
|
||||
"Delete a component and store it to be able to be recovered later.
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.common.pages.helpers :as cph]
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.file :as ctf]
|
||||
[app.common.types.page :as ctp]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.data.modal :as modal]
|
||||
|
|
@ -365,61 +366,60 @@
|
|||
|
||||
(mf/defc context-menu-component
|
||||
[{:keys [shapes]}]
|
||||
(let [single? (= (count shapes) 1)
|
||||
(let [single? (= (count shapes) 1)
|
||||
|
||||
has-frame? (->> shapes (d/seek cph/frame-shape?))
|
||||
has-component? (some true? (map #(contains? % :component-id) shapes))
|
||||
is-component? (and single? (-> shapes first :component-id some?))
|
||||
has-frame? (->> shapes (d/seek cph/frame-shape?))
|
||||
has-component? (some true? (map #(contains? % :component-id) shapes))
|
||||
is-component? (and single? (-> shapes first :component-id some?))
|
||||
|
||||
shape-id (->> shapes first :id)
|
||||
component-id (->> shapes first :component-id)
|
||||
component-file (-> shapes first :component-file)
|
||||
component-shapes (filter #(contains? % :component-id) shapes)
|
||||
shape-id (->> shapes first :id)
|
||||
component-id (->> shapes first :component-id)
|
||||
component-file (-> shapes first :component-file)
|
||||
main-component? (->> shapes first :main-instance?)
|
||||
component-shapes (filter #(contains? % :component-id) shapes)
|
||||
|
||||
components-v2 (features/use-feature :components-v2)
|
||||
components-v2 (features/use-feature :components-v2)
|
||||
|
||||
current-file-id (mf/use-ctx ctx/current-file-id)
|
||||
local-component? (= component-file current-file-id)
|
||||
current-file-id (mf/use-ctx ctx/current-file-id)
|
||||
local-component? (= component-file current-file-id)
|
||||
|
||||
local-library (when local-component?
|
||||
;; Not needed to subscribe to changes because it's not expected
|
||||
;; to change while context menu is open
|
||||
(deref refs/workspace-local-library))
|
||||
|
||||
main-component (when local-component?
|
||||
(ctkl/get-component local-library (:component-id (first shapes))))
|
||||
workspace-data (deref refs/workspace-data)
|
||||
workspace-libraries (deref refs/workspace-libraries)
|
||||
is-dangling? (nil? (if local-component?
|
||||
(ctkl/get-component workspace-data component-id)
|
||||
(ctf/get-component workspace-libraries component-file component-id)))
|
||||
|
||||
do-add-component #(st/emit! (dwl/add-component))
|
||||
do-detach-component #(st/emit! (dwl/detach-component shape-id))
|
||||
do-detach-component-in-bulk #(st/emit! dwl/detach-selected-components)
|
||||
do-reset-component #(st/emit! (dwl/reset-component shape-id))
|
||||
_do-reset-component #(st/emit! (dwl/reset-component shape-id))
|
||||
do-show-component #(st/emit! (dw/go-to-component component-id))
|
||||
do-navigate-component-file #(st/emit! (dwl/nav-to-component-file component-file))
|
||||
do-update-component #(st/emit! (dwl/update-component-sync shape-id component-file))
|
||||
do-update-component-in-bulk #(st/emit! (dwl/update-component-in-bulk component-shapes component-file))
|
||||
do-restore-component #(st/emit! (dwl/restore-component component-id))
|
||||
|
||||
do-update-remote-component
|
||||
_do-update-remote-component
|
||||
#(st/emit! (modal/show
|
||||
{:type :confirm
|
||||
:message ""
|
||||
:title (tr "modals.update-remote-component.message")
|
||||
:hint (tr "modals.update-remote-component.hint")
|
||||
:cancel-label (tr "modals.update-remote-component.cancel")
|
||||
:accept-label (tr "modals.update-remote-component.accept")
|
||||
:accept-style :primary
|
||||
:on-accept do-update-component}))
|
||||
{:type :confirm
|
||||
:message ""
|
||||
:title (tr "modals.update-remote-component.message")
|
||||
:hint (tr "modals.update-remote-component.hint")
|
||||
:cancel-label (tr "modals.update-remote-component.cancel")
|
||||
:accept-label (tr "modals.update-remote-component.accept")
|
||||
:accept-style :primary
|
||||
:on-accept do-update-component}))
|
||||
|
||||
do-update-in-bulk #(st/emit! (modal/show
|
||||
{:type :confirm
|
||||
:message ""
|
||||
:title (tr "modals.update-remote-component-in-bulk.message")
|
||||
:hint (tr "modals.update-remote-component-in-bulk.hint")
|
||||
:items component-shapes
|
||||
:cancel-label (tr "modals.update-remote-component.cancel")
|
||||
:accept-label (tr "modals.update-remote-component.accept")
|
||||
:accept-style :primary
|
||||
:on-accept do-update-component-in-bulk}))]
|
||||
{:type :confirm
|
||||
:message ""
|
||||
:title (tr "modals.update-remote-component-in-bulk.message")
|
||||
:hint (tr "modals.update-remote-component-in-bulk.hint")
|
||||
:items component-shapes
|
||||
:cancel-label (tr "modals.update-remote-component.cancel")
|
||||
:accept-label (tr "modals.update-remote-component.accept")
|
||||
:accept-style :primary
|
||||
:on-accept do-update-component-in-bulk}))]
|
||||
[:*
|
||||
(when (not has-frame?)
|
||||
[:*
|
||||
|
|
@ -442,28 +442,55 @@
|
|||
|
||||
[:*
|
||||
[:& menu-separator]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
|
||||
:shortcut (sc/get-tooltip :detach-component)
|
||||
:on-click do-detach-component}]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
|
||||
:on-click do-reset-component}]
|
||||
|
||||
|
||||
(if local-component?
|
||||
(if (and (nil? main-component) components-v2)
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.restore-main")
|
||||
:on-click do-restore-component}]
|
||||
[:*
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.update-main")
|
||||
:on-click do-update-component}]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.show-main")
|
||||
:on-click do-show-component}]])
|
||||
|
||||
[:*
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.go-main")
|
||||
:on-click do-navigate-component-file}]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.update-main")
|
||||
:on-click do-update-remote-component}]])])
|
||||
(if main-component?
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.show-in-assets")
|
||||
:on-click do-show-component}]
|
||||
(if local-component?
|
||||
(if is-dangling?
|
||||
[:*
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
|
||||
:shortcut (sc/get-tooltip :detach-component)
|
||||
:on-click do-detach-component}]
|
||||
;; This is commented due this functionality is not yet available
|
||||
;; [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
|
||||
;; :on-click _do-reset-component}]
|
||||
(when components-v2
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.restore-main")
|
||||
:on-click do-restore-component}])]
|
||||
[:*
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
|
||||
:shortcut (sc/get-tooltip :detach-component)
|
||||
:on-click do-detach-component}]
|
||||
;; This is commented due this functionality is not yet available
|
||||
;; [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
|
||||
;; :on-click _do-reset-component}]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.update-main")
|
||||
:on-click do-update-component}]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.show-main")
|
||||
:on-click do-show-component}]])
|
||||
(if is-dangling?
|
||||
[:*
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
|
||||
:shortcut (sc/get-tooltip :detach-component)
|
||||
:on-click do-detach-component}]
|
||||
;; This is commented due this functionality is not yet available
|
||||
;; [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
|
||||
;; :on-click _do-reset-component}]
|
||||
(when components-v2
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.restore-main")
|
||||
:on-click do-restore-component}])]
|
||||
[:*
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
|
||||
:shortcut (sc/get-tooltip :detach-component)
|
||||
:on-click do-detach-component}]
|
||||
;; This is commented due this functionality is not yet available
|
||||
;; [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
|
||||
;; :on-click _do-reset-component}]
|
||||
;; This is commented due this functionality is not yet available
|
||||
;;[:& menu-entry {:title (tr "workspace.shape.menu.update-main")
|
||||
;; :on-click _do-update-remote-component}]
|
||||
[:& menu-entry {:title (tr "workspace.shape.menu.go-main")
|
||||
:on-click do-navigate-component-file}]])))])
|
||||
[:& menu-separator]]))
|
||||
|
||||
(mf/defc context-menu-delete
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
|
||||
(ns app.main.ui.workspace.sidebar.options.menus.component
|
||||
(:require
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.file :as ctf]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
|
|
@ -23,27 +24,24 @@
|
|||
|
||||
(mf/defc component-menu
|
||||
[{:keys [ids values shape-name] :as props}]
|
||||
(let [current-file-id (mf/use-ctx ctx/current-file-id)
|
||||
components-v2 (mf/use-ctx ctx/components-v2)
|
||||
(let [current-file-id (mf/use-ctx ctx/current-file-id)
|
||||
components-v2 (mf/use-ctx ctx/components-v2)
|
||||
|
||||
id (first ids)
|
||||
local (mf/use-state {:menu-open false})
|
||||
id (first ids)
|
||||
local (mf/use-state {:menu-open false})
|
||||
|
||||
component-id (:component-id values)
|
||||
library-id (:component-file values)
|
||||
show? (some? component-id)
|
||||
main-instance? (if components-v2
|
||||
(:main-instance? values)
|
||||
true)
|
||||
|
||||
local-component? (= library-id current-file-id)
|
||||
local-library (when local-component?
|
||||
;; Not needed to subscribe to changes because it's not expected
|
||||
;; to change while context menu is open
|
||||
(deref refs/workspace-local-library))
|
||||
|
||||
main-component (when local-component?
|
||||
(ctkl/get-component local-library component-id))
|
||||
component-id (:component-id values)
|
||||
library-id (:component-file values)
|
||||
show? (some? component-id)
|
||||
main-instance? (if components-v2
|
||||
(:main-instance? values)
|
||||
true)
|
||||
local-component? (= library-id current-file-id)
|
||||
workspace-data (deref refs/workspace-data)
|
||||
workspace-libraries (deref refs/workspace-libraries)
|
||||
is-dangling? (nil? (if local-component?
|
||||
(ctkl/get-component workspace-data component-id)
|
||||
(ctf/get-component workspace-libraries library-id component-id)))
|
||||
|
||||
on-menu-click
|
||||
(mf/use-callback
|
||||
|
|
@ -59,7 +57,7 @@
|
|||
do-detach-component
|
||||
#(st/emit! (dwl/detach-component id))
|
||||
|
||||
do-reset-component
|
||||
_do-reset-component
|
||||
#(st/emit! (dwl/reset-component id))
|
||||
|
||||
do-update-component
|
||||
|
|
@ -68,7 +66,7 @@
|
|||
do-restore-component
|
||||
#(st/emit! (dwl/restore-component component-id))
|
||||
|
||||
do-update-remote-component
|
||||
_do-update-remote-component
|
||||
#(st/emit! (modal/show
|
||||
{:type :confirm
|
||||
:message ""
|
||||
|
|
@ -99,16 +97,29 @@
|
|||
;; app/main/ui/workspace/context_menu.cljs
|
||||
[:& context-menu {:on-close on-menu-close
|
||||
:show (:menu-open @local)
|
||||
:options (if local-component?
|
||||
(if (and (nil? main-component) components-v2)
|
||||
[[(tr "workspace.shape.menu.restore-main") do-restore-component]]
|
||||
[[(tr "workspace.shape.menu.detach-instance") do-detach-component]
|
||||
[(tr "workspace.shape.menu.reset-overrides") do-reset-component]
|
||||
[(tr "workspace.shape.menu.update-main") do-update-component]
|
||||
[(tr "workspace.shape.menu.show-main") do-show-component]])
|
||||
:options
|
||||
(if main-instance?
|
||||
[[(tr "workspace.shape.menu.show-in-assets") do-show-component]]
|
||||
(if local-component?
|
||||
(if is-dangling?
|
||||
[[(tr "workspace.shape.menu.detach-instance") do-detach-component]
|
||||
;; [(tr "workspace.shape.menu.reset-overrides") _do-reset-component]
|
||||
(when components-v2
|
||||
[(tr "workspace.shape.menu.restore-main") do-restore-component])]
|
||||
|
||||
[[(tr "workspace.shape.menu.detach-instance") do-detach-component]
|
||||
[(tr "workspace.shape.menu.reset-overrides") do-reset-component]
|
||||
[(tr "workspace.shape.menu.go-main") do-navigate-component-file]
|
||||
[(tr "workspace.shape.menu.update-main") do-update-remote-component]])}]]]]])))
|
||||
[[(tr "workspace.shape.menu.detach-instance") do-detach-component]
|
||||
;; [(tr "workspace.shape.menu.reset-overrides") _do-reset-component]
|
||||
[(tr "workspace.shape.menu.update-main") do-update-component]
|
||||
[(tr "workspace.shape.menu.show-main") do-show-component]])
|
||||
|
||||
(if is-dangling?
|
||||
[[(tr "workspace.shape.menu.detach-instance") do-detach-component]
|
||||
;; [(tr "workspace.shape.menu.reset-overrides") _do-reset-component]
|
||||
(when components-v2
|
||||
[(tr "workspace.shape.menu.restore-main") do-restore-component])]
|
||||
[[(tr "workspace.shape.menu.detach-instance") do-detach-component]
|
||||
;; [(tr "workspace.shape.menu.reset-overrides") _do-reset-component]
|
||||
;; [(tr "workspace.shape.menu.update-main") _do-update-remote-component]
|
||||
[(tr "workspace.shape.menu.go-main") do-navigate-component-file]
|
||||
])))}]]]]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -4294,6 +4294,10 @@ msgstr "Select layer"
|
|||
msgid "workspace.shape.menu.show"
|
||||
msgstr "Show"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
|
||||
msgid "workspace.shape.menu.show-in-assets"
|
||||
msgstr "Show in assets panel"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
|
||||
msgid "workspace.shape.menu.show-main"
|
||||
msgstr "Show main component"
|
||||
|
|
|
|||
|
|
@ -4495,6 +4495,10 @@ msgstr "Seleccionar capa"
|
|||
msgid "workspace.shape.menu.show"
|
||||
msgstr "Mostrar"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
|
||||
msgid "workspace.shape.menu.show-in-assets"
|
||||
msgstr "Ver en el panel de recursos"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs,
|
||||
#: src/app/main/ui/workspace/context_menu.cljs
|
||||
msgid "workspace.shape.menu.show-main"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue