Skip to content

Commit 755840c

Browse files
megayumegayu
authored
fix: heading icon alignment and menu active state
1. Derive the effective heading level consistently for auto headings, and reuse it for block icons, page-ref icons, and heading layout attributes. 2. Align heading bullets and page-ref icons so h3-h6 and auto heading changes no longer shift vertically. 3. Show the active heading and background color in the single-block context menu.
1 parent f42da95 commit 755840c

5 files changed

Lines changed: 175 additions & 68 deletions

File tree

‎src/main/frontend/components/block.cljs‎

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -638,6 +638,34 @@
638638

639639
(declare page-reference)
640640

641+
(defn- heading-value->level
642+
[heading level]
643+
(cond
644+
(and (integer? heading) (<= 1 heading 6)) heading
645+
(true? heading) (min (inc (or level 0)) 6)
646+
:else nil))
647+
648+
(defn- block-heading-level
649+
[block level]
650+
(or (when-let [heading-level (:block/heading-level block)]
651+
(when (and (integer? heading-level)
652+
(<= 1 heading-level 6))
653+
heading-level))
654+
(heading-value->level (or (pu/lookup block :logseq.property/heading)
655+
(:block.temp/heading block))
656+
level)))
657+
658+
(defn- heading-icon-size
659+
[heading-level]
660+
(case heading-level
661+
1 28
662+
2 24
663+
3 20
664+
4 16
665+
5 13
666+
6 12
667+
14))
668+
641669
(defn <open-page-ref
642670
[config page-entity e page-name contents-page?]
643671
(when (not (util/right-click? e))
@@ -695,7 +723,8 @@
695723
untitled? (when page-name
696724
(or (model/untitled-page? (:block/title page-entity))
697725
(and (ldb/page? page-entity) (string/blank? (:block/title page-entity)))))
698-
show-icon? (:show-icon? config)]
726+
show-icon? (:show-icon? config)
727+
icon-size (heading-icon-size (:parent-heading config))]
699728
[:a.relative
700729
(cond->
701730
{:tabIndex "0"
@@ -745,7 +774,8 @@
745774
(let [own-icon (get page-entity :logseq.property/icon)
746775
emoji? (and (map? own-icon) (= (:type own-icon) :emoji))]
747776
(when-let [icon (icon-component/get-node-icon-cp page-entity {:color? true
748-
:not-text-or-page? true})]
777+
:not-text-or-page? true
778+
:size icon-size})]
749779
[:span {:class (str "icon-emoji-wrap " (when emoji? "as-emoji"))}
750780
icon])))
751781

@@ -2015,7 +2045,9 @@
20152045
:ignore-children? page-title?
20162046
:page-title? page-title?})
20172047
link? (boolean (:original-block config))
2018-
icon-size (if collapsed? 12 14)
2048+
heading-level (when-not collapsed?
2049+
(block-heading-level block (:level config)))
2050+
icon-size (if collapsed? 12 (heading-icon-size heading-level))
20192051
icon (icon-component/get-node-icon-cp block {:size icon-size :color? true :link? link?})
20202052
with-icon? (and (some? icon)
20212053
(or (and (db/page? block)
@@ -2156,15 +2188,7 @@
21562188
level (:level config)
21572189
block-ref? (:block-ref? config)
21582190
block-type (or (keyword (pu/lookup block :logseq.property/ls-type)) :default)
2159-
;; `heading-level` is for backward compatibility, will remove it in later releases
2160-
heading-level (:block/heading-level block)
2161-
heading (or
2162-
(and heading-level
2163-
(<= heading-level 6)
2164-
heading-level)
2165-
(pu/lookup block :logseq.property/heading)
2166-
(:block.temp/heading block))
2167-
heading (if (true? heading) (min (inc level) 6) heading)
2191+
heading (block-heading-level block level)
21682192
elem (if heading
21692193
(keyword (str "h" heading ".block-title-wrap.as-heading"
21702194
(when block-ref? ".as-inline")))
@@ -2209,7 +2233,9 @@
22092233
(and (:page-ref? config)
22102234
(= 1 (count block-ast-title))
22112235
(= "Link" (ffirst block-ast-title)))
2212-
(assoc :node-ref-link-only? true))]
2236+
(assoc :node-ref-link-only? true)
2237+
(integer? heading)
2238+
(assoc :parent-heading heading))]
22132239
(map-inline config' block-ast-title))))))))
22142240

22152241
(rum/defc block-title-aux
@@ -3885,7 +3911,7 @@
38853911
(util/mobile?) 0
38863912
page-icon -36
38873913
:else -30)})
3888-
:data-has-heading (some-> block (pu/lookup :logseq.property/heading))
3914+
:data-has-heading (block-heading-level block level)
38893915
:on-mouse-enter (fn [e]
38903916
(block-mouse-over e block *control-show? block-id doc-mode?))
38913917
:on-mouse-move (fn [e]

‎src/main/frontend/components/block.css‎

Lines changed: 66 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,14 @@
5959

6060
.icon-emoji-wrap {
6161
position: relative;
62-
top: 0.08em;
62+
top: 0;
63+
display: inline-flex;
64+
align-items: center;
65+
line-height: 1;
66+
vertical-align: middle;
6367
padding-left: 1px;
6468

6569
&.as-emoji {
66-
top: 0.02em;
6770
padding-right: 1px;
6871
}
6972
}
@@ -72,9 +75,18 @@
7275
@apply inline-flex items-center pr-0.5;
7376
}
7477

