simplify feed tree expando/loading/feed icon handling

This commit is contained in:
Andrew Dolgov 2021-03-16 20:50:18 +03:00
parent d9ba403927
commit 7ec8a6cad0
8 changed files with 120 additions and 60 deletions

View File

@ -138,10 +138,15 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
tnode.rowNode.setAttribute('data-feed-id', bare_id); tnode.rowNode.setAttribute('data-feed-id', bare_id);
tnode.rowNode.setAttribute('data-is-cat', "true"); tnode.rowNode.setAttribute('data-is-cat', "true");
tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: 'images/blank_icon.gif'}); tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: 'images/indicator_tiny.gif'});
domConstruct.place(tnode.loadingNode, tnode.labelNode, 'after'); domConstruct.place(tnode.loadingNode, tnode.labelNode, 'after');
} }
if (id.match("FEED:")) {
tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: 'images/indicator_white.gif'});
domConstruct.place(tnode.loadingNode, tnode.expandoNode, 'only');
}
if (id.match("CAT:") && bare_id == -1) { if (id.match("CAT:") && bare_id == -1) {
const menu = new dijit.Menu(); const menu = new dijit.Menu();
menu.row_id = bare_id; menu.row_id = bare_id;
@ -201,6 +206,11 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
const is_cat = String(item.id).indexOf('CAT:') != -1; const is_cat = String(item.id).indexOf('CAT:') != -1;
if (is_cat)
rc += " Is_Cat";
else
rc += " Is_Feed";
if (!is_cat && item.error != '') rc += " Error"; if (!is_cat && item.error != '') rc += " Error";
if (item.unread > 0) rc += " Unread"; if (item.unread > 0) rc += " Unread";
if (item.auxcounter > 0) rc += " Has_Aux"; if (item.auxcounter > 0) rc += " Has_Aux";
@ -309,7 +319,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
}, 0); }, 0);
} }
}, },
setFeedIcon: function(feed, is_cat, src) { setIcon: function(feed, is_cat, src) {
let treeNode; let treeNode;
if (is_cat) if (is_cat)
@ -319,13 +329,19 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
if (treeNode) { if (treeNode) {
treeNode = treeNode[0]; treeNode = treeNode[0];
const icon = dojo.create('img', { src: src, className: 'icon' });
domConstruct.place(icon, treeNode.iconNode, 'only'); // could be <i material>
return true; const icon = treeNode.iconNode.querySelector('img.icon');
if (icon) {
icon.src = src;
return true;
}
} }
return false; return false;
}, },
setFeedExpandoIcon: function(feed, is_cat, src) { showLoading: function(feed, is_cat, show) {
let treeNode; let treeNode;
if (is_cat) if (is_cat)
@ -335,14 +351,13 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
if (treeNode) { if (treeNode) {
treeNode = treeNode[0]; treeNode = treeNode[0];
if (treeNode.loadingNode) {
treeNode.loadingNode.src = src; if (show)
return true; treeNode.loadingNode.addClassName("visible");
} else { else
const icon = dojo.create('img', { src: src, className: 'loadingExpando' }); treeNode.loadingNode.removeClassName("visible");
domConstruct.place(icon, treeNode.expandoNode, 'only');
return true; return true
}
} }
return false; return false;

View File

@ -399,21 +399,20 @@ const Feeds = {
query.m = "ForceUpdate"; query.m = "ForceUpdate";
} }
if (!delayed)
if (!this.setExpando(feed, is_cat,
(is_cat) ? 'images/indicator_tiny.gif' : 'images/indicator_white.gif'))
Notify.progress("Loading, please wait...", true);
query.cat = is_cat; query.cat = is_cat;
this.setActive(feed, is_cat); this.setActive(feed, is_cat);
window.clearTimeout(this._viewfeed_wait_timeout); window.clearTimeout(this._viewfeed_wait_timeout);
this._viewfeed_wait_timeout = window.setTimeout(() => { this._viewfeed_wait_timeout = window.setTimeout(() => {
this.showLoading(feed, is_cat, true);
//Notify.progress("Loading, please wait...", true);*/
xhr.json("backend.php", query, (reply) => { xhr.json("backend.php", query, (reply) => {
try { try {
window.clearTimeout(this._infscroll_timeout); window.clearTimeout(this._infscroll_timeout);
this.setExpando(feed, is_cat, 'images/blank_icon.gif'); this.showLoading(feed, is_cat, false);
Headlines.onLoaded(reply, offset, append); Headlines.onLoaded(reply, offset, append);
PluginHost.run(PluginHost.HOOK_FEED_LOADED, [feed, is_cat]); PluginHost.run(PluginHost.HOOK_FEED_LOADED, [feed, is_cat]);
} catch (e) { } catch (e) {
@ -574,12 +573,12 @@ const Feeds = {
setIcon: function(feed, is_cat, src) { setIcon: function(feed, is_cat, src) {
const tree = dijit.byId("feedTree"); const tree = dijit.byId("feedTree");
if (tree) return tree.setFeedIcon(feed, is_cat, src); if (tree) return tree.setIcon(feed, is_cat, src);
}, },
setExpando: function(feed, is_cat, src) { showLoading: function(feed, is_cat, show) {
const tree = dijit.byId("feedTree"); const tree = dijit.byId("feedTree");
if (tree) return tree.setFeedExpandoIcon(feed, is_cat, src); if (tree) return tree.showLoading(feed, is_cat, show);
return false; return false;
}, },

View File

@ -511,16 +511,23 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
left: -3px;
height: 22px;
position: relative;
top: -3px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
opacity: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
opacity: 1;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px;
height: 20px;
width: 20px;
position: relative;
top: -2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;
display: none; display: none;

View File

@ -511,16 +511,23 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
left: -3px;
height: 22px;
position: relative;
top: -3px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
opacity: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
opacity: 1;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px;
height: 20px;
width: 20px;
position: relative;
top: -2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;
display: none; display: none;

View File

@ -511,16 +511,23 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
left: -3px;
height: 22px;
position: relative;
top: -3px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
opacity: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
opacity: 1;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px;
height: 20px;
width: 20px;
position: relative;
top: -2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;
display: none; display: none;

View File

@ -584,17 +584,28 @@ body.ttrss_main {
font-family : @fonts-ui; font-family : @fonts-ui;
.dijitTreeNode { .dijitTreeNode {
.loadingExpando {
left : -3px;
height : 22px;
position : relative;
top : -3px;
}
.dijitTreeRow { .dijitTreeRow {
border : 1px solid transparent; border : 1px solid transparent;
cursor : pointer; cursor : pointer;
.loadingNode {
opacity : 0;
&.visible {
opacity : 1;
}
}
&.Is_Feed {
.loadingNode {
left : -3px;
height : 20px;
width : 20px;
position : relative;
top : -2px;
}
}
.counterNode { .counterNode {
font-weight : bold; font-weight : bold;
display : none; display : none;

View File

@ -512,16 +512,23 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
left: -3px;
height: 22px;
position: relative;
top: -3px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
opacity: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
opacity: 1;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px;
height: 20px;
width: 20px;
position: relative;
top: -2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;
display: none; display: none;

View File

@ -512,16 +512,23 @@ body.ttrss_main #feeds-holder #feedTree {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Segoe UI", Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
left: -3px;
height: 22px;
position: relative;
top: -3px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode {
opacity: 0;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNode.visible {
opacity: 1;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px;
height: 20px;
width: 20px;
position: relative;
top: -2px;
}
body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;
display: none; display: none;