enhance: display add property button on hovering

src/main/frontend/components/page.cljs

@@ -293,7 +293,7 @@
   (rum/local false ::hover?)
   {:init (fn [state]
            (assoc state ::title-value (atom (nth (:rum/args state) 2))))}
-  [state page-name icon title {:keys [fmt-journal? *configure-show? built-in-property? preview?]}]
+  [state page-name icon title {:keys [fmt-journal? *configure-show? built-in-property? preview? journal?]}]
   (when title
     (let [page (when page-name (db/entity [:block/name page-name]))
           *hover? (::hover? state)
@@ -310,7 +310,8 @@
                     (date/journal-title->custom-format title)
                     title))
           old-name (or title page-name)
-          db-based? (config/db-based-graph? repo)]
+          db-based? (config/db-based-graph? repo)
+          object? (= (:block/type page) "object")]
       [:div.ls-page-title.flex-1.flex-row.w-full.relative
        {:on-mouse-over #(reset! *hover? true)
         :on-mouse-out #(reset! *hover? false)}
@@ -365,7 +366,9 @@
                   db-based?
                   (not built-in-property?)
                   (not @*edit?)
-                  (not config/publishing?))
+                  (not config/publishing?)
+                  (not journal?)
+                  (not object?))
          [:div.absolute.bottom-2.left-0
           [:div.flex.flex-row.items-center.flex-wrap.ml-2
            [:a.fade-link.flex.flex-row.items-center
@@ -543,7 +546,8 @@
                                    (page-mouse-leave e *control-show?))}
                 (page-blocks-collapse-control title *control-show? *all-collapsed?)])
              (when-not whiteboard?
-               (page-title page-name icon title {:fmt-journal? fmt-journal?
+               (page-title page-name icon title {:journal? journal?
+                                                 :fmt-journal? fmt-journal?
                                                  :*configure-show? *configure-show?
                                                  :built-in-property? built-in-property?
                                                  :preview? preview?}))
@@ -572,7 +576,7 @@
                   (or (seq (:block/properties page))
                       (seq (:block/alias page))
                       (seq (:block/tags page))))
-             [:div.p-2.mb-4
+             [:div.p-2
               (let [edit-input-id (str "edit-block-" (:block/uuid page) "-schema")]
                 (component-block/db-properties-cp
                  {:editor-box editor/box}

src/main/frontend/components/property.cljs

@@ -252,7 +252,7 @@
                  (property-handler/set-editing-new-property! nil))
       :node (js/document.getElementById "edit-new-property")
       :outside? false)))
-  [state block edit-input-id properties new-property? opts]
+  [state block edit-input-id properties new-property? *hover? opts]
   (let [*property-key (::property-key state)
         *property-value (::property-value state)]
     (cond
@@ -264,15 +264,19 @@
                (seq properties)
                (seq (:block/alias block))
                (seq (:block/tags block)))
-           (not config/publishing?))
-      [:div
-       [:a.add-button-link
-        {:title "Add another property"
-         :on-click (fn []
-                     (property-handler/set-editing-new-property! edit-input-id)
-                     (reset! *property-key nil)
-                     (reset! *property-value nil))}
-        (ui/icon "circle-plus" {:size 15})]])))
+           (not config/publishing?)
+           (or (:page-configure? opts)  @*hover?))
+      [:a.fade-link.my-1
+       {: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
+        (ui/icon "circle-plus" {:size 16})
+        [:div.ml-1.text-sm "Add property"]]]
+
+      :else
+      [:div {:style {:height 28}}])))
 
 (rum/defcs property-key
   [state block property {:keys [class-schema?]}]
@@ -349,11 +353,13 @@
      @*namespaces)))
 
 (rum/defcs properties-area < rum/reactive
+  (rum/local false ::hover?)
   {:init (fn [state]
            (assoc state ::blocks-container-id (or (:blocks-container-id (last (:rum/args state)))
                                                   (state/next-blocks-container-id))))}
   [state target-block edit-input-id {:keys [in-block-container?] :as opts}]
-  (let [block (resolve-linked-block-if-exists target-block)
+  (let [*hover? (::hover? state)
+        block (resolve-linked-block-if-exists target-block)
         properties (if (and (:class-schema? opts) (:block/schema block))
                      (let [properties (:properties (:block/schema block))]
                        (map (fn [k] [k nil]) properties))
@@ -388,8 +394,11 @@
                    (not new-property?)
                    (not (:page-configure? opts)))
       [:div.ls-properties-area
-       (when (:selected? opts)
-         {:class "select-none"})
+       (cond->
+        {:on-mouse-over #(reset! *hover? true)
+         :on-mouse-out #(reset! *hover? false)}
+         (:selected? opts)
+         (assoc :class "select-none"))
        (when (seq properties)
          (for [[k v] properties]
            (when (uuid? k)
@@ -405,4 +414,4 @@
                                                                        {:style {:margin-left -20}})
                      (pv/property-value block property v opts)])])))))
        (when (or new-property? (not in-block-container?))
-         (new-property block edit-input-id properties new-property? opts))])))
+         (new-property block edit-input-id properties new-property? *hover? opts))])))

src/main/frontend/modules/outliner/core.cljs

@@ -161,7 +161,9 @@
                                           :outliner-op :move-blocks})))))]
         (swap! txs-state (fn [txs]
                            (concat txs
-                                   [(assoc page-m :block/tags (:block/tags m))
+                                   [(assoc page-m
+                                           :block/tags (:block/tags m)
+                                           :block/type "object")
                                     {:db/id (:db/id block-entity)
                                      :block/content ""
                                      :block/refs []