diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 3336cfdb8d..8cbe6cc33e 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -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; } diff --git a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs index e6aa07fcc9..669b7139a9 100644 --- a/frontend/src/uxbox/main/ui/workspace/context_menu.cljs +++ b/frontend/src/uxbox/main/ui/workspace/context_menu.cljs @@ -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}]