Changements styles filtres

Utilisation d'une coche plutôt qu'un changement de couleur.
Meilleure accessibilité avec ARIA.
Optimisation des sélecteurs CSS.
En particulier, évite les sélecteurs universels * qui sont très couteux
en performances.
https://github.com/marienfressinaud/FreshRSS/issues/277
https://github.com/marienfressinaud/FreshRSS/pull/357

4 files changed, 35 insertions, 36 deletions

diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index 1fabac996..705ed3314 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -132,7 +132,7 @@
 				$url_state = $url;
 				$url_state['params']['state'] = 'all';
 			?>
-			<li class="item <?php if ($this->state == 'all') echo "selected"?>">
+			<li class="item" role="checkbox" aria-checked="<?php echo ($this->state === 'all') ? 'true' :'false'; ?>">
 				<a class="print_all" href="<?php echo Minz_Url::display ($url_state); ?>">
 					<?php echo Minz_Translate::t ('show_all_articles'); ?>
 				</a>
@@ -140,23 +140,23 @@
 			<?php
 				$url_state['params']['state'] = 'not_read';
 			?>
-			<li class="item <?php if ($this->state == 'not_read') echo "selected"?>">
+			<li class="item" role="checkbox" aria-checked="<?php echo ($this->state === 'not_read') ? 'true' :'false'; ?>">
 				<a class="print_non_read" href="<?php echo Minz_Url::display ($url_state); ?>">
 					<?php echo Minz_Translate::t ('show_not_reads'); ?>
 				</a>
 			</li>
 			<?php
-					$url_state['params']['state'] = 'read';
+				$url_state['params']['state'] = 'read';
 			?>
-			<li class="item <?php if ($this->state == 'read') echo "selected"?>">
+			<li class="item" role="checkbox" aria-checked="<?php echo ($this->state === 'read') ? 'true' :'false'; ?>">
 				<a class="print_read" href="<?php echo Minz_Url::display ($url_state); ?>">
 					<?php echo Minz_Translate::t ('show_read'); ?>
 				</a>
 			</li>
 			<?php
-					$url_state['params']['state'] = 'favorite';
+				$url_state['params']['state'] = 'favorite';
 			?>
-			<li class="item <?php if ($this->state == 'favorite') echo "selected"?>">
+			<li class="item" role="checkbox" aria-checked="<?php echo ($this->state === 'favorite') ? 'true' :'false'; ?>">
 				<a class="print_favorite" href="<?php echo Minz_Url::display ($url_state); ?>">
 					<?php echo Minz_Translate::t ('show_favorite'); ?>
 				</a>
diff --git a/p/themes/default/global.css b/p/themes/default/global.css
index d3a5cc68c..49f3aa4cd 100644
--- a/p/themes/default/global.css
+++ b/p/themes/default/global.css
@@ -392,28 +392,28 @@ input, select, textarea {
 			font-size: 14px;
 			line-height: 30px;
 		}
-		.dropdown-menu .item {
+		.dropdown-menu > .item {
 			display: block;
 			height: 30px;
 			font-size: 90%;
 			line-height: 30px;
 		}
-		.dropdown-menu .item.selected{
-			background: #0062be;
-		}
-		.dropdown-menu .item.selected a{
-			color: #fff;
-		}
-			.dropdown-menu .item > * {
+			.dropdown-menu > .item > a {
 				display: block;
 				padding: 0 25px;
 				line-height: 30px;
 			}
-			.dropdown-menu .item:hover {
+			.dropdown-menu > .item:hover {
 				background: #0062BE;
 				color: #fff;
 			}
-				.dropdown-menu .item:hover > * {
+				.dropdown-menu > .item[aria-checked="true"] > a:before {
+					content: '✓ ';
+					font-weight: bold;
+					margin: 0 0 0 -1.2em;
+					padding: 0 0.2em 0 0;
+				}
+				.dropdown-menu > .item:hover > a {
 					color: #fff;
 					text-decoration: none;
 				}
diff --git a/p/themes/default_dark/global.css b/p/themes/default_dark/global.css
index a9c83d9de..04eb723f1 100644
--- a/p/themes/default_dark/global.css
+++ b/p/themes/default_dark/global.css
@@ -386,22 +386,22 @@ input, select, textarea {
 			font-size: 90%;
 			line-height: 30px;
 		}
-		.dropdown-menu .item.selected{
-			background: #26303f;
-		}
-		.dropdown-menu .item.selected a{
-			color: #888;
-		}
-			.dropdown-menu .item > * {
+			.dropdown-menu > .item > a {
 				display: block;
 				padding: 0 25px;
 				line-height: 30px;
 			}
-			.dropdown-menu .item:hover {
+			.dropdown-menu > .item:hover {
 				background: #26303F;
 				color: #888;
 			}
-				.dropdown-menu .item:hover > * {
+				.dropdown-menu > .item[aria-checked="true"] > a:before {
+					content: '✓ ';
+					font-weight: bold;
+					margin: 0 0 0 -1.2em;
+					padding: 0 0.2em 0 0;
+				}
+				.dropdown-menu > .item:hover > a {
 					color: #888;
 					text-decoration: none;
 				}
diff --git a/p/themes/flat-design/global.css b/p/themes/flat-design/global.css
index 7686b3662..5fd0a4dcf 100644
--- a/p/themes/flat-design/global.css
+++ b/p/themes/flat-design/global.css
@@ -381,29 +381,28 @@ input, select, textarea {
 			font-size: 14px;
 			line-height: 30px;
 		}
-		.dropdown-menu .item {
+		.dropdown-menu > .item {
 			display: block;
 			height: 30px;
 			font-size: 90%;
 			line-height: 30px;
 		}
-		.dropdown-menu .item.selected{
-			background: #2980b9;
-		}
-		.dropdown-menu .item.selected a{
-			background: #2980b9;
-			color: #fff;
-		}
-			.dropdown-menu .item > * {
+			.dropdown-menu > .item > a {
 				display: block;
 				padding: 0 25px;
 				line-height: 30px;
 			}
-			.dropdown-menu .item:hover {
+			.dropdown-menu > .item:hover > a {
 				background: #2980b9;
 				color: #fff;
 			}
-				.dropdown-menu .item:hover > * {
+				.dropdown-menu > .item[aria-checked="true"] > a:before {
+					content: '✓ ';
+					font-weight: bold;
+					margin: 0 0 0 -1.2em;
+					padding: 0 0.2em 0 0;
+				}
+				.dropdown-menu > .item:hover > a {
 					color: #fff;
 					text-decoration: none;
 				}