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 @@
+
+
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 @@
-
-
+
\ 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 @@
-
-
+
\ 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;