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?)
has-tags? (seq (:block/tags 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?
;; 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
(or has-tags? (some? types))
true)
[:div.page-info {:on-mouse-over #(reset! *hover? true)
:on-mouse-leave #(reset! *hover? false)}
(when (or hover-or-expanded? has-tags? has-properties? class?)
[:div.py-2 {:class (if (or @*hover? (not collapsed?))
"border rounded"
"border rounded border-transparent")}
[:div.info-title.cursor {:on-click
(if config/publishing?
(fn [_]
(when (seq (set/intersection #{"class" "property"} types))
(swap! *collapsed? not)))
#(swap! *collapsed? not))}
[:div.page-info
[:div.py-2 {:class (if (or @*hover? (not collapsed?))
"border rounded"
"border rounded border-transparent")}
[:div.info-title.cursor
{:on-mouse-over #(reset! *hover? true)
:on-mouse-leave #(reset! *hover? false)
:on-click (if config/publishing?
(fn [_]
(when (seq (set/intersection #{"class" "property"} types))
(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
(if collapsed?
(if (or has-tags? @*hover? config/publishing?)
[:<>
(if has-tags?
[:div.px-1]
[:div.px-1 {:style {:min-height 28}}]
(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)))
[:div
[:div.opacity-50.pointer.text-sm "Expand for more info"]]
@ -206,11 +208,12 @@
{:variant :ghost :size :sm :class "fade-link"}
(ui/icon (if collapsed?
"chevron-down"
"chevron-up"))))]]
"chevron-up"))))])]
(when show-info?
(if collapsed?
(when (or (seq (:block/properties page))
(and class? (seq (:properties (:block/schema page)))))
[:div.py-2.px-4
(page-properties page {:mode (if class? :class :page)})])
[: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 {
min-height: 46px;
margin-left: -15px;
.info-title {
min-height: 28px;
}
}
.sidebar-item .page-info {