enhance(ui): alignments for the jump letter label

src/main/frontend/components/property.cljs

@@ -232,7 +232,7 @@
   [state block property {:keys [other-position? class-schema?]}]
   (let [*hover? (::hover? state)
         icon (:logseq.property/icon property)]
-    [:div.flex.flex-row.items-center.gap-1
+    [:div.property-key-inner.jtrigger-view
      {:on-mouse-over   #(reset! *hover? true)
       :on-mouse-leave  #(reset! *hover? false)}
      ;; icon picker
@@ -251,7 +251,7 @@
                             :del-btn? (boolean icon)}))]
 
          (shui/trigger-as
-          :button
+          :button.property-m
           (-> (when-not config/publishing?
                 {:on-click (fn [^js e]
                              (shui/popup-show! (.-target e) content-fn
@@ -269,23 +269,23 @@
         (:block/title property)]
 
        (shui/trigger-as :a
-                        {:tabIndex 0
-                         :title (:block/title property)
-                         :class "property-k flex select-none jtrigger w-full"
-                         :on-pointer-down (fn [^js e]
-                                            (when (util/meta-key? e)
-                                              (route-handler/redirect-to-page! (:block/uuid property))
-                                              (.preventDefault e)))
-                         :on-click (fn [^js/MouseEvent e]
-                                     (shui/popup-show! (.-target e)
-                                                       (fn []
-                                                         (property-config/dropdown-editor property block {:debug? (.-altKey e)
-                                                                                                          :class-schema? class-schema?}))
-                                                       {:content-props
-                                                        {:class "ls-property-dropdown-editor as-root"}
-                                                        :align "start"
-                                                        :as-dropdown? true}))}
-                        (:block/title property)))]))
+         {:tabIndex 0
+          :title (:block/title property)
+          :class "property-k flex select-none jtrigger w-full"
+          :on-pointer-down (fn [^js e]
+                             (when (util/meta-key? e)
+                               (route-handler/redirect-to-page! (:block/uuid property))
+                               (.preventDefault e)))
+          :on-click (fn [^js/MouseEvent e]
+                      (shui/popup-show! (.-target e)
+                        (fn []
+                          (property-config/dropdown-editor property block {:debug? (.-altKey e)
+                                                                           :class-schema? class-schema?}))
+                        {:content-props
+                         {:class "ls-property-dropdown-editor as-root"}
+                         :align "start"
+                         :as-dropdown? true}))}
+         (:block/title property)))]))
 
 (rum/defcs property-input < rum/reactive
   (rum/local nil ::ref)

src/main/frontend/components/property.css

@@ -53,18 +53,31 @@
       @apply relative;
 
       &-id {
-        @apply absolute left-[-26px] top-[3px] rounded-full leading-none
+        @apply absolute left-[-22px] top-[2px] rounded-full leading-none
         flex items-center justify-center bg-primary text-primary-foreground border-none
-        text-xs min-w-[20px] min-h-[20px];
+        text-xs min-w-[20px] min-h-[20px] scale-95;
+      }
+    }
+
+    .jtrigger-view {
+      > .jtrigger-id {
+        @apply left-[-14px];
+      }
+
+      &:has(> .jtrigger-id) {
+        .property-m {
+          @apply invisible;
+        }
       }
     }
 
     .property-k {
-        .jtrigger {
-            &-id {
-                @apply left-[16px];
-            }
+      .jtrigger {
+        &-id {
+          @apply left-[16px];
         }
+      }
+
       @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap;
     }
 
@@ -75,14 +88,6 @@
         @apply left-[-34px] top-[2px];
       }
 
-      .property-k {
-          .jtrigger {
-              &-id {
-                  @apply left-[16px];
-              }
-          }
-      }
-
       &-inner[data-type=checkbox] {
         .jtrigger-id {
           @apply left-[-44px] top-[-2px];
@@ -282,6 +287,10 @@ a.control-link {
   }
 }
 
+.property-key-inner {
+  @apply flex flex-row items-center gap-1 relative;
+}
+
 .property-select {
   .menu-link:hover, a.menu-link.chosen {
     .iconTablerExtBacklog {
@@ -400,6 +409,7 @@ a.control-link {
       &:hover a.del {
         @apply flex;
       }
+
       &:hover .ls-icon-grip-vertical {
         @apply opacity-80;
       }

src/main/frontend/handler/jump.cljs

@@ -117,10 +117,11 @@
                 (fn [id dom]
                   (let [class (if (d/has-class? dom "ui__checkbox")
                                 "jtrigger-id text-sm border rounded ml-4 px-1 shadow-xs"
-                                "jtrigger-id text-sm border rounded ml-2 px-1 shadow-xs")]
-                    (d/append! dom (-> (d/create-element :div)
-                                       (d/set-attr! :class class)
-                                       (d/set-text! (nth keys id))))))
+                                "jtrigger-id text-sm border rounded ml-2 px-1 shadow-xs")
+                        ^js view (or (.closest dom ".jtrigger-view") dom)]
+                    (d/append! view (-> (d/create-element :div)
+                                      (d/set-attr! :class class)
+                                      (d/set-text! (nth keys id))))))
                 (take (count keys) triggers)))
               (.addEventListener js/window "keydown" key-down-handler)))))