From 7ec8a6cad0878fd16fc63c9a11d9c7e3ca18a88c Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 16 Mar 2021 20:50:18 +0300 Subject: [PATCH] simplify feed tree expando/loading/feed icon handling --- js/FeedTree.js | 43 +++++++++++++++++++++++++++------------- js/Feeds.js | 17 ++++++++-------- themes/compact.css | 19 ++++++++++++------ themes/compact_night.css | 19 ++++++++++++------ themes/light.css | 19 ++++++++++++------ themes/light/tt-rss.less | 25 ++++++++++++++++------- themes/night.css | 19 ++++++++++++------ themes/night_blue.css | 19 ++++++++++++------ 8 files changed, 120 insertions(+), 60 deletions(-) diff --git a/js/FeedTree.js b/js/FeedTree.js index af0f420d6..94188bae9 100755 --- a/js/FeedTree.js +++ b/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'); - return true; + + // could be + 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; - return true; - } else { - const icon = dojo.create('img', { src: src, className: 'loadingExpando' }); - domConstruct.place(icon, treeNode.expandoNode, 'only'); - return true; - } + + if (show) + treeNode.loadingNode.addClassName("visible"); + else + treeNode.loadingNode.removeClassName("visible"); + + return true } return false; diff --git a/js/Feeds.js b/js/Feeds.js index 7b6366959..f4eba67dc 100644 --- a/js/Feeds.js +++ b/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; }, diff --git a/themes/compact.css b/themes/compact.css index b94a91de5..e36f36ae6 100644 --- a/themes/compact.css +++ b/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; diff --git a/themes/compact_night.css b/themes/compact_night.css index 58e0973bb..676593d6c 100644 --- a/themes/compact_night.css +++ b/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; diff --git a/themes/light.css b/themes/light.css index 46a19904c..a25dfb410 100644 --- a/themes/light.css +++ b/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; diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index 1d0564901..121cba56b 100644 --- a/themes/light/tt-rss.less +++ b/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; diff --git a/themes/night.css b/themes/night.css index ca1bbfc30..6aad81e82 100644 --- a/themes/night.css +++ b/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; diff --git a/themes/night_blue.css b/themes/night_blue.css index 6afc478d2..174e66b3a 100644 --- a/themes/night_blue.css +++ b/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;