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;