clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-04-24 22:25:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor list-item-icon styles and enhance combobox item rendering

Browse Source 
- Updated list-item-icon default and create variants to use CSS variables for better adaptability to light/dark modes.
- Improved icon color contrast in both default and create variants for enhanced visibility.
- Refined combobox item rendering to utilize gap for spacing instead of spaces, ensuring consistent layout.
- Adjusted CSS rules to prevent overriding icon colors in specific contexts, maintaining design integrity.
This commit is contained in:
scheinriese
2025-11-29 00:22:21 +01:00
parent 092416e165
commit 44051947e9
3 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/frontend/components/combobox/item_renderer.cljs
View File

@@ -204,17 +204,17 @@
(string/starts-with? text-str %))
(:new-item-patterns config)))
new-text (when pattern (extract-new-item-text item pattern))
display-pattern (string/replace pattern #":$" "")]
display-pattern (string/replace pattern #":+$" "")] ; Remove one or more trailing colons
(if (= pattern "Convert")
;; Special styling for "Convert \"text\" to property" - use whitespace-nowrap to prevent awkward breaks
[:div {:class (str "flex flex-row items-center " gap-class " whitespace-nowrap")}
[:span.text-gray-12 "Convert "]
;; Special styling for "Convert \"text\" to property" - use gap instead of space
[:div {:class "flex flex-row items-center whitespace-nowrap gap-1"}
[:span.text-gray-12 "Convert"]
(when new-text
[:span.text-gray-11 (str "\"" new-text "\"")])
[:span.text-gray-12 " to property"]]
;; Regular "New option:" or "New page:" style
[:div {:class (str "flex flex-row items-center " gap-class)}
[:span.text-gray-12 display-pattern ":"]
[:span.text-gray-12 "to property"]]
;; Regular "New option:" or "New page:" style - use gap instead of space
[:div {:class "flex flex-row items-center whitespace-nowrap gap-1"}
[:span.text-gray-12 (str display-pattern ":")]
(when new-text
[:span.text-gray-11 (str "\"" new-text "\"")])]))
;; Regular content with optional highlighting and embeds

19
src/main/frontend/components/list_item_icon.css
View File

@@ -2,21 +2,31 @@
flex-shrink: 0;
}
/* Default variant - Dark gray background */
/* Default variant - Gray background that adapts to light/dark mode */
.list-item-icon--default {
background-color: #2B2F31;
background-color: var(--lx-gray-05, var(--rx-gray-05));
padding: 4px;
border-radius: 4px;
}
/* Ensure icon color has good contrast in default variant */
.list-item-icon--default .ui__icon {
color: var(--lx-gray-12, var(--rx-gray-12));
}
/* Create variant - Blue background with border */
.list-item-icon--create {
background-color: rgba(5, 126, 255, 0.6);
border: 1px solid #369EFF;
background-color: var(--lx-accent-08-alpha, rgba(5, 126, 255, 0.6));
border: 1px solid var(--lx-accent-10, #369EFF);
padding: 4px;
border-radius: 4px;
}
/* Ensure icon color has good contrast in create variant - use accent color */
.list-item-icon--create .ui__icon {
color: var(--lx-accent-12, var(--rx-accent-12, #ffffff));
}
/* Raw variant - No visible background, icon with opacity */
.list-item-icon--raw {
/* Container is 20px (w-5 h-5), icon is 16px with opacity-50 */
@@ -24,6 +34,7 @@
.list-item-icon--raw .ui__icon {
opacity: 0.5;
color: var(--lx-gray-12, var(--rx-gray-12));
}
/* Checkbox variant - Container for checkbox */

6
src/main/frontend/components/property/value.css
View File

@@ -157,6 +157,12 @@
color: var(--lx-gray-12, var(--rx-gray-12)) !important;
}
/* Don't override icon color in create variant list-item-icon - use accent color */
.ui__dropdown-menu-content .cp__select-main .item-results-wrap .menu-link.chosen .list-item-icon--create .ui__icon,
.ui__dropdown-menu-content .ui__combobox .item-results-wrap .menu-link.chosen .list-item-icon--create .ui__icon {
color: var(--lx-accent-12, var(--rx-accent-12)) !important;
}
/* Exception: Preserve gray-11 for quoted text in "New option" */
.ui__dropdown-menu-content .cp__select-main .item-results-wrap .menu-link .text-gray-11,
.ui__dropdown-menu-content .ui__combobox .item-results-wrap .menu-link .text-gray-11 {