diff --git a/resources/public/images/svg/arrow-end.svg b/resources/public/images/svg/arrow-end.svg new file mode 100644 index 000000000..fe82545d6 --- /dev/null +++ b/resources/public/images/svg/arrow-end.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/styles/partials/sidebar-layers.scss b/resources/styles/partials/sidebar-layers.scss index 59fd09d51..55b12f5d1 100644 --- a/resources/styles/partials/sidebar-layers.scss +++ b/resources/styles/partials/sidebar-layers.scss @@ -19,15 +19,15 @@ display: flex; justify-content: space-between; margin: 0; - width: 80px; + width: 88%; li { cursor: pointer; svg { fill: $medium-ui-icons; - height: 16px; - width: 16px; + height: 14px; + width: 14px; &:hover { fill: $intense-ui-text; @@ -47,6 +47,30 @@ } + &.layer-up { + + svg { + transform: rotate(270deg); + } + + } + + &.layer-down { + + svg { + transform: rotate(90deg); + } + + } + + &.layer-top { + + svg { + transform: rotate(180deg); + } + + } + } } diff --git a/src/uxbox/ui/icons.cljs b/src/uxbox/ui/icons.cljs index 0606b1ee5..45d5eb47f 100644 --- a/src/uxbox/ui/icons.cljs +++ b/src/uxbox/ui/icons.cljs @@ -399,6 +399,16 @@ {:d "M500 0.39481055 295.46558 43.828097 377.48387 89.961899-6e-7 467.44576 32.159425 499.60519 407.6179 124.14671 449.4601 212.82547 500 0.39481055Z"}]])) +(def arrow-end + (html + [:svg + {:viewBox "0 0 500.00001 500.00001" + :height "500" + :width "500"} + [:path + {:d + "M26.05 110.078C14.17 110.064 2.093 118.413.394 130.81c-2.133 11.186 4.678 21.437 12.904 28.266 65.464 69.318 132.003 137.627 198.038 206.412 6.524 6.136 12.416 13.33 19.5 18.85H23c-12.742 0-23 10.258-23 23s10.258 23 23 23h454c12.742 0 23-10.258 23-23s-10.258-23-23-23H261.922c2.875-2.03 5.444-4.5 7.514-7.28 75.377-74.275 150.948-148.382 224.898-224.072 3.303-3.902 5.91-8.78 5.63-14.035.918-15.98-15.65-29.97-31.335-25.606-8.65 4.13-29.786 24.566-29.786 24.566S314.234 262.45 250.29 323.04c-7.373 2.987-11.746-5.243-16.468-9.1-65.776-65.676-128.32-134.54-194.558-199.747-3.952-2.824-8.568-4.11-13.215-4.115z"}]])) + (def layers (html [:svg diff --git a/src/uxbox/ui/workspace/header.cljs b/src/uxbox/ui/workspace/header.cljs index fc07d7af7..989b0768b 100644 --- a/src/uxbox/ui/workspace/header.cljs +++ b/src/uxbox/ui/workspace/header.cljs @@ -128,10 +128,7 @@ i/grid] [:li.tooltip.tooltip-bottom {:alt "Align (Ctrl + A)"} - i/alignment] - [:li.tooltip.tooltip-bottom - {:alt "Organize (Ctrl + O)"} - i/organize]] + i/alignment]] [:ul.options-btn [:li.tooltip.tooltip-bottom {:alt "Multi-canvas (Ctrl + M)"} diff --git a/src/uxbox/ui/workspace/sidebar/layers.cljs b/src/uxbox/ui/workspace/sidebar/layers.cljs index bb22dbab7..9f003575a 100644 --- a/src/uxbox/ui/workspace/sidebar/layers.cljs +++ b/src/uxbox/ui/workspace/sidebar/layers.cljs @@ -311,6 +311,10 @@ (rum/with-key key))))]] [:div.layers-tools [:ul.layers-tools-content + [:li.layer-up {:on-click duplicate} i/arrow-slide] + [:li.layer-top {:on-click duplicate} i/arrow-end] + [:li.layer-down {:on-click duplicate} i/arrow-slide] + [:li.layer-end {:on-click duplicate} i/arrow-end] [:li.clone-layer {:on-click duplicate} i/copy] [:li.group-layer {:on-click group} i/folder] [:li.delete-layer {:on-click delete} i/trash]]]])))