piweek code for demo

frontend/resources/styles/main/partials/library-bar.scss

@@ -65,7 +65,7 @@
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
-        padding: $medium;
+        padding: $small $medium;
 
         span.element-title {
           color: $intense-ui-text;
@@ -128,3 +128,80 @@
   }
 
 }
+
+.projects-row {
+  align-items: center;
+  display: flex;
+  padding: $medium;
+
+  span {
+    color: $color-gray-30;
+    font-size: $fs14;
+  }
+
+  .add-project {
+    align-items: center;
+    background-color: $dark-ui-bg;
+    border-radius: $br-small;
+    border: 1px solid transparent;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    margin-left: auto;
+    padding: $x-small;
+
+    svg {
+      fill: $soft-ui-icons;
+      height: 16px;
+      width: 16px;
+    }
+
+    &:hover {
+      background-color: $main-ui-color;
+
+      svg {
+        fill: $soft-ui-icons;
+      }
+    }
+  }
+}
+
+.dashboard-search {
+  align-items: center;
+  border: 1px solid $color-gray-10;
+  display: flex;
+  margin: $medium;
+  
+  .input-text {
+    background: $color-white;
+    border: 0;
+    color: $intense-ui-text;
+    font-size: $fs14;
+    padding: 4px 8px;
+    margin: 0;
+    max-width: 170px;
+    width: 100%;
+  }
+
+  .clear-search {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    height: 28px;
+    padding: 0 5px;
+
+    svg {
+      fill: $medium-ui-icons;
+      height: 15px;
+      transform: rotate(45deg);
+      width: 15px;
+
+      &:hover {
+        fill: $color-danger;
+      }
+
+    }
+
+  }
+
+}

frontend/src/uxbox/main/ui/dashboard/projects.cljs

@@ -107,15 +107,16 @@
 
       ;; Search
       ;; TODO: convert to separate component?
-      [:form.dashboard-search
+      ; [:form.dashboard-search
-       [:input.input-text
+      ;  [:input.input-text
-        {:key :images-search-box
+      ;   {:key :images-search-box
-         :type "text"
+      ;    :type "text"
-         :on-change on-term-change
+      ;    :on-change on-term-change
-         :auto-focus true
+      ;    :auto-focus true
-         :placeholder (tr "ds.search.placeholder")
+      ;    :placeholder (tr "ds.search.placeholder")
-         :value (or filtering "")}]
+      ;    :value (or filtering "")}]
-       [:div.clear-search {:on-click on-clear} i/close]]]]))
+      ;  [:div.clear-search {:on-click on-clear} i/close]]
+       ]]))
 
 ;; --- Grid Item Thumbnail
 
@@ -236,15 +237,27 @@
                       (sort-by :created-at))]
     [:div.library-bar
      [:div.library-bar-inside
+      [:form.dashboard-search
+       [:input.input-text
+        {:key :images-search-box
+         :type "text"
+         :auto-focus true
+         :placeholder (tr "ds.search.placeholder")}]
+       [:div.clear-search i/close]]
       [:ul.library-elements
-       [:li
+      ;  [:li
-        [:a.btn-primary #_{:on-click #(st/emit! di/create-collection)}
+      ;   [:a.btn-primary #_{:on-click #(st/emit! di/create-collection)}
-         "new project +"]]
+      ;    "new project +"]]
 
        [:li.recent-projects {:on-click #(st/emit! (udp/go-to-project nil))
              :class-name (when (nil? id) "current")}
         [:span.element-title "Recent"]]
 
+       [:div.projects-row
+        [:span "PROJECTS"]
+        [:a.add-project #_{:on-click #(st/emit! di/create-collection)}
+         i/close]]
+
        (for [item projects]
          [:& nav-item {:id (:id item)
                        :key (:id item)
@@ -268,7 +281,7 @@
   (let [opts (mf/deref opts-iref)
         files (mf/deref files-ref)]
     [:*
-     [:& menu {:id id :opts opts :files files}]
+     #_[:& menu {:id id :opts opts :files files}]
      [:section.dashboard-grid.library
       [:& grid {:id id :opts opts :files files}]]]))