valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add svg loading indicators

This commit is contained in:
Andrew Dolgov 2021-03-16 21:32:44 +03:00
parent 7ec8a6cad0
commit a0e41f41a4
12 changed files with 139 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

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

4
classes/rpc.php
View File

@ -472,6 +472,8 @@ class RPC extends Handler_Protected {
$params["widescreen"] = (int) get_pref(Prefs::WIDESCREEN_MODE); $params["widescreen"] = (int) get_pref(Prefs::WIDESCREEN_MODE);
$params['simple_update'] = Config::get(Config::SIMPLE_UPDATE_MODE); $params['simple_update'] = Config::get(Config::SIMPLE_UPDATE_MODE);
$params["icon_indicator_white"] = $this->image_to_base64("images/indicator_white.gif"); $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"]); $params["labels"] = Labels::get_all($_SESSION["uid"]);
return $params; return $params;
@ -481,6 +483,8 @@ class RPC extends Handler_Protected {
if (file_exists($filename)) { if (file_exists($filename)) {
$ext = pathinfo($filename, PATHINFO_EXTENSION); $ext = pathinfo($filename, PATHINFO_EXTENSION);
if ($ext == "svg") $ext = "svg+xml";
return "data:image/$ext;base64," . base64_encode((string)file_get_contents($filename)); return "data:image/$ext;base64," . base64_encode((string)file_get_contents($filename));
} else { } else {
return ""; return "";

17
images/oval.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 740 B

33
images/three-dots.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
js/FeedTree.js
View File

@ -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-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/indicator_tiny.gif'}); tnode.loadingNode = dojo.create('img', { className: 'loadingNode', src: App.getInitParam('icon_three_dots')});
domConstruct.place(tnode.loadingNode, tnode.labelNode, 'after'); domConstruct.place(tnode.loadingNode, tnode.labelNode, 'after');
} }
if (id.match("FEED:")) { 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'); domConstruct.place(tnode.loadingNode, tnode.expandoNode, 'only');
} }

2
js/common.js
View File

@ -432,7 +432,7 @@ const Notify = {
break; break;
case this.KIND_PROGRESS: case this.KIND_PROGRESS:
notify.addClassName("notify_progress"); notify.addClassName("notify_progress");
icon = App.getInitParam("icon_indicator_white") icon = App.getInitParam("icon_oval")
break; break;
default: default:
icon = "notifications"; icon = "notifications";

16
themes/compact.css
View File

@ -182,6 +182,11 @@ body.ttrss_main .notify.notify_progress {
border-color: #d7c47a; border-color: #d7c47a;
background-color: #fff7d5; background-color: #fff7d5;
} }
body.ttrss_main .notify.notify_progress img {
width: 18px;
height: 18px;
filter: saturate(0);
}
body.ttrss_main .notify.notify_info { body.ttrss_main .notify.notify_info {
border-color: #257aa7; border-color: #257aa7;
background-color: #d5ebf6; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px; left: -3px;
height: 20px; height: 14px;
width: 20px; width: 14px;
position: relative; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;

16
themes/compact_night.css
View File

@ -182,6 +182,11 @@ body.ttrss_main .notify.notify_progress {
border-color: #d7c47a; border-color: #d7c47a;
background-color: #fff7d5; background-color: #fff7d5;
} }
body.ttrss_main .notify.notify_progress img {
width: 18px;
height: 18px;
filter: saturate(0);
}
body.ttrss_main .notify.notify_info { body.ttrss_main .notify.notify_info {
border-color: #b87d2c; border-color: #b87d2c;
background-color: #faf3e9; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px; left: -3px;
height: 20px; height: 14px;
width: 20px; width: 14px;
position: relative; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;

16
themes/light.css
View File

@ -182,6 +182,11 @@ body.ttrss_main .notify.notify_progress {
border-color: #d7c47a; border-color: #d7c47a;
background-color: #fff7d5; background-color: #fff7d5;
} }
body.ttrss_main .notify.notify_progress img {
width: 18px;
height: 18px;
filter: saturate(0);
}
body.ttrss_main .notify.notify_info { body.ttrss_main .notify.notify_info {
border-color: #257aa7; border-color: #257aa7;
background-color: #d5ebf6; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px; left: -3px;
height: 20px; height: 14px;
width: 20px; width: 14px;
position: relative; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;

20
themes/light/tt-rss.less
View File

@ -192,6 +192,12 @@ body.ttrss_main {
.notify.notify_progress { .notify.notify_progress {
border-color : #d7c47a; border-color : #d7c47a;
background-color : #fff7d5; background-color : #fff7d5;
img {
width : 18px;
height : 18px;
filter : saturate(0);
}
} }
.notify.notify_info { .notify.notify_info {
@ -599,10 +605,18 @@ body.ttrss_main {
&.Is_Feed { &.Is_Feed {
.loadingNode { .loadingNode {
left : -3px; left : -3px;
height : 20px; height : 14px;
width : 20px; width : 14px;
position : relative; position : relative;
top : -2px; top : -1px;
}
}
&.Is_Cat {
.loadingNode {
height : 11px;
width : 18px;
margin-left : 4px;
} }
} }

16
themes/night.css
View File

@ -183,6 +183,11 @@ body.ttrss_main .notify.notify_progress {
border-color: #d7c47a; border-color: #d7c47a;
background-color: #fff7d5; background-color: #fff7d5;
} }
body.ttrss_main .notify.notify_progress img {
width: 18px;
height: 18px;
filter: saturate(0);
}
body.ttrss_main .notify.notify_info { body.ttrss_main .notify.notify_info {
border-color: #b87d2c; border-color: #b87d2c;
background-color: #faf3e9; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px; left: -3px;
height: 20px; height: 14px;
width: 20px; width: 14px;
position: relative; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;

16
themes/night_blue.css
View File

@ -183,6 +183,11 @@ body.ttrss_main .notify.notify_progress {
border-color: #d7c47a; border-color: #d7c47a;
background-color: #fff7d5; background-color: #fff7d5;
} }
body.ttrss_main .notify.notify_progress img {
width: 18px;
height: 18px;
filter: saturate(0);
}
body.ttrss_main .notify.notify_info { body.ttrss_main .notify.notify_info {
border-color: #257aa7; border-color: #257aa7;
background-color: #d5ebf6; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow.Is_Feed .loadingNode {
left: -3px; left: -3px;
height: 20px; height: 14px;
width: 20px; width: 14px;
position: relative; 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 { body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRow .counterNode {
font-weight: bold; font-weight: bold;