78+
&:has(> .icon-emoji-wrap),
79+
&:has(> .icon-cp-container) {
80+
display: inline-flex;
81+
align-items: center;
82+
vertical-align: baseline;
83+
}
84+
7585
.icon-emoji-wrap em-emoji,
7686
.icon-cp-container .ui__icon {
77-
vertical-align: middle;
87+
display: inline-flex;
88+
align-items: center;
89+
line-height: 1;
7890
}
7991

8092
.block-title-wrap.as-heading {
@@ -364,6 +376,10 @@
364376
}
365377
}
366378

379+
h3&, h4&, h5&, h6& {
380+
min-height: 24px;
381+
}
382+
367383
&.as-inline {
368384
@apply inline;
369385
}
@@ -559,8 +575,39 @@
559575

560576
.block-main-container {
561577
@apply min-h-[24px];
578+
--ls-heading-control-icon-size: 14px;
579+
580+
> .block-control-wrap.is-with-icon {
581+
.bullet-container {
582+
width: var(--ls-heading-control-icon-size);
583+
min-width: var(--ls-heading-control-icon-size);
584+
height: var(--ls-heading-control-icon-size);
585+
}
586+
587+
.icon-cp-container,
588+
.ls-icon-color-wrap,
589+
.ui__icon {
590+
display: inline-flex;
591+
align-items: center;
592+
justify-content: center;
593+
line-height: 1;
594+
}
595+
596+
.ls-icon-color-wrap em-emoji,
597+
.ui__icon em-emoji {
598+
display: block;
599+
line-height: 1;
600+
}
601+
602+
.ui__icon.ti svg {
603+
width: var(--ls-heading-control-icon-size);
604+
height: var(--ls-heading-control-icon-size);
605+
}
606+
}
562607

563608
&[data-has-heading="1"], &:has(textarea.h1) {
609+
--ls-heading-control-icon-size: 28px;
610+
564611
> .block-control-wrap {
565612
@apply relative top-4;
566613
}
@@ -573,6 +620,8 @@
573620
}
574621

575622
&[data-has-heading="2"], &:has(textarea.h2) {
623+
--ls-heading-control-icon-size: 24px;
624+
576625
> .block-control-wrap {
577626
@apply relative top-2.5;
578627
}
@@ -585,9 +634,8 @@
585634
}
586635

587636
&[data-has-heading="3"], &:has(textarea.h3) {
588-
> .block-control-wrap {
589-
@apply relative top-[2px];
590-
}
637+
--ls-heading-control-icon-size: 20px;
638+
align-items: center;
591639

592640
.block-content-or-editor-wrap {
593641
.positioned-properties {
@@ -596,16 +644,19 @@
596644
}
597645
}
598646

599-
&[data-has-heading="5"] {
600-
> .block-control-wrap {
601-
@apply relative -top-[1px];
602-
}
647+
&[data-has-heading="4"], &:has(textarea.h4) {
648+
--ls-heading-control-icon-size: 16px;
649+
align-items: center;
650+
}
651+
652+
&[data-has-heading="5"], &:has(textarea.h5) {
653+
--ls-heading-control-icon-size: 13px;
654+
align-items: center;
603655
}
604656

605657
&[data-has-heading="6"], &:has(textarea.h6) {
606-
h6.as-heading, textarea.h6 {
607-
@apply pt-1;
608-
}
658+
--ls-heading-control-icon-size: 12px;
659+
align-items: center;
609660
}
610661
}
611662

@@ -872,6 +923,8 @@
872923

873924
.bullet {
874925
@apply rounded-full opacity-80;
926+
display: block;
927+
flex: none;
875928
width: 0.4em;
876929
height: 0.4em;
877930

‎src/main/frontend/components/container.cljs‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -333,10 +333,22 @@
333333
(show! (cp-content/block-ref-custom-context-menu-content block block-ref))
334334
(state/set-state! :block-ref/context nil))
335335

336-
;; block selection
336+
;; block selection
337337
(and (state/selection?) (not (d/has-class? target "bullet")))
338-
(show! (cp-content/custom-context-menu-content)
339-
{:id :blocks-selection-context-menu})
338+
(let [selection-blocks (state/get-selection-blocks)]
339+
(if (= 1 (count selection-blocks))
340+
(let [selected-block (first selection-blocks)
341+
property-default-value? (when selected-block
342+
(= "true" (d/attr selected-block "data-is-property-default-value")))]
343+
(when-let [sel-block-id (some-> selected-block
344+
(.getAttribute "blockid")
345+
(parse-uuid))]
346+
(p/do!
347+
(db-async/<get-block (state/get-current-repo) sel-block-id {:children? false})
348+
(show! (cp-content/block-context-menu-content
349+
target sel-block-id property-default-value?)))))
350+
(show! (cp-content/custom-context-menu-content)
351+
{:id :blocks-selection-context-menu})))
340352

341353
;; block bullet
342354
(and block-id (parse-uuid block-id))

‎src/main/frontend/components/content.cljs‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -153,21 +153,33 @@
153153

154154
(rum/defc ^:large-vars/cleanup-todo block-context-menu-content
155155
[_target block-id property-default-value?]
156-
(let [[set-icon-sub-menu-open? set-icon-sub-menu-open] (rum/use-state false)]
157-
(when-let [block (db/entity [:block/uuid block-id])]
158-
(let [heading (or (pu/lookup block :logseq.property/heading)
159-
false)]
160-
[:<>
161-
(ui/menu-background-color #(property-handler/set-block-property! block-id
162-
:logseq.property/background-color
163-
%)
164-
#(property-handler/remove-block-property! block-id
165-
:logseq.property/background-color))
166-
167-
(ui/menu-heading heading
168-
#(editor-handler/set-heading! block-id %)
169-
#(editor-handler/set-heading! block-id true)
170-
#(editor-handler/remove-heading! block-id))
156+
(let [block (db/entity [:block/uuid block-id])
157+
[set-icon-sub-menu-open? set-icon-sub-menu-open] (rum/use-state false)
158+
[heading set-heading!] (rum/use-state (or (pu/lookup block :logseq.property/heading) false))
159+
[current-color set-current-color!] (rum/use-state (pu/lookup block :logseq.property/background-color))]
160+
(when block
161+
[:<>
162+
(ui/menu-background-color current-color
163+
(fn [color]
164+
(set-current-color! color)
165+
(property-handler/set-block-property! block-id
166+
:logseq.property/background-color
167+
color))
168+
(fn []
169+
(set-current-color! nil)
170+
(property-handler/remove-block-property! block-id
171+
:logseq.property/background-color)))
172+
173+
(ui/menu-heading heading
174+
(fn [i]
175+
(set-heading! i)
176+
(editor-handler/set-heading! block-id i))
177+
(fn []
178+
(set-heading! true)
179+
(editor-handler/set-heading! block-id true))
180+
(fn []
181+
(set-heading! false)
182+
(editor-handler/remove-heading! block-id)))
171183

172184
(shui/dropdown-menu-separator)
173185

@@ -352,7 +364,7 @@
352364
{:created-at (tc/from-long (* (:created-at version) 1000))
353365
:content (:value version)})
354366
versions))))))}
355-
"(Dev) Show block content history")))])]))))
367+
"(Dev) Show block content history")))])])))
356368

357369
(rum/defc block-ref-custom-context-menu-content
358370
[block block-ref-id]

0 commit comments

Comments
 (0)