add library bar and grid

frontend/uxbox/ui/elements.cljs

@@ -2,6 +2,7 @@
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
             [uxbox.ui.header :as ui.header]
+            [uxbox.ui.library-bar :as ui.library-bar]
             [uxbox.ui.icons :as icons]
             [uxbox.util :as util]))
 
@@ -15,16 +16,25 @@
    [:main.dashboard-main
     (ui.header/header)
     [:section.dashboard-content
-      [:section#dashboard-bar.dashboard-bar.library-bar
+      [:section#dashboard-bar.dashboard-bar.library-gap
         [:div.dashboard-info
           [:span.dashboard-projects "20 elements"]
           [:span "Sort by"]
             #_(project-sort-selector (atom :name))]
           [:div.dashboard-search
             icons/search]]
+      (ui.library-bar/library-bar)
       [:section.dashboard-grid.library
+        [:div.dashboard-title
           [:h2 "Library name"]
+          [:div.edition
+            [:span icons/pencil]
+            [:span icons/trash]
+          ]
+        ]
         [:div.dashboard-grid-content
+          [:div.grid-item.add-project
+            [:span "+ New element"]]
           [:div.grid-item.project-th
             [:span.grid-item-image icons/image]
             [:h3 "Custom element"]

frontend/uxbox/ui/library_bar.cljs

@@ -0,0 +1,84 @@
+(ns uxbox.ui.library-bar
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [uxbox.util :as util]
+            [uxbox.ui.icons :as i]))
+
+(defn library-bar-render
+  [own]
+  (html
+   [:div.library-bar
+    [:div.library-bar-inside
+      [:ul.library-tabs
+        [:li "STANDARD"]
+        [:li.current "YOUR WIDGETS"]
+      ]
+      [:ul.library-elements
+        [:li
+          [:a.btn-primary {:href "#"} "+ New library"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+        [:li
+          [:span.element-title "Forms"]
+          [:span.element-subtitle "21 widgets"]
+        ]
+      ]
+    ]
+   ]))
+
+(def ^:static library-bar
+  (util/component
+   {:render library-bar-render
+    :name "library-bar"
+    :mixins [rum/static]}))

resources/public/styles/partials/dashboard-bar.scss

@@ -44,8 +44,8 @@
 
   }
 
-  &.library-bar {
+  &.library-gap {
-    padding: $small $medium $small 230px;
+    padding: $small $medium $small 270px;
   }
 
 }

resources/public/styles/partials/dashboard-grid.scss

@@ -5,6 +5,46 @@
   font-size: $fs14;
   padding: $medium 250px $medium $medium;
 
+  .dashboard-title {
+    position: relative;
+    width: 100%;
+
+    h2 {
+      text-align: center;
+      width: 100%;
+    }
+
+    .edition {
+      align-items: center;
+      display: flex;
+      position: absolute;
+      right: 40px;
+      top: 0;
+
+      span {
+        cursor: pointer;
+
+        svg {
+          fill: $color-gray;
+          height: 20px;
+          margin: 0 10px;
+          width: 20px;
+        }
+
+        &:hover {
+
+          svg {
+            fill: $color-gray-darker;
+          }
+          
+        }
+
+      }
+
+    }
+
+  }
+
   .dashboard-grid-content {
     align-items: center;
     box-sizing: border-box;
@@ -13,9 +53,10 @@
     height: 100%;
     justify-content: center;
     margin: $big;
-    max-height: 75vh;
+    max-height: 77vh;
     min-height: 60vh;
     overflow: scroll;
+    padding-bottom: 30px;
     width: 100%;
 
     .grid-item {
@@ -148,6 +189,19 @@
   // STYLES FOR LIBRARIES
   &.library {
     padding: $medium $medium $medium 250px;
+
+    .dashboard-grid-content {
+
+      .grid-item {
+
+        h3 {
+          font-size: $fs18;
+        }
+
+      }
+
+    }
+
   }
 
 }

resources/public/styles/partials/library-bar.scss

@@ -1,75 +1,86 @@
-.activity-bar {
+.library-bar {
   background-color: $color-white;
   bottom: 0;
   height: 100%;
+  left: 0;
   position: fixed;
-  right: 0;
   width: 250px;
 
-  .activity-bar-inside {
+  .library-bar-inside {
-    align-items: center;
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
+    height: 100%;
-    padding-top: 70px;
+    padding-top: 60px;
-  }
 
-  h4 {
+    .library-tabs {
-    color: $color-gray-dark;
+      align-items: center;
-    font-size: $fs16;
+      background-color: $color-gray-lighter;
+      display: flex;
+      justify-content: space-around;
+      margin: 0;
+      padding-top: 12px;
+
+      li {
+        background-color: darken($color-gray-lighter, 10%);
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        color: $color-gray;
+        cursor: pointer;
         font-weight: bold;
-    margin-bottom: $x-small;
+        padding: .6rem;
-  }
 
-  .date-ribbon {
+        &:hover {
-    background-color: lighten($color-gray-light, 12%);
-    box-sizing: border-box;
           color: $color-white;
-    font-size: $fs12;
-    font-weight: bold;
-    padding: 2px;
-    text-align: center;
-    width: 100%;
         }
 
-  .activity-input {
+        &.current {
-    border-bottom: 1px solid $color-gray-lighter;
+          background-color: $color-white;
-    box-sizing: border-box;
+          color: $color-primary;
-    display: flex;
-    font-size: $fs13;
-    padding: $small;
-    width: 100%;
-
-    img.activity-author {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 30px;
-      margin-right: $medium;
-      width: 30px;
         }
 
-    .activity-content {
+      }
+
+    }
+
+    .library-elements {
       display: flex;
       flex-direction: column;
+      height: 85%;
+      overflow-y: auto;
+      padding-bottom: 20px;
 
-      .activity-project {
+      li {
-        align-items: center;
+        border-bottom: 1px solid $color-gray-lighter;
+        cursor: pointer;
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
+        padding: 10px;
 
-        a {
+        .element-title {
+          color: $color-gray-dark;
           font-weight: bold;
-          margin: 0 3px;
+          margin-bottom: 5px;
         }
 
-      }
+        .element-subtitle {
-
-      .activity-time {
           color: $color-gray-light;
-        font-size: $fs11;
           font-style: italic;
         }
+
+        &:hover,
+        .current {
+          background-color: $color-primary;
+
+          .element-title,
+          .element-subtitle {
+            color: $color-white;
           }
         }
 
       }
+
+    }
+
+  }
+
+}

resources/public/styles/partials/main-bar.scss

@@ -23,7 +23,7 @@
   align-items: center;
   display: flex;
   height: 50px;
-  margin: 0 0 0 100px;
+  margin: 0 0 0 120px;
 
   li {