💄 change layers styles

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

@@ -270,7 +270,7 @@
 
 (declare initialize-alignment)
 
-(def default-layout #{:sitemap :layers :element-options :rules})
+(def default-layout #{:sitemap :sitemap-pages :layers :element-options :rules})
 
 (def workspace-default
   {:zoom 1

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

@@ -28,7 +28,9 @@
    [:div.settings-bar-inside
     {:data-layout (str/join "," layout)}
     (when (contains? layout :sitemap)
-      [:& sitemap-toolbox {:file file :page page}])
+      [:& sitemap-toolbox {:file file
+                           :page page
+                           :layout layout}])
     (when (contains? layout :document-history)
       [:& history-toolbox])
     (when (contains? layout :layers)

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

@@ -148,15 +148,15 @@
      [:div.element-list-body {:class (dom/classnames :selected selected?)
                               :on-click select-shape
                               :on-double-click #(dom/stop-propagation %)}
+      [:& element-icon {:shape item}]
+      [:& layer-name {:shape item}]
       [:div.element-actions
-       [:div.toggle-element {:class (when-not (:hidden item) "selected")
+       [:div.toggle-element {:class (when (:hidden item) "selected")
                              :on-click toggle-visibility}
         i/eye]
        [:div.block-element {:class (when (:blocked item) "selected")
                             :on-click toggle-blocking}
-        i/lock]]
-      [:& element-icon {:shape item}]
-      [:& layer-name {:shape item}]]]))
+        i/lock]]]]))
 
 (mf/defc layer-frame-item
   {:wrap [#(mf/wrap-memo % =)]}
@@ -234,6 +234,8 @@
      [:div.element-list-body {:class (dom/classnames :selected selected?)
                               :on-click select-shape
                               :on-double-click #(dom/stop-propagation %)}
+      [:div.element-icon i/artboard]
+      [:& layer-name {:shape item}]
       [:div.element-actions
        [:div.toggle-element {:class (when-not (:hidden item) "selected")
                              :on-click toggle-visibility}
@@ -241,8 +243,6 @@
        #_[:div.block-element {:class (when (:blocked item) "selected")
                             :on-click toggle-blocking}
           i/lock]]
-      [:div.element-icon i/folder]
-      [:& layer-name {:shape item}]
       [:span.toggle-content
        {:on-click toggle-collapse
         :class (when-not collapsed? "inverse")}
@@ -255,15 +255,17 @@
               [:& layer-frame-item
                {:item item
                 :key (:id item)
+                :selected selected
                 :objects objects
                 :index index}]
               [:& layer-item
                {:item item
+                :selected selected
                 :index index
                 :key (:id item)}])))])]))
 
 (mf/defc layers-tree
-  {:wrap [mf/wrap-memo]}
+  {::mf/wrap [mf/wrap-memo]}
   [props]
   (let [selected (mf/deref refs/selected-shapes)
         data (mf/deref refs/workspace-data)
@@ -276,10 +278,12 @@
            [:& layer-frame-item
             {:item item
              :key (:id item)
+             :selected selected
              :objects objects
              :index index}]
            [:& layer-item
             {:item item
+             :selected selected
              :index index
              :key (:id item)}])))]))
 
@@ -296,8 +300,7 @@
     [:div#layers.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/layers]
-      ;[:span (t locale "workspace.sidebar.layers")]
-      [:span "Page 1"]
+      [:span (:name page)]
       #_[:div.tool-window-close {:on-click on-click} i/close]]
      [:div.tool-window-content
       [:& layers-tree]]]))

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

@@ -126,12 +126,17 @@
 ;; --- Sitemap Toolbox
 
 (mf/defc sitemap-toolbox
-  [{:keys [file page] :as props}]
+  [{:keys [file page layout] :as props}]
   (let [on-create-click #(st/emit! dw/create-empty-page)
+        toggle-layout #(st/emit! (dw/toggle-layout-flag %))
         locale (i18n/use-locale)]
     [:div.sitemap.tool-window
      [:div.tool-window-bar
       [:span (t locale "workspace.sidebar.sitemap")]
-      [:div.add-page {:on-click on-create-click} i/close]]
-     [:div.tool-window-content
-      [:& pages-list {:file file :current-page page}]]]))
+      [:div.add-page {:on-click on-create-click} i/close]
+      [:div.collapse-pages {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap-pages))}
+       i/arrow-slide]]
+
+     (when (contains? layout :sitemap-pages)
+       [:div.tool-window-content
+        [:& pages-list {:file file :current-page page}]])]))