rework scoring display, JS processing and icons

master
Andrew Dolgov 6 years ago
parent b09a58a570
commit d2d2cb7e7d

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

@ -308,18 +308,10 @@ class Feeds extends Handler_Protected {
$score = $line["score"]; $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"]; $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'>"; $reply['content'] .= "<div class='left'>";
@ -379,8 +371,8 @@ class Feeds extends Handler_Protected {
$reply['content'] .= "</div>"; $reply['content'] .= "</div>";
$reply['content'] .= "<div onclick='return Headlines.click(event, $id)' $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"]) . "\" href=\"" . htmlspecialchars($line["link"]) . "\"
onclick=\"\">" . onclick=\"\">" .
truncate_string($line["title"], 200); truncate_string($line["title"], 200);
@ -462,7 +454,7 @@ class Feeds extends Handler_Protected {
$content_encoded = htmlspecialchars($line["content"]); $content_encoded = htmlspecialchars($line["content"]);
$expanded_class = get_pref("CDM_EXPANDED") ? "expanded" : "expandable"; $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>"; id=\"RROW-$id\" data-content=\"$content_encoded\" data-article-id='$id' data-orig-feed-id='$feed_id' $mouseover_attrs>";
$tmp_content .= "<div class=\"header\">"; $tmp_content .= "<div class=\"header\">";

@ -341,31 +341,6 @@ div#floatingTitle.Unread a.title {
color : black; 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 { .cdm.expandable {
background-color : #f0f0f0; background-color : #f0f0f0;
border: 0px solid #ddd; border: 0px solid #ddd;

@ -257,17 +257,6 @@ body.ttrss_main .hl a.title.high,
body.ttrss_main .hl span.hl-content.high .preview { body.ttrss_main .hl span.hl-content.high .preview {
color: #00aa00; 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 { body.ttrss_main .hl.Unread div.title a {
color: black; color: black;
} }
@ -1010,6 +999,15 @@ body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff7c4b; 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 { ::selection {
background: #257aa7; background: #257aa7;
color: white; color: white;
@ -1308,24 +1306,6 @@ div#floatingTitle .feed-title a.catchup:hover {
div#floatingTitle.Unread a.title { div#floatingTitle.Unread a.title {
color: black; 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 { .cdm.expandable {
background-color: #f0f0f0; background-color: #f0f0f0;
border: 0px solid #ddd; border: 0px solid #ddd;

File diff suppressed because one or more lines are too long

@ -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 { .hl.Unread div.title a {
color : black; color : black;
} }
@ -1195,6 +1185,18 @@ body.ttrss_main {
color : @color-published; 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 { ::selection {

@ -1963,17 +1963,31 @@
} }
function get_score_pic($score) { function get_score_pic($score) {
if ($score > 100) { if ($score > 500) {
return "score_high.png"; return "trending_up";
} else if ($score > 0) { } else if ($score > 0) {
return "score_half_high.png"; return "trending_up";
} else if ($score < 0) {
return "trending_down";
} else {
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) { } else if ($score < -100) {
return "score_low.png"; $score_class = "score-low";
} else if ($score < 0) { } else if ($score < 0) {
return "score_half_low.png"; $score_class = "score-half-low";
} else { } else {
return "score_neutral.png"; $score_class = "score-neutral";
} }
return $score_class;
} }
function init_plugins() { function init_plugins() {

@ -22,13 +22,22 @@ define(["dojo/_base/declare"], function (declare) {
reply.id.each((id) => { reply.id.each((id) => {
const row = $("RROW-" + 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) { if (row) {
const pic = row.getElementsByClassName("score-pic")[0]; const pic = row.select(".icon-score")[0];
if (pic) { 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) { 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); 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}; const query = {op: "article", method: "setScore", id: id, score: new_score};
xhrJson("backend.php", query, (reply) => { xhrJson("backend.php", query, (reply) => {
if (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); 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"]);
} }
}); });
} }

@ -257,17 +257,6 @@ body.ttrss_main .hl a.title.high,
body.ttrss_main .hl span.hl-content.high .preview { body.ttrss_main .hl span.hl-content.high .preview {
color: #00aa00; 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 { body.ttrss_main .hl.Unread div.title a {
color: black; color: black;
} }
@ -1010,6 +999,15 @@ body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff7c4b; 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 { ::selection {
background: #257aa7; background: #257aa7;
color: white; color: white;
@ -1308,24 +1306,6 @@ div#floatingTitle .feed-title a.catchup:hover {
div#floatingTitle.Unread a.title { div#floatingTitle.Unread a.title {
color: black; 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 { .cdm.expandable {
background-color: #f0f0f0; background-color: #f0f0f0;
border: 0px solid #ddd; border: 0px solid #ddd;

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save