Skip to content

Commit

Permalink
ENH: Show type-dependent icon on search result entries
Browse files Browse the repository at this point in the history
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 <li> 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.
  • Loading branch information
timhoffm committed Jun 24, 2024
1 parent a1bb165 commit 5c5db16
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 12 deletions.
25 changes: 17 additions & 8 deletions sphinx/themes/basic/static/basic.css_t
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
13 changes: 9 additions & 4 deletions sphinx/themes/basic/static/searchtools.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
*/
Expand Down Expand Up @@ -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") {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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 = [];

Expand All @@ -336,6 +337,7 @@ const Search = {
null,
score,
filenames[file],
"title",
]);
}
}
Expand All @@ -353,6 +355,7 @@ const Search = {
null,
score,
filenames[file],
"index",
];
if (isMain) {
normalResults.push(result);
Expand Down Expand Up @@ -474,6 +477,7 @@ const Search = {
descr,
score,
filenames[match[0]],
"object",
]);
};
Object.keys(objects).forEach((prefix) =>
Expand Down Expand Up @@ -584,6 +588,7 @@ const Search = {
null,
score,
filenames[file],
"text",
]);
}
return results;
Expand Down

0 comments on commit 5c5db16

Please sign in to comment.