1. feedtree: show counters for marked articles if view-mode == marked

2. hide/show relevant counter nodes using css
3. cleanup some counter-related code
4. compile default css into light theme to prevent cache-related issues
This commit is contained in:
Andrew Dolgov 2020-02-20 14:14:45 +03:00
parent 5b6d9cee29
commit 60288f02e8
14 changed files with 2069 additions and 79 deletions

View File

@ -175,6 +175,9 @@ class Counters {
"auxcounter" => (int) $auxctr
];
if ($i == -1)
$cv["markedcounter"] = $auxctr;
array_push($ret, $cv);
}
@ -205,7 +208,8 @@ class Counters {
$sth = $pdo->prepare("SELECT id,
caption,
SUM(CASE WHEN u1.unread = true THEN 1 ELSE 0 END) AS unread,
SUM(CASE WHEN u1.unread = true THEN 1 ELSE 0 END) AS count_unread,
SUM(CASE WHEN u1.marked = true THEN 1 ELSE 0 END) AS count_marked,
COUNT(u1.unread) AS total
FROM ttrss_labels2 LEFT JOIN ttrss_user_labels2 ON
(ttrss_labels2.id = label_id)
@ -220,8 +224,9 @@ class Counters {
$cv = [
"id" => $id,
"counter" => (int) $line["unread"],
"auxcounter" => (int) $line["total"]
"counter" => (int) $line["count_unread"],
"auxcounter" => (int) $line["total"],
"markedcounter" => (int) $line["count_marked"]
];
if ($descriptions)

View File

@ -1393,7 +1393,7 @@ class Pref_Feeds extends Handler_Protected {
$obj['items'] = array();
$obj['name'] = Feeds::getCategoryTitle($cat_id);
$obj['type'] = 'category';
$obj['unread'] = (int) Feeds::getCategoryUnread($cat_id);
$obj['unread'] = -1; //(int) Feeds::getCategoryUnread($cat_id);
$obj['bare_id'] = $cat_id;
return $obj;

View File

@ -554,14 +554,18 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ttrss_main #feeds-holder #feedTree .counterNode.aux {
body.ttrss_main #feeds-holder #feedTree .counterNode.aux,
body.ttrss_main #feeds-holder #feedTree .counterNode.marked {
background: #f5f5f5;
color: #6f6f6f;
border-color: #dcdcdc;
}
body.ttrss_main #feeds-holder #feedTree .counterNode.marked {
border-color: #257aa7;
}
body.ttrss_main #feeds-holder #feedTree .counterNode {
font-weight: bold;
display: inline-block;
display: none;
font-size: 9px;
text-align: center;
border: 1px solid #2a89bc;
@ -866,9 +870,18 @@ body.ttrss_main .dijitDialog h3:first-of-type,
body.ttrss_main .dijitDialog h4:first-of-type {
margin-top: 0px;
}
body.ttrss_main[view-mode="marked"] .dijitTreeRow.Has_Marked .dijitTreeLabel {
body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Marked .dijitTreeLabel {
color: #257aa7;
}
body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Marked .counterNode.marked {
display: inline-block;
}
body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Unread .counterNode.unread {
display: inline-block;
}
body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Has_Aux:not(.Unread) .counterNode.aux {
display: inline-block;
}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;

File diff suppressed because one or more lines are too long

View File

@ -646,15 +646,20 @@ body.ttrss_main {
text-rendering: optimizelegibility;
font-family : @fonts-ui;
.counterNode.aux {
.counterNode.aux, .counterNode.marked {
background : @color-panel-bg;
color : lighten(@default-text, 10%);
border-color : darken(@color-panel-bg, 10%);
}
.counterNode.marked {
border-color : @color-accent-marked;
background : lighten(@color-accent-marked, 60%);
}
.counterNode {
font-weight : bold;
display : inline-block;
display : none;
font-size : 9px;
text-align : center;
border : 1px solid lighten(@color-accent, 5%);;
@ -1024,8 +1029,22 @@ body.ttrss_main .dijitDialog {
}
}
body.ttrss_main[view-mode="marked"] .dijitTreeRow.Has_Marked .dijitTreeLabel {
color : @color-accent-marked;
body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree {
.dijitTreeRow.Has_Marked .dijitTreeLabel {
color : @color-accent-marked;
}
.dijitTreeRow.Has_Marked .counterNode.marked {
display : inline-block;
}
}
body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree {
.dijitTreeRow.Unread .counterNode.unread {
display : inline-block;
}
.dijitTreeRow.Has_Aux:not(.Unread) .counterNode.aux {
display : inline-block;
}
}
body.ttrss_main {

View File

@ -16,17 +16,14 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
if (iconName) {
if (iconName.indexOf("/") == -1) {
iconNode = dojo.doc.createElement("i");
iconNode.className = "material-icons icon icon-" + iconName;
iconNode.innerHTML = iconName;
iconNode = dojo.create("i", { className: "material-icons icon icon-" + iconName, innerHTML: iconName });
} else {
iconNode = dojo.doc.createElement('img');
iconNode = dojo.create('img', { className: 'icon' });
if (args.item.icon && args.item.icon[0]) {
iconNode.src = args.item.icon[0];
} else {
iconNode.src = 'images/blank_icon.gif';
}
iconNode.className = 'icon';
}
}
@ -37,12 +34,11 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
const bare_id = parseInt(id.substr(id.indexOf(':')+1));
if (bare_id < _label_base_index) {
const label = dojo.doc.createElement('i');
const label = dojo.create('i', { className: "material-icons icon icon-label", innerHTML: "label" });
//const fg_color = args.item.fg_color[0];
const bg_color = args.item.bg_color[0];
label.className = "material-icons icon icon-label";
label.innerHTML = "label";
label.setStyle({
color: bg_color,
});
@ -73,12 +69,6 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
window.open("backend.php?op=feeds&method=update_debugger&feed_id=" + this.getParent().row_id +
"&csrf_token=" + App.getInitParam("csrf_token"));
}}));
/* menu.addChild(new dijit.MenuItem({
label: __("Update feed"),
onClick: function() {
heduleFeedUpdate(this.getParent().row_id, false);
}})); */
}
menu.bindDomNode(tnode.domNode);
@ -106,11 +96,8 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
}
if (id.match("CAT:")) {
loading = dojo.doc.createElement('img');
loading.className = 'loadingNode';
loading.src = 'images/blank_icon.gif';
domConstruct.place(loading, tnode.labelNode, 'after');
tnode.loadingNode = loading;
tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: 'images/blank_icon.gif'});
domConstruct.place(tnode.loadingNode, tnode.labelNode, 'after');
}
if (id.match("CAT:") && bare_id == -1) {
@ -127,20 +114,15 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
tnode._menu = menu;
}
ctr = dojo.doc.createElement('span');
ctr.className = 'counterNode';
ctr.innerHTML = args.item.unread > 0 ? args.item.unread : args.item.auxcounter;
tnode.markedCounterNode = dojo.create('span', { className: 'counterNode marked', innerHTML: args.item.markedcounter });
domConstruct.place(tnode.markedCounterNode, tnode.rowNode, 'first');
//args.item.unread > 0 ? ctr.addClassName("unread") : ctr.removeClassName("unread");
tnode.auxCounterNode = dojo.create('span', { className: 'counterNode aux', innerHTML: args.item.auxcounter });
domConstruct.place(tnode.auxCounterNode, tnode.rowNode, 'first');
args.item.unread > 0 || args.item.auxcounter > 0 ? Element.show(ctr) : Element.hide(ctr);
tnode.unreadCounterNode = dojo.create('span', { className: 'counterNode unread', innerHTML: args.item.unread });
domConstruct.place(tnode.unreadCounterNode, tnode.rowNode, 'first');
args.item.unread <= 0 && args.item.auxcounter > 0 ? ctr.addClassName("aux") : ctr.removeClassName("aux");
domConstruct.place(ctr, tnode.rowNode, 'first');
tnode.counterNode = ctr;
//tnode.labelNode.innerHTML = args.label;
return tnode;
},
postCreate: function() {
@ -156,26 +138,15 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
//console.log("updateCounter: " + item.id[0] + " " + item.unread + " " + tree);
let node = tree._itemNodesMap[item.id];
let treeNode = tree._itemNodesMap[item.id];
if (node) {
node = node[0];
if (treeNode) {
treeNode = treeNode[0];
if (node.counterNode) {
ctr = node.counterNode;
ctr.innerHTML = item.unread > 0 ? item.unread : item.auxcounter;
item.unread > 0 || item.auxcounter > 0 ?
item.unread > 0 ?
Effect.Appear(ctr, {duration : 0.3,
queue: { position: 'end', scope: 'CAPPEAR-' + item.id, limit: 1 }}) :
Element.show(ctr) :
Element.hide(ctr);
item.unread <= 0 && item.auxcounter > 0 ? ctr.addClassName("aux") : ctr.removeClassName("aux");
}
treeNode.unreadCounterNode.innerHTML = item.unread;
treeNode.auxCounterNode.innerHTML = item.auxcounter;
treeNode.markedCounterNode.innerHTML = item.markedcounter;
}
},
getTooltip: function (item) {
return [item.updated, item.error].filter(x => x && x != "").join(" - ");
@ -191,6 +162,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
"dijitTreeRow Error";
if (item.unread > 0) rc += " Unread";
if (item.auxcounter > 0) rc += " Has_Aux";
if (item.markedcounter > 0) rc += " Has_Marked";
if (item.updates_disabled > 0) rc += " UpdatesDisabled";
@ -269,6 +241,8 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
selectFeed: function(feed, is_cat) {
this.findNodeParentsAndExpandThem(feed, is_cat, false, false);
let treeNode;
if (is_cat)
treeNode = this._itemNodesMap['CAT:' + feed];
else
@ -300,6 +274,8 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
}
},
setFeedIcon: function(feed, is_cat, src) {
let treeNode;
if (is_cat)
treeNode = this._itemNodesMap['CAT:' + feed];
else
@ -307,15 +283,15 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
if (treeNode) {
treeNode = treeNode[0];
const icon = dojo.doc.createElement('img');
icon.src = src;
icon.className = 'icon';
const icon = dojo.create('img', { src: src, className: 'icon' });
domConstruct.place(icon, treeNode.iconNode, 'only');
return true;
}
return false;
},
setFeedExpandoIcon: function(feed, is_cat, src) {
let treeNode;
if (is_cat)
treeNode = this._itemNodesMap['CAT:' + feed];
else
@ -327,9 +303,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
treeNode.loadingNode.src = src;
return true;
} else {
const icon = dojo.doc.createElement('img');
icon.src = src;
icon.className = 'loadingExpando';
const icon = dojo.create('img', { src: src, className: 'loadingExpando' });
domConstruct.place(icon, treeNode.expandoNode, 'only');
return true;
}
@ -460,6 +434,8 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
return rv;
},
getNextFeed: function (feed, is_cat) {
let treeItem;
if (is_cat) {
treeItem = this.model.store._itemsByIdentity['CAT:' + feed];
} else {
@ -498,6 +474,8 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
}
},
getPreviousFeed: function (feed, is_cat) {
let treeItem;
if (is_cat) {
treeItem = this.model.store._itemsByIdentity['CAT:' + feed];
} else {

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
@import "../css/default.css";
@import "../css/default.less";

View File

@ -555,14 +555,19 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ttrss_main #feeds-holder #feedTree .counterNode.aux {
body.ttrss_main #feeds-holder #feedTree .counterNode.aux,
body.ttrss_main #feeds-holder #feedTree .counterNode.marked {
background: #222;
color: #e6e6e6;
border-color: #080808;
}
body.ttrss_main #feeds-holder #feedTree .counterNode.marked {
border-color: #b87d2c;
background: #ffffff;
}
body.ttrss_main #feeds-holder #feedTree .counterNode {
font-weight: bold;
display: inline-block;
display: none;
font-size: 9px;
text-align: center;
border: 1px solid #cd8b31;
@ -867,9 +872,18 @@ body.ttrss_main .dijitDialog h3:first-of-type,
body.ttrss_main .dijitDialog h4:first-of-type {
margin-top: 0px;
}
body.ttrss_main[view-mode="marked"] .dijitTreeRow.Has_Marked .dijitTreeLabel {
body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Marked .dijitTreeLabel {
color: #b87d2c;
}
body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Marked .counterNode.marked {
display: inline-block;
}
body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Unread .counterNode.unread {
display: inline-block;
}
body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Has_Aux:not(.Unread) .counterNode.aux {
display: inline-block;
}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;
@ -1965,11 +1979,15 @@ body.flat.ttrss_main #feeds-holder {
background: #222;
box-shadow: inset -1px 0px 2px -1px #666;
}
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.aux {
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.aux,
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.marked {
background: #222;
color: #ccc;
border-color: #333;
}
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.marked {
border-color: #b87d2c;
}
body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected {
background: #333;
border-color: #333 transparent;

File diff suppressed because one or more lines are too long

View File

@ -65,12 +65,16 @@ body.flat.ttrss_main {
box-shadow : inset -1px 0px 2px -1px @border-light;
#feedTree {
.counterNode.aux {
.counterNode.aux, .counterNode.marked {
background: @color-panel-bg;
color: @default-text;
border-color: @default-bg;
}
.counterNode.marked {
border-color : @color-accent-marked;
}
.dijitTreeRowSelected {
background : @default-bg;
border-color : @default-bg transparent;

View File

@ -555,14 +555,19 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.ttrss_main #feeds-holder #feedTree .counterNode.aux {
body.ttrss_main #feeds-holder #feedTree .counterNode.aux,
body.ttrss_main #feeds-holder #feedTree .counterNode.marked {
background: #222;
color: #e6e6e6;
border-color: #080808;
}
body.ttrss_main #feeds-holder #feedTree .counterNode.marked {
border-color: #257aa7;
background: #ffffff;
}
body.ttrss_main #feeds-holder #feedTree .counterNode {
font-weight: bold;
display: inline-block;
display: none;
font-size: 9px;
text-align: center;
border: 1px solid #2a89bc;
@ -867,9 +872,18 @@ body.ttrss_main .dijitDialog h3:first-of-type,
body.ttrss_main .dijitDialog h4:first-of-type {
margin-top: 0px;
}
body.ttrss_main[view-mode="marked"] .dijitTreeRow.Has_Marked .dijitTreeLabel {
body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Marked .dijitTreeLabel {
color: #257aa7;
}
body.ttrss_main[view-mode="marked"] #feeds-holder #feedTree .dijitTreeRow.Has_Marked .counterNode.marked {
display: inline-block;
}
body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Unread .counterNode.unread {
display: inline-block;
}
body.ttrss_main:not([view-mode="marked"]) #feeds-holder #feedTree .dijitTreeRow.Has_Aux:not(.Unread) .counterNode.aux {
display: inline-block;
}
body.ttrss_main #toolbar-headlines i.icon-syndicate {
color: #ff7c4b;
margin-right: 8px;
@ -1965,11 +1979,15 @@ body.flat.ttrss_main #feeds-holder {
background: #222;
box-shadow: inset -1px 0px 2px -1px #666;
}
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.aux {
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.aux,
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.marked {
background: #222;
color: #ccc;
border-color: #333;
}
body.flat.ttrss_main #feeds-holder #feedTree .counterNode.marked {
border-color: #257aa7;
}
body.flat.ttrss_main #feeds-holder #feedTree .dijitTreeRowSelected {
background: #333;
border-color: #333 transparent;

File diff suppressed because one or more lines are too long