From 5c5db168dd5102c6e2599d44f8a1e470eb27f051 Mon Sep 17 00:00:00 2001
From: Tim Hoffmann <2836374+timhoffm@users.noreply.github.com>
Date: Mon, 24 Jun 2024 23:07:49 +0200
Subject: [PATCH] ENH: Show type-dependent icon on search result entries
It's helpful to visually distinguish different content types.
This PR adds `itemType` to the javascript result entries
(one of "title", "index", "object", "text") and adds
them as a class to the
item in the result list.
This allows styling via CSS.
For simplicity, I've styled with unicode symbols, which
should give a decent look without the need to ship our
own symbols. Derived themes have the ability to adapt
this via their CSS settings.
---
sphinx/themes/basic/static/basic.css_t | 25 +++++++++++++++--------
sphinx/themes/basic/static/searchtools.js | 13 ++++++++----
2 files changed, 26 insertions(+), 12 deletions(-)
diff --git a/sphinx/themes/basic/static/basic.css_t b/sphinx/themes/basic/static/basic.css_t
index 297b9bfaeff..3b948eb1d22 100644
--- a/sphinx/themes/basic/static/basic.css_t
+++ b/sphinx/themes/basic/static/basic.css_t
@@ -114,16 +114,25 @@ img {
/* -- search page ----------------------------------------------------------- */
-ul.search {
- margin: 10px 0 0 20px;
- padding: 0;
-}
-
ul.search li {
padding: 5px 0 5px 20px;
- background-image: url(file.png);
- background-repeat: no-repeat;
- background-position: 0 7px;
+ list-style: "\25A1"; /* Unicode: White Square */
+}
+
+ul.search li.title {
+ list-style: "\1F4C1"; /* Unicode: File Folder */
+}
+
+ul.search li.index {
+ list-style: "\1F4D1"; /* Unicode: Bookmark Tabs */
+}
+
+ul.search li.object {
+ list-style: "\1F4E6"; /* Unicode: Package */
+}
+
+ul.search li.text {
+ list-style: "\1F4C4"; /* Unicode: Page Facing Up */
}
ul.search li a {
diff --git a/sphinx/themes/basic/static/searchtools.js b/sphinx/themes/basic/static/searchtools.js
index eaed90953f4..5146d65681f 100644
--- a/sphinx/themes/basic/static/searchtools.js
+++ b/sphinx/themes/basic/static/searchtools.js
@@ -20,7 +20,7 @@ if (typeof Scorer === "undefined") {
// and returns the new score.
/*
score: result => {
- const [docname, title, anchor, descr, score, filename] = result
+ const [docname, title, anchor, descr, score, filename, itemType] = result
return score
},
*/
@@ -64,9 +64,10 @@ const _displayItem = (item, searchTerms, highlightTerms) => {
const showSearchSummary = DOCUMENTATION_OPTIONS.SHOW_SEARCH_SUMMARY;
const contentRoot = document.documentElement.dataset.content_root;
- const [docName, title, anchor, descr, score, _filename] = item;
+ const [docName, title, anchor, descr, score, _filename, itemType] = item;
let listItem = document.createElement("li");
+ listItem.classList.add(itemType)
let requestUrl;
let linkUrl;
if (docBuilder === "dirhtml") {
@@ -138,7 +139,7 @@ const _displayNextItem = (
else _finishSearch(resultCount);
};
// Helper function used by query() to order search results.
-// Each input is an array of [docname, title, anchor, descr, score, filename].
+// Each input is an array of [docname, title, anchor, descr, score, filename, itemType].
// Order the results by score (in opposite order of appearance, since the
// `_displayNextItem` function uses pop() to retrieve items) and then alphabetically.
const _orderResultsByScoreThenName = (a, b) => {
@@ -318,7 +319,7 @@ const Search = {
const indexEntries = Search._index.indexentries;
// Collect multiple result groups to be sorted separately and then ordered.
- // Each is an array of [docname, title, anchor, descr, score, filename].
+ // Each is an array of [docname, title, anchor, descr, score, filename, itemType].
const normalResults = [];
const nonMainIndexResults = [];
@@ -336,6 +337,7 @@ const Search = {
null,
score,
filenames[file],
+ "title",
]);
}
}
@@ -353,6 +355,7 @@ const Search = {
null,
score,
filenames[file],
+ "index",
];
if (isMain) {
normalResults.push(result);
@@ -474,6 +477,7 @@ const Search = {
descr,
score,
filenames[match[0]],
+ "object",
]);
};
Object.keys(objects).forEach((prefix) =>
@@ -584,6 +588,7 @@ const Search = {
null,
score,
filenames[file],
+ "text",
]);
}
return results;