From ee6399b10dfbd90fbce4ab49211dd28d628a9e1b Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Thu, 7 Jan 2016 19:35:18 +0100
Subject: [PATCH] add new layers functions design

---
 frontend/uxbox/ui/icons.cljs                  |  32 +++++
 frontend/uxbox/ui/workspace/toolboxes.cljs    |  56 ++++++++-
 resources/public/images/svg/chain.svg         |  55 +++++++++
 resources/public/images/svg/copy.svg          |  64 +---------
 resources/public/images/svg/sublevel.svg      |  67 +---------
 .../public/styles/partials/settings-bar.scss  | 114 ++++++++++++++++--
 6 files changed, 245 insertions(+), 143 deletions(-)
 create mode 100644 resources/public/images/svg/chain.svg

diff --git a/frontend/uxbox/ui/icons.cljs b/frontend/uxbox/ui/icons.cljs
index c140df2a4..70a13329a 100644
--- a/frontend/uxbox/ui/icons.cljs
+++ b/frontend/uxbox/ui/icons.cljs
@@ -313,6 +313,16 @@
      {:d
       "M22.5 0C11.24 0 0 9.125 0 22.02v129.732c0 12.894 11.24 22.02 22.5 22.02h189.152c11.26 0 22.5-9.126 22.5-22.02V22.02c0-12.895-11.24-22.02-22.5-22.02H22.5zm265.848 0c-11.26 0-22.5 9.125-22.5 22.02v219.773c0 12.894 11.24 22.02 22.5 22.02H477.5c11.26 0 22.5-9.126 22.5-22.02V22.02C500 9.125 488.76 0 477.5 0H288.348zM35 35h164.152v103.77H35V35zm265.848 0H465v193.814H300.848V35zM22.5 206.525c-11.26 0-22.5 9.126-22.5 22.02V477.98C0 490.875 11.24 500 22.5 500h189.152c11.26 0 22.5-9.125 22.5-22.02V228.545c0-12.894-11.24-22.02-22.5-22.02H22.5zm12.5 35h164.152V465H35V241.525zm253.348 60.34c-11.26 0-22.5 9.125-22.5 22.02V477.98c0 12.895 11.24 22.02 22.5 22.02H477.5c11.26 0 22.5-9.125 22.5-22.02V323.885c0-12.894-11.24-22.02-22.5-22.02H288.348zm12.5 35H465V465H300.848V336.865z"}]]))
 
+(def copy
+  (html
+   [:svg
+    {:viewBox "0 0 500.00001 500.00001"
+     :height "500"
+     :width "500"}
+    [:path
+     {:d
+      "M358.943 28.602c-.308 0-.604.037-.89.09-49.585.04-99.173.093-148.752-.014-27.727-.028-55.458.074-83.177.85-4.752-1.018-10.443 1.406-11.455 6.533-.466 103.07-.64 206.2.08 309.292-1.238 5.19 3.24 9.595 8.193 9.9 125.59 1.67 251.218.43 376.822.83-.053-62.194.004-124.387.004-186.58 0-.025.006-.048.006-.072v-33.244c.01-1.015-.075-1.874-.633-2.63 0 0-100.553-100.47-103.737-103.525-1.173-1.204-1.968-1.41-3.215-1.428zm-3.77 41.04V170.24c0 .766.378 1.454.98 1.98.526.603 1.214.98 1.98.98H459.01c.024 47.2-.018 94.397-.512 141.595-100.834.884-201.672.388-302.508.517l.46-245.412c66.24-.125 132.482-.207 198.724-.257zm-311.92 74.215c-14.417.007-28.835.03-43.253.063v327.385c122.697-.3 245.398.592 368.092-.62 5.462-.334 13.184 1.326 16.04-4.894 2.218-19.765 1.22-39.8 1.23-59.675-.866-8.903 1.344-18.108-1.346-26.87-2.656-6.83-11.41-6.93-17.608-6.776-6.942.5-16.216-1.82-20.775 5.065-3.71 17.107-1.46 34.96-2.182 52.37-9.804.426-20.454.09-30.583.226-90.7-.124-181.406.822-272.103-.165l.46-244.926 56.083-.954.754-40.133c-3.85-.03-7.7-.064-11.55-.074-14.418-.022-28.838-.03-43.256-.023z"}]]))
+
 (def box
   (html
    [:svg
@@ -536,3 +546,25 @@
      [:path
       {:d
        "M138.95.037c-15.98-.92-29.97 15.647-25.606 31.334 4.13 8.65 24.567 29.787 24.567 29.787S262.45 185.765 323.04 249.71c2.987 7.374-5.242 11.746-9.1 16.468-65.676 65.776-134.54 128.32-199.746 194.558-10.04 14.05-.633 36.505 16.616 38.87 11.186 2.13 21.436-4.678 28.266-12.905 69.318-65.464 137.627-132.003 206.412-198.038 7.657-8.142 16.97-15.295 22.61-25.015 5.093-12.025-1.092-25.682-11.04-33.082-74.275-75.378-148.38-150.948-224.07-224.898-3.904-3.303-8.78-5.912-14.037-5.63z"}]]]))
