You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ponymail.apache.org by hu...@apache.org on 2016/09/03 07:45:51 UTC
[03/12] incubator-ponymail git commit: going a little over-board with
the spinner ; )
going a little over-board with the spinner ;)
colors!
Project: http://git-wip-us.apache.org/repos/asf/incubator-ponymail/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-ponymail/commit/2ebe23db
Tree: http://git-wip-us.apache.org/repos/asf/incubator-ponymail/tree/2ebe23db
Diff: http://git-wip-us.apache.org/repos/asf/incubator-ponymail/diff/2ebe23db
Branch: refs/heads/coffee-and-cake
Commit: 2ebe23dba1aaa2c50e2343760723c3756fe43a81
Parents: 8d65a54
Author: Daniel Gruno <hu...@apache.org>
Authored: Sat Sep 3 08:02:07 2016 +0200
Committer: Daniel Gruno <hu...@apache.org>
Committed: Sat Sep 3 08:02:07 2016 +0200
----------------------------------------------------------------------
site/css/ponymail2.css | 85 +++++++++++++++++++++++++----------
site/js/coffee/http_utils.coffee | 27 ++++++++---
2 files changed, 83 insertions(+), 29 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-ponymail/blob/2ebe23db/site/css/ponymail2.css
----------------------------------------------------------------------
diff --git a/site/css/ponymail2.css b/site/css/ponymail2.css
index 1946889..46319b1 100644
--- a/site/css/ponymail2.css
+++ b/site/css/ponymail2.css
@@ -169,58 +169,95 @@ h3, h2, h1 {
.spinner {
z-index: 100;
position: fixed;
- top: calc(40% - 100px);
+ top: calc(40% - 90px);
left: calc(50% - 150px);
width: 300px;
height: 200px;
background: #3285BC;
border-radius: 8px;
- font-size: 12pt;
+ font-size: 9pt;
color: #FFF;
text-align: center;
font-family: sans-serif;
}
.spinwheel {
- margin: 5px auto;
- font-size: 10px;
- position: relative;
- border-top: 1.1em solid rgba(220, 190, 30, 0.2);
- border-right: 1.1em solid rgba(220, 190, 30, 0.2);
- border-bottom: 1.1em solid rgba(220, 190, 30, 0.2);
- border-left: 1.1em solid #E2BB1F;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
+ margin: 8px auto;
+ border-top: 10px solid rgba(30,190,200,0.95);
+ border-right: 10px solid rgba(220, 30, 120, 0.95);
+ border-bottom: 10px solid rgba(120, 200, 30, 0.95);
+ border-left: 10px solid rgba(220,190,30,0.95);
transform: translateZ(0);
- -webkit-animation: spinning 1.1s infinite linear;
- animation: spinning 1.1s infinite linear;
+ animation: spin1 1s 0s ease-in-out forwards, spin2 1s 1s ease-in-out forwards, spin3 1s 2s ease-in-out forwards, spin4 1s 3s ease-in-out forwards;
}
.spinwheel, .spinwheel:after {
border-radius: 50%;
- width: 10em;
- height: 10em;
+ width: 100px;
+ height: 100px;
+}
+
+.spinwheel_md {
+ margin: 10px 10px;
+ border-top: 10px solid rgba(30,190,200,0.95);
+ border-right: 10px solid rgba(220, 30, 120, 0.95);
+ border-bottom: 10px solid rgba(120, 200, 30, 0.95);
+ border-left: 10px solid rgba(220,190,30,0.95);
+}
+
+.spinwheel_md, .spinwheel_md:after {
+ border-radius: 50%;
+ width: 60px;
+ height: 60px;
}
-@-webkit-keyframes spinning {
+.spinwheel_sm {
+ margin: 10px 10px;
+ border-top: 20px solid rgba(30,190,200,0.95);
+ border-right: 20px solid rgba(220, 30, 120, 0.95);
+ border-bottom: 20px solid rgba(120, 200, 30, 0.95);
+ border-left: 20px solid rgba(220,190,30,0.95);
+}
+
+.spinwheel_sm, .spinwheel_sm:after {
+ border-radius: 50%;
+ width: 0px;
+ height: 0px;
+}
+
+@keyframes spin1 {
0% {
- -webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
+ transform: rotate(90deg);
}
}
-@keyframes spinning {
+@keyframes spin2 {
0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
+ transform: rotate(90deg);
}
100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
+ transform: rotate(180deg);
+ }
+}
+@keyframes spin3 {
+ 0% {
+ transform: rotate(180deg);
+ }
+
+ 100% {
+ transform: rotate(270deg);
}
}
+@keyframes spin4 {
+ 0% {
+ transform: rotate(270deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-ponymail/blob/2ebe23db/site/js/coffee/http_utils.coffee
----------------------------------------------------------------------
diff --git a/site/js/coffee/http_utils.coffee b/site/js/coffee/http_utils.coffee
index 0a013d9..f34b773 100644
--- a/site/js/coffee/http_utils.coffee
+++ b/site/js/coffee/http_utils.coffee
@@ -26,35 +26,52 @@
# and shows the spinner if things are taking too long.
###
pending_url_operations = {}
+pending_spinner_at = 0
+spinCheck = (div) ->
+ now = new Date().getTime()
+ if (now - pending_spinner_at) >= 4000
+ pending_spinner_at = now
+ ndiv = div.cloneNode(true)
+ ndiv.addEventListener('animationend', (e) -> spinCheck(ndiv))
+ div.parentNode.replaceChild(ndiv, div)
+
+
pendingURLStatus = () ->
pending = 0
now = new Date().getTime()
+ div = get('loading')
for url, time of pending_url_operations
### Is something taking too long?? ###
if (now - time) > 1500
pending++
- div = get('loading')
if not div
div = new HTML('div', {
id: 'loading'
class: "spinner"
},
[
- new HTML('div', {class: "spinwheel"}),
+ new HTML('div', {class: "spinwheel"},
+ new HTML('div', {class:"spinwheel_md"},
+ new HTML('div', {class:"spinwheel_sm"}))),
new HTML('br'),
"Loading, please wait..."
]
)
document.body.inject(div)
- div.style.display = "block"
+ pending_spinner_at = now
+ div.addEventListener('animationend', (e) -> spinCheck(div))
+
### If no pending operations, hide the spnner ###
if pending == 0
div = get('loading')
if div
div.style.display = "none"
-
+ else if div and div.style.display == "none"
+ div.style.display = "block"
+
+
window.setInterval(pendingURLStatus, 500)
@@ -135,7 +152,7 @@ class HTTPRequest
@request.open(@method, @url, true)
### Send data ###
- @request.send(@rdata)
+ #@request.send(@rdata)
### Set onChange behavior ###