enhance(ui): add shui close button for the property editor

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

@@ -9,10 +9,13 @@
 (def popover (util/lsui-wrap "Popover"))
 (def popover-trigger (util/lsui-wrap "PopoverTrigger"))
 (def popover-content (util/lsui-wrap "PopoverContent"))
+(def popover-arrow (util/lsui-wrap "PopoverArrow"))
+(def popover-close (util/lsui-wrap "PopoverClose"))
 (def popover-remove-scroll (util/lsui-wrap "PopoverRemoveScroll"))
 (def dropdown-menu (util/lsui-wrap "DropdownMenu"))
 (def dropdown-menu-trigger (util/lsui-wrap "DropdownMenuTrigger"))
 (def dropdown-menu-content (util/lsui-wrap "DropdownMenuContent"))
+(def dropdown-menu-arrow (util/lsui-wrap "DropdownMenuArrow"))
 (def dropdown-menu-group (util/lsui-wrap "DropdownMenuGroup"))
 (def dropdown-menu-item (util/lsui-wrap "DropdownMenuItem"))
 (def dropdown-menu-checkbox-item (util/lsui-wrap "DropdownMenuCheckboxItem"))

packages/ui/@/components/ui/dropdown-menu.tsx

@@ -8,6 +8,8 @@ const DropdownMenu = DropdownMenuPrimitive.Root
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
+const DropdownMenuArrow = DropdownMenuPrimitive.Arrow
+
 const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal
@@ -188,6 +190,7 @@ DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 export {
   DropdownMenu,
   DropdownMenuTrigger,
+  DropdownMenuArrow,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,

packages/ui/@/components/ui/popover.tsx

@@ -11,6 +11,8 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 
 const PopoverArrow = PopoverPrimitive.Arrow
 
+const PopoverClose = PopoverPrimitive.Close
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -33,4 +35,4 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
 const PopoverRemoveScroll = RemoveScroll
 
-export { Popover, PopoverTrigger, PopoverRemoveScroll, PopoverContent, PopoverArrow }
+export { Popover, PopoverTrigger, PopoverRemoveScroll, PopoverContent, PopoverArrow, PopoverClose }

src/main/frontend/components/property.cljs

@@ -368,18 +368,21 @@
                                     (swap! *property-schema assoc :hide? (not hide?))
                                     (save-property-fn))})])
 
-          [:div.grid.grid-cols-4.gap-1.items-start.leading-8
-           [:label "Description:"]
-           [:div.col-span-3
-            (if (and disabled? inline-text)
-              (inline-text {} :markdown (:description @*property-schema))
-              [:div.mt-1
-               (shui/textarea
-                {:on-change     (fn [e]
-                                  (swap! *property-schema assoc :description (util/evalue e)))
-                 :on-blur       save-property-fn
-                 :disabled      disabled?
-                 :default-value (:description @*property-schema)})])]]]]))))
+          (let [description (:description @*property-schema)]
+            (when (or (not disabled?)
+                    (and disabled? (not (string/blank? description))))
+              [:div.grid.grid-cols-4.gap-1.items-start.leading-8
+               [:label "Description:"]
+               [:div.col-span-3
+                (if (and disabled? inline-text)
+                  (inline-text {} :markdown description)
+                  [:div.mt-1
+                   (shui/textarea
+                     {:on-change (fn [e]
+                                   (swap! *property-schema assoc :description (util/evalue e)))
+                      :on-blur save-property-fn
+                      :disabled disabled?
+                      :default-value description})])]]))]]))))
 
 (defn- get-property-from-db [name]
   (when-not (string/blank? name)
@@ -610,9 +613,14 @@
           :on-click (fn [^js e]
                       (shui/popup-show!
                         (.-target e)
-                        (fn [_]
+                        (fn [{:keys [id]}]
                           [:div.p-2
                            [:h2.text-lg.font-medium.mb-2.p-1 "Configure property"]
+                           [:span.close.absolute.right-2.top-2
+                            (shui/button
+                              {:variant :ghost :size :sm :class "!w-4 !h-6"
+                               :on-click #(shui/popup-hide! id)}
+                              (shui/tabler-icon "x" {:size 16}))]
                            (property-config property
                              {:inline-text inline-text
                               :page-cp page-cp})])