From a0e41f41a491c4a8e5e737846edaf1a0b31d5367 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 16 Mar 2021 21:32:44 +0300 Subject: [PATCH] add svg loading indicators --- README.md | 3 --- classes/rpc.php | 4 ++++ images/oval.svg | 17 +++++++++++++++++ images/three-dots.svg | 33 +++++++++++++++++++++++++++++++++ js/FeedTree.js | 4 ++-- js/common.js | 2 +- themes/compact.css | 16 +++++++++++++--- themes/compact_night.css | 16 +++++++++++++--- themes/light.css | 16 +++++++++++++--- themes/light/tt-rss.less | 20 +++++++++++++++++--- themes/night.css | 16 +++++++++++++--- themes/night_blue.css | 16 +++++++++++++--- 12 files changed, 139 insertions(+), 24 deletions(-) create mode 100644 images/oval.svg create mode 100644 images/three-dots.svg diff --git a/README.md b/README.md index 84d576034..71b11cc8b 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,3 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . Copyright (c) 2005 Andrew Dolgov (unless explicitly stated otherwise). - -Uses Silk icons by Mark James: http://www.famfamfam.com/lab/icons/silk/ - diff --git a/classes/rpc.php b/classes/rpc.php index bde0b1e46..7c248f75d 100755 --- a/classes/rpc.php +++ b/classes/rpc.php @@ -472,6 +472,8 @@ class RPC extends Handler_Protected { $params["widescreen"] = (int) get_pref(Prefs::WIDESCREEN_MODE); $params['simple_update'] = Config::get(Config::SIMPLE_UPDATE_MODE); $params["icon_indicator_white"] = $this->image_to_base64("images/indicator_white.gif"); + $params["icon_oval"] = $this->image_to_base64("images/oval.svg"); + $params["icon_three_dots"] = $this->image_to_base64("images/three-dots.svg"); $params["labels"] = Labels::get_all($_SESSION["uid"]); return $params; @@ -481,6 +483,8 @@ class RPC extends Handler_Protected { if (file_exists($filename)) { $ext = pathinfo($filename, PATHINFO_EXTENSION); + if ($ext == "svg") $ext = "svg+xml"; + return "data:image/$ext;base64," . base64_encode((string)file_get_contents($filename)); } else { return ""; diff --git a/images/oval.svg b/images/oval.svg new file mode 100644 index 000000000..e59d5bf18 --- /dev/null +++ b/images/oval.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/images/three-dots.svg b/images/three-dots.svg new file mode 100644 index 000000000..e724ca05e --- /dev/null +++ b/images/three-dots.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + diff --git a/js/FeedTree.js b/js/FeedTree.js index 94188bae9..2ad9500fe 100755 --- a/js/FeedTree.js +++ b/js/FeedTree.js @@ -138,12 +138,12 @@ 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/indicator_tiny.gif'}); + tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: App.getInitParam('icon_three_dots')}); domConstruct.place(tnode.loadingNode, tnode.labelNode, 'after'); } if (id.match("FEED:")) { - tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: 'images/indicator_white.gif'}); + tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: App.getInitParam('icon_oval')}); domConstruct.place(tnode.loadingNode, tnode.expandoNode, 'only'); } diff --git a/js/common.js b/js/common.js index 1f8318862..1299a0c64 100755 --- a/js/common.js +++ b/js/common.js @@ -432,7 +432,7 @@ const Notify = { break; case this.KIND_PROGRESS: notify.addClassName("notify_progress"); - icon = App.getInitParam("icon_indicator_white") + icon = App.getInitParam("icon_oval") break; default: icon = "notifications"; diff --git a/themes/compact.css b/themes/compact.css index e36f36ae6..6c8502c6e 100644 --- a/themes/compact.css +++ b/themes/compact.css @@ -182,6 +182,11 @@ body.ttrss_main .notify.notify_progress { border-color: #d7c47a; background-color: #fff7d5; } +body.ttrss_main .notify.notify_progress img { + width: 18px; + height: 18px; + filter: saturate(0); +} body.ttrss_main .notify.notify_info { border-color: #257aa7; background-color: #d5ebf6; @@ -523,10 +528,15 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode { left: -3px; - height: 20px; - width: 20px; + height: 14px; + width: 14px; position: relative; - top: -2px; + top: -1px; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode { + height: 11px; + width: 18px; + margin-left: 4px; } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { font-weight: bold; diff --git a/themes/compact_night.css b/themes/compact_night.css index 676593d6c..6eb3db32e 100644 --- a/themes/compact_night.css +++ b/themes/compact_night.css @@ -182,6 +182,11 @@ body.ttrss_main .notify.notify_progress { border-color: #d7c47a; background-color: #fff7d5; } +body.ttrss_main .notify.notify_progress img { + width: 18px; + height: 18px; + filter: saturate(0); +} body.ttrss_main .notify.notify_info { border-color: #b87d2c; background-color: #faf3e9; @@ -523,10 +528,15 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode { left: -3px; - height: 20px; - width: 20px; + height: 14px; + width: 14px; position: relative; - top: -2px; + top: -1px; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode { + height: 11px; + width: 18px; + margin-left: 4px; } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { font-weight: bold; diff --git a/themes/light.css b/themes/light.css index a25dfb410..9f08cfcc1 100644 --- a/themes/light.css +++ b/themes/light.css @@ -182,6 +182,11 @@ body.ttrss_main .notify.notify_progress { border-color: #d7c47a; background-color: #fff7d5; } +body.ttrss_main .notify.notify_progress img { + width: 18px; + height: 18px; + filter: saturate(0); +} body.ttrss_main .notify.notify_info { border-color: #257aa7; background-color: #d5ebf6; @@ -523,10 +528,15 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode { left: -3px; - height: 20px; - width: 20px; + height: 14px; + width: 14px; position: relative; - top: -2px; + top: -1px; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode { + height: 11px; + width: 18px; + margin-left: 4px; } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { font-weight: bold; diff --git a/themes/light/tt-rss.less b/themes/light/tt-rss.less index 121cba56b..b3dd44d24 100644 --- a/themes/light/tt-rss.less +++ b/themes/light/tt-rss.less @@ -192,6 +192,12 @@ body.ttrss_main { .notify.notify_progress { border-color : #d7c47a; background-color : #fff7d5; + + img { + width : 18px; + height : 18px; + filter : saturate(0); + } } .notify.notify_info { @@ -599,10 +605,18 @@ body.ttrss_main { &.Is_Feed { .loadingNode { left : -3px; - height : 20px; - width : 20px; + height : 14px; + width : 14px; position : relative; - top : -2px; + top : -1px; + } + } + + &.Is_Cat { + .loadingNode { + height : 11px; + width : 18px; + margin-left : 4px; } } diff --git a/themes/night.css b/themes/night.css index 6aad81e82..03c76fc94 100644 --- a/themes/night.css +++ b/themes/night.css @@ -183,6 +183,11 @@ body.ttrss_main .notify.notify_progress { border-color: #d7c47a; background-color: #fff7d5; } +body.ttrss_main .notify.notify_progress img { + width: 18px; + height: 18px; + filter: saturate(0); +} body.ttrss_main .notify.notify_info { border-color: #b87d2c; background-color: #faf3e9; @@ -524,10 +529,15 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode { left: -3px; - height: 20px; - width: 20px; + height: 14px; + width: 14px; position: relative; - top: -2px; + top: -1px; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode { + height: 11px; + width: 18px; + margin-left: 4px; } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { font-weight: bold; diff --git a/themes/night_blue.css b/themes/night_blue.css index 174e66b3a..e5f80e375 100644 --- a/themes/night_blue.css +++ b/themes/night_blue.css @@ -183,6 +183,11 @@ body.ttrss_main .notify.notify_progress { border-color: #d7c47a; background-color: #fff7d5; } +body.ttrss_main .notify.notify_progress img { + width: 18px; + height: 18px; + filter: saturate(0); +} body.ttrss_main .notify.notify_info { border-color: #257aa7; background-color: #d5ebf6; @@ -524,10 +529,15 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .loadingNod } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode { left: -3px; - height: 20px; - width: 20px; + height: 14px; + width: 14px; position: relative; - top: -2px; + top: -1px; +} +body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Cat .loadingNode { + height: 11px; + width: 18px; + margin-left: 4px; } body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode { font-weight: bold;