rework scoring display, JS processing and icons

This commit is contained in:
Andrew Dolgov 2018-12-06 14:23:45 +03:00
parent b09a58a570
commit d2d2cb7e7d
10 changed files with 88 additions and 126 deletions

View File

@ -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)));
}

View File

@ -308,18 +308,10 @@ class Feeds extends Handler_Protected {
$score = $line["score"];
$score_pic = "images/" . get_score_pic($score);
$score_pic = "<img class='score-pic' score='$score' onclick='Article.setScore($id, this)' src=\"$score_pic\"
title=\"$score\">";
if ($score > 500) {
$hlc_suffix = "high";
} else if ($score < -100) {
$hlc_suffix = "low";
} else {
$hlc_suffix = "";
}
$score_pic = "<i class='material-icons icon-score' title='$score'
data-score='$score' onclick='Article.setScore($id, this)'>" .
get_score_pic($score) . "</i>";
$score_class = get_score_class($score);
$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'>";
$reply['content'] .= "<a class=\"title $hlc_suffix\"
class=\"title\"><span data-article-id=\"$id\" class='hl-content hlMenuAttach'>";
$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\">";

View File

@ -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;

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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 {

View File

@ -1963,19 +1963,33 @@
}
function get_score_pic($score) {
if ($score > 100) {
return "score_high.png";
if ($score > 500) {
return "trending_up";
} else if ($score > 0) {
return "score_half_high.png";
} else if ($score < -100) {
return "score_low.png";
return "trending_up";
} 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);

View File

@ -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/,
reply["score_pic"]);
pic.setAttribute("score", reply["score"]);
pic.innerHTML = reply["score_pic"];
pic.setAttribute("data-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.setAttribute("score", new_score);
pic.innerHTML = reply["score_pic"];
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"]);
}
});
}

View File

@ -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;

File diff suppressed because one or more lines are too long