You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@syncope.apache.org by il...@apache.org on 2017/01/23 17:03:48 UTC
[1/2] syncope git commit: Modernizing full-screen spinner
Repository: syncope
Updated Branches:
refs/heads/2_0_X ca63ef97b -> d4aa07dcf
refs/heads/master 7899b4d9c -> b5391ee71
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/d4aa07dc
Tree: http://git-wip-us.apache.org/repos/asf/syncope/tree/d4aa07dc
Diff: http://git-wip-us.apache.org/repos/asf/syncope/diff/d4aa07dc
Branch: refs/heads/2_0_X
Commit: d4aa07dcf91c333bfab5268109dabecfd2faacdd
Parents: ca63ef9
Author: Francesco Chicchiricc� <il...@apache.org>
Authored: Mon Jan 23 17:37:39 2017 +0100
Committer: Francesco Chicchiricc� <il...@apache.org>
Committed: Mon Jan 23 17:37:39 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/d4aa07dc/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/d4aa07dc/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/d4aa07dc/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());
[2/2] syncope git commit: Modernizing full-screen spinner
Posted by il...@apache.org.
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� <il...@apache.org>
Authored: Mon Jan 23 17:37:39 2017 +0100
Committer: Francesco Chicchiricc� <il...@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());