enhance(ui): polish property dropdown editor

deps/shui/src/logseq/shui/select/core.cljs

@@ -1,13 +1,11 @@
 (ns logseq.shui.select.core
-  (:require [rum.core :as rum]
-            [daiquiri.interpreter :refer [interpret]]
-            [logseq.shui.util :as util]
-            [cljs-bean.core :as bean]))
+  (:require [logseq.shui.util :as util]))
 
 (def select (util/lsui-wrap "Select"))
 (def select-group (util/lsui-wrap "SelectGroup"))
 (def select-value (util/lsui-wrap "SelectValue"))
 (def select-trigger (util/lsui-wrap "SelectTrigger"))
+(def select-icon (util/lsui-wrap "SelectIcon"))
 (def select-content (util/lsui-wrap "SelectContent"))
 (def select-label (util/lsui-wrap "SelectLabel"))
 (def select-item (util/lsui-wrap "SelectItem"))

deps/shui/src/logseq/shui/ui.cljs

@@ -72,6 +72,7 @@
 (def select-group select-core/select-group)
 (def select-value select-core/select-value)
 (def select-trigger select-core/select-trigger)
+(def select-icon select-core/select-icon)
 (def select-content select-core/select-content)
 (def select-label select-core/select-label)
 (def select-item select-core/select-item)

src/main/frontend/components/property.css

@@ -354,10 +354,14 @@ a.control-link {
   }
 
   .inner-wrap {
-    @apply flex items-center w-full justify-between gap-1 flex-wrap;
+    @apply flex items-center w-full justify-between gap-1 flex-nowrap;
 
     > .property-setting-title {
-      @apply flex items-center gap-1 font-normal opacity-90;
+      @apply flex items-center gap-1 font-normal opacity-90 overflow-hidden;
+
+      > span {
+        @apply whitespace-nowrap text-ellipsis overflow-hidden;
+      }
     }
 
     > label {

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

@@ -290,7 +290,7 @@
       [:div.property-setting-title
        (some-> icon (name) (shui/tabler-icon {:size 14
                                               :style {:margin-top "-1"}}))
-       [:span title]]
+       [:span {:title title} title]]
       (cond
         (fn? desc)
         (desc)
@@ -462,13 +462,14 @@
   [choices]
   (let [select-cp (fn [opts]
                     (shui/select
-                     opts
-                     (shui/select-trigger
-                      (shui/select-value {:placeholder "Select a choice"}))
-                     (shui/select-content
-                      (map (fn [choice]
-                             (shui/select-item {:key (str (:db/id choice))
-                                                :value (:db/id choice)} (:block/title choice))) choices))))
+                      opts
+                      (shui/select-trigger
+                        {:class "h-8"}
+                        (shui/select-value {:placeholder "Select a choice"}))
+                      (shui/select-content
+                        (map (fn [choice]
+                               (shui/select-item {:key (str (:db/id choice))
+                                                  :value (:db/id choice)} (:block/title choice))) choices))))
         checked-choice (some (fn [choice] (when (true? (:logseq.property/choice-checkbox-state choice)) choice)) choices)
         unchecked-choice (some (fn [choice] (when (false? (:logseq.property/choice-checkbox-state choice)) choice)) choices)]
     [:div.flex.flex-col.gap-4.text-sm.p-2