simplify feed tree expando/loading/feed icon handling

js/FeedTree.js

@@ -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-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');
 			}
 
+			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) {
 				const menu = new dijit.Menu();
 				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;
 
+			if (is_cat)
+				rc += " Is_Cat";
+			else
+				rc += " Is_Feed";
+
 			if (!is_cat && item.error != '') rc += " Error";
 			if (item.unread > 0) rc += " Unread";
 			if (item.auxcounter > 0) rc += " Has_Aux";
@@ -309,7 +319,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
 				}, 0);
 			}
 		},
-		setFeedIcon: function(feed, is_cat, src) {
+		setIcon: function(feed, is_cat, src) {
 			let treeNode;
 
 			if (is_cat)
@@ -319,13 +329,19 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
 
 			if (treeNode) {
 				treeNode = treeNode[0];
-				const icon = dojo.create('img', { src: src, className: 'icon' });
+
-				domConstruct.place(icon, treeNode.iconNode, 'only');
+				// could be <i material>
+				const icon = treeNode.iconNode.querySelector('img.icon');
+
+				if (icon) {
+					icon.src = src;
+
 					return true;
 				}
+			}
 			return false;
 		},
-		setFeedExpandoIcon: function(feed, is_cat, src) {
+		showLoading: function(feed, is_cat, show) {
 			let treeNode;
 
 			if (is_cat)
@@ -335,14 +351,13 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dojo/_base/array", "dojo/co
 
 			if (treeNode) {
 				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;

js/Feeds.js

@@ -399,21 +399,20 @@ const	Feeds = {
 			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;
 
 		this.setActive(feed, is_cat);
 
 		window.clearTimeout(this._viewfeed_wait_timeout);
 		this._viewfeed_wait_timeout = window.setTimeout(() => {
+
+			this.showLoading(feed, is_cat, true);
+			//Notify.progress("Loading, please wait...", true);*/
+
 			xhr.json("backend.php", query, (reply) => {
 				try {
 					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);
 					PluginHost.run(PluginHost.HOOK_FEED_LOADED, [feed, is_cat]);
 				} catch (e) {
@@ -574,12 +573,12 @@ const	Feeds = {
 	setIcon: function(feed, is_cat, src) {
 		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");
 
-		if (tree) return tree.setFeedExpandoIcon(feed, is_cat, src);
+		if (tree) return tree.showLoading(feed, is_cat, show);
 
 		return false;
 	},

themes/compact.css

@@ -511,16 +511,23 @@ 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 .dijitTreeNode .loadingExpando {
-  left: -3px;
-  height: 22px;
-  position: relative;
-  top: -3px;
-}
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
   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 {
   font-weight: bold;
   display: none;

themes/compact_night.css

@@ -511,16 +511,23 @@ 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 .dijitTreeNode .loadingExpando {
-  left: -3px;
-  height: 22px;
-  position: relative;
-  top: -3px;
-}
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
   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 {
   font-weight: bold;
   display: none;

themes/light.css

@@ -511,16 +511,23 @@ 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 .dijitTreeNode .loadingExpando {
-  left: -3px;
-  height: 22px;
-  position: relative;
-  top: -3px;
-}
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
   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 {
   font-weight: bold;
   display: none;

themes/light/tt-rss.less

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

themes/night.css

@@ -512,16 +512,23 @@ 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 .dijitTreeNode .loadingExpando {
-  left: -3px;
-  height: 22px;
-  position: relative;
-  top: -3px;
-}
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
   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 {
   font-weight: bold;
   display: none;

themes/night_blue.css

@@ -512,16 +512,23 @@ 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 .dijitTreeNode .loadingExpando {
-  left: -3px;
-  height: 22px;
-  position: relative;
-  top: -3px;
-}
 body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow {
   border: 1px solid transparent;
   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 {
   font-weight: bold;
   display: none;