syncope-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ilgro...@apache.org
Subject [2/2] syncope git commit: Modernizing full-screen spinner
Date Mon, 23 Jan 2017 17:03:49 GMT
Modernizing full-screen spinner


Project: http://git-wip-us.apache.org/repos/asf/syncope/repo
Commit: http://git-wip-us.apache.org/repos/asf/syncope/commit/b5391ee7
Tree: http://git-wip-us.apache.org/repos/asf/syncope/tree/b5391ee7
Diff: http://git-wip-us.apache.org/repos/asf/syncope/diff/b5391ee7

Branch: refs/heads/master
Commit: b5391ee71491f70202c92b0b6a973ef4dc8caf03
Parents: 7899b4d
Author: Francesco Chicchiriccò <ilgrosso@apache.org>
Authored: Mon Jan 23 17:37:39 2017 +0100
Committer: Francesco Chicchiriccò <ilgrosso@apache.org>
Committed: Mon Jan 23 17:37:53 2017 +0100

----------------------------------------------------------------------
 .../META-INF/resources/css/syncopeConsole.css   | 133 ++++++++++++++++---
 .../resources/META-INF/resources/img/busy.gif   | Bin 2834 -> 0 bytes
 .../syncope/client/console/pages/BasePage.html  |   4 +-
 3 files changed, 117 insertions(+), 20 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/syncope/blob/b5391ee7/client/console/src/main/resources/META-INF/resources/css/syncopeConsole.css
----------------------------------------------------------------------
diff --git a/client/console/src/main/resources/META-INF/resources/css/syncopeConsole.css b/client/console/src/main/resources/META-INF/resources/css/syncopeConsole.css
index 9aa9714..958a06c 100644
--- a/client/console/src/main/resources/META-INF/resources/css/syncopeConsole.css
+++ b/client/console/src/main/resources/META-INF/resources/css/syncopeConsole.css
@@ -25,26 +25,125 @@ pre {
   word-wrap: break-word; /* IE 5.5+ */
 }
 
+/* Absolute Center Spinner */
 #veil {
   display:none;
-  position:absolute;
-  top:0;
-  left:0;
+  position: fixed;
   z-index:99999;
-  background-color:black;
-  width:100%;
-  height:20000px;
-  color:white;
-  opacity:0.3;
-  filter:alpha(opacity=30);
-}
-
-#veil img {
-  position:absolute;
-  top:300px;
-  left:50%;
-  margin-left:-75px;
-  width:150px;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+#veil:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+#veil:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+#veil:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 2000ms infinite linear;
+  -moz-animation: spinner 2000ms infinite linear;
+  -ms-animation: spinner 2000ms infinite linear;
+  -o-animation: spinner 2000ms infinite linear;
+  animation: spinner 2000ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0
0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5)
-1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0,
0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0,
0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em
0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0,
0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
 }
 
 .block-sidebar {

http://git-wip-us.apache.org/repos/asf/syncope/blob/b5391ee7/client/console/src/main/resources/META-INF/resources/img/busy.gif
----------------------------------------------------------------------
diff --git a/client/console/src/main/resources/META-INF/resources/img/busy.gif b/client/console/src/main/resources/META-INF/resources/img/busy.gif
deleted file mode 100644
index e77264f..0000000
Binary files a/client/console/src/main/resources/META-INF/resources/img/busy.gif and /dev/null
differ

http://git-wip-us.apache.org/repos/asf/syncope/blob/b5391ee7/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
----------------------------------------------------------------------
diff --git a/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
b/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
index 00d653e..7b2ccc6 100644
--- a/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
+++ b/client/console/src/main/resources/org/apache/syncope/client/console/pages/BasePage.html
@@ -213,9 +213,7 @@ under the License.
       <div class="control-sidebar-bg" style="position: fixed; height: auto;"></div>
     </div>
 
-    <div id="veil">
-      <img src="img/busy.gif"/>
-    </div>
+    <div id="veil">Loading...</div>
 
     <script type="text/javascript">
       $('#spanYear').html(new Date().getFullYear());


Mime
View raw message