Nouvelle fonction icon() pour générer le code HTML des icônes

Centralisation de la génération du code des icônes pour pouvoir plus
facilement le changer, en particulier en préparation d'améliorations
futures :
* ajouter des alternatives lorsque l'image n'est pas affichée ;
* améliorer l'accessibilité ;
* permettre de changer les icônes selon le thème graphique choisi ;
* simplifier les CSS.

Contribue à https://github.com/marienfressinaud/FreshRSS/issues/284

6 files changed, 38 insertions, 109 deletions

diff --git a/public/install.php b/public/install.php
index 68878a5e9..2e6519bf8 100644
--- a/public/install.php
+++ b/public/install.php
@@ -1,5 +1,6 @@
 <?php
 require('../constants.php');
+include(LIB_PATH . '/lib_rss.php');
 
 session_start ();
 
@@ -505,7 +506,7 @@ function printStep2 () {
 			<!-- TODO: if no problem during version 0.6, remove for version 0.7 -->
 			<label class="group-name" for="base_url"><?php echo _t ('base_url'); ?></label>
 			<div class="group-controls">
-				<input type="text" id="base_url" name="base_url" value="<?php echo isset ($_SESSION['base_url']) ? $_SESSION['base_url'] : $url; ?>" /> <i class="icon i_help">ⓘ</i> <?php echo _t ('do_not_change_if_doubt'); ?>
+				<input type="text" id="base_url" name="base_url" value="<?php echo isset ($_SESSION['base_url']) ? $_SESSION['base_url'] : $url; ?>" /> <?php echo @icon('help'); ?> <?php echo _t ('do_not_change_if_doubt'); ?>
 			</div>
 		</div>
 
diff --git a/public/scripts/main.js b/public/scripts/main.js
index e9d300694..8f82fc593 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -43,11 +43,11 @@ function mark_read(active, only_not_read) {
 			$r = active.find("a.read").attr("href", res.url),
 			inc = 0;
 		if (active.hasClass("not_read")) {
-			$r.text('☑');
+			$r.find('.icon').removeClass('i_unread').addClass('i_read').text('☑');
 			active.removeClass("not_read");
 			inc--;
 		} else if (only_not_read !== true || active.hasClass("not_read")) {
-			$r.text('☐');
+			$r.find('.icon').removeClass('i_read').addClass('i_unread').text('☐');
 			active.addClass("not_read");
 			inc++;
 		}
@@ -113,11 +113,11 @@ function mark_favorite(active) {
 			$b = active.find("a.bookmark").attr("href", res.url),
 			inc = 0;
 		if (active.hasClass("favorite")) {
-			$b.text('☆');
+			$b.find('.icon').removeClass('i_starred').addClass('i_non-starred').text('☆');
 			active.removeClass("favorite");
 			inc--;
 		} else {
-			$b.text('★');
+			$b.find('.icon').removeClass('i_non-starred').addClass('i_starred').text('★');
 			active.addClass("favorite").find('.bookmark');
 			inc++;
 		}
diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index 7f57cd51b..04b6c2e93 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -25,9 +25,6 @@
 				margin: 0;
 				text-shadow: 1px -1px 0 #ccc;
 			}
-			.header > .item.title a:hover {
-				text-decoration: none;
-			}
 		.header > .item.search input {
 			width: 230px;
 			transition: width 200ms linear;
@@ -39,6 +36,10 @@
 			width: 100px;
 		}
 
+.item a:hover {
+	text-decoration: none;
+}
+
 #global {
 	display: table;
 	width: 100%;
@@ -70,11 +71,6 @@
 			right: 33px;
 		}
 
-		.aside.aside_flux .i_category {
-			background-image: url("../icons/category-white.png");
-			background-image: url("../icons/category-white.svg");
-		}
-
 	.nav-login {
 		display: none;
 	}
@@ -259,36 +255,6 @@
 			font-size: 0px;
 			text-align: center;
 		}
-			.read {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/read.png") center center no-repeat;
-				background: url("../icons/read.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.read:hover {
-					text-decoration: none;
-				}
-				.flux.not_read .read {
-					background: url("../icons/unread.png") center center no-repeat;
-					background: url("../icons/unread.svg") center center no-repeat;
-				}
-			.bookmark {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/non-starred.png") center center no-repeat;
-				background: url("../icons/non-starred.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.bookmark:hover {
-					text-decoration: none;
-				}
-				.flux.favorite .bookmark {
-					background: url("../icons/starred.png") center center no-repeat;
-					background: url("../icons/starred.svg") center center no-repeat;
-				}
 		.flux_header .item.website {
 			width: 200px;
 			overflow: hidden;
@@ -313,9 +279,6 @@
 				color: #000;
 				outline: none;
 			}
-				.flux_header .item.title a:hover {
-					text-decoration: none
-				}
 			.flux.not_read .flux_header .item.title {
 				font-weight: bold;
 			}
@@ -334,17 +297,6 @@
 			width: 40px;
 			text-align: center;
 		}
-			.link a {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/link.png") center center no-repeat;
-				background: url("../icons/link.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.link a:hover {
-					text-decoration: none;
-				}
 
 #stream.reader .flux {
 	padding: 0 0 30px;
diff --git a/public/themes/default/global.css b/public/themes/default/global.css
index 89668c393..58b4126b0 100644
--- a/public/themes/default/global.css
+++ b/public/themes/default/global.css
@@ -572,6 +572,10 @@ input, select, textarea {
 		background-image: url("../icons/category.png");
 		background-image: url("../icons/category.svg");
 	}
+	.i_category-white {
+		background-image: url("../icons/category-white.png");
+		background-image: url("../icons/category-white.svg");
+	}
 	.i_rss {
 		background-image: url("../icons/rss.png");
 		background-image: url("../icons/rss.svg");
@@ -580,6 +584,14 @@ input, select, textarea {
 		background-image: url("../icons/share.png");
 		background-image: url("../icons/share.svg");
 	}
+	.i_starred {
+		background-image: url("../icons/starred.png");
+		background-image: url("../icons/starred.svg");
+	}
+	.i_non-starred {
+		background-image: url("../icons/non-starred.png");
+		background-image: url("../icons/non-starred.svg");
+	}
 	.i_tag {
 		background-image: url("../icons/tag.png");
 		background-image: url("../icons/tag.svg");
diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index fd0cf5b00..4c15ca138 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -28,9 +28,6 @@ body {
 				display: inline-block;
 				margin: 0;
 			}
-			.header > .item.title a:hover {
-				text-decoration: none;
-			}
 		.header > .item.search input {
 			width: 230px;
 			transition: width 200ms linear;
@@ -42,6 +39,10 @@ body {
 			width: 100px;
 		}
 
+.item a:hover {
+	text-decoration: none;
+}
+
 #global {
 	display: table;
 	width: 100%;
@@ -238,36 +239,6 @@ body {
 			font-size: 0px;
 			text-align: center;
 		}
-			.read {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/read.png") center center no-repeat;
-				background: url("../icons/read.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.read:hover {
-					text-decoration: none;
-				}
-				.flux.not_read .read {
-					background: url("../icons/unread.png") center center no-repeat;
-					background: url("../icons/unread.svg") center center no-repeat;
-				}
-			.bookmark {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/non-starred.png") center center no-repeat;
-				background: url("../icons/non-starred.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.bookmark:hover {
-					text-decoration: none;
-				}
-				.flux.favorite .bookmark {
-					background: url("../icons/starred.png") center center no-repeat;
-					background: url("../icons/starred.svg") center center no-repeat;
-				}
 		.flux_header .item.website {
 			width: 200px;
 			overflow: hidden;
@@ -278,10 +249,6 @@ body {
 			.flux_header .item.website .favicon {
 				padding: 5px;
 			}
-			.flux_header .item.website a {
-				display: block;
-				height: 40px;
-			}
 		.flux_header .item.title {
 			overflow: hidden;
 			white-space: nowrap;
@@ -292,9 +259,6 @@ body {
 				color: #333;
 				outline: none;
 			}
-				.flux_header .item.title a:hover {
-					text-decoration: none
-				}
 			.flux.not_read .flux_header .item.title {
 				font-weight: bold;
 			}
@@ -313,17 +277,6 @@ body {
 			width: 40px;
 			text-align: center;
 		}
-			.link a {
-				display: inline-block;
-				width: 40px;
-				height: 40px;
-				background: url("../icons/link.png") center center no-repeat;
-				background: url("../icons/link.svg") center center no-repeat;
-				vertical-align: middle;
-			}
-				.link a:hover {
-					text-decoration: none;
-				}
 
 #stream.reader .flux {
 	position: relative;
@@ -529,7 +482,6 @@ body {
 			.pagination .item a:hover {
 				color: #ecf0f1;
 				background: #34495e;
-				text-decoration: none;
 			}
 
 #nav_entries {
diff --git a/public/themes/flat-design/global.css b/public/themes/flat-design/global.css
index 7d930c066..f2957d77a 100644
--- a/public/themes/flat-design/global.css
+++ b/public/themes/flat-design/global.css
@@ -556,6 +556,10 @@ input, select, textarea {
 		background-image: url("../icons/category-white.png");
 		background-image: url("../icons/category-white.svg");
 	}
+	.i_category-white {
+		background-image: url("../icons/category-white.png");
+		background-image: url("../icons/category-white.svg");
+	}
 	.i_rss {
 		background-image: url("../icons/rss.png");
 		background-image: url("../icons/rss.svg");
@@ -564,6 +568,14 @@ input, select, textarea {
 		background-image: url("../icons/share.png");
 		background-image: url("../icons/share.svg");
 	}
+	.i_starred {
+		background-image: url("../icons/starred.png");
+		background-image: url("../icons/starred.svg");
+	}
+	.i_non-starred {
+		background-image: url("../icons/non-starred.png");
+		background-image: url("../icons/non-starred.svg");
+	}
 	.i_tag {
 		background-image: url("../icons/tag.png");
 		background-image: url("../icons/tag.svg");