greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance: show page info border only when hovering the info title

pull/11049/head
Tienson Qin 2024-02-25 05:57:59 +08:00
parent bb9da0781e
commit 5cccc9a063
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/main/frontend/components/db_based/page.cljs
View File

@ -162,33 +162,35 @@
collapsed? (rum/react *collapsed?) collapsed? (rum/react *collapsed?)
has-tags? (seq (:block/tags page)) has-tags? (seq (:block/tags page))
has-properties? (seq (:block/properties page)) has-properties? (seq (:block/properties page))
hover-or-expanded? (or @*hover? hover-title? (not collapsed?))] hover-or-expanded? (or @*hover? hover-title? (not collapsed?))
show-info? (or hover-or-expanded? has-tags? has-properties? class?)]
(when (if config/publishing? (when (if config/publishing?
;; Since publishing is read-only, hide this component if it has no info to show ;; Since publishing is read-only, hide this component if it has no info to show
;; as it creates a fair amount of empty vertical space ;; as it creates a fair amount of empty vertical space
(or has-tags? (some? types)) (or has-tags? (some? types))
true) true)
[:div.page-info {:on-mouse-over #(reset! *hover? true) [:div.page-info
:on-mouse-leave #(reset! *hover? false)} [:div.py-2 {:class (if (or @*hover? (not collapsed?))
(when (or hover-or-expanded? has-tags? has-properties? class?) "border rounded"
[:div.py-2 {:class (if (or @*hover? (not collapsed?)) "border rounded border-transparent")}
"border rounded" [:div.info-title.cursor
"border rounded border-transparent")} {:on-mouse-over #(reset! *hover? true)
[:div.info-title.cursor {:on-click :on-mouse-leave #(reset! *hover? false)
(if config/publishing? :on-click (if config/publishing?
(fn [_] (fn [_]
(when (seq (set/intersection #{"class" "property"} types)) (when (seq (set/intersection #{"class" "property"} types))
(swap! *collapsed? not))) (swap! *collapsed? not)))
#(swap! *collapsed? not))} #(swap! *collapsed? not))}
(when show-info?
[:div.flex.flex-row.items-center.gap-2.justify-between.pl-1 [:div.flex.flex-row.items-center.gap-2.justify-between.pl-1
[:div.flex.flex-row.items-center.gap-2 [:div.flex.flex-row.items-center.gap-2
(if collapsed? (if collapsed?
(if (or has-tags? @*hover? config/publishing?) (if (or has-tags? @*hover? config/publishing?)
[:<> [:<>
(if has-tags? (if has-tags?
[:div.px-1] [:div.px-1 {:style {:min-height 28}}]
(shui-ui/button {:variant :ghost :size :sm :class "fade-link"} (shui-ui/button {:variant :ghost :size :sm :class "fade-link"}
(ui/icon "tags"))) (ui/icon "tags")))
(if (and config/publishing? (seq (set/intersection #{"class" "property"} types))) (if (and config/publishing? (seq (set/intersection #{"class" "property"} types)))
[:div [:div
[:div.opacity-50.pointer.text-sm "Expand for more info"]] [:div.opacity-50.pointer.text-sm "Expand for more info"]]
@ -206,11 +208,12 @@
{:variant :ghost :size :sm :class "fade-link"} {:variant :ghost :size :sm :class "fade-link"}
(ui/icon (if collapsed? (ui/icon (if collapsed?
"chevron-down" "chevron-down"
"chevron-up"))))]] "chevron-up"))))])]
(when show-info?
(if collapsed? (if collapsed?
(when (or (seq (:block/properties page)) (when (or (seq (:block/properties page))
(and class? (seq (:properties (:block/schema page))))) (and class? (seq (:properties (:block/schema page)))))
[:div.py-2.px-4 [:div.py-2.px-4
(page-properties page {:mode (if class? :class :page)})]) (page-properties page {:mode (if class? :class :page)})])
[:div.py-2.px-4 [:div.py-2.px-4
(page-configure page *mode)])])]))) (page-configure page *mode)]))]])))

4
src/main/frontend/components/page.css
View File

@ -390,6 +390,10 @@ html.is-native-ios {
.page-info { .page-info {
min-height: 46px; min-height: 46px;
margin-left: -15px; margin-left: -15px;
.info-title {
min-height: 28px;
}
} }
.sidebar-item .page-info { .sidebar-item .page-info {