rework scoring display, JS processing and icons
This commit is contained in:
Andrew Dolgov
parent
b09a58a570
commit
d2d2cb7e7d
|
|
@ -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)));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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\">";
|
||||
|
|
|
|||
25
css/cdm.less
25
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;
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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"]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in New Issue