Improvement: menu icons (#4004)

* default icons

* icons Flat theme

* icons Swage theme

* icon gets bright when hover: Ansum theme

* icon gets bright when hover: Blue lagoon theme

* icon gets bright when hover: Origine/Origine Compact theme

* compressed SVG

* Better formated SVG/XML files

* Update bookmark-tag.svg

app/Models/Themes.php

@@ -75,6 +75,7 @@ class FreshRSS_Themes extends Minz_Model {
 			'all' => '☰',
 			'bookmark' => '★',
 			'bookmark-add' => '✚',
+			'bookmark-tag' => '🔖',
 			'category' => '☷',
 			'category-white' => '☷',
 			'close' => '❌',
@@ -100,6 +101,8 @@ class FreshRSS_Themes extends Minz_Model {
 			'refresh' => '🔃',	//↻
 			'search' => '🔍',
 			'share' => '♺',
+			'sort-down' => '↓',
+			'sort-up' => '↑',
 			'starred' => '★',
 			'stats' => '%',
 			'tag' => '⚐',

app/layout/nav_menu.phtml

@@ -32,7 +32,7 @@
 		<div class="dropdown">
 			<div id="dropdown-query" class="dropdown-target"></div>
 
-			<a class="dropdown-toggle btn" href="#dropdown-query"><?= _i('down') ?></a>
+			<a class="dropdown-toggle btn" href="#dropdown-query" title="<?= _t('index.menu.queries') ?>"><?= _i('bookmark-tag') ?></a>
 			<ul class="dropdown-menu">
 				<li class="dropdown-close"><a href="#close">❌</a></li>
 
@@ -208,11 +208,11 @@
 	<?php
 		if (FreshRSS_Context::$order === 'DESC') {
 			$order = 'ASC';
-			$icon = 'up';
+			$icon = 'sort-up';
 			$title = _t('index.menu.older_first');
 		} else {
 			$order = 'DESC';
-			$icon = 'down';
+			$icon = 'sort-down';
 			$title = _t('index.menu.newer_first');
 		}
 		$url_order = Minz_Request::currentRequest();

p/themes/Ansum/_components.scss

@@ -75,6 +75,10 @@
 				text-decoration: none;
 				color: $white;
 			}
+
+			.icon {
+				filter: grayscale(100%) brightness(2.5);
+			}
 		}
 
 		&[aria-checked="true"] {

p/themes/Ansum/ansum.css

@@ -121,8 +121,8 @@ label {
 }
 
 textarea {
-	width: 360px;
 	max-width: 100%;
+	width: 360px;
 	height: 100px;
 }
 
@@ -276,6 +276,9 @@ form th {
 	text-decoration: none;
 	color: #fff;
 }
+.dropdown-menu .item:hover .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 0 0 -14px;
 	font-weight: bold;

p/themes/Ansum/ansum.rtl.css

@@ -121,8 +121,8 @@ label {
 }
 
 textarea {
-	width: 360px;
 	max-width: 100%;
+	width: 360px;
 	height: 100px;
 }
 
@@ -276,6 +276,9 @@ form th {
 	text-decoration: none;
 	color: #fff;
 }
+.dropdown-menu .item:hover .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
 .dropdown-menu .item[aria-checked=true] a::before {
 	margin: 0 -14px 0 0;
 	font-weight: bold;

p/themes/BlueLagoon/BlueLagoon.css

@@ -396,6 +396,10 @@ a.btn {
 	font-weight: bold;
 }
 
+.dropdown-menu .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
+
 .dropdown-menu > .item > a,
 .dropdown-menu > .item > span,
 .dropdown-menu > .item > .as-link {

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -396,6 +396,10 @@ a.btn {
 	font-weight: bold;
 }
 
+.dropdown-menu .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
+
 .dropdown-menu > .item > a,
 .dropdown-menu > .item > span,
 .dropdown-menu > .item > .as-link {

p/themes/Flat/icons/bookmark-tag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#fff" d="M4 1.5v13l4-4 4 4v-13z" />
+</svg>

p/themes/Flat/icons/sort-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#fff" d="M13.984 2.817H2.016L5.008 8 8 13.183 10.992 8z" />
+</svg>

p/themes/Flat/icons/sort-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#fff" d="M13.984 13.183H2.016L5.008 8 8 2.817 10.992 8z" />
+</svg>

p/themes/Origine-compact/origine-compact.css

@@ -401,6 +401,10 @@ a.btn,
 	color: #fff;
 }
 
+.dropdown-menu > .item:hover .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;

p/themes/Origine-compact/origine-compact.rtl.css

@@ -401,6 +401,10 @@ a.btn,
 	color: #fff;
 }
 
+.dropdown-menu > .item:hover .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 -14px 0 0;

p/themes/Origine/origine.css

@@ -393,6 +393,10 @@ a.btn {
 	color: #fff;
 }
 
+.dropdown-menu > .item:hover .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;

p/themes/Origine/origine.rtl.css

@@ -393,6 +393,10 @@ a.btn {
 	color: #fff;
 }
 
+.dropdown-menu > .item:hover .icon {
+	filter: grayscale(100%) brightness(2.5);
+}
+
 .dropdown-menu > .item[aria-checked="true"] > a::before {
 	font-weight: bold;
 	margin: 0 -14px 0 0;

p/themes/Swage/icons/bookmark-add.svg

@@ -1,6 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg enable-background="new 0 0 16 16" version="1.1" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-<style type="text/css">.st0{fill:#FFFFFF;}</style>
-<polygon class="st0" points="16 5.3 13.7 5.3 13.7 3 12 3 12 5.3 9.8 5.3 9.8 6.9 12 6.9 12 9.2 13.7 9.2 13.7 6.9 16 6.9"/>
-<path class="st0" d="M11,10.2V7.9H8.8V4.3H11V2h1.8V1.7c0-1-0.8-1.7-1.7-1.7H2.5c-1,0-1.7,0.8-1.7,1.7l0,13.9L6.8,13l6.1,2.6v-5.4 H11z"/>
-</svg>
+	<style type="text/css">
+		.st0{fill:#FFFFFF;}
+	</style>
+	<polygon class="st0" points="16 5.3 13.7 5.3 13.7 3 12 3 12 5.3 9.8 5.3 9.8 6.9 12 6.9 12 9.2 13.7 9.2 13.7 6.9 16 6.9" />
+	<path class="st0" d="M11,10.2V7.9H8.8V4.3H11V2h1.8V1.7c0-1-0.8-1.7-1.7-1.7H2.5c-1,0-1.7,0.8-1.7,1.7l0,13.9L6.8,13l6.1,2.6v-5.4 H11z" />
+</svg>

p/themes/Swage/icons/bookmark-tag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16">
+	<path fill="#fff" d="M12.8 1.7c0-1-.8-1.7-1.7-1.7H2.5C1.5 0 .8.8.8 1.7v13.9l6-2.6 6.1 2.6z" />
+</svg>

p/themes/Swage/icons/sort-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#fff" d="M15.798 1.349H.181L4.085 8.11l3.904 6.763 3.905-6.763z" />
+</svg>

p/themes/Swage/icons/sort-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#fff" d="M15.798 14.874H.181L4.085 8.11 7.989 1.35l3.905 6.762z" />
+</svg>

p/themes/icons/bookmark-add.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
-<g transform="translate(-141.0002,-807)" fill="#bebebe">
-<path d="m143,807,0,13,4-4,4,4,0-4,0-1-2,0,0-4,2,0,0-4z"/>
-<path d="m152,810,0,2-2,0,0,2,2,0,0,2,2,0,0-2,2,0,0-2-2,0,0-2-2,0z"/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<g fill="#666">
+		<path d="M1.5 1.5v13l4-4 4 4V10H7V5h2.5V1.5Z" />
+		<path d="M10.5 4.5v2h-2v2h2v2h2v-2h2v-2h-2v-2z" />
+	</g>
 </svg>

p/themes/icons/bookmark-tag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#666" d="M4 1.5v13l4-4 4 4v-13z" />
+</svg>

p/themes/icons/sort-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#666" d="M13.984 2.817H2.016L5.008 8 8 13.183 10.992 8z" />
+</svg>

p/themes/icons/sort-up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+	<path fill="#666" d="M13.984 13.183H2.016L5.008 8 8 2.817 10.992 8z" />
+</svg>