enhance: show empty left && right positioned properties

Also fixed the issue that positioned property value can't be selected.

deps/outliner/src/logseq/outliner/property.cljs

@@ -394,9 +394,12 @@
   (let [property (d/entity db property-id)
         schema (:block/schema property)]
     (and
-     (or (some? (get block-properties property-id)) ; property value exists
+     (or (= (:position schema) position)
          (contains? #{:checkbox} (:type schema)))
-     (= (:position schema) position))))
+     (not (get-in property [:block/schema :hide?]))
+     (not (and
+           (= (:position schema) :block-below)
+           (nil? (get block-properties property-id)))))))
 
 (defn property-with-other-position?
   [property]

src/main/frontend/components/block.cljs

@@ -2356,8 +2356,7 @@
                                         :block-cp blocks-container
                                         :editor-box (state/get-component :editor/box)
                                         :container-id (or (:container-id config)
-                                                          (::initial-container-id state))
-                                        :id (:id config)}
+                                                          (::initial-container-id state))}
                                        opts)))
 
 (rum/defc invalid-properties-cp
@@ -2601,7 +2600,8 @@
                      :page-cp page-cp
                      :block-cp blocks-container
                      :inline-text inline-text
-                     :other-position? true})]
+                     :other-position? true
+                     :property-position position})]
     (when (seq properties)
       (case position
         :block-below
@@ -2609,10 +2609,10 @@
          (for [pid properties]
            (let [property (db/entity pid)
                  v (get block pid)]
-             [:div.flex.flex-row.items-center.gap-2.hover:bg-secondary.rounded
-              [:div.flex.flex-row.opacity-50.hover:opacity-100.items-center
+             [:div.flex.flex-row.items-center.opacity-50.hover:opacity-100.transition-opacity.duration-300.ease-in.gap-1
+              [:div.flex.flex-row.items-center
                (property-component/property-key-cp block property opts)
-               [:div.select-none ":"]]
+               ":"]
               (pv/property-value block property v opts)]))]
         [:div.positioned-properties.flex.flex-row.gap-1.select-none.h-6
          {:class (name position)}
@@ -2835,8 +2835,6 @@
                                                                                               :container-id (:container-id config)}))}})
            (block-content config block edit-input-id block-id slide?))
 
-          (when (and db-based? (not table?)) (block-positioned-properties config block :block-right))
-
           (when (and (not hide-block-refs-count?)
                      (not named?))
             [:div.flex.flex-row.items-center
@@ -2856,6 +2854,8 @@
                                     (editor-handler/edit-block! block :max))}
                 svg/edit])])])
 
+       (when (and db-based? (not table?)) (block-positioned-properties config block :block-right))
+
        (when-not (or (:table? config) (:property? config) (:page-title? config))
          (block-refs-count block refs-count *hide-block-refs?))
 
@@ -3316,7 +3316,7 @@
        (dnd-separator-wrapper block children block-id slide? true false))
 
      (when-not (:hide-title? config)
-       [:div.block-main-container.flex.flex-row.pr-2.gap-1
+       [:div.block-main-container.flex.flex-row.gap-1
         {:style (when (and db-based? (:page-title? config))
                   {:margin-left -30})
          :data-has-heading (some-> block :block/properties (pu/lookup :logseq.property/heading))

src/main/frontend/components/block.css

@@ -874,6 +874,9 @@ html.is-mac {
   opacity: 1;
 }
 
+.positioned-properties {
+  @apply text-sm;
+}
 .positioned-properties.block-right {
   button {
     @apply whitespace-nowrap mr-0.5;

src/main/frontend/components/property/value.cljs

@@ -50,9 +50,14 @@
                    text))))
 
 (rum/defc property-empty-text-value
-  [& {:as opts}]
+  [property {:keys [property-position]}]
   [:span.inline-flex.items-center.cursor-pointer
-   (merge {:class "empty-text-btn" :variant :text} opts) "Empty"])
+   (merge {:class "empty-text-btn" :variant :text})
+   (if property-position
+     (if-let [icon (:logseq.property/icon property)]
+       (icon-component/icon icon {:color? true})
+       (ui/icon "line-dashed"))
+     "Empty")])
 
 (rum/defc icon-row
   [block editing?]
@@ -851,13 +856,13 @@
                                          :auto-focus? true
                                          :trigger-id trigger-id}))))]
       (shui/trigger-as
-       (if (:other-position? opts) :div :div.jtrigger.flex.flex-1.w-full)
+       (if (:other-position? opts) :div.jtrigger :div.jtrigger.flex.flex-1.w-full)
        {:ref *el
         :id trigger-id
         :tabIndex 0
         :on-click show!}
        (if (string/blank? value)
-         (property-empty-text-value)
+         (property-empty-text-value property opts)
          (value-f))))))
 
 (defn- property-value-inner
@@ -981,7 +986,7 @@
                 [(property-value-date-picker block property nil {:toggle-fn toggle-fn})]))
              (if date?
                (property-value-date-picker block property nil {:toggle-fn toggle-fn})
-               (property-empty-text-value))))]))))
+               (property-empty-text-value property opts))))]))))
 
 (rum/defc multiple-values < rum/reactive db-mixins/query
   [block property opts schema]