[feat] categories: add icons for remaining category tabs (#6759)
Icons are provided for the main categories known to us. The distinction between CATEGORY_GROUPS and CATEGORY_NAMES is abandoned in favor of the latter. HINT: we need single-color icons; transparent background and the color must be `currentColor` so that the icons can be used in light/dark themes. The following SVGs from the ionicons had to be revised (use ``currentColor``). - client/simple/src/svg/ionicons/logo-rss.svg - client/simple/src/svg/ionicons/radio-outline.svg - client/simple/src/svg/ionicons/color-palette-outline.svg For the following categories, I did not find any usable icons in Ionicons; new SVGs were created for these categories. - onions: client/simple/src/svg/ionicons/tor-browser.svg - lyrics: client/simple/src/svg/ionicons/song-lyric-music.svg [1] - packages: client/simple/src/svg/ionicons/package_2.svg [1] [1] Based on Google's Material icons: https://fonts.google.com/icons Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
39
client/simple/src/svg/ionicons/color-palette-outline.svg
Normal file
@@ -0,0 +1,39 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon">
|
||||
<path
|
||||
d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="32px"
|
||||
/>
|
||||
<circle
|
||||
fill="currentColor"
|
||||
cx="144"
|
||||
cy="208"
|
||||
r="32"
|
||||
/>
|
||||
<circle
|
||||
fill="currentColor"
|
||||
cx="152"
|
||||
cy="311"
|
||||
r="32"
|
||||
/>
|
||||
<circle
|
||||
fill="currentColor"
|
||||
cx="224"
|
||||
cy="144"
|
||||
r="32"
|
||||
/>
|
||||
<circle
|
||||
fill="currentColor"
|
||||
cx="256"
|
||||
cy="367"
|
||||
r="48"
|
||||
/>
|
||||
<circle
|
||||
fill="currentColor"
|
||||
cx="328"
|
||||
cy="144"
|
||||
r="32"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -1,6 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 220h32v116"/>
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M208 340h88"/>
|
||||
<path d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z" fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-width="1"/>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="32"
|
||||
d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z"
|
||||
/>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32"
|
||||
d="M220 220h32v116"
|
||||
/>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="32" d="M208 340h88"
|
||||
/>
|
||||
<path
|
||||
d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="1"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 648 B After Width: | Height: | Size: 852 B |
17
client/simple/src/svg/ionicons/logo-rss.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon">
|
||||
<path
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
d="M108.56 342.78a60.34 60.34 0 1 0 60.56 60.44 60.63 60.63 0 0 0-60.56-60.44"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
d="M48 186.67v86.55c52 0 101.94 15.39 138.67 52.11s52 86.56 52 138.67h86.66c0-151.56-125.66-277.33-277.33-277.33"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
d="M48 48v86.56c185.25 0 329.22 144.08 329.22 329.44H464C464 234.66 277.67 48 48 48"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 625 B |
@@ -1,6 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
|
||||
<path d="M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
|
||||
<path d="M240 128h64M240 192h64M112 256h192M112 320h192M112 384h192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
|
||||
<path d="M176 208h-64a16 16 0 01-16-16v-64a16 16 0 0116-16h64a16 16 0 0116 16v64a16 16 0 01-16 16z" fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1" />
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32"
|
||||
d="M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328"
|
||||
/>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32"
|
||||
d="M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z"
|
||||
/>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32"
|
||||
d="M240 128h64M240 192h64M112 256h192M112 320h192M112 384h192"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1"
|
||||
d="M176 208h-64a16 16 0 01-16-16v-64a16 16 0 0116-16h64a16 16 0 0116 16v64a16 16 0 01-16 16z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 787 B After Width: | Height: | Size: 988 B |
7
client/simple/src/svg/ionicons/package_2.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -960 960 960"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M450-154v-309L180-619v309l270 156Zm60 0 270-156v-310L510-463v309Zm-60 69L150-258q-14-8-22-22t-8-30v-340q0-16 8-30t22-22l300-173q14-8 30-8t30 8l300 173q14 8 22 22t8 30v340q0 16-8 30t-22 22L510-85q-14 8-30 8t-30-8Zm194-525 102-59-266-154-102 59 266 154Zm-164 96 104-61-267-154-104 60 267 155Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 415 B |
23
client/simple/src/svg/ionicons/radio-outline.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon">
|
||||
<circle
|
||||
fill="currentColor"
|
||||
cx="256"
|
||||
cy="256.02"
|
||||
r="32"
|
||||
/>
|
||||
<path
|
||||
d="M184.25 192.25a96 96 0 0 0 0 127.52M327.77 319.77a96 96 0 0 0 0-127.52M133.28 141.28a168 168 0 0 0 0 229.44M378.72 370.72a168 168 0 0 0 0-229.44" fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32px"
|
||||
/>
|
||||
<path
|
||||
d="M435 416a240.34 240.34 0 0 0 0-320M77 96a240.34 240.34 0 0 0 0 320"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32px"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 741 B |
11
client/simple/src/svg/ionicons/song-lyric-music.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg
|
||||
height="512"
|
||||
viewBox="0 -960 20480 20480"
|
||||
width="512"
|
||||
version="1.1"
|
||||
>
|
||||
<path
|
||||
d="M 19480,18100 V 2980 q 0,-693 -493.5,-1186.5 Q 18493,1300 17800,1300 H 8560 q -693,0 -1186.5,493.5 Q 6880,2287 6880,2980 v 357 q 504,231 924,567 420,336 756,756 V 2980 h 9240 v 11067 l -987,-987 H 8560 V 9700 q -336,420 -756,756 -420,336 -924,567 v 2037 q 0,693 493.5,1186.5 Q 7867,14740 8560,14740 h 7560 z M 16120,11380 H 12760 V 9700 h 3360 z M 5200,9700 q 1050,0 1785,-735 735,-735 735,-1785 0,-1050 -735,-1785 -735,-735 -1785,-735 -231,0 -441,42 -210,42 -399,105 V 460 H 1000 v 1680 h 1680 v 5040 q 0,1050 735,1785 735,735 1785,735 z M 16120,8860 H 10240 V 7180 h 5880 z m 0,-2520 H 10240 V 4660 h 5880 z m 1680,6720 V 2980 Z"
|
||||
stroke="currentColor"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 808 B |
26
client/simple/src/svg/ionicons/tor-browser.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<svg
|
||||
viewBox="0 0 512 512"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="34.6274"
|
||||
d="M 256,469.53574 C 373.93232,469.53574 469.53574,373.93232 469.53574,256 469.53574,138.06479 373.93232,42.464261 256,42.464261 138.06479,42.464261 42.464263,138.06479 42.464263,256 42.464263,373.93232 138.06479,469.53574 256,469.53574 Z"
|
||||
/>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-width="34.6274"
|
||||
d="m 256,111.7191 a 144.28091,144.28091 0 1 1 0,288.56181"
|
||||
/>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-width="34.6274"
|
||||
d="m 256,180.97393 a 75.034727,75.034727 0 0 1 69.31543,46.31417 75.060698,75.060698 0 0 1 0,57.4238 75.092439,75.092439 0 0 1 -16.26334,24.34019 A 75.069355,75.069355 0 0 1 256,331.02607"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 979 B |
@@ -39,14 +39,17 @@ const simple_icons: IconSet[] = [
|
||||
alert: "alert-outline.svg",
|
||||
appstore: "apps-outline.svg",
|
||||
book: "book-outline.svg",
|
||||
camera: "camera-outline.svg",
|
||||
close: "close-outline.svg",
|
||||
download: "download-outline.svg",
|
||||
"ellipsis-vertical": "ellipsis-vertical-outline.svg",
|
||||
"file-tray-full": "file-tray-full-outline.svg",
|
||||
"file-tray-stacked": "file-tray-stacked-outline.svg",
|
||||
film: "film-outline.svg",
|
||||
globe: "globe-outline.svg",
|
||||
heart: "heart-outline.svg",
|
||||
image: "image-outline.svg",
|
||||
language: "language-outline.svg",
|
||||
layers: "layers-outline.svg",
|
||||
leecher: "arrow-down.svg",
|
||||
location: "location-outline.svg",
|
||||
@@ -58,13 +61,14 @@ const simple_icons: IconSet[] = [
|
||||
"navigate-up": "chevron-up-outline.svg",
|
||||
people: "people-outline.svg",
|
||||
play: "play-outline.svg",
|
||||
radio: "radio-outline.svg",
|
||||
rainy: "rainy-outline.svg",
|
||||
save: "save-outline.svg",
|
||||
school: "school-outline.svg",
|
||||
search: "search-outline.svg",
|
||||
seeder: "swap-vertical.svg",
|
||||
settings: "settings-outline.svg",
|
||||
tv: "tv-outline.svg"
|
||||
tv: "tv-outline.svg",
|
||||
videocam: "videocam-outline.svg"
|
||||
},
|
||||
svgo_opts: sxng_icon_opts
|
||||
},
|
||||
@@ -75,7 +79,13 @@ const simple_icons: IconSet[] = [
|
||||
base: resolve(HERE, "src/svg/ionicons"),
|
||||
set: {
|
||||
"information-circle": "information-circle-outline.svg",
|
||||
newspaper: "newspaper-outline.svg"
|
||||
lyrics: "song-lyric-music.svg",
|
||||
newspaper: "newspaper-outline.svg",
|
||||
palette: "color-palette-outline.svg",
|
||||
package: "package_2.svg",
|
||||
radio: "radio-outline.svg",
|
||||
rss: "logo-rss.svg",
|
||||
tor: "tor-browser.svg"
|
||||
},
|
||||
svgo_opts: sxng_icon_opts
|
||||
}
|
||||
|
||||
@@ -7,9 +7,18 @@ for the backend. Example output of this EDGE template:
|
||||
--}}
|
||||
{#
|
||||
Catalog of SVG symbols that can be inserted into the HTML output of a Jinja
|
||||
template. This file from:
|
||||
template. This file is generated by:
|
||||
|
||||
make static.build.commit
|
||||
|
||||
from template:
|
||||
|
||||
client/simple/tools/jinja_svg_catalog.html.edge
|
||||
|
||||
To modify the icon set, edit the script:
|
||||
|
||||
client/simple/theme_icons.ts
|
||||
|
||||
client/simple/tools/icon_catalog.edge.html
|
||||
#}
|
||||
|
||||
{%-
|
||||
|
||||
@@ -11,7 +11,6 @@ from searx.weather import WeatherConditionType
|
||||
__all__ = [
|
||||
'CONSTANT_NAMES',
|
||||
'CATEGORY_NAMES',
|
||||
'CATEGORY_GROUPS',
|
||||
'STYLE_NAMES',
|
||||
'BRAND_CUSTOM_LINKS',
|
||||
'WEATHER_TERMS',
|
||||
@@ -26,33 +25,34 @@ CONSTANT_NAMES = {
|
||||
}
|
||||
|
||||
CATEGORY_NAMES = {
|
||||
'FILES': 'files',
|
||||
'GENERAL': 'general',
|
||||
'MUSIC': 'music',
|
||||
'SOCIAL_MEDIA': 'social media',
|
||||
'IMAGES': 'images',
|
||||
'STOCK_IMAGES': 'stock images',
|
||||
'VIDEOS': 'videos',
|
||||
'RADIO': 'radio',
|
||||
'TV': 'tv',
|
||||
'IT': 'it',
|
||||
'NEWS': 'news',
|
||||
'MAP': 'map',
|
||||
'ONIONS': 'onions',
|
||||
'SCIENCE': 'science',
|
||||
}
|
||||
|
||||
CATEGORY_GROUPS = {
|
||||
# non-tab categories
|
||||
'APPS': 'apps',
|
||||
'DICTIONARIES': 'dictionaries',
|
||||
'LYRICS': 'lyrics',
|
||||
'PACKAGES': 'packages',
|
||||
'Q_A': 'q&a',
|
||||
'REPOS': 'repos',
|
||||
'SOFTWARE_WIKIS': 'software wikis',
|
||||
'WEB': 'web',
|
||||
'SCIENTIFIC PUBLICATIONS': 'scientific publications',
|
||||
"APPS": "apps",
|
||||
"BLOGS": "blogs",
|
||||
"DICTIONARIES": "dictionaries",
|
||||
"FILES": "files",
|
||||
"GENERAL": "general",
|
||||
"ICONS": "icons",
|
||||
"IMAGES": "images",
|
||||
"IT": "it",
|
||||
"LYRICS": "lyrics",
|
||||
"MAP": "map",
|
||||
"MOVIES": "movies",
|
||||
"MUSIC": "music",
|
||||
"NEWS": "news",
|
||||
"ONIONS": "onions",
|
||||
"PACKAGES": "packages",
|
||||
"Q_A": "q&a",
|
||||
"RADIO": "radio",
|
||||
"REPOS": "repos",
|
||||
"SCIENCE": "science",
|
||||
"SCIENTIFIC PUBLICATIONS": "scientific publications",
|
||||
"SOCIAL_MEDIA": "social media",
|
||||
"SOFTWARE_WIKIS": "software wikis",
|
||||
"STOCK_IMAGES": "stock images",
|
||||
"TRANSLATE": "translate",
|
||||
"TV": "tv",
|
||||
"VIDEOS": "videos",
|
||||
"WEATHER": "weather",
|
||||
"WEB": "web",
|
||||
}
|
||||
|
||||
STYLE_NAMES = {
|
||||
|
||||
@@ -1,19 +1,29 @@
|
||||
{% from 'simple/icons.html' import icon_big %}
|
||||
{%- set category_icons = {
|
||||
'apps': 'appstore',
|
||||
'dictionaries': 'book',
|
||||
'files': 'file-tray-full',
|
||||
'general': 'search',
|
||||
'images': 'image',
|
||||
'it': 'layers',
|
||||
'map': 'location',
|
||||
'music': 'musical-notes',
|
||||
'news': 'newspaper',
|
||||
'radio': 'radio',
|
||||
'science': 'school',
|
||||
'social media': 'people',
|
||||
'TV': 'tv',
|
||||
'videos': 'play',
|
||||
"apps": "appstore",
|
||||
"blogs": "rss",
|
||||
"dictionaries": "book",
|
||||
"files": "file-tray-full",
|
||||
"general": "search",
|
||||
"icons": "palette",
|
||||
"images": "image",
|
||||
"it": "layers",
|
||||
"lyrics": "lyrics",
|
||||
"map": "location",
|
||||
"movies": "videocam",
|
||||
"music": "musical-notes",
|
||||
"news": "newspaper",
|
||||
"onions": "tor",
|
||||
"packages": "package",
|
||||
"radio": "radio",
|
||||
"repos": "file-tray-stacked",
|
||||
"science": "school",
|
||||
"social media": "people",
|
||||
"stock images": "camera",
|
||||
"translate": "language",
|
||||
"TV": "tv",
|
||||
"videos": "play",
|
||||
"weather": "rainy",
|
||||
} -%}
|
||||
<div id="categories" class="search_categories">{{- '' -}}
|
||||
<div id="categories_container">
|
||||
|
||||