🐧 adds layout for libraries sidebar

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

@@ -269,7 +269,9 @@
 
 (declare initialize-alignment)
 
-(def default-layout #{:sitemap :layers :element-options :rules})
+#_(def default-layout #{:sitemap :layers :element-options :rules})
+(def default-layout #{:libraries :rules})
+
 
 (def workspace-default
   {:zoom 1
@@ -770,16 +772,20 @@
 ;; --- Toggle layout flag
 
 (defn toggle-layout-flag
-  [flag]
-  (us/verify keyword? flag)
+  [& flags]
+  ;; Verify all?
+  #_(us/verify keyword? flag)
   (ptk/reify ::toggle-layout-flag
     ptk/UpdateEvent
     (update [_ state]
-      (update state :workspace-layout
-              (fn [flags]
-                (if (contains? flags flag)
-                  (disj flags flag)
-                  (conj flags flag)))))))
+      (let [reduce-fn
+            (fn [state flag]
+              (update state :workspace-layout
+                      (fn [flags]
+                        (if (contains? flags flag)
+                          (disj flags flag)
+                          (conj flags flag)))))]
+        (reduce reduce-fn state flags)))))
 
 ;; --- Tooltip
 
@@ -1103,6 +1109,7 @@
           (rx/empty))))))
 
 
+
 ;; --- Toggle shape's selection status (selected or deselected)
 
 (defn select-shape

frontend/src/uxbox/main/ui/components/tab_container.cljs

@@ -7,16 +7,21 @@
    [:div.tab-element-content children]])
 
 (mf/defc tab-container
-  [{:keys [children selected]}]
+  [{:keys [children selected on-change-tab]}]
   (.log js/console (map #(-> % .-props .-title) children))
   (let [first-id (-> children first .-props .-id)
-        state (mf/use-state {:selected first-id})]
+        state (mf/use-state {:selected first-id})
+        selected (or selected (:selected @state))
+        handle-select (fn [tab]
+                        (let [id (-> tab .-props .-id)]
+                          (swap! state assoc :selected id)
+                          (on-change-tab id)))]
     [:div.tab-container
      [:div.tab-container-tabs
       (for [tab children]
         [:div.tab-container-tab-title
-         {:on-click #(swap! state assoc :selected (-> tab .-props .-id))
-          :class (when (= (:selected @state) (-> tab .-props .-id)) "current")}
+         {:on-click (partial handle-select tab)
+          :class (when (= selected (-> tab .-props .-id)) "current")}
          (-> tab .-props .-title)])]
      [:div.tab-container-content
-      (filter #(= (:selected @state) (-> % .-props .-id)) children)]]))
+      (filter #(= selected (-> % .-props .-id)) children)]]))

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

@@ -60,10 +60,8 @@
 (mf/defc workspace-content
   [{:keys [page file layout] :as params}]
   (let [frame (mf/use-ref nil)
-        left-sidebar? (not (empty? (keep layout [:layers :sitemap
-                                                :document-history])))
-        right-sidebar? (not (empty? (keep layout [:icons :drawtools
-                                                 :element-options])))
+        left-sidebar? (not (empty? (keep layout [:layers :sitemap :document-history :libraries])))
+        right-sidebar? (not (empty? (keep layout [:icons :drawtools :element-options])))
         classes (classnames
                  :no-tool-bar-right (not right-sidebar?)
                  :no-tool-bar-left (not left-sidebar?))]

frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs

@@ -68,10 +68,12 @@
        [:li.tooltip.tooltip-right
         {:alt "Layers"
          :class (when (contains? layout :layers) "selected")
-         :on-click #(st/emit! (dw/toggle-layout-flag :layers))}
+         :on-click #(st/emit! (dw/toggle-layout-flag :layers :sitemap))}
         i/layers]
        [:li.tooltip.tooltip-right
-        {:alt "Libraries"}
+        {:alt "Libraries"
+         :class (when (contains? layout :libraries) "selected")
+         :on-click #(st/emit! (dw/toggle-layout-flag :libraries))}
         i/icon-set]
        [:li.tooltip.tooltip-right
         {:alt "History"}

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

@@ -11,11 +11,13 @@
 (ns uxbox.main.ui.workspace.sidebar
   (:require
    [rumext.alpha :as mf]
+   [cuerdas.core :as str]
    [uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
    [uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
    [uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
    [uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]]
-   [uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]))
+   [uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]
+   [uxbox.main.ui.workspace.sidebar.libraries :refer [libraries-toolbox]]))
 
 ;; --- Left Sidebar (Component)
 
@@ -24,12 +26,15 @@
   [{:keys [layout page file] :as props}]
   [:aside.settings-bar.settings-bar-left
    [:div.settings-bar-inside
+    {:data-layout (str/join "," layout)}
     (when (contains? layout :sitemap)
       [:& sitemap-toolbox {:file file :page page}])
     (when (contains? layout :document-history)
       [:& history-toolbox])
     (when (contains? layout :layers)
-      [:& layers-toolbox {:page page}])]])
+      [:& layers-toolbox {:page page}])
+    (when (contains? layout :libraries)
+      [:& libraries-toolbox])]])
 
 ;; --- Right Sidebar (Component)
 

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

@@ -24,6 +24,30 @@
    [uxbox.util.i18n :as i18n :refer [t]]
    [uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]))
 
+(mf/defc library-tab []
+  [:div.library-tab.icons-tab
+   [:select.library-tab-libraries
+    [:option.library-tab-libraries-item "Material design"]
+    [:option.library-tab-libraries-item "Icon library 1"]
+    [:option.library-tab-libraries-item "Icon library 2"]]
+   [:div.library-tab-content
+    (for [_ (range 0 200)]
+      [:div.library-tab-element
+       i/trash
+       [:span.library-tab-element-name "my-icon.svg"]])]])
+
+(mf/defc images-tab []
+  [:div.library-tab.images-tab
+   [:select.library-tab-libraries
+    [:option.library-tab-libraries-item "Material design"]
+    [:option.library-tab-libraries-item "Icon library 1"]
+    [:option.library-tab-libraries-item "Icon library 2"]]
+   [:div.library-tab-content
+    (for [_ (range 0 200)]
+      [:div.library-tab-element
+       [:img {:src "https://www.placecage.com/c/200/300"}]
+       [:span.library-tab-element-name "my-icon.svg"]])]])
+
 (mf/defc libraries-toolbox
   []
   (let [locale (i18n/use-locale)]
@@ -32,8 +56,6 @@
       [:div "Libraries"]
       [:div "All libraries"]]
      [:div.tool-window-content
-      [:& tab-container {:selected :icons :on-change-tab #(println "Change tab")}
-       [:& tab-element {:id :icons :title "Icons"}
-        [:p "ICONS TAB"]]
-       [:& tab-element {:id :images :title "Images"}
-        [:p "IMAGES TAB"]]]]]))
+      [:& tab-container {}
+       [:& tab-element {:id :icons :title "Icons"} [:& library-tab]]
+       [:& tab-element {:id :images :title "Images"} [:& images-tab]]]]]))

frontend/src/uxbox/util/data.cljs

@@ -205,3 +205,4 @@
 ;;                      (if (::some-interrupt (ex-data e#))
 ;;                        nil
 ;;                        (throw e#)))))))
+