add svg loading indicators

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 <http://www.gnu.org/licenses/>.
 
 Copyright (c) 2005 Andrew Dolgov (unless explicitly stated otherwise).
-
-Uses Silk icons by Mark James: http://www.famfamfam.com/lab/icons/silk/
-

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 "";

images/oval.svg

@@ -0,0 +1,17 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#257aa7">
+    <g fill="none" fill-rule="evenodd">
+        <g stroke-width="8" transform="matrix(0.83009609,0,0,0.83009609,4.0582705,4.0582705)">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M 36,18 C 36,8.06 27.94,0 18,0">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>

images/three-dots.svg

@@ -0,0 +1,33 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#257aa7">
+    <circle cx="15" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+        <animate attributeName="r" from="9" to="9"
+                 begin="0s" dur="0.8s"
+                 values="9;15;9" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="0.5" to="0.5"
+                 begin="0s" dur="0.8s"
+                 values=".5;1;.5" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+    <circle cx="105" cy="15" r="15">
+        <animate attributeName="r" from="15" to="15"
+                 begin="0s" dur="0.8s"
+                 values="15;9;15" calcMode="linear"
+                 repeatCount="indefinite" />
+        <animate attributeName="fill-opacity" from="1" to="1"
+                 begin="0s" dur="0.8s"
+                 values="1;.5;1" calcMode="linear"
+                 repeatCount="indefinite" />
+    </circle>
+</svg>

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');
 			}
 

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";

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;
+  height: 14px;
-  width: 20px;
+  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;

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;
+  height: 14px;
-  width: 20px;
+  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;

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;
+  height: 14px;
-  width: 20px;
+  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;

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;
+							height : 14px;
-							width : 20px;
+							width : 14px;
 							position : relative;
-							top : -2px;
+							top : -1px;
+						}
+					}
+
+					&.Is_Cat {
+						.loadingNode {
+							height : 11px;
+							width : 18px;
+							margin-left : 4px;
 						}
 					}
 

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;
+  height: 14px;
-  width: 20px;
+  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;

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;
+  height: 14px;
-  width: 20px;
+  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;