add svg loading indicators
This commit is contained in:
parent
7ec8a6cad0
commit
a0e41f41a4
|
@ -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/
|
||||
|
||||
|
|
|
@ -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 "";
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 740 B |
|
@ -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>
|
After Width: | Height: | Size: 1.5 KiB |
|
@ -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');
|
||||
}
|
||||
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue