Use icons instead of words for search result types #10661
Conversation
|
|
I'm not sure whether a reference to the google fonts is a good choice (but you already wrote: 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.):
I think it would be better to use a local set of icons, which would also give the possibility (through redefinition / settings) to use ones own preferred icons. Furthermore it might be better to have the icon before the text as now it is a bit "ragged". Note: as you mention it is still work in progress maybe an idea to make this more clear by setting the PR into WIP mode (right hand side of the PR page).: |
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.
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.
There was a problem hiding this comment.
Also privacy concerns and legal headaches that come with it, depending on the country of residence. Please don't load external resources.
templates/html/extsearch.js
Outdated
|
|
||
| icon = "asterisk"; | ||
|
|
||
| if (item.type == "dir") |
There was a problem hiding this comment.
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! |
zyphlar
force-pushed
the
custom_search_iconography
branch
from
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: