enhance: add switch between page and class/property properties

src/main/frontend/components/content.cljs

@@ -351,13 +351,6 @@
   (let [repo (state/get-current-repo)
         built-in-property? (contains? db-property/built-in-properties-keys-str (:block/name property))]
     [:.menu-links-wrapper
-     (when-not built-in-property?
-       (ui/menu-link
-        {:key "Configure this property"
-         :on-click (fn []
-                     (state/set-modal! #(property/property-config property {})))}
-        (t :context-menu/configure-property)
-        nil))
      (ui/menu-link
       {:key "Delete this property"
        :on-click (fn []

src/main/frontend/components/dnd.cljs

@@ -49,11 +49,18 @@
                                    (let [old-index (.indexOf ids active-id)
                                          new-index (.indexOf ids over-id)
                                          new-items (arrayMove items old-index new-index)]
-                                     (set-items new-items)
                                      (when (fn? on-drag-end)
-                                       (let [new-values (mapv (fn [id] (:value (id->item id))) new-items)]
-                                         (prn :debug :new-values new-values)
-                                         (on-drag-end new-values)))))
+                                       (let [new-values (->> (map (fn [id] (:value (id->item id))) new-items)
+                                                             (remove nil?)
+                                                             vec)]
+                                         (if (not= (count new-values) (count ids))
+                                           (do
+                                             (js/console.error "Dnd length not matched: ")
+                                             {:old-items items
+                                              :new-items new-items})
+                                           (do
+                                             (set-items new-items)
+                                             (on-drag-end new-values)))))))
                                  (set-active-id nil)))}
         sortable-opts {:items items
                        :strategy verticalListSortingStrategy}

src/main/frontend/components/page.cljs

@@ -340,26 +340,44 @@
 (declare configure)
 (declare page-properties)
 
-(rum/defc page-configure-inner <
+(rum/defcs page-configure-inner <
+  (rum/local false ::show-page-properties?)
   {:will-unmount (fn [state]
                    (let [on-unmount (nth (:rum/args state) 1)]
                      (on-unmount)))}
-  [page _on-unmount opts]
-  (let [types (:block/type page)
+  [state page _on-unmount opts]
+  (let [*show-page-properties? (::show-page-properties? state)
+        types (:block/type page)
         class? (contains? types "class")
-        property? (contains? types "property")]
+        property? (contains? types "property")
+        class-or-property? (or class? property?)]
     [:div.p-4.flex.flex-col.gap-4 {:style {:min-width 700}}
-     (when class?
-       (configure page {}))
-     (when class?
-       (page-properties page true))
-     (if property?
-       (property/property-config page (assoc opts :inline-text component-block/inline-text))
-              ;; add new property for normal pages
+     (when (and class-or-property?
+                (not (property-handler/block-has-viewable-properties? page)))
+       [:div.flex.flex-row.items-center.gap-2
+        [:div "Switch to page properties:"]
+        (ui/toggle @*show-page-properties?
+                   (fn [_]
+                     (swap! *show-page-properties? not))
+                   true)])
+     (cond
+       (not class-or-property?)
        (when (and (not class?)
-                  (empty? (:block/properties page))
-                  (empty? (:block/alias page)))
-         (page-properties page true)))]))
+                  (not property?)
+                  (not (property-handler/block-has-viewable-properties? page)))
+         (page-properties page true))
+
+       @*show-page-properties?
+       (page-properties page true)
+
+       :else
+       [:<>
+        (when class?
+          (configure page {}))
+        (when class?
+          (page-properties page true))
+        (when property?
+          (property/property-config page (assoc opts :inline-text component-block/inline-text)))])]))
 
 (rum/defc page-configure
   [page *hover? *configuring?]
@@ -425,10 +443,10 @@
           (if (map? icon)
             (property/icon icon {:on-chosen (fn [_e icon]
                                               (let [icon-property-id (:block/uuid (db/entity [:block/name "icon"]))]
-                                               (property-handler/update-property!
-                                                repo
-                                                (:block/uuid page)
-                                                {:properties {icon-property-id icon}})))})
+                                                (property-handler/update-property!
+                                                 repo
+                                                 (:block/uuid page)
+                                                 {:properties {icon-property-id icon}})))})
             icon)])
 
        [:div.flex.flex-1.flex-row.flex-wrap.items-center.gap-4
@@ -492,7 +510,7 @@
              (page-tags page tags-property *hover? *configuring?))
 
            (when (or (some #(contains? #{"class" "property"} %) (:block/type page))
-                     (and (empty? (:block/properties page)) (empty? (:block/alias page))))
+                     (not (property-handler/block-has-viewable-properties? page)))
              (page-configure page *hover? *configuring?))]])])))
 
 (defn- page-mouse-over
@@ -620,44 +638,40 @@
   [page configure?]
   (let [types (:block/type page)
         class? (contains? types "class")
-        property? (contains? types "property")
         edit-input-id-prefix (str "edit-block-" (:block/uuid page))
         configure-opts {:selected? false
-                        :page-configure? true}]
-    [:div.ls-page-properties.mb-4 {:style {:padding 2}}
-     (if configure?
-       (cond
-         class?
-         [:div
-          [:div.mb-2 "Class Properties:"]
-          [:div
-           (component-block/db-properties-cp {:editor-box editor/box}
-                                             page
-                                             (str edit-input-id-prefix "-schema")
-                                             (assoc configure-opts :class-schema? true))]]
-         (and (not property?)
-              (empty? (:block/properties page))
-              (empty? (:block/alias page)))
-         [:div
-          [:div.mb-2 "Page properties:"]
-          (component-block/db-properties-cp {:editor-box editor/box}
-                                            page
-                                            (str edit-input-id-prefix "-page")
-                                            (assoc configure-opts :class-schema? false))])
-       (component-block/db-properties-cp {:editor-box editor/box}
-                                         page
-                                         (str edit-input-id-prefix "-page")
-                                         {:selected? false
-                                          ;; Allow class and property pages to add new property
-                                          ;; when hovered over
-                                          :page-configure? (boolean (some #{"class" "property"} types))
-                                          :hidden-new-property? (boolean (some #{"class" "property"} types))
-                                          :class-schema? false}))]))
+                        :page-configure? true}
+        has-viewable-properties? (property-handler/block-has-viewable-properties? page)]
+    (when (or has-viewable-properties? configure?)
+      [:div.ls-page-properties.mb-4 {:style {:padding 2}}
+       (if configure?
+         (cond
+           class?
+           [:div
+            [:div.mb-2 "Class Properties:"]
+            [:div
+             (component-block/db-properties-cp {:editor-box editor/box}
+                                               page
+                                               (str edit-input-id-prefix "-schema")
+                                               (assoc configure-opts :class-schema? true))]]
+           (not (property-handler/block-has-viewable-properties? page))
+           [:div
+            [:div.mb-2 "Page properties:"]
+            (component-block/db-properties-cp {:editor-box editor/box}
+                                              page
+                                              (str edit-input-id-prefix "-page")
+                                              (assoc configure-opts :class-schema? false))])
+         (component-block/db-properties-cp {:editor-box editor/box}
+                                           page
+                                           (str edit-input-id-prefix "-page")
+                                           {:selected? false
+                                            :page-configure? (boolean (some #{"class" "property"} types))
+                                            :class-schema? false}))])))
 
 (rum/defc page-properties-react < rum/reactive
   [page* configure?]
   (let [page (db/sub-block (:db/id page*))]
-    (when (or (seq (:block/properties page)) (seq (:block/alias page))
+    (when (or (property-handler/block-has-viewable-properties? page)
               ;; Allow class and property pages to add new property
               (some #{"class" "property"} (:block/type page)))
       (page-properties page configure?))))

src/main/frontend/components/property.cljs

@@ -246,16 +246,14 @@
                            (let [item (assoc (get values id) :id id)]
                              {:id (str id)
                               :value id
-                              :content [:li
-                                        (choice-item-content property item values order *property-schema *property-name dropdown-opts)]}))
+                              :content (choice-item-content property item values order *property-schema *property-name dropdown-opts)}))
                          order)]
        (dnd/items choices
                   {:on-drag-end (fn [new-order]
                                   (when (seq new-order)
                                     (swap! *property-schema assoc :enum-config {:values values
                                                                                 :order new-order})
-                                    (update-property! property @*property-name @*property-schema)))
-                   :parent-node :ul.list-none}))
+                                    (update-property! property @*property-name @*property-schema)))}))
      (ui/dropdown
       (fn [{:keys [toggle-fn]}]
         [:a.fade-link.flex.flex-row.items-center.gap-1.leading-8 {:on-click toggle-fn}
@@ -291,11 +289,6 @@
         property (db/sub-block (:db/id property))
         disabled? (or built-in-property? config/publishing?)]
     [:div.property-configure.flex.flex-1.flex-col
-     [:div.font-bold.text-xl
-      (if disabled?
-        "Property fields"
-        "Configure property")]
-
      [:div.grid.gap-2.p-1.mt-4
       [:div.grid.grid-cols-4.gap-1.items-center.leading-8
        [:label.col-span-1 "Name:"]
@@ -527,24 +520,18 @@
        [:div#edit-new-property
         (property-input block *property-key *property-value opts)]
 
-       (and (or (:page-configure? opts)
-                (seq properties)
-                (seq (:block/alias block)))
+       (and (or (property-handler/block-has-viewable-properties? block)
+                (:page-configure? opts))
             (not config/publishing?)
-            (or (:page-configure? opts) (not (:in-block-container? opts))))
-       ;; When the :hidden-new-property? option is set, adding the
-       ;; first property is hidden and only appears when hovered over
-       (when (or (not (:hidden-new-property? opts))
-                 (seq (:block/properties block))
-                 (:hover? opts))
-         [:a.fade-link.flex
-          {:on-click (fn []
-                       (property-handler/set-editing-new-property! edit-input-id)
-                       (reset! *property-key nil)
-                       (reset! *property-value nil))}
-          [:div.flex.flex-row.items-center {:style {:padding-left 1}}
-           (ui/icon "circle-plus" {:size 15})
-           [:div.ml-1.text-sm "Add property"]]])
+            (not (:in-block-container? opts)))
+       [:a.fade-link.flex
+        {:on-click (fn []
+                     (property-handler/set-editing-new-property! edit-input-id)
+                     (reset! *property-key nil)
+                     (reset! *property-value nil))}
+        [:div.flex.flex-row.items-center {:style {:padding-left 1}}
+         (ui/icon "circle-plus" {:size 15})
+         [:div.ml-1.text-sm "Add property"]]]
 
        :else
        [:div {:style {:height 28}}]))])
@@ -667,15 +654,14 @@
       (if class?
         (let [choices (map (fn [[k v]]
                              {:id (str k)
-                              :content [:li
-                                        (property-cp block k v opts)]}) properties)]
+                              :value k
+                              :content (property-cp block k v opts)}) properties)]
           (dnd/items choices
                      {:on-drag-end (fn [properties]
                                      (let [schema (assoc (:block/schema block)
                                                          :properties properties)]
                                        (when (seq properties)
-                                         (property-handler/class-set-schema! (state/get-current-repo) (:block/uuid block) schema))))
-                      :parent-node :ul.list-none}))
+                                         (property-handler/class-set-schema! (state/get-current-repo) (:block/uuid block) schema))))}))
         (for [[k v] properties]
           (property-cp block k v opts))))))
 

src/main/frontend/handler/property.cljs

@@ -163,3 +163,11 @@
          (concat own-properties)
          (filter (fn [id] (enum-other-position? id (:block/properties block))))
          (distinct))))
+
+(defn block-has-viewable-properties?
+  [block-entity]
+  (let [properties (:block/properties block-entity)]
+    (or
+     (seq (:block/alias properties))
+     (and (seq properties)
+          (not= (keys properties) [(:block/uuid (db/entity [:block/name "icon"]))])))))