Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 08:20:45 -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

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

@ -12,27 +12,34 @@
left: 740px;
position: absolute;
top: 40px;
width: 200px;
width: 216px;
z-index: 12;
// padding: $medium;
li {
align-items: center;
display: flex;
font-size: $fs12;
padding: $small;
font-size: $fs14;
padding: $x-small $medium;
cursor: pointer;
svg {
fill: $color-gray-60;
margin-right: $small;
height: 12px;
width: 12px;
display: flex;
justify-content: space-between;
&.separator {
border-top: 1px solid $color-gray-10;
padding: 0px;
margin: 2px;
}
span {
span:first-child {
color: $color-gray-60;
}
span:last-child {
color: $color-gray-20;
}
&:hover {
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/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
[{:keys [mdata] :as props}]
(let [shape (:shape mdata)
selected (:selected mdata)
on-duplicate
(fn [event]
(st/emit! dw/duplicate-selected))
on-delete
(fn [event]
(st/emit! dw/delete-selected)) ]
do-duplicate #(st/emit! dw/duplicate-selected)
do-delete #(st/emit! dw/delete-selected)
do-copy #(st/emit! dw/copy-selected)
do-paste #(st/emit! dw/paste)
do-bring-forward #(st/emit! (dw/vertical-order-selected :up))
do-bring-to-front #(st/emit! (dw/vertical-order-selected :top))
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"]]
[:li {:on-click on-delete} i/trash [:span "delete"]]]))
[:& menu-entry {:title "Copy"
: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
[{:keys [mdata] :as props}]