3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

"✨ Add new context menu options for components"

Browse source
This commit is contained in:
Eva 2022-09-14 11:44:48 +02:00 • committed by Andrés Moya
parent f94571b3b4
commit 843e1e91c2
5 changed files with 146 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

8
common/src/app/common/types/file.cljc
View file

@ -120,6 +120,14 @@
;; Asset helpers ;; 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 (defn delete-component
"Delete a component and store it to be able to be recovered later. "Delete a component and store it to be able to be recovered later.

145
frontend/src/app/main/ui/workspace/context_menu.cljs
View file

@ -11,6 +11,7 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.types.components-list :as ctkl] [app.common.types.components-list :as ctkl]
[app.common.types.file :as ctf]
[app.common.types.page :as ctp] [app.common.types.page :as ctp]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
@ -365,61 +366,60 @@
(mf/defc context-menu-component (mf/defc context-menu-component
[{:keys [shapes]}] [{:keys [shapes]}]
(let [single? (= (count shapes) 1) (let [single? (= (count shapes) 1)
has-frame? (->> shapes (d/seek cph/frame-shape?)) has-frame? (->> shapes (d/seek cph/frame-shape?))
has-component? (some true? (map #(contains? % :component-id) shapes)) has-component? (some true? (map #(contains? % :component-id) shapes))
is-component? (and single? (-> shapes first :component-id some?)) is-component? (and single? (-> shapes first :component-id some?))
shape-id (->> shapes first :id) shape-id (->> shapes first :id)
component-id (->> shapes first :component-id) component-id (->> shapes first :component-id)
component-file (-> shapes first :component-file) component-file (-> shapes first :component-file)
component-shapes (filter #(contains? % :component-id) shapes) 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) current-file-id (mf/use-ctx ctx/current-file-id)
local-component? (= component-file current-file-id) local-component? (= component-file current-file-id)
local-library (when local-component? workspace-data (deref refs/workspace-data)
;; Not needed to subscribe to changes because it's not expected workspace-libraries (deref refs/workspace-libraries)
;; to change while context menu is open is-dangling? (nil? (if local-component?
(deref refs/workspace-local-library)) (ctkl/get-component workspace-data component-id)
(ctf/get-component workspace-libraries component-file component-id)))
main-component (when local-component?
(ctkl/get-component local-library (:component-id (first shapes))))
do-add-component #(st/emit! (dwl/add-component)) do-add-component #(st/emit! (dwl/add-component))
do-detach-component #(st/emit! (dwl/detach-component shape-id)) do-detach-component #(st/emit! (dwl/detach-component shape-id))
do-detach-component-in-bulk #(st/emit! dwl/detach-selected-components) 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-show-component #(st/emit! (dw/go-to-component component-id))
do-navigate-component-file #(st/emit! (dwl/nav-to-component-file component-file)) 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 #(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-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-restore-component #(st/emit! (dwl/restore-component component-id))
do-update-remote-component _do-update-remote-component
#(st/emit! (modal/show #(st/emit! (modal/show
{:type :confirm {:type :confirm
:message "" :message ""
:title (tr "modals.update-remote-component.message") :title (tr "modals.update-remote-component.message")
:hint (tr "modals.update-remote-component.hint") :hint (tr "modals.update-remote-component.hint")
:cancel-label (tr "modals.update-remote-component.cancel") :cancel-label (tr "modals.update-remote-component.cancel")
:accept-label (tr "modals.update-remote-component.accept") :accept-label (tr "modals.update-remote-component.accept")
:accept-style :primary :accept-style :primary
:on-accept do-update-component})) :on-accept do-update-component}))
do-update-in-bulk #(st/emit! (modal/show do-update-in-bulk #(st/emit! (modal/show
{:type :confirm {:type :confirm
:message "" :message ""
:title (tr "modals.update-remote-component-in-bulk.message") :title (tr "modals.update-remote-component-in-bulk.message")
:hint (tr "modals.update-remote-component-in-bulk.hint") :hint (tr "modals.update-remote-component-in-bulk.hint")
:items component-shapes :items component-shapes
:cancel-label (tr "modals.update-remote-component.cancel") :cancel-label (tr "modals.update-remote-component.cancel")
:accept-label (tr "modals.update-remote-component.accept") :accept-label (tr "modals.update-remote-component.accept")
:accept-style :primary :accept-style :primary
:on-accept do-update-component-in-bulk}))] :on-accept do-update-component-in-bulk}))]
[:* [:*
(when (not has-frame?) (when (not has-frame?)
[:* [:*
@ -442,28 +442,55 @@
[:* [:*
[:& menu-separator] [:& menu-separator]
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance") (if main-component?
:shortcut (sc/get-tooltip :detach-component) [:& menu-entry {:title (tr "workspace.shape.menu.show-in-assets")
:on-click do-detach-component}] :on-click do-show-component}]
[:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides") (if local-component?
:on-click do-reset-component}] (if is-dangling?
[:*
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
(if local-component? :shortcut (sc/get-tooltip :detach-component)
(if (and (nil? main-component) components-v2) :on-click do-detach-component}]
[:& menu-entry {:title (tr "workspace.shape.menu.restore-main") ;; This is commented due this functionality is not yet available
:on-click do-restore-component}] ;; [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
[:* ;; :on-click _do-reset-component}]
[:& menu-entry {:title (tr "workspace.shape.menu.update-main") (when components-v2
:on-click do-update-component}] [:& menu-entry {:title (tr "workspace.shape.menu.restore-main")
[:& menu-entry {:title (tr "workspace.shape.menu.show-main") :on-click do-restore-component}])]
:on-click do-show-component}]]) [:*
[:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
[:* :shortcut (sc/get-tooltip :detach-component)
[:& menu-entry {:title (tr "workspace.shape.menu.go-main") :on-click do-detach-component}]
:on-click do-navigate-component-file}] ;; This is commented due this functionality is not yet available
[:& menu-entry {:title (tr "workspace.shape.menu.update-main") ;; [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
:on-click do-update-remote-component}]])]) ;; :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]])) [:& menu-separator]]))
(mf/defc context-menu-delete (mf/defc context-menu-delete

77
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -6,7 +6,8 @@
(ns app.main.ui.workspace.sidebar.options.menus.component (ns app.main.ui.workspace.sidebar.options.menus.component
(:require (: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.modal :as modal]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
@ -23,27 +24,24 @@
(mf/defc component-menu (mf/defc component-menu
[{:keys [ids values shape-name] :as props}] [{:keys [ids values shape-name] :as props}]
(let [current-file-id (mf/use-ctx ctx/current-file-id) (let [current-file-id (mf/use-ctx ctx/current-file-id)
components-v2 (mf/use-ctx ctx/components-v2) components-v2 (mf/use-ctx ctx/components-v2)
id (first ids) id (first ids)
local (mf/use-state {:menu-open false}) local (mf/use-state {:menu-open false})
component-id (:component-id values) component-id (:component-id values)
library-id (:component-file values) library-id (:component-file values)
show? (some? component-id) show? (some? component-id)
main-instance? (if components-v2 main-instance? (if components-v2
(:main-instance? values) (:main-instance? values)
true) true)
local-component? (= library-id current-file-id)
local-component? (= library-id current-file-id) workspace-data (deref refs/workspace-data)
local-library (when local-component? workspace-libraries (deref refs/workspace-libraries)
;; Not needed to subscribe to changes because it's not expected is-dangling? (nil? (if local-component?
;; to change while context menu is open (ctkl/get-component workspace-data component-id)
(deref refs/workspace-local-library)) (ctf/get-component workspace-libraries library-id component-id)))
main-component (when local-component?
(ctkl/get-component local-library component-id))
on-menu-click on-menu-click
(mf/use-callback (mf/use-callback
@ -59,7 +57,7 @@
do-detach-component do-detach-component
#(st/emit! (dwl/detach-component id)) #(st/emit! (dwl/detach-component id))
do-reset-component _do-reset-component
#(st/emit! (dwl/reset-component id)) #(st/emit! (dwl/reset-component id))
do-update-component do-update-component
@ -68,7 +66,7 @@
do-restore-component do-restore-component
#(st/emit! (dwl/restore-component component-id)) #(st/emit! (dwl/restore-component component-id))
do-update-remote-component _do-update-remote-component
#(st/emit! (modal/show #(st/emit! (modal/show
{:type :confirm {:type :confirm
:message "" :message ""
@ -99,16 +97,29 @@
;; app/main/ui/workspace/context_menu.cljs ;; app/main/ui/workspace/context_menu.cljs
[:& context-menu {:on-close on-menu-close [:& context-menu {:on-close on-menu-close
:show (:menu-open @local) :show (:menu-open @local)
:options (if local-component? :options
(if (and (nil? main-component) components-v2) (if main-instance?
[[(tr "workspace.shape.menu.restore-main") do-restore-component]] [[(tr "workspace.shape.menu.show-in-assets") do-show-component]]
[[(tr "workspace.shape.menu.detach-instance") do-detach-component] (if local-component?
[(tr "workspace.shape.menu.reset-overrides") do-reset-component] (if is-dangling?
[(tr "workspace.shape.menu.update-main") do-update-component] [[(tr "workspace.shape.menu.detach-instance") do-detach-component]
[(tr "workspace.shape.menu.show-main") do-show-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.detach-instance") do-detach-component]
[(tr "workspace.shape.menu.reset-overrides") do-reset-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-component]
[(tr "workspace.shape.menu.update-main") do-update-remote-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]
])))}]]]]])))

4
frontend/translations/en.po
View file

@ -4294,6 +4294,10 @@ msgstr "Select layer"
msgid "workspace.shape.menu.show" msgid "workspace.shape.menu.show"
msgstr "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 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
msgid "workspace.shape.menu.show-main" msgid "workspace.shape.menu.show-main"
msgstr "Show main component" msgstr "Show main component"

4
frontend/translations/es.po
View file

@ -4495,6 +4495,10 @@ msgstr "Seleccionar capa"
msgid "workspace.shape.menu.show" msgid "workspace.shape.menu.show"
msgstr "Mostrar" 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/sidebar/options/menus/component.cljs,
#: src/app/main/ui/workspace/context_menu.cljs #: src/app/main/ui/workspace/context_menu.cljs
msgid "workspace.shape.menu.show-main" msgid "workspace.shape.menu.show-main"