-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use icons instead of words for search result types #10661
base: master
Are you sure you want to change the base?
Conversation
|
src/htmlgen.cpp
Outdated
@@ -420,6 420,8 @@ static QCString substituteHtmlKeywords(const QCString &str, | |||
if (!serverBasedSearch) | |||
{ | |||
searchCssJs = "<script type=\"text/javascript\" src=\"$relpath^search/searchdata.js\"></script>\n"; | |||
} else { | |||
searchCssJs = "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,GRAD@24,400,0,0\" />"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't really like the external dependency. May break in the future and prevents off-line browsing. Better to bundle the set of icons with doxygen.
templates/html/extsearch.js
Outdated
|
||
icon = "asterisk"; | ||
|
||
if (item.type == "dir") |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggest to use a map
instead of if..else if..else if
, i.e.
const myMap = {
"key 1" : "value 1",
"key 2" : "value 2",
...
"key n" : "value n"
};
Thanks for the feedback! All good points. It may be possible to bundle a WebFont with appropriate licensing to reduce the internet dependency. As for putting the icons on the left vs the right, I started out on the left but it visually clashed with the numbering, as if there were two bullets. To me the right hand side sort of has a "external link information, here's what you'll get if you click" feel, kinda like Google's "cached" or other link metadata. I don't have a strong opinion though, anyone with a good sense for design is welcome to improve. I wonder if the numbered bullets are even that important? Or maybe the icons float to the left of the number like a pre-bullet? |
I'm not getting this, how does this clash? I was thinking something like: |
The number also doesn't add that much, so the icon could also serve as the "bullet" instead of a number. |
@albert-github @doxygen I finally got around to working on this again, here's what it looks like with the "left hand side number clash problem" and with no numbers, just icons. I think no numbers just icons looks best, personally, though I wonder if people may prefer to have the option. To get rid of the external dependency without a whole bunch of SVG wrangling and file copying and duplication between light and dark and relative path nonsense, I checked out the Google Font license and copied the font file and its license into the repo. If we want to try and find two dozen other icons and not use Google at all that's OK but webfont technology is pretty slick, Left hand side icon with numbers: No numbers just icons: Stock (no awesome-css): I also print the result type in the Please see the updated PR, depending on your decisions I think after cursory review this is pretty good to go! |
5f5d6bd
to
baa2b3e
Compare
Also fun fact, this woff file contains a few instances of the bytes Anyway I think I fixed that issue lol :) you can see what files git has mistakenly interpreted as text by running |
@albert-github this should be ready if it looks good to you |
The default external search behavior outputs words like
for each search result, however for any sizable project this gets visually very cluttered while adding relatively little understanding. Iconography is probably a better way of helping people skim for what they want.
This PR is a work in progress and feedback/changes/rewrites welcome, but I think it would be valuable for everyone. The use of Google Fonts is optional, any similar symbol would be just as useful, I just wanted to minimize the number of asset files to worry about while maximizing the number of available free icons at my disposal.
Here's what the PR looks like:
Stock, with some css tweaks:
Or with doxygen-awesome-css in dark mode: