rework scoring display, JS processing and icons

classes/article.php

@@ -253,6 +253,7 @@ class Article extends Handler_Protected {
 
 		print json_encode(array("id" => $ids,
 			"score" => (int)$score,
+			"score_class" => get_score_class($score),
 			"score_pic" => get_score_pic($score)));
 	}
 

classes/feeds.php

@@ -308,18 +308,10 @@ class Feeds extends Handler_Protected {
 
 				$score = $line["score"];
 
-				$score_pic = "images/" . get_score_pic($score);
+				$score_pic = "<i class='material-icons icon-score' title='$score' 
-
+                       data-score='$score' onclick='Article.setScore($id, this)'>" .
-				$score_pic = "<img class='score-pic' score='$score' onclick='Article.setScore($id, this)' src=\"$score_pic\"
+                        get_score_pic($score) . "</i>";
-                title=\"$score\">";
+                $score_class = get_score_class($score);
-
-				if ($score > 500) {
-					$hlc_suffix = "high";
-				} else if ($score < -100) {
-					$hlc_suffix = "low";
-				} else {
-					$hlc_suffix = "";
-				}
 
 				$entry_author = $line["author"];
 
@@ -365,7 +357,7 @@ class Feeds extends Handler_Protected {
 						}
 					}
 
-					$reply['content'] .= "<div class='hl $class' data-orig-feed-id='$feed_id' data-article-id='$id' id='RROW-$id' $mouseover_attrs>";
+					$reply['content'] .= "<div class='hl $class $score_class' data-orig-feed-id='$feed_id' data-article-id='$id' id='RROW-$id' $mouseover_attrs>";
 
 					$reply['content'] .= "<div class='left'>";
 
@@ -379,8 +371,8 @@ class Feeds extends Handler_Protected {
 					$reply['content'] .= "</div>";
 
 					$reply['content'] .= "<div onclick='return Headlines.click(event, $id)'
-                    class=\"title\"><span data-article-id=\"$id\" class='hl-content hlMenuAttach $hlc_suffix'>";
+                    class=\"title\"><span data-article-id=\"$id\" class='hl-content hlMenuAttach'>";
-					$reply['content'] .= "<a class=\"title $hlc_suffix\"
+					$reply['content'] .= "<a class=\"title\"
                     href=\"" . htmlspecialchars($line["link"]) . "\"
                     onclick=\"\">" .
 						truncate_string($line["title"], 200);
@@ -462,7 +454,7 @@ class Feeds extends Handler_Protected {
                     $content_encoded = htmlspecialchars($line["content"]);
 
 					$expanded_class = get_pref("CDM_EXPANDED") ? "expanded" : "expandable";
-                    $tmp_content = "<div class=\"cdm $expanded_class $hlc_suffix $class\"
+                    $tmp_content = "<div class=\"cdm $expanded_class $score_class $class\"
                         id=\"RROW-$id\" data-content=\"$content_encoded\" data-article-id='$id' data-orig-feed-id='$feed_id' $mouseover_attrs>";
 
 					$tmp_content .= "<div class=\"header\">";

css/cdm.less

@@ -341,31 +341,6 @@ div#floatingTitle.Unread a.title {
 	color : black;
 }
 
-.cdm.high .header {
-	a.title.high,
-	.excerpt,
-	span.author {
-		color : #00aa00;
-	}
-}
-
-.cdm.Unread.high .header {
-	a.title.high,
-	.excerpt,
-	span.author {
-		color : #00dd00;
-	}
-}
-
-.cdm .header a.title.low,
-.cdm.low .header .excerpt,
-.cdm.Unread .header a.title.low,
-.cdm.Unread.low .header .excerpt,
-.cdm.low .header span.author {
-	color : #909090;
-	text-decoration : line-through;
-}
-
 .cdm.expandable {
 	background-color : #f0f0f0;
 	border: 0px solid #ddd;

css/default.css

@@ -257,17 +257,6 @@ body.ttrss_main .hl a.title.high,
 body.ttrss_main .hl span.hl-content.high .preview {
   color: #00aa00;
 }
-body.ttrss_main .hl.Unread a.title.high,
-body.ttrss_main .hl.Unread span.hl-content.high .preview {
-  color: #00dd00;
-}
-body.ttrss_main .hl a.title.low,
-body.ttrss_main span.hl-content.low .preview,
-body.ttrss_main .hl.Unread a.title.low,
-body.ttrss_main .hl.Unread span.hl-content.low .preview {
-  color: #909090;
-  text-decoration: line-through;
-}
 body.ttrss_main .hl.Unread div.title a {
   color: black;
 }
@@ -1010,6 +999,15 @@ body.ttrss_main .cdm.published .left i.pub-pic,
 body.ttrss_main .hl.published .left i.pub-pic {
   color: #ff7c4b;
 }
+body.ttrss_main .score-high i.icon-score {
+  color: #69c671;
+}
+body.ttrss_main .score-low i.icon-score {
+  color: #500;
+}
+body.ttrss_main .score-neutral i.icon-score {
+  opacity: 0.5;
+}
 ::selection {
   background: #257aa7;
   color: white;
@@ -1308,24 +1306,6 @@ div#floatingTitle .feed-title a.catchup:hover {
 div#floatingTitle.Unread a.title {
   color: black;
 }
-.cdm.high .header a.title.high,
-.cdm.high .header .excerpt,
-.cdm.high .header span.author {
-  color: #00aa00;
-}
-.cdm.Unread.high .header a.title.high,
-.cdm.Unread.high .header .excerpt,
-.cdm.Unread.high .header span.author {
-  color: #00dd00;
-}
-.cdm .header a.title.low,
-.cdm.low .header .excerpt,
-.cdm.Unread .header a.title.low,
-.cdm.Unread.low .header .excerpt,
-.cdm.low .header span.author {
-  color: #909090;
-  text-decoration: line-through;
-}
 .cdm.expandable {
   background-color: #f0f0f0;
   border: 0px solid #ddd;

css/tt-rss.less

@@ -296,16 +296,6 @@ body.ttrss_main {
 		}
 	}
 
-	.hl.Unread a.title.high, .hl.Unread span.hl-content.high .preview {
-		color : #00dd00;
-	}
-
-	.hl a.title.low, span.hl-content.low .preview,
-	.hl.Unread a.title.low, .hl.Unread span.hl-content.low .preview {
-		color : #909090;
-		text-decoration : line-through;
-	}
-
 	.hl.Unread div.title a {
 		color : black;
 	}
@@ -1195,6 +1185,18 @@ body.ttrss_main {
 		color : @color-published;
 	}
 
+	.score-high i.icon-score {
+		color : @color-enabled;
+	}
+
+	.score-low i.icon-score {
+		color : #500;
+	}
+
+	.score-neutral i.icon-score {
+		opacity : 0.5;
+	}
+
 }
 
 ::selection {

include/functions.php

@@ -1963,19 +1963,33 @@
 	}
 
 	function get_score_pic($score) {
-		if ($score > 100) {
+		if ($score > 500) {
-			return "score_high.png";
+			return "trending_up";
 		} else if ($score > 0) {
-			return "score_half_high.png";
+			return "trending_up";
-		} else if ($score < -100) {
-			return "score_low.png";
 		} else if ($score < 0) {
-			return "score_half_low.png";
+			return "trending_down";
 		} else {
-			return "score_neutral.png";
+			return "trending_neutral";
 		}
 	}
 
+	function get_score_class($score) {
+		if ($score > 500) {
+			$score_class = "score-high";
+		} else if ($score > 0) {
+			$score_class = "score-half-high";
+		} else if ($score < -100) {
+			$score_class = "score-low";
+		} else if ($score < 0) {
+			$score_class = "score-half-low";
+		} else {
+			$score_class = "score-neutral";
+		}
+
+		return $score_class;
+	}
+
 	function init_plugins() {
 		PluginHost::getInstance()->load(PLUGINS, PluginHost::KIND_ALL);
 

js/Article.js

@@ -22,13 +22,22 @@ define(["dojo/_base/declare"], function (declare) {
 							reply.id.each((id) => {
 								const row = $("RROW-" + id);
 
+								row.removeClassName("score-low");
+								row.removeClassName("score-high");
+								row.removeClassName("score-half-low");
+								row.removeClassName("score-half-high");
+								row.removeClassName("score-neutral");
+
+								row.addClassName(reply["score_class"]);
+
+
 								if (row) {
-									const pic = row.getElementsByClassName("score-pic")[0];
+									const pic = row.select(".icon-score")[0];
 
 									if (pic) {
-										pic.src = pic.src.replace(/score_.*?\.png/,
+										pic.innerHTML = reply["score_pic"];
-											reply["score_pic"]);
+										pic.setAttribute("data-score", reply["score"]);
-										pic.setAttribute("score", reply["score"]);
+										pic.setAttribute("title", reply["score"]);
 									}
 								}
 							});
@@ -41,18 +50,27 @@ define(["dojo/_base/declare"], function (declare) {
 			}
 		},
 		setScore: function (id, pic) {
-			const score = pic.getAttribute("score");
+			const row = pic.up("div[id*=RROW]");
+			const score = pic.getAttribute("data-score");
 
 			const new_score = prompt(__("Please enter new score for this article:"), score);
 
-			if (new_score != undefined) {
+			if (row && new_score != undefined) {
 				const query = {op: "article", method: "setScore", id: id, score: new_score};
 
 				xhrJson("backend.php", query, (reply) => {
 					if (reply) {
-						pic.src = pic.src.replace(/score_.*?\.png/, reply["score_pic"]);
+						pic.innerHTML = reply["score_pic"];
-						pic.setAttribute("score", new_score);
+						pic.setAttribute("data-score", new_score);
 						pic.setAttribute("title", new_score);
+
+						row.removeClassName("score-low");
+						row.removeClassName("score-high");
+						row.removeClassName("score-half-low");
+						row.removeClassName("score-half-high");
+						row.removeClassName("score-neutral");
+
+						row.addClassName(reply["score_class"]);
 					}
 				});
 			}

themes/night.css

@@ -257,17 +257,6 @@ body.ttrss_main .hl a.title.high,
 body.ttrss_main .hl span.hl-content.high .preview {
   color: #00aa00;
 }
-body.ttrss_main .hl.Unread a.title.high,
-body.ttrss_main .hl.Unread span.hl-content.high .preview {
-  color: #00dd00;
-}
-body.ttrss_main .hl a.title.low,
-body.ttrss_main span.hl-content.low .preview,
-body.ttrss_main .hl.Unread a.title.low,
-body.ttrss_main .hl.Unread span.hl-content.low .preview {
-  color: #909090;
-  text-decoration: line-through;
-}
 body.ttrss_main .hl.Unread div.title a {
   color: black;
 }
@@ -1010,6 +999,15 @@ body.ttrss_main .cdm.published .left i.pub-pic,
 body.ttrss_main .hl.published .left i.pub-pic {
   color: #ff7c4b;
 }
+body.ttrss_main .score-high i.icon-score {
+  color: #69c671;
+}
+body.ttrss_main .score-low i.icon-score {
+  color: #500;
+}
+body.ttrss_main .score-neutral i.icon-score {
+  opacity: 0.5;
+}
 ::selection {
   background: #257aa7;
   color: white;
@@ -1308,24 +1306,6 @@ div#floatingTitle .feed-title a.catchup:hover {
 div#floatingTitle.Unread a.title {
   color: black;
 }
-.cdm.high .header a.title.high,
-.cdm.high .header .excerpt,
-.cdm.high .header span.author {
-  color: #00aa00;
-}
-.cdm.Unread.high .header a.title.high,
-.cdm.Unread.high .header .excerpt,
-.cdm.Unread.high .header span.author {
-  color: #00dd00;
-}
-.cdm .header a.title.low,
-.cdm.low .header .excerpt,
-.cdm.Unread .header a.title.low,
-.cdm.Unread.low .header .excerpt,
-.cdm.low .header span.author {
-  color: #909090;
-  text-decoration: line-through;
-}
 .cdm.expandable {
   background-color: #f0f0f0;
   border: 0px solid #ddd;