From 74bf1a089c4d329f934f6609d89ddb133f0e1f08 Mon Sep 17 00:00:00 2001 From: scheinriese Date: Thu, 14 May 2026 15:04:53 +0200 Subject: [PATCH] enhance(icon-picker): unify inline page-ref icons in 20x20 slot Tabler/text/emoji glyphs and avatar/image icons all share the same 20x20 visual slot in [[page-refs]] now, matching the left-sidebar's .page-icon dimensions. Photo icons (avatar, image) fill the slot; non-photo glyphs render at 16px centered with 2px breathing room. Drop the legacy .page-ref svg { width: 16px } clamp that overrode the per-icon size attributes, drop the 1lh height/line-height clamp on the wrappers that resolved to 16px and capped emoji glyphs, and opt the icon wrappers out of the .block-content-wrapper svg { 18px } sledgehammer. The cljs side simply defaults inline icon-size to 20 (was nil) and lets heading contexts override via heading-icon-size. Co-Authored-By: Claude Opus 4.7 --- src/main/frontend/components/block.cljs | 17 +++------ src/main/frontend/components/block.css | 47 ++++++++++++++++++------- 2 files changed, 39 insertions(+), 25 deletions(-) diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index 53b9d5c208..56fe41a7b9 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -726,17 +726,11 @@ (or (model/untitled-page? (:block/title page-entity)) (and (ldb/page? page-entity) (string/blank? (:block/title page-entity))))) show-icon? (:show-icon? config) - ;; Only override the icon's intrinsic default size when we're - ;; actually inside a heading — heading-icon-size returns a - ;; meaningful value for h1-h6 (e.g. 28 for h1, 12 for h6) but - ;; defaults to 14 for non-heading contexts. The 14 was getting - ;; applied to inline refs everywhere and forcing avatars to - ;; render at 14×14 instead of the photo-icon default of 20×20 - ;; (icon.cljs:917-919). With `icon-size` nil for non-headings, - ;; `get-node-icon-cp` keeps each icon type at its own intrinsic - ;; default — 20 for avatars/images, 14 for tabler/emoji. + ;; Inline page-refs render every icon type at 20px so avatar / + ;; image / tabler / emoji / text share the same visual slot. + ;; Headings override via `heading-icon-size` (28→12 for h1→h6). heading-level (:parent-heading config) - icon-size (when heading-level (heading-icon-size heading-level))] + icon-size (if heading-level (heading-icon-size heading-level) 20)] [:a.relative (cond-> {:tabIndex "0" @@ -785,8 +779,7 @@ (when (and show-icon? (not tag?)) (let [own-icon (get page-entity :logseq.property/icon) emoji? (and (map? own-icon) (= (:type own-icon) :emoji)) - icon-opts (cond-> {:color? true :not-text-or-page? true} - icon-size (assoc :size icon-size))] + icon-opts {:color? true :not-text-or-page? true :size icon-size}] (when-let [icon (icon-component/get-node-icon-cp page-entity icon-opts)] [:span {:class (str "icon-emoji-wrap " (when emoji? "as-emoji"))} icon]))) diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index d8c12816e4..445172abe8 100644 --- a/src/main/frontend/components/block.css +++ b/src/main/frontend/components/block.css @@ -57,12 +57,17 @@ .page-ref { @apply inline; + /* .page-ref stays pure `inline` (not inline-flex) so its baseline + derives from text metrics, not from the tallest flex child. The + icon wrappers are inline-flex *internally* so the glyph centers + against parent x-height via `vertical-align: middle`. Wrappers + shrink-to-fit the 20px icon — at 20px tall they fit within the + 24px body line-box (font 16 × line-height 1.5) without inflating + it. Heading line-boxes are taller still, so heading-sized icons + also fit. */ .icon-emoji-wrap { - position: relative; - top: 0; display: inline-flex; align-items: center; - line-height: 1; vertical-align: middle; padding-left: 1px; @@ -71,8 +76,18 @@ } } + /* 20×20 visual slot — same dimensions the left-sidebar's `.page-icon` + uses, so a `[[Page]]` icon reads at the same scale as its sidebar + entry. Photo icons (avatar / image) fill the slot. Tabler / text / + emoji glyphs render smaller (16px, see SVG / em-emoji rules below) + and center in the slot. `flex-shrink: 0` prevents wrapping text + from squeezing the slot. */ .icon-cp-container { - @apply inline-flex items-center pr-0.5; + @apply inline-flex items-center justify-center pr-0.5; + width: 20px; + height: 20px; + box-sizing: content-box; + flex-shrink: 0; vertical-align: middle; &.photo-icon { @@ -80,11 +95,12 @@ } } - &:has(> .icon-emoji-wrap), - &:has(> .icon-cp-container) { - display: inline-flex; - align-items: center; - vertical-align: baseline; + /* Non-photo glyphs (tabler / text) render at 16 inside the slot — + same inset the sidebar uses. Avatars / images keep their inline + `style: { width: 20px }` and fill the 20×20 slot. */ + .icon-cp-container:not(.photo-icon) svg { + width: 16px; + height: 16px; } .icon-emoji-wrap em-emoji, @@ -1246,6 +1262,15 @@ html.is-mac { height: 18px; } +/* Inline page-ref / tag icons set their own size via SVG width/height + attributes (icon.cljs text + tabler branches) or inline style (avatar). + The 18px clamp above overrides those attributes, so opt the icon + wrappers out — `auto` falls back to the attribute. */ +.block-content-wrapper :is(.icon-emoji-wrap, .icon-cp-container, .ls-icon-color-wrap) svg { + width: auto; + height: auto; +} + .katex svg { width: 100%; height: inherit; @@ -1326,10 +1351,6 @@ html.is-mac { height: initial; } -.page-ref svg { - width: 16px; - height: 16px; -} .ls-page-title { .positioned-properties, .time-spent {