add multiselect nav to images dashboard section

resources/styles/framework.scss

@@ -821,6 +821,19 @@ input[type=range]:focus::-ms-fill-upper {
 
   }
 
+  &.tooltip-top {
+
+    &:hover {
+
+      &::after {
+        top: -165%;
+        left: -60%;
+      }
+
+    }
+
+  }
+
   &.tooltip-hover {
 
     &:hover {

resources/styles/partials/dashboard-grid.scss

@@ -288,3 +288,49 @@
   }
 
 }
+
+// MULTISELECT OPTIONS BAR
+.multiselect-bar {
+  align-items: center;
+  background-color: $color-white;
+  display: flex;
+  left: 0;
+  justify-content: center;
+  padding: $medium;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+
+  .multiselect-nav {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 110px;
+
+    svg {
+      cursor: pointer;
+      fill: $medium-ui-icons;
+      height: 20px;
+      width: 20px;
+
+      &:hover {
+        fill: $intense-ui-icons;
+      }
+
+    }
+
+    span.delete {
+
+      &:hover {
+
+        svg{
+          fill: $color-danger-light;
+        }
+
+      }
+
+    }
+
+  }
+
+}

src/uxbox/ui/dashboard/images.cljs

@@ -98,7 +98,20 @@
           [:div.input-checkbox.check-primary
            [:input {:type "checkbox" :id "item-6" :value "Yes"}]
            [:label {:for "item-6"}]]]
-       [:span "image_name.jpg"]]]]))
+       [:span "image_name.jpg"]]]
+
+    ;; MULTISELECT OPTIONS BAR
+    [:div.multiselect-bar
+     [:div.multiselect-nav
+      [:span.move-item.tooltip.tooltip-top
+       {:alt "Move to"}
+       i/organize]
+      [:span.copy.tooltip.tooltip-top
+       {:alt "Duplicate"}
+       i/copy]
+      [:span.delete.tooltip.tooltip-top
+       {:alt "Delete"}
+       i/trash]]]]))
 
 (def ^:const ^:private grid
   (mx/component