🎉 Convert libraries to file libraries

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -134,6 +134,31 @@
       }
     }
 
+    .group-list {
+      overflow-y: scroll;
+    }
+
+    .group-list-item {
+      display: flex;
+      align-items: center;
+      margin-top: $x-small;
+      font-size: $fs11;
+      color: $color-white;
+
+      & .color-block {
+        width: 20px;
+        height: 20px;
+        border-radius: 10px;
+        margin-right: $x-small;
+      }
+
+      & span {
+        margin-left: $x-small;
+        color: $color-gray-30;
+        text-transform: uppercase;
+      }
+    }
+
     .context-menu {
       position: absolute;
       top: 10px;

frontend/src/uxbox/main/data/workspace.cljs

@@ -75,10 +75,9 @@
 (s/def ::layout-flags (s/coll-of ::layout-flag))
 
 (def default-layout
-  #{;; :sitemap
-    ;; :sitemap-pages
-    ;; :layers
-    :assets
+  #{:sitemap
+    :sitemap-pages
+    :layers
     :element-options
     :rules
     :display-grid
@@ -1441,6 +1440,7 @@
 (def add-image-from-url dwp/add-image-from-url)
 (def upload-image dwp/upload-image)
 (def delete-file-image dwp/delete-file-image)
+(def fetch-colors dwp/fetch-colors)
 (def rename-page dwp/rename-page)
 (def delete-page dwp/delete-page)
 (def create-empty-page dwp/create-empty-page)

frontend/src/uxbox/main/data/workspace/persistence.cljs

@@ -289,7 +289,7 @@
   (ptk/reify ::fetch-images
     ptk/WatchEvent
     (watch [_ state stream]
-      (->> (rp/query :file-images {:file-id file-id})
+      (->> (rp/query :images {:file-id file-id})
            (rx/map images-fetched)))))
 
 (defn images-fetched
@@ -300,6 +300,26 @@
       (let [images (d/index-by :id images)]
         (assoc state :workspace-images images)))))
 
+;; --- Fetch Workspace Colors
+
+(declare colors-fetched)
+
+(defn fetch-colors
+  [file-id]
+  (ptk/reify ::fetch-colors
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (->> (rp/query :colors {:file-id file-id})
+           (rx/map colors-fetched)))))
+
+(defn colors-fetched
+  [colors]
+  (ptk/reify ::colors-fetched
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [colors (d/index-by :id colors)]
+        (assoc state :workspace-colors colors)))))
+
 
 ;; --- Upload Image
 

frontend/src/uxbox/main/refs.cljs

@@ -60,6 +60,9 @@
 (def workspace-images
   (l/derived :workspace-images st/state))
 
+(def workspace-colors
+  (l/derived :workspace-colors st/state))
+
 (def workspace-users
   (l/derived :workspace-users st/state))
 

frontend/src/uxbox/main/ui/workspace/sidebar/assets.cljs

@@ -89,10 +89,24 @@
     [:div.asset-group
      [:div.group-title
        (tr "workspace.assets.colors")
-       [:div.group-button {:on-click add-color} i/plus]]]))
+       [:span (str "\u00A0(") (count colors) ")"] ;; Unicode 00A0 is non-breaking space
+       [:div.group-button {:on-click add-color} i/plus]]
+     [:div.group-list
+      (for [color (sort-by :name colors)]
+        [:div.group-list-item {:key (:name color)
+                               :on-context-menu #(println "context")}
+         [:div.color-block {:style {:background-color (:content color)}}]
+         (:name color)
+         (when-not (= (:name color) (:content color))
+           [:span (:content color)])])]]))
 
 (mf/defc library-toolbox
-  [{:keys [library-id images initial-open? search-term box-filter] :as props}]
+  [{:keys [library-id
+           images
+           colors
+           initial-open?
+           search-term
+           box-filter] :as props}]
   (let [open? (mf/use-state initial-open?)
         toggle-open #(swap! open? not)]
     [:div.tool-window
@@ -107,13 +121,14 @@
         (when (or (= box-filter :all) (= box-filter :graphics))
           [:& graphics-box {:library-id library-id :images images}])
         (when (or (= box-filter :all) (= box-filter :colors))
-          [:& colors-box {:colors {}}])])]))
+          [:& colors-box {:colors colors}])])]))
 
 (mf/defc assets-toolbox
   []
   (let [team-id (-> refs/workspace-project mf/deref :team-id)
         file-id (-> refs/workspace-file mf/deref :id)
         file-images (mf/deref refs/workspace-images)
+        file-colors (mf/deref refs/workspace-colors)
 
         state (mf/use-state {:search-term ""
                              :box-filter :all})
@@ -121,6 +136,9 @@
         filtered-images (filter #(matches-search (:name %) (:search-term @state))
                                 (vals file-images))
 
+        filtered-colors (filter #(matches-search (:name %) (:search-term @state))
+                                (vals file-colors))
+
         on-search-term-change (fn [event]
                                (let [value (-> (dom/get-target event)
                                                (dom/get-value))]
@@ -135,7 +153,8 @@
     (mf/use-effect
      (mf/deps file-id)
      #(when file-id
-        (st/emit! (dw/fetch-images file-id))))
+        (st/emit! (dw/fetch-images file-id))
+        (st/emit! (dw/fetch-colors file-id))))
 
     [:div.assets-bar
 
@@ -158,6 +177,7 @@
 
      [:& library-toolbox {:library-id file-id
                           :images filtered-images
+                          :colors filtered-colors
                           :initial-open? true
                           :search-term (:search-term @state)
                           :box-filter (:box-filter @state)}]]))