🐧 adds layout for libraries sidebar

frontend/resources/styles/main.scss

@@ -42,8 +42,9 @@
 //#################################################
 
 @import 'main/partials/main-bar';
-@import 'main/partials/workspace-bar';
 @import 'main/partials/workspace';
+@import 'main/partials/workspace-bar';
+@import 'main/partials/workspace-libraries';
 @import 'main/partials/tool-bar';
 @import 'main/partials/project-bar';
 @import 'main/partials/sidebar';

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

@@ -6,8 +6,6 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .sitemap {
-  max-height: 180px;
- 
   .tool-window-bar {
 
     .add-page {

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

@@ -11,7 +11,7 @@
   height: 100%;
   position: fixed;
   right: 0;
-  width: 230px;
+  width: 15rem;
   z-index: 10;
 
   &.settings-bar-left {
@@ -20,10 +20,22 @@
 
   .settings-bar-inside {
     align-items: center;
-    display: flex;
+    display: grid;
+
+    &[data-layout*='layers'] {
+        grid-template-rows: 30% 70%;
+    }
+
+    &[data-layout*='libraries'] {
+        grid-template-rows: 100%;
+    }
+
+    &[data-layout*='layers'][data-layout*='libraries'] {
+        grid-template-rows: 15% 25% 60%;
+    }
+    
     flex-direction: column;
-    overflow-y: auto;
+    overflow: hidden;
-    overflow-x: hidden;
     padding-top: 40px;
     height: 100%;
 
@@ -33,12 +45,14 @@
       flex-direction: column;
       flex: 1;
       width: 100%;
+      height: 100%;
 
       .tool-window-bar {
         align-items: center;
         display: flex;
         flex-shrink: 0;
         padding: $small;
+        overflow: hidden;
 
         svg {
           fill: $color-gray-20;
@@ -80,13 +94,6 @@
         padding-bottom: $medium;
         height: 100%;
       }
-
-      &#layers {
-        padding-bottom: 30px;
-      }
-
     }
-
   }
-
 }

frontend/resources/styles/main/partials/tab-container.scss

@@ -13,6 +13,7 @@
     flex-direction: row;
     font-size: 12px;
     height: 2.5rem;
+    padding: 0 0.25rem;
 }
 
 .tab-container-tab-title {
@@ -29,3 +30,14 @@
         background: $color-gray-50;
     }
 }
+
+.tab-container-content {
+    flex: 1;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+}
+
+.tab-element, .tab-element-content {
+    height: 100%;
+}

frontend/resources/styles/main/partials/workspace-libraries.scss

@@ -0,0 +1,89 @@
+.library-tab {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0.25rem;
+}
+
+.library-tab-content {
+    display: grid;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 0.25rem;
+    height: 100%;
+    overflow-y: scroll;
+
+    .icons-tab & {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .images-tab & {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.library-tab-element {
+    border-radius: 4px;
+    border: 1px solid #1F1F1F;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    margin: 0.25rem;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+
+    & svg, & img {
+        height: auto;
+        margin: auto;
+        max-height: 100%;
+        max-width: 100%;
+        width: auto;
+    }
+
+    &:hover {
+        border-color: $color-primary;
+
+        & .library-tab-element-name {
+            display: inline;
+        }
+    }
+
+    .icons-tab & {
+        background: $color-white;
+        color: $color-black;
+        height: 4rem;
+        width: 4rem;
+        padding: $size-3;
+    }
+
+    .images-tab & {
+        height: 4rem;
+        width: 6.2rem;
+        color: $color-white;
+        padding: $size-2 0;
+    }
+}
+
+.library-tab-element-name {
+    display: none;
+    position: absolute;
+    font-size: 9px;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.library-tab-libraries {
+    margin: 0.5rem;
+    width: 90%;
+    padding: 0.5rem;
+    box-sizing: border-box;
+    color: white;
+    font-size: 12px;
+}
+
+.library-tab-libraries-item {
+    padding: 1rem;
+}

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]
+  [& flags]
-  (us/verify keyword? flag)
+  ;; Verify all?
+  #_(us/verify keyword? flag)
   (ptk/reify ::toggle-layout-flag
     ptk/UpdateEvent
     (update [_ state]
-      (update state :workspace-layout
+      (let [reduce-fn
-              (fn [flags]
+            (fn [state flag]
-                (if (contains? flags flag)
+              (update state :workspace-layout
-                  (disj flags flag)
+                      (fn [flags]
-                  (conj flags flag)))))))
+                        (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))
+         {:on-click (partial handle-select tab)
-          :class (when (= (:selected @state) (-> tab .-props .-id)) "current")}
+          :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
+        left-sidebar? (not (empty? (keep layout [:layers :sitemap :document-history :libraries])))
-                                                :document-history])))
+        right-sidebar? (not (empty? (keep layout [:icons :drawtools :element-options])))
-        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-container {}
-       [:& tab-element {:id :icons :title "Icons"}
+       [:& tab-element {:id :icons :title "Icons"} [:& library-tab]]
-        [:p "ICONS TAB"]]
+       [:& tab-element {:id :images :title "Images"} [:& images-tab]]]]]))
-       [:& tab-element {:id :images :title "Images"}
-        [:p "IMAGES TAB"]]]]]))

frontend/src/uxbox/util/data.cljs

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