enhance: remove outline border when focusing on a trigger

experiment/tanstack-table
Tienson Qin 2024-05-27 23:58:00 +08:00
parent ec6d2f934e
commit 62af856ce4
3 changed files with 36 additions and 29 deletions

View File

@ -2286,7 +2286,9 @@
(let [property (db/entity pid) (let [property (db/entity pid)
v (get block pid)] v (get block pid)]
[:div.flex.flex-row.items-center.gap-1.px-1.hover:bg-secondary.rounded [:div.flex.flex-row.items-center.gap-1.px-1.hover:bg-secondary.rounded
[:div.opacity-50.hover:opacity-100 (str (:block/original-name property) ":")] [:div.flex.flex-row.opacity-50.hover:opacity-100
(property-component/property-key block property opts)
[:div ":"]]
(pv/property-value block property v opts)]))] (pv/property-value block property v opts)]))]
[:div.positioned-properties.flex.flex-row.items-center.gap-1.select-none.h-6.flex-wrap [:div.positioned-properties.flex.flex-row.items-center.gap-1.select-none.h-6.flex-wrap
(for [pid properties] (for [pid properties]

View File

@ -453,9 +453,9 @@
(if property-key (if property-key
(let [property (db/get-case-page @*property-key)] (let [property (db/get-case-page @*property-key)]
[:div.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-1.flex-row.items-center [:div.ls-property-add.grid.grid-cols-5.gap-1.flex.flex-1.flex-row.items-center
[:div.flex.flex-row.items-center.col-span-2.property-key [:div.flex.flex-row.items-center.col-span-2.property-key.gap-1
[:span.bullet-container.cursor [:span.bullet]] [:div [:span.bullet-container.cursor [:span.bullet]]]
[:div {:style {:padding-left 9}} @*property-key]] [:div @*property-key]]
[:div.col-span-3.flex.flex-row {:on-pointer-down (fn [e] (util/stop-propagation e))} [:div.col-span-3.flex.flex-row {:on-pointer-down (fn [e] (util/stop-propagation e))}
(if @*show-new-property-config? (if @*show-new-property-config?
(schema-type property (merge opts (schema-type property (merge opts
@ -524,11 +524,11 @@
(rum/defcs property-key < (rum/defcs property-key <
(rum/local false ::hover?) (rum/local false ::hover?)
[state block property {:keys [class-schema? block? collapsed? page-cp inline-text]}] [state block property {:keys [class-schema? block? collapsed? page-cp inline-text other-position?]}]
(let [*hover? (::hover? state) (let [*hover? (::hover? state)
icon (:logseq.property/icon property) icon (:logseq.property/icon property)
property-name (:block/original-name property)] property-name (:block/original-name property)]
[:div.flex.flex-row.items-center [:div.flex.flex-row.items-center.gap-1
{:on-mouse-over #(reset! *hover? true) {:on-mouse-over #(reset! *hover? true)
:on-mouse-leave #(reset! *hover? false) :on-mouse-leave #(reset! *hover? false)
:on-context-menu (fn [^js e] :on-context-menu (fn [^js e]
@ -562,34 +562,36 @@
(ui/rotating-arrow collapsed?)]]) (ui/rotating-arrow collapsed?)]])
;; icon picker ;; icon picker
(let [content-fn (fn [{:keys [id]}] (when-not other-position?
(icon-component/icon-search (let [content-fn (fn [{:keys [id]}]
{:on-chosen (icon-component/icon-search
(fn [_e icon] {:on-chosen
(when icon (fn [_e icon]
(p/let [_ (db-property-handler/upsert-property! (:db/ident property) (when icon
(:block/schema property) (p/let [_ (db-property-handler/upsert-property! (:db/ident property)
{:properties {:logseq.property/icon icon}})] (:block/schema property)
(shui/popup-hide! id))))}))] {:properties {:logseq.property/icon icon}})]
(shui/popup-hide! id))))}))]
(shui/trigger-as :button (shui/trigger-as :button
(-> (when-not config/publishing? (-> (when-not config/publishing?
{:on-click #(shui/popup-show! (.-target %) content-fn {:as-dropdown? true :auto-focus? true})}) {:on-click #(shui/popup-show! (.-target %) content-fn {:as-dropdown? true :auto-focus? true})})
(assoc :class "flex items-center")) (assoc :class "flex items-center"))
(if icon (if icon
(icon-component/icon icon) (icon-component/icon icon)
[:span.bullet-container.cursor (when collapsed? {:class "bullet-closed"}) [:div
[:span.bullet]]))) [:span.bullet-container.cursor (when collapsed? {:class "bullet-closed"})
[:span.bullet]]]))))
(if config/publishing? (if config/publishing?
[:a.property-k.flex.select-none.jtrigger.pl-2 [:a.property-k.flex.select-none.jtrigger
{:on-click #(route-handler/redirect-to-page! (:block/uuid property))} {:on-click #(route-handler/redirect-to-page! (:block/uuid property))}
(:block/original-name property)] (:block/original-name property)]
(shui/trigger-as :a (shui/trigger-as :a
{:tabIndex 0 {:tabIndex 0
:title (str "Configure property: " (:block/original-name property)) :title (str "Configure property: " (:block/original-name property))
:class "property-k flex select-none jtrigger pl-2" :class "property-k flex select-none jtrigger"
:on-pointer-down (fn [^js e] :on-pointer-down (fn [^js e]
(when (util/meta-key? e) (when (util/meta-key? e)
(route-handler/redirect-to-page! (:block/uuid property)) (route-handler/redirect-to-page! (:block/uuid property))
@ -653,8 +655,7 @@
"property-pair items-center" "property-pair items-center"
:else :else
"property-pair items-start")} "property-pair items-start")}
[:div.property-key [:div.property-key.col-span-2
{:class "col-span-2"}
(property-key block property (assoc (select-keys opts [:class-schema?]) (property-key block property (assoc (select-keys opts [:class-schema?])
:block? block? :block? block?
:collapsed? collapsed? :collapsed? collapsed?

View File

@ -275,8 +275,12 @@ a.control-link {
} }
} }
.property-k:focus { .ls-popup-closed:focus {
@apply pr-1; @apply font-bold outline-none;
}
.positioned-properties .property-k:focus {
@apply font-normal;
} }
.ls-property-add { .ls-property-add {