holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

W.I.P. of a general method for calling loading prompt

Browse Source 
- Define an id for each loading prompt
- Implement new style for loading prompt
This commit is contained in:
Hadi Nategh 2015-12-07 09:08:09 +00:00
parent 0788ca6f62
commit 3be2bbd786
6 changed files with 732 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
phpgwapi/js/framework/fw_browser.js
View File

@ -153,7 +153,7 @@ var fw_browser = Class.extend({
// Show loader div, start blocking // Show loader div, start blocking
var self = this; var self = this;
this.ajaxLoaderDiv = jQuery('<div class="loading ui-widget-overlay ui-front">'+egw.lang('please wait...')+'</div>').insertBefore(this.baseDiv); this.ajaxLoaderDiv = egw.loading_prompt(this.app.appName,true,egw.lang('please wait...'),this.baseDiv, egwIsMobile()?'horizental':'spinner');
this.loadingDeferred = new jQuery.Deferred(); this.loadingDeferred = new jQuery.Deferred();
// Try to escape from infinitive not resolved loadingDeferred // Try to escape from infinitive not resolved loadingDeferred
@ -161,14 +161,14 @@ var fw_browser = Class.extend({
// Define a escape timeout for 5 sec // Define a escape timeout for 5 sec
this.ajaxLoaderDivTimeout = setTimeout(function(){ this.ajaxLoaderDivTimeout = setTimeout(function(){
(self.ajaxLoaderDiv || jQuery('div.loading')).hide().remove(); (self.ajaxLoaderDiv || jQuery('div.loading')).hide().remove();
self.ajaxLoaderDiv = null; self.ajaxLoaderDiv = egw.loading_prompt(self.app.appName,false);
},5000); },5000);
this.loadingDeferred.always(function() { this.loadingDeferred.always(function() {
if(self.ajaxLoaderDiv) if(self.ajaxLoaderDiv)
{ {
self.ajaxLoaderDiv.hide().remove();
self.ajaxLoaderDiv = null; self.ajaxLoaderDiv = egw.loading_prompt(self.app.appName,false);
// Remove escape timeout // Remove escape timeout
clearTimeout(self.ajaxLoaderDivTimeout); clearTimeout(self.ajaxLoaderDivTimeout);
} }

26
phpgwapi/js/jsapi/egw_message.js
View File

@ -244,37 +244,43 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
* Loading prompt is for building a loading animation and show it to user * Loading prompt is for building a loading animation and show it to user
* while a request is under progress. * while a request is under progress.
* *
* @param {boolean} _stat true to show the loading and false to hide * @param {string} _id a unique id to be able to distinguish loading-prompts
* @param {string} _msg a message to show while loading, default is "Please, wait..." * @param {boolean} _stat true to show the loading and false to remove it
* @param {string} _msg a message to show while loading
* @param {string|jQuery node} _node DOM selector id or jquery DOM object, default is body * @param {string|jQuery node} _node DOM selector id or jquery DOM object, default is body
* @param {string} mode defines the animation mode, default mode is spinner
* animation modes:
* - spinner: a sphere with a spinning bar inside
* - horizental: a horizental bar
* *
* @returns {jquery dom object|null} returns jQuery DOM object or null in case of hiding * @returns {jquery dom object|null} returns jQuery DOM object or null in case of hiding
*/ */
loading_prompt: function(_stat,_msg,_node) loading_prompt: function(_id,_stat,_msg,_node, _mode)
{ {
var $container = ''; var $container = '';
var id = 'egw-loadin-prompt_'+_id || 'egw-loading-prompt_1';
var mode = _mode || 'spinner';
if (_stat) if (_stat)
{ {
var msg = _msg || egw.lang('please wait...');
var $node = jQuery(_node) || jQuery ('body'); var $node = jQuery(_node) || jQuery ('body');
var $container = jQuery(document.createElement('div')) var $container = jQuery(document.createElement('div'))
.attr('id', 'egw-loading-prompt') .attr('id', id)
.addClass('ui-front'); .addClass('egw-loading-prompt-container ui-front');
var $text = jQuery(document.createElement('span')) var $text = jQuery(document.createElement('span'))
.addClass('egw-loading-prompt-msg') .addClass('egw-loading-prompt-'+mode+'-msg')
.text(msg) .text(_msg)
.appendTo($container); .appendTo($container);
var $animator = jQuery(document.createElement('div')) var $animator = jQuery(document.createElement('div'))
.addClass('egw-loading-prompt-animator') .addClass('egw-loading-prompt-'+mode+'-animator')
.appendTo($container); .appendTo($container);
$container.insertBefore($node); $container.insertBefore($node);
return $container; return $container;
} }
else else
{ {
$container = jQuery('#egw-loading-prompt'); $container = jQuery('#'+id);
if ($container.length > 0) $container.remove(); if ($container.length > 0) $container.remove();
return null; return null;
} }

254
pixelegg/css/mobile.css
View File

@ -6355,6 +6355,96 @@ a.textSidebox {
.pageGenTime > span:last-child:after { .pageGenTime > span:last-child:after {
content: ""; content: "";
} }
@keyframes loading-prompt-spinner {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.egw-loading-prompt-container::before {
opacity: .3;
content: "";
background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
.egw-loading-prompt-container .egw-loading-prompt-spinner-msg {
position: absolute;
left: 48%;
top: 48%;
z-index: 999;
text-shadow: 4px 4px 7px #679FD2;
color: #0B5FA4;
margin-left: -10px;
margin-top: 52px;
}
.egw-loading-prompt-container .egw-loading-prompt-spinner-animator {
width: 38px;
height: 38px;
position: absolute;
left: 48%;
top: 48%;
z-index: 999;
background-position: 3px 3px;
opacity: 1;
background-repeat: no-repeat;
vertical-align: middle;
border: 5px solid;
background: #FBC200;
border: 6px #679fd2 solid;
border-top: 6px #0C5DA5 solid;
border-radius: 50%;
-webkit-animation: loading-prompt-spinner 1.2s infinite linear;
animation: loading-prompt-spinner 1.2s infinite linear;
}
@keyframes loading-prompt-horizental {
0% {
transform: translate(-52.5px, -7.5px);
}
100% {
transform: translate(38.5px, -7.5px);
}
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-animator::after {
content: '';
position: absolute;
top: 48%;
left: 50%;
width: 15px;
height: 15px;
z-index: 999;
border-radius: 30%;
background: #FBC200;
animation-name: loading-prompt-horizental;
animation-duration: 1.5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-msg {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
text-shadow: 4px 4px 7px #679FD2;
color: #0B5FA4;
margin-left: -35px;
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-animator::before {
content: '';
position: absolute;
top: 48%;
left: 50%;
z-index: 999;
width: 100px;
border-radius: 5px;
border: solid 10px #679FD2;
transform: translate(-50%, -50%);
}
/** /**
* EGroupware: Pixelegg styles * EGroupware: Pixelegg styles
* *
@ -6519,6 +6609,66 @@ span.egw_tutorial_title {
body { body {
background-color: transparent; background-color: transparent;
} }
body .pt-page-moveToLeft {
-webkit-animation: moveToLeft .6s ease both;
animation: moveToLeft .6s ease both;
}
body .pt-page-moveFromLeft {
-webkit-animation: moveFromLeft .6s ease both;
animation: moveFromLeft .6s ease both;
}
body .pt-page-moveToRight {
-webkit-animation: moveToRight .6s ease both;
animation: moveToRight .6s ease both;
}
body .pt-page-moveFromRight {
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
@-webkit-keyframes moveToLeft {
to {
-webkit-transform: translateX(-100%);
}
}
@keyframes moveToLeft {
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveFromLeft {
from {
-webkit-transform: translateX(-100%);
}
}
@keyframes moveFromLeft {
from {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveToRight {
to {
-webkit-transform: translateX(100%);
}
}
@keyframes moveToRight {
to {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-webkit-keyframes moveFromRight {
from {
-webkit-transform: translateX(100%);
}
}
@keyframes moveFromRight {
from {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
body div.egw_fw_mobile_iOS_popup_appHeader { body div.egw_fw_mobile_iOS_popup_appHeader {
padding-top: 15px; padding-top: 15px;
} }
@ -6545,6 +6695,12 @@ span.egw_tutorial_title {
touch-action: initial; touch-action: initial;
height: 50px; height: 50px;
} }
body table.egwGridView_outer tbody tr td time,
body table.egwGridView_outer tbody tr td.et2_date,
body table.egwGridView_outer tbody tr td.et2_date_ro {
float: right;
font-size: 10px;
}
#egw_fw_basecontainer { #egw_fw_basecontainer {
background: white; background: white;
} }
@ -6754,7 +6910,7 @@ span.egw_tutorial_title {
background-color: none !important; background-color: none !important;
} }
.egw_fw_ui_tabs_header .egw_fw_ui_tab_header:active { .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:active {
webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
} }
@ -7333,16 +7489,24 @@ span.egw_tutorial_title {
/*mobile etemplate2*/ /*mobile etemplate2*/
/*mobile etemplate2*/ /*mobile etemplate2*/
@media only screen and (min-width: 320px) and (max-width: 1279px) { @media only screen and (min-width: 320px) and (max-width: 1279px) {
div.ui-dialog { body div#egw_message {
bottom: 0px;
top: auto;
left: 0px;
right: 0px !important;
max-width: 100%;
border-radius: 0;
}
body div.ui-dialog {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
left: 0 !important; left: 0 !important;
top: 0 !important; top: 0 !important;
} }
.et2_nextmatch .nextmatch_header_row { body .et2_nextmatch .nextmatch_header_row {
background-color: background-color-egw-dark; background-color: background-color-egw-dark;
} }
.et2_nextmatch .nextmatch_header_row select { body .et2_nextmatch .nextmatch_header_row select {
display: block; display: block;
width: 100%; width: 100%;
height: 50px; height: 50px;
@ -7355,13 +7519,13 @@ span.egw_tutorial_title {
padding-left: 10px; padding-left: 10px;
max-width: none; max-width: none;
} }
.et2_nextmatch .nextmatch_header_row label { body .et2_nextmatch .nextmatch_header_row label {
display: block; display: block;
width: 100%; width: 100%;
float: left; float: left;
font-size: large; font-size: large;
} }
.et2_nextmatch .nextmatch_header_row label select { body .et2_nextmatch .nextmatch_header_row label select {
display: inline-block; display: inline-block;
width: 80%; width: 80%;
float: right; float: right;
@ -7369,33 +7533,33 @@ span.egw_tutorial_title {
height: 50px; height: 50px;
font-size: large; font-size: large;
} }
.et2_nextmatch .nextmatch_header.nm_header_hide { body .et2_nextmatch .nextmatch_header.nm_header_hide {
display: none !important; display: none !important;
} }
.et2_nextmatch .nextmatch_header { body .et2_nextmatch .nextmatch_header {
background-color: white; background-color: white;
padding: 0; padding: 0;
display: none; display: none;
border: 1px solid silver; border: 1px solid silver;
border-top: none; border-top: none;
} }
.et2_nextmatch .nextmatch_header div.et2_box_widget { body .et2_nextmatch .nextmatch_header div.et2_box_widget {
display: block; display: block;
height: 50px; height: 50px;
} }
.et2_nextmatch .nextmatch_header .et2_button { body .et2_nextmatch .nextmatch_header .et2_button {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.et2_nextmatch .egwGridView_outer thead tr { body .et2_nextmatch .egwGridView_outer thead tr {
visibility: hidden; visibility: hidden;
} }
.et2_nextmatch .search { body .et2_nextmatch .search {
background: #0c5da5; background: #0c5da5;
border: 1px solid silver; border: 1px solid silver;
margin-left: 60px; margin-left: 60px;
} }
.et2_nextmatch .search button { body .et2_nextmatch .search button {
height: 50px; height: 50px;
width: 50px; width: 50px;
font-size: large; font-size: large;
@ -7406,16 +7570,16 @@ span.egw_tutorial_title {
color: white; color: white;
background-image: none; background-image: none;
} }
.et2_nextmatch .search button:active, body .et2_nextmatch .search button:active,
.et2_nextmatch .search button:hover { body .et2_nextmatch .search button:hover {
background: transparent; background: transparent;
color: white; color: white;
} }
.et2_nextmatch .search button:focus { body .et2_nextmatch .search button:focus {
color: white; color: white;
box-shadow: none !important; box-shadow: none !important;
} }
.et2_nextmatch .search button.nm_toggle_header { body .et2_nextmatch .search button.nm_toggle_header {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 5px; margin-right: 5px;
@ -7427,14 +7591,14 @@ span.egw_tutorial_title {
display: block; display: block;
float: right; float: right;
} }
.et2_nextmatch .search button.nm_toggle_header:focus { body .et2_nextmatch .search button.nm_toggle_header:focus {
outline: none; outline: none;
} }
.et2_nextmatch .search button.nm_toggle_header:after { body .et2_nextmatch .search button.nm_toggle_header:after {
font-size: xx-large; font-size: xx-large;
content: "\2630"; content: "\2630";
} }
.et2_nextmatch .search button.nm_action_header { body .et2_nextmatch .search button.nm_action_header {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 5px; margin-right: 5px;
@ -7446,14 +7610,14 @@ span.egw_tutorial_title {
display: block; display: block;
float: right; float: right;
} }
.et2_nextmatch .search button.nm_action_header:focus { body .et2_nextmatch .search button.nm_action_header:focus {
outline: none; outline: none;
} }
.et2_nextmatch .search button.nm_action_header:after { body .et2_nextmatch .search button.nm_action_header:after {
font-size: xx-large; font-size: xx-large;
content: "\205D"; content: "\205D";
} }
.et2_nextmatch .search button.nm_add_button { body .et2_nextmatch .search button.nm_add_button {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-right: 5px; margin-right: 5px;
@ -7468,10 +7632,10 @@ span.egw_tutorial_title {
border: 10px solid #0c5da5; border: 10px solid #0c5da5;
border-radius: 50px; border-radius: 50px;
} }
.et2_nextmatch .search button.nm_add_button:focus { body .et2_nextmatch .search button.nm_add_button:focus {
outline: none; outline: none;
} }
.et2_nextmatch .search button.nm_add_button:after { body .et2_nextmatch .search button.nm_add_button:after {
font-size: xx-large; font-size: xx-large;
content: "+"; content: "+";
display: inline-block; display: inline-block;
@ -7480,10 +7644,10 @@ span.egw_tutorial_title {
color: #0c5da5; color: #0c5da5;
font-weight: bold; font-weight: bold;
} }
.et2_nextmatch .search button.nm_toggle_header_on:after { body .et2_nextmatch .search button.nm_toggle_header_on:after {
content: "\2715"; content: "\2715";
} }
.et2_nextmatch .search input { body .et2_nextmatch .search input {
width: 20%; width: 20%;
height: 50px; height: 50px;
font-size: large; font-size: large;
@ -7492,36 +7656,36 @@ span.egw_tutorial_title {
background-color: #0c5da5; background-color: #0c5da5;
color: white; color: white;
} }
.et2_nextmatch .search input:active { body .et2_nextmatch .search input:active {
border: none; border: none;
background: #0c5da5; background: #0c5da5;
} }
.et2_nextmatch .search input:focus { body .et2_nextmatch .search input:focus {
border: none; border: none;
backgroun: #0c5da5; backgroun: #0c5da5;
outline: none; outline: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
.et2_nextmatch .header_row_right { body .et2_nextmatch .header_row_right {
height: 50px; height: 50px;
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
.et2_nextmatch .header_row_right div[id$=favorite_wrapper] { body .et2_nextmatch .header_row_right div[id$=favorite_wrapper] {
margin: 0; margin: 0;
top: 0 !important; top: 0 !important;
height: 50px; height: 50px;
} }
.et2_nextmatch .header_row_right * { body .et2_nextmatch .header_row_right * {
display: inline-block; display: inline-block;
float: left; float: left;
} }
.et2_nextmatch .header_row_right .et2_dropdown button { body .et2_nextmatch .header_row_right .et2_dropdown button {
height: 50px; height: 50px;
width: 50px; width: 50px;
} }
.et2_nextmatch .header_count { body .et2_nextmatch .header_count {
margin: 0; margin: 0;
height: 50px; height: 50px;
font-size: large; font-size: large;
@ -7532,37 +7696,37 @@ span.egw_tutorial_title {
border-radius: 0; border-radius: 0;
border-left: 1px solid rgba(0, 0, 0, 0.15); border-left: 1px solid rgba(0, 0, 0, 0.15);
} }
.et2_nextmatch table.egwGridView_grid tr img { body .et2_nextmatch table.egwGridView_grid tr img {
height: 12px; height: 12px;
} }
.et2_nextmatch table.egwGridView_grid tbody tr.focused { body .et2_nextmatch table.egwGridView_grid tbody tr.focused {
background-image: none; background-image: none;
} }
.et2_nextmatch table.egwGridView_grid tbody tr.selected { body .et2_nextmatch table.egwGridView_grid tbody tr.selected {
background: rgba(255, 194, 0, 0.5) !important; background: rgba(255, 194, 0, 0.5) !important;
} }
.et2_nextmatch table.egwGridView_grid tbody tr:hover { body .et2_nextmatch table.egwGridView_grid tbody tr:hover {
background: transparent; background: transparent;
} }
.et2_nextmatch table.egwGridView_grid tbody tr.swipe { body .et2_nextmatch table.egwGridView_grid tbody tr.swipe {
background-color: #ffc200; background-color: #ffc200;
border: none; border: none;
} }
.et2_nextmatch .egwGridView_outer thead tr th { body .et2_nextmatch .egwGridView_outer thead tr th {
font-size: large; font-size: large;
} }
.dtree img { body .dtree img {
width: 24px !important; width: 24px !important;
height: 24px !important; height: 24px !important;
} }
.dtree table, body .dtree table,
.dtree tr, body .dtree tr,
.dtree td { body .dtree td {
padding: 2px; padding: 2px;
padding-left: 0; padding-left: 0;
padding-right: 0px; padding-right: 0px;
} }
.dtree .containerTableStyle { body .dtree .containerTableStyle {
overflow: auto; overflow: auto;
} }
} }

70
pixelegg/css/mobile.less
View File

@ -37,6 +37,59 @@
@media all { @media all {
body{ body{
.pt-page-moveToLeft {
-webkit-animation: moveToLeft .6s ease both;
animation: moveToLeft .6s ease both;
}
.pt-page-moveFromLeft {
-webkit-animation: moveFromLeft .6s ease both;
animation: moveFromLeft .6s ease both;
}
.pt-page-moveToRight {
-webkit-animation: moveToRight .6s ease both;
animation: moveToRight .6s ease both;
}
.pt-page-moveFromRight {
-webkit-animation: moveFromRight .6s ease both;
animation: moveFromRight .6s ease both;
}
@-webkit-keyframes moveToLeft {
from { }
to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
from { }
to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@-webkit-keyframes moveFromRight {
from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
background-color: transparent; background-color: transparent;
// iOS appHeader class // iOS appHeader class
div.egw_fw_mobile_iOS_popup_appHeader{ div.egw_fw_mobile_iOS_popup_appHeader{
@ -83,6 +136,10 @@
tr{ tr{
touch-action:initial; touch-action:initial;
height:@mobile-elem-height; height:@mobile-elem-height;
td time, td.et2_date , td.et2_date_ro{
float: right;
font-size: 10px;
}
} }
} }
} }
@ -339,7 +396,7 @@
background-color: none !important; background-color: none !important;
} }
&:active { &:active {
webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
} }
@ -960,6 +1017,16 @@
@mobile-button-width: 50px; @mobile-button-width: 50px;
@mobile-nm-search-bg: #0c5da5; @mobile-nm-search-bg: #0c5da5;
@media only screen and (min-width: 320px) and (max-width: 1279px) { @media only screen and (min-width: 320px) and (max-width: 1279px) {
body
{
div#egw_message {
bottom: 0px;
top: auto;
left: 0px;
right: 0px !important;
max-width: 100%;
border-radius: 0;
}
div.ui-dialog { div.ui-dialog {
width:100% !important; width:100% !important;
height:100% !important; height:100% !important;
@ -1223,3 +1290,4 @@
} }
} }
} }
}

90
pixelegg/css/pixelegg.css
View File

@ -6344,6 +6344,96 @@ a.textSidebox {
.pageGenTime > span:last-child:after { .pageGenTime > span:last-child:after {
content: ""; content: "";
} }
@keyframes loading-prompt-spinner {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.egw-loading-prompt-container::before {
opacity: .3;
content: "";
background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
.egw-loading-prompt-container .egw-loading-prompt-spinner-msg {
position: absolute;
left: 48%;
top: 48%;
z-index: 999;
text-shadow: 4px 4px 7px #679FD2;
color: #0B5FA4;
margin-left: -10px;
margin-top: 52px;
}
.egw-loading-prompt-container .egw-loading-prompt-spinner-animator {
width: 38px;
height: 38px;
position: absolute;
left: 48%;
top: 48%;
z-index: 999;
background-position: 3px 3px;
opacity: 1;
background-repeat: no-repeat;
vertical-align: middle;
border: 5px solid;
background: #FBC200;
border: 6px #679fd2 solid;
border-top: 6px #0C5DA5 solid;
border-radius: 50%;
-webkit-animation: loading-prompt-spinner 1.2s infinite linear;
animation: loading-prompt-spinner 1.2s infinite linear;
}
@keyframes loading-prompt-horizental {
0% {
transform: translate(-52.5px, -7.5px);
}
100% {
transform: translate(38.5px, -7.5px);
}
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-animator::after {
content: '';
position: absolute;
top: 48%;
left: 50%;
width: 15px;
height: 15px;
z-index: 999;
border-radius: 30%;
background: #FBC200;
animation-name: loading-prompt-horizental;
animation-duration: 1.5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-msg {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
text-shadow: 4px 4px 7px #679FD2;
color: #0B5FA4;
margin-left: -35px;
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-animator::before {
content: '';
position: absolute;
top: 48%;
left: 50%;
z-index: 999;
width: 100px;
border-radius: 5px;
border: solid 10px #679FD2;
transform: translate(-50%, -50%);
}
/** /**
* EGroupware: Pixelegg styles * EGroupware: Pixelegg styles
* *

92
pixelegg/less/layout_traditional.less
View File

@ -321,3 +321,95 @@ a.textSidebox
.pageGenTime > span:last-child:after { .pageGenTime > span:last-child:after {
content: ""; content: "";
} }
// ############################################################
// # LOADING PROMPT #
// ############################################################
@keyframes loading-prompt-spinner {
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}
.egw-loading-prompt-container::before {
opacity:.3;
content:"";
background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
.egw-loading-prompt-container .egw-loading-prompt-spinner-msg {
position: absolute;
left: 48%;
top: 48%;
z-index: 999;
text-shadow: 4px 4px 7px #679FD2;
color: #0B5FA4;
margin-left: -10px;
margin-top: 52px;
}
.egw-loading-prompt-container .egw-loading-prompt-spinner-animator {
width: 38px;
height: 38px;
position: absolute;
left: 48%;
top: 48%;
z-index: 999;
background-position: 3px 3px;
opacity: 1;
border-radius: 50%;
background-repeat: no-repeat;
vertical-align: middle;
border: 5px solid;
background: #FBC200;
border: 6px rgb(103, 159, 210) solid;
border-top: 6px #0C5DA5 solid;
border-radius: 50%;
-webkit-animation: loading-prompt-spinner 1.2s infinite linear;
animation: loading-prompt-spinner 1.2s infinite linear;
}
@keyframes loading-prompt-horizental {
0% { transform: translate(-52.5px,-7.5px); }
100% { transform: translate(38.5px,-7.5px); }
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-animator::after {
content: '';
position: absolute;
top:48%;
left: 50%;
width: 15px;
height: 15px;
z-index: 999;
border-radius: 30%;
background: #FBC200;
animation-name: loading-prompt-horizental;
animation-duration: 1.5s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-msg {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
text-shadow: 4px 4px 7px #679FD2;
color: #0B5FA4;
margin-left: -35px;
}
.egw-loading-prompt-container .egw-loading-prompt-horizental-animator::before {
content: '';
position: absolute;
top: 48%;
left: 50%;
z-index: 999;
width: 100px;
border-radius: 5px;
border: solid 10px #679FD2;
transform: translate(-50%, -50%);
}
//################################## END OF LOADING PROMPT #############