add organize layout icons

resources/public/images/svg/arrow-end.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500.00001"><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"/></svg>

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);
+        }
+
+      }
+
     }
 
   }

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

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)"}

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]]]])))