Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

✨ Improve workspace contextual menu.

Browse source
This commit is contained in:
Andrey Antukh 2020-03-25 18:49:59 +01:00
parent 1404057a60
commit 03e09aff17
2 changed files with 78 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/resources/styles/main/partials/workspace.scss
View file

@ -12,27 +12,34 @@
left: 740px; left: 740px;
position: absolute; position: absolute;
top: 40px; top: 40px;
width: 200px; width: 216px;
z-index: 12; z-index: 12;
// padding: $medium;
li { li {
align-items: center; align-items: center;
display: flex; font-size: $fs14;
font-size: $fs12; padding: $x-small $medium;
padding: $small;
cursor: pointer; cursor: pointer;
svg { display: flex;
fill: $color-gray-60; justify-content: space-between;
margin-right: $small;
height: 12px;
width: 12px; &.separator {
border-top: 1px solid $color-gray-10;
padding: 0px;
margin: 2px;
} }
span { span:first-child {
color: $color-gray-60; color: $color-gray-60;
} }
span:last-child {
color: $color-gray-20;
}
&:hover { &:hover {
background-color: $color-gray-lightest; background-color: $color-gray-lightest;
} }

69
frontend/src/uxbox/main/ui/workspace/context_menu.cljs
View file

@ -32,21 +32,72 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event)) (dom/stop-propagation event))
(mf/defc menu-entry
[{:keys [title shortcut on-click] :as props}]
[:li {:on-click on-click}
[:span.title title]
[:span.shortcut (or shortcut "")]])
(mf/defc menu-separator
[props]
[:li.separator])
(mf/defc shape-context-menu (mf/defc shape-context-menu
[{:keys [mdata] :as props}] [{:keys [mdata] :as props}]
(let [shape (:shape mdata) (let [shape (:shape mdata)
selected (:selected mdata) selected (:selected mdata)
on-duplicate do-duplicate #(st/emit! dw/duplicate-selected)
(fn [event] do-delete #(st/emit! dw/delete-selected)
(st/emit! dw/duplicate-selected)) do-copy #(st/emit! dw/copy-selected)
do-paste #(st/emit! dw/paste)
on-delete do-bring-forward #(st/emit! (dw/vertical-order-selected :up))
(fn [event] do-bring-to-front #(st/emit! (dw/vertical-order-selected :top))
(st/emit! dw/delete-selected)) ] do-send-backward #(st/emit! (dw/vertical-order-selected :down))
do-send-to-back #(st/emit! (dw/vertical-order-selected :bottom))
do-show-shape #(st/emit! (dw/show-shape (:id shape)))
do-hide-shape #(st/emit! (dw/hide-shape (:id shape)))
do-lock-shape #(st/emit! (dw/block-shape (:id shape)))
do-unlock-shape #(st/emit! (dw/unblock-shape (:id shape)))]
[:* [:*
[:li {:on-click on-duplicate} i/copy [:span "duplicate"]] [:& menu-entry {:title "Copy"
[:li {:on-click on-delete} i/trash [:span "delete"]]])) :shortcut "Ctrl + c"
:on-click do-copy}]
[:& menu-entry {:title "Paste"
:shortcut "Ctrl + v"
:on-click do-paste}]
[:& menu-entry {:title "Duplicate"
:shortcut "Ctrl + d"
:on-click do-duplicate}]
[:& menu-separator]
[:& menu-entry {:title "Bring forward"
:shortcut "Ctrl + ↑"
:on-click do-bring-forward}]
[:& menu-entry {:title "Bring to front"
:shortcut "Ctrl + Shift + ↑"
:on-click do-bring-to-front}]
[:& menu-entry {:title "Send backward"
:shortcut "Ctrl + ↓"
:on-click do-send-backward}]
[:& menu-entry {:title "Send to back"
:shortcut "Ctrl + Shift + ↓"
:on-click do-send-to-back}]
[:& menu-separator]
(if (:hidden shape)
[:& menu-entry {:title "Show"
:on-click do-show-shape}]
[:& menu-entry {:title "Hide"
:on-click do-hide-shape}])
(if (:blocked shape)
[:& menu-entry {:title "Unlock"
:on-click do-unlock-shape}]
[:& menu-entry {:title "Lock"
:on-click do-lock-shape}])
[:& menu-separator]
[:& menu-entry {:title "Delete"
:shortcut "Supr"
:on-click do-delete}]
]))
(mf/defc viewport-context-menu (mf/defc viewport-context-menu
[{:keys [mdata] :as props}] [{:keys [mdata] :as props}]