+
+(def sublevel
+  (html
+   [:svg
+    {:viewBox "0 0 500.00001 500.00001"
+     :height "500"
+     :width "500"}
+    [:g
+     [:path
+      {:d
+       "M79.172.13v70.298h38.207V.128H79.17zm0 100.864V499.87H317.58v-38.206H117.38v-360.67H79.17zm271.355 360.67v38.207h70.3v-38.206h-70.3z"}]]]))
+
+(def chain
+  (html
+   [:svg
+    {:viewBox "0 0 500.00001 500.00001"
+     :height "500"
+     :width "500"}
+    [:g
+     [:path
+      {:d
+       "M374.19.027c-35.65-.26-69.825 17.04-93.205 43.46C265.015 59.3 246.795 74 235.798 93.89c-5.152 18.457 15.536 39.06 33.81 31.036 12.228-5.787 20.932-16.63 30.895-25.454 16.225-15.904 31.61-34.625 53.268-43.215 30.63-9.51 68.027 2.75 83.552 31.696 16.133 27.356 11.406 65.9-12.983 86.953-33.688 33.49-65.99 68.54-101.818 99.774-25.676 17.24-62.493 13.964-85.182-6.894-9.892-7.803-24.664-13.51-36.066-5.384-13.15 8.622-16.047 29.624-4.153 40.557 15.934 16.298 36.916 27.65 59.094 32.784 40.133 9.484 85.672-1.555 114.365-32.063 33.077-32.28 66.63-64.146 97.863-98.234 23.05-23.964 33.835-58.702 31.156-91.463-2.703-43.764-31.228-84.958-71.533-102.67-16.87-7.71-35.484-11.684-53.878-11.29zm-159.287 160.62c-39.02-.334-76.686 19.59-100.835 49.885-31.172 33.42-67.206 62.36-94.8 98.98-26.99 41.084-25.46 98.636 3.545 138.487 27.244 38.817 78.07 59.338 124.213 49.595 24.726-4.464 47.814-17.325 65.234-35.184 17.525-16.416 34.998-33.22 49.954-51.994 8.832-16.433-6.032-38.576-24.5-37.36-12.405.645-20.594 11.537-29.6 18.688-19.153 17.818-35.794 39.82-60.066 51.035-30.55 10.52-68.22-1.292-84.668-29.788-16.56-26.438-13.142-64.302 9.985-85.88 34.068-34.218 67.15-69.52 103.268-101.62 26.303-18.273 64.672-14.35 87.647 7.61 10.006 7.95 25.88 12.004 36.363 2.663 12.257-9.775 13.275-30.916.403-40.685-22.72-22.32-54.41-34.652-86.143-34.433z"}]]]))
diff --git a/frontend/uxbox/ui/workspace/toolboxes.cljs b/frontend/uxbox/ui/workspace/toolboxes.cljs
index ac2d91d51..951cb536d 100644
--- a/frontend/uxbox/ui/workspace/toolboxes.cljs
+++ b/frontend/uxbox/ui/workspace/toolboxes.cljs
@@ -101,13 +101,63 @@
                 :class (when selected? "selected")}
              [:div.toggle-element
               {:class (when visible? "selected")
-               :on-click #(actions/toggle-shape-visibility conn shape-id)} icons/eye]
+               :on-click #(actions/toggle-shape-visibility conn shape-id)} i/eye]
              [:div.block-element
               {:class (when locked? "selected")
-               :on-click #(actions/toggle-shape-lock conn shape-id)} icons/lock]
+               :on-click #(actions/toggle-shape-lock conn shape-id)} i/lock]
              [:div.element-icon
               (shapes/icon raw-shape)]
-             [:span (shapes/name raw-shape)]]))]]])))
+             [:span (shapes/name raw-shape)]]))
+;; TODO GROUPS
+            [:li
+              [:div.element-actions
+                [:div.toggle-element i/eye]
+                [:div.block-element i/lock]]
+              [:div.element-icon i/box]
+              [:span "Layer name"]]
+
+            [:li.group
+              [:div.element-actions
+                [:div.toggle-element i/eye]
+                [:div.block-element i/lock]
+                [:div.chain-element i/chain]]
+              [:div.element-icon i/folder]
+              [:span "Closed group"]
+              [:span.toggle-content i/arrow-slide]]
+
+            [:li.group.open
+              [:div.element-actions
+                [:div.toggle-element i/eye]
+                [:div.block-element i/lock]
+                [:div.chain-element i/chain]]
+              [:div.element-icon i/folder]
+              [:span "Opened group"]
+              [:span.toggle-content i/arrow-slide]]
+
+            [:li
+              [:div.element-actions
+                [:div.toggle-element i/eye]
+                [:div.block-element i/lock]]
+              [:div.sublevel-element i/sublevel]
+              [:div.element-icon i/box]
+              [:span "Sub layer"]]
+
+            [:li.group
+              [:div.element-actions
+                [:div.toggle-element i/eye]
+                [:div.block-element i/lock]
+                [:div.chain-element i/chain]]
+              [:div.sublevel-element i/sublevel]
+              [:div.element-icon i/folder]
+              [:span "Sub group"]
+              [:span.toggle-content i/arrow-slide]]]]
+
+        [:div.layers-tools
+          [:ul.layers-tools-content
+            [:li.clone-layer i/copy]
+            [:li.group-layer i/folder]
+            [:li.delete-layer i/trash]
+          ]]])))
 
 (def ^:static layers
   (util/component
diff --git a/resources/public/images/svg/chain.svg b/resources/public/images/svg/chain.svg
new file mode 100644
index 000000000..c3ebf7e18
--- /dev/null
+++ b/resources/public/images/svg/chain.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 500 500.00001"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="chain.svg">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="0.944"
+     inkscape:cx="92.606372"
+     inkscape:cy="134.37847"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <path
+     style="fill:#060606"
+     d="m 374.18867,0.0267054 c -35.64828,-0.2594519 -69.82413,17.0404356 -93.20368,43.4592726 -15.96943,15.815633 -34.18905,30.514355 -45.18713,50.405678 -5.1515,18.457664 15.53601,39.058944 33.81154,31.036824 12.22641,-5.78727 20.9306,-16.63075 30.89383,-25.454779 16.22461,-15.903949 31.60842,-34.624491 53.26814,-43.214287 30.62802,-9.50856 68.02579,2.749108 83.55033,31.696765 16.13296,27.355411 11.40609,65.900651 -12.9823,86.952601 -33.6878,33.49189 -65.99089,68.54217 -101.81764,99.77497 -25.67623,17.23892 -62.49311,13.96445 -85.18151,-6.89399 -9.89211,-7.80227 -24.66431,-13.50914 -36.06589,-5.38341 -13.15171,8.62196 -16.04732,29.62343 -4.15345,40.55617 15.93267,16.29843 36.91504,27.64936 59.09307,32.78437 40.13279,9.48411 85.67216,-1.55446 114.36469,-32.06287 33.07787,-32.27923 66.63084,-64.14607 97.86433,-98.23413 23.04904,-23.96391 33.83451,-58.70201 31.15623,-91.46246 C 496.89691,70.223369 468.37212,29.028579 428.06714,11.316877 411.19706,3.6063382 392.58276,-0.3672076 374.18867,0.0267054 Z M 214.90257,160.6474 c -39.01926,-0.33444 -76.68538,19.58857 -100.83485,49.88477 -31.172069,33.41854 -67.205805,62.36033 -94.800257,98.98025 -26.9880443,41.08393 -25.4588562,98.63597 3.545885,138.48623 27.24324,38.81883 78.068962,59.33957 124.213102,49.59632 24.72587,-4.46394 47.81335,-17.32539 65.23405,-35.18393 17.52414,-16.41671 34.99703,-33.22162 49.95378,-51.99502 8.83127,-16.43283 -6.03228,-38.57632 -24.49974,-37.35978 -12.4053,0.64489 -20.59493,11.5371 -29.6011,18.68791 -19.15239,17.81799 -35.79382,39.82048 -60.06572,51.03535 -30.55108,10.5216 -68.21902,-1.2911 -84.667542,-29.78775 -16.559305,-26.43812 -13.141765,-64.30146 9.984965,-85.87978 34.067387,-34.21788 67.149797,-69.52054 103.267867,-101.61931 26.30278,-18.27341 64.67227,-14.35 87.64732,7.61083 10.00553,7.94798 25.88113,12.00271 36.36258,2.66107 12.25723,-9.77484 13.27481,-30.9153 0.40352,-40.68432 -22.71929,-22.32063 -54.40976,-34.65193 -86.14386,-34.43284 z"
+     id="path7397"
+     inkscape:connector-curvature="0" />
+</svg>
diff --git a/resources/public/images/svg/copy.svg b/resources/public/images/svg/copy.svg
index 66015ba9c..41863f61e 100644
--- a/resources/public/images/svg/copy.svg
+++ b/resources/public/images/svg/copy.svg
@@ -1,63 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="500"
-   height="500"
-   viewBox="0 0 500 500.00001"
-   id="svg4946"
-   version="1.1"
-   sodipodi:docname="copy.svg"
-   inkscape:version="0.91 r13725">
-  <defs
-     id="defs4948">
-    <path
-       id="path-1"
-       d="M0.140487671 0C0.0628984728 0 0 0.065177679 0 0.14488998L0 17.85511C0 17.9351306 0.0631103513 18 0.140487671 18L21.8595124 18C21.9371015 18 22 17.9348223 22 17.85511L22 0.14488998C22 0.064869454 21.9368896 0 21.8595124 0L0.140487671 0ZM1 1L1 17 21 17 21 1 1 1ZM8.31146755 3.96557279L11.5680228 9.58960333C11.6080958 9.65880899 11.694647 9.6768875 11.7588871 9.63170823L14.5213939 7.68886831C14.6506985 7.59792981 14.8228868 7.62965466 14.9092326 7.7648075L19.9298551 15.6233415C20.0147479 15.75622 19.9533678 15.8639394 19.8034742 15.8639394L2.14722686 15.8639394C1.99212294 15.8639394 1.92473319 15.7514312 1.99797568 15.6102003L7.71352136 4.58911188 8.03502924 3.96915944C8.107704 3.82902321 8.23291348 3.82991093 8.31146755 3.96557279ZM17.5 6C18.3284271 6 19 5.32842715 19 4.5 19 3.67157284 18.3284271 3 17.5 3 16.6715729 3 16 3.67157284 16 4.5 16 5.32842715 16.6715729 6 17.5 6ZM0.140487671 0C0.0628984728 0 0 0.065177679 0 0.14488998L0 17.85511C0 17.9351306 0.0631103513 18 0.140487671 18L21.8595124 18C21.9371015 18 22 17.9348223 22 17.85511L22 0.14488998C22 0.064869454 21.9368896 0 21.8595124 0L0.140487671 0ZM8.31146755 3.96557279L11.5680228 9.58960333C11.6080958 9.65880899 11.694647 9.6768875 11.7588871 9.63170823L14.5213939 7.68886831C14.6506985 7.59792981 14.8228868 7.62965466 14.9092326 7.7648075L19.9298551 15.6233415C20.0147479 15.75622 19.9533678 15.8639394 19.8034742 15.8639394L2.14722686 15.8639394C1.99212294 15.8639394 1.92473319 15.7514312 1.99797568 15.6102003L7.71352136 4.58911188 8.03502924 3.96915944C8.107704 3.82902321 8.23291348 3.82991093 8.31146755 3.96557279ZM17.5 6C18.3284271 6 19 5.32842715 19 4.5 19 3.67157284 18.3284271 3 17.5 3 16.6715729 3 16 3.67157284 16 4.5 16 5.32842715 16.6715729 6 17.5 6Z" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     showgrid="false"
-     units="px"
-     showguides="true"
-     inkscape:zoom="1.3350176"
-     inkscape:cx="290.40207"
-     inkscape:cy="320.59564"
-     inkscape:window-width="1920"
-     inkscape:window-height="1056"
-     inkscape:window-x="1920"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4946">
-    <sodipodi:guide
-       orientation="0,1"
-       position="166.17009,250.51783"
-       id="guide5801" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata4951">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>
-          image/svg+xml
-        </dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <path
-     d="m 358.94336,28.601562 c -0.30857,0 -0.60397,0.03742 -0.89063,0.0918 -49.58512,0.03915 -99.17269,0.0912 -148.75195,-0.01563 -27.72781,-0.02751 -55.45913,0.0742 -83.17773,0.851563 -4.75195,-1.01912 -10.44291,1.40434 -11.45508,6.53125 -0.4662,103.068103 -0.64006,206.200213 0.0801,309.291013 -1.23786,5.1905 3.2388,9.59559 8.19336,9.90039 125.5876,1.6695 251.21638,0.43148 376.82031,0.83008 -0.0532,-62.19379 0.004,-124.38654 0.004,-186.58008 3.7e-4,-0.0246 0.006,-0.0475 0.006,-0.0723 l 0,-33.24414 c 0.009,-1.01455 -0.0746,-1.87344 -0.63281,-2.62891 0,0 -100.55214,-100.471187 -103.73633,-103.52539 -1.17253,-1.205466 -1.9674,-1.411454 -3.21484,-1.429688 z m -3.76953,41.041016 0,66.542972 0,33.24414 0,0.81054 c 0,0.76568 0.37667,1.45418 0.98047,1.97852 0.52434,0.60379 1.21284,0.98047 1.97851,0.98047 l 0.81055,0 33.24414,0 66.82227,0 c 0.0238,47.19953 -0.0177,94.39802 -0.51172,141.5957 -100.83365,0.8844 -201.67196,0.38808 -302.50782,0.51758 l 0.45899,-245.412109 c 66.24156,-0.124924 132.483,-0.207104 198.72461,-0.257813 z M 43.253906,143.85742 C 28.835649,143.8643 14.418195,143.88597 0,143.91992 l 0,327.38477 c 122.69715,-0.2986 245.39767,0.59226 368.0918,-0.61914 5.46229,-0.3343 13.18389,1.32497 16.04101,-4.89453 2.21679,-19.76552 1.21852,-39.80019 1.22852,-59.67579 -0.86514,-8.9033 1.34476,-18.10799 -1.34571,-26.87109 -2.65586,-6.8301 -11.40976,-6.92879 -17.60742,-6.77539 -6.94207,0.5006 -16.21617,-1.81909 -20.77539,5.06641 -3.70864,17.1073 -1.46112,34.96009 -2.18164,52.37109 -9.80503,0.4248 -20.45557,0.09 -30.58398,0.22461 -90.70066,-0.1246 -181.40587,0.82138 -272.103518,-0.16602 l 0.458984,-244.92578 c 18.69461,-0.31754 37.389395,-0.63501 56.083985,-0.95312 0.2525,-13.37765 0.503606,-26.75511 0.753906,-40.13282 -3.85028,-0.0315 -7.700371,-0.0642 -11.550781,-0.0742 -14.418215,-0.0213 -28.837602,-0.0284 -43.25586,-0.0215 z"
-     id="path5835"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="sccccccccsccccscccscscccccccscccccccccccccccs" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500.00001"><path d="M358.943 28.602c-.308 0-.604.037-.89.09-49.585.04-99.173.093-148.752-.014-27.727-.028-55.458.074-83.177.85-4.752-1.018-10.443 1.406-11.455 6.533-.466 103.07-.64 206.2.08 309.292-1.238 5.19 3.24 9.595 8.193 9.9 125.59 1.67 251.218.43 376.822.83-.053-62.194.004-124.387.004-186.58 0-.025.006-.048.006-.072v-33.244c.01-1.015-.075-1.874-.633-2.63 0 0-100.553-100.47-103.737-103.525-1.173-1.204-1.968-1.41-3.215-1.428zm-3.77 41.04V170.24c0 .766.378 1.454.98 1.98.526.603 1.214.98 1.98.98H459.01c.024 47.2-.018 94.397-.512 141.595-100.834.884-201.672.388-302.508.517l.46-245.412c66.24-.125 132.482-.207 198.724-.257zm-311.92 74.215c-14.417.007-28.835.03-43.253.063v327.385c122.697-.3 245.398.592 368.092-.62 5.462-.334 13.184 1.326 16.04-4.894 2.218-19.765 1.22-39.8 1.23-59.675-.866-8.903 1.344-18.108-1.346-26.87-2.656-6.83-11.41-6.93-17.608-6.776-6.942.5-16.216-1.82-20.775 5.065-3.71 17.107-1.46 34.96-2.182 52.37-9.804.426-20.454.09-30.583.226-90.7-.124-181.406.822-272.103-.165l.46-244.926 56.083-.954.754-40.133c-3.85-.03-7.7-.064-11.55-.074-14.418-.022-28.838-.03-43.256-.023z"/></svg>
\ No newline at end of file
diff --git a/resources/public/images/svg/sublevel.svg b/resources/public/images/svg/sublevel.svg
index 771dca0d8..2e526b8ab 100644
--- a/resources/public/images/svg/sublevel.svg
+++ b/resources/public/images/svg/sublevel.svg
@@ -1,66 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="500"
-   height="500"
-   viewBox="0 0 500.00001 500.00001"
-   id="svg2"
-   version="1.1"
-   sodipodi:docname="sublevel.svg"
-   inkscape:version="0.91 r13725">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     showgrid="false"
-     units="px"
-     inkscape:zoom="1.3350176"
-     inkscape:cx="173.16796"
-     inkscape:cy="236.01456"
-     inkscape:window-width="1920"
-     inkscape:window-height="1056"
-     inkscape:window-x="1920"
-     inkscape:window-y="24"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>
-
-
-          image/svg+xml
-
-
-        </dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <use
-     id="use32130"
-     xlink:href="#symbol16714"
-     transform="matrix(0.48875855,0,0,0.48875855,266.5973,18.208584)"
-     x="0"
-     y="0"
-     width="100%"
-     height="100%" />
-  <path
-     style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:2, 16;stroke-dashoffset:0;stroke-opacity:1"
-     d="m 79.17223,0.12916907 0,70.29924193 38.20701,0 0,-70.29924193 -38.20701,0 z m 0,100.86524093 0,360.66941 0,38.20701 38.20701,0 200.20231,0 0,-38.20701 -200.20231,0 0,-360.66941 -38.20701,0 z m 271.35431,360.66941 0,38.20701 70.30123,0 0,-38.20701 -70.30123,0 z"
-     id="rect23283"
-     inkscape:connector-curvature="0" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500.00001 500.00001"><use xlink:href="#symbol16714" transform="matrix(.48876 0 0 .48876 266.597 18.21)" width="100%" height="100%"/><path d="M79.172.13v70.298h38.207V.128H79.17zm0 100.864V499.87H317.58v-38.206H117.38v-360.67H79.17zm271.355 360.67v38.207h70.3v-38.206h-70.3z"/></svg>
\ No newline at end of file
diff --git a/resources/public/styles/partials/settings-bar.scss b/resources/public/styles/partials/settings-bar.scss
index 5fae613a0..439847039 100644
--- a/resources/public/styles/partials/settings-bar.scss
+++ b/resources/public/styles/partials/settings-bar.scss
@@ -4,13 +4,14 @@
   height: 100%;
   position: fixed;
   right: 0;
-  width: 240px;
+  width: 250px;
 
   .settings-bar-inside {
     align-items: center;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
+    padding-bottom: 30px;
     padding-top: 50px;
     height: 100%;
 
@@ -79,6 +80,54 @@
 
   }
 
+  .layers-tools {
+    background-color: $color-gray-darker;
+    bottom: 0;
+    display: flex;
+    height: 30px;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+
+    .layers-tools-content {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin: 0;
+      width: 80px;
+
+      li {
+        cursor: pointer;
+
+        svg {
+          fill: $color-gray;
+          height: 16px;
+          width: 16px;
+
+          &:hover {
+            fill: $color-white;
+          }
+
+        }
+
+        &.delete-layer {
+
+          svg {
+
+            &:hover {
+              fill: $color-danger;
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
 }
 
 .tool-btn {
@@ -87,15 +136,15 @@
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
-  height: 90px;
+  height: 94px;
   justify-content: center;
   margin: $medium 0 0 $big;
-  width: 90px;
+  width: 94px;
 
   svg {
     fill: $color-gray-darker;
-    height: 50px;
-    width: 50px;
+    height: 52px;
+    width: 52px;
   }
 
   &:hover {
@@ -118,10 +167,10 @@
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
-  height: 60px;
+  height: 62px;
   justify-content: center;
   margin: $medium 0 0 $medium;
-  width: 60px;
+  width: 62px;
 
   svg {
     fill: $color-gray-darker;
@@ -156,12 +205,19 @@
 
     svg {
       fill: $color-gray;
-      height: 15px;
-      margin-right: $small;
-      width: 15px;
+      height: 13px;
+      margin-right: 8px;
+      width: 13px;
     }
 
-    .element-icon {
+    .element-actions {
+      align-items: center;
+      display: flex;
+      width: 62px;
+    }
+
+    .element-icon,
+    .sublevel-element {
 
       svg {
         fill: $color-gray-darker;
@@ -169,6 +225,42 @@
 
     }
 
+    .toggle-content {
+      margin-left: auto;
+      width: 12px;
+
+      svg {
+        fill: $color-gray-darker;
+        transform: rotate(90deg);
+        width: 12px;
+      }
+
+      &:hover {
+
+        svg {
+          fill: $color-white;
+        }
+
+      }
+
+    }
+
+    &.group {
+
+      &.open {
+
+        .toggle-content {
+
+          svg {
+            transform: rotate(270deg);
+          }
+
+        }
+
+      }
+
+    }
+
     span {
       color: darken($color-gray-darker, 8%);
       font-size: $fs13;