clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-05-29 15:09:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(icon-picker): hide CMD-K chip background for photo icons

Browse Source 
Avatars (both photo-image and colored-circle initials fallback) and
images carry their own shape and color. The slot's gray chip became a
frame around a frame and muddied the avatar's circle visually.

Suppress the chip background when the slot contains a photo icon while
preserving the 20x20 slot dimensions for row alignment. Tabler, text,
emoji, and default page/block icons keep the chip since they need it
to define their hit area against the row text.

Implementation: add a stable `.cp__cmdk-list-item-icon` hook class to
the slot div and target it from cmdk.css via :has(). The
.icon-cp-container.photo-icon signal already exists in DOM (set by
get-node-icon-cp for :type :avatar and :image) so no CLJS plumbing of
icon-type knowledge into the CMD-K caller is needed.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
scheinriese
2026-05-14 16:57:25 +02:00
parent cb02c2eb66
commit 0efcac9bab
2 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/frontend/components/cmdk/cmdk.css
View File

@@ -88,3 +88,15 @@
.dark [data-cmdk-item][data-hoverable][data-highlighted]:hover {
box-shadow: none;
}
/* Photo icons (avatar with image, or colored-circle initials fallback)
carry their own shape and color, so the slot's gray chip becomes a
frame around a frame and visually muddies the avatar's circle. Hide
the chip background while preserving the 20×20 slot for row alignment.
`.icon-cp-container.photo-icon` is set by `get-node-icon-cp` for any
icon of `:type :avatar` or `:image` (icon.cljs:953). Broken-asset
fallbacks (`.image-error`) keep their own bordered tile so they
still read as "settled but broken" without needing the chip. */
.cp__cmdk-list-item-icon:has(> .icon-cp-container.photo-icon) {
background: transparent !important;
}

7
src/main/frontend/components/cmdk/list_item.cljs
View File

@@ -98,7 +98,12 @@
[:div.w-5.h-5.rounded.flex.items-center.justify-center
{:style {:background (when (#{:gradient} icon-theme) "linear-gradient(-65deg, #8AE8FF, #5373E7, #369EFF, #00B1CC)")
:box-shadow (when (#{:gradient} icon-theme) "inset 0 0 0 1px rgba(255,255,255,0.3) ")}
:class (cond-> "w-5 h-5 rounded flex items-center justify-center"
;; `cp__cmdk-list-item-icon` is a hook for the chip-suppression
;; rule in cmdk.css — when this slot contains a photo-icon
;; (avatar with image OR colored-circle initials fallback), the
;; gray chip becomes transparent so the icon's own shape and
;; color read cleanly. Tabler / text / emoji rows keep the chip.
:class (cond-> "w-5 h-5 rounded flex items-center justify-center cp__cmdk-list-item-icon"
(= icon-theme :color) (str
" "
(if highlighted "bg-accent-07-alpha" "bg-gray-05")