mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-27 00:58:55 +01:00
W.I.P. of a general method for calling loading prompt
- Define an id for each loading prompt - Implement new style for loading prompt
This commit is contained in:
Hadi Nategh
parent
0788ca6f62
commit
3be2bbd786
@ -153,7 +153,7 @@ var fw_browser = Class.extend({
|
||||
|
||||
// Show loader div, start blocking
|
||||
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();
|
||||
|
||||
// Try to escape from infinitive not resolved loadingDeferred
|
||||
@ -161,14 +161,14 @@ var fw_browser = Class.extend({
|
||||
// Define a escape timeout for 5 sec
|
||||
this.ajaxLoaderDivTimeout = setTimeout(function(){
|
||||
(self.ajaxLoaderDiv || jQuery('div.loading')).hide().remove();
|
||||
self.ajaxLoaderDiv = null;
|
||||
self.ajaxLoaderDiv = egw.loading_prompt(self.app.appName,false);
|
||||
},5000);
|
||||
|
||||
this.loadingDeferred.always(function() {
|
||||
if(self.ajaxLoaderDiv)
|
||||
{
|
||||
self.ajaxLoaderDiv.hide().remove();
|
||||
self.ajaxLoaderDiv = null;
|
||||
|
||||
self.ajaxLoaderDiv = egw.loading_prompt(self.app.appName,false);
|
||||
// Remove escape timeout
|
||||
clearTimeout(self.ajaxLoaderDivTimeout);
|
||||
}
|
||||
|
||||
@ -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
|
||||
* while a request is under progress.
|
||||
*
|
||||
* @param {boolean} _stat true to show the loading and false to hide
|
||||
* @param {string} _msg a message to show while loading, default is "Please, wait..."
|
||||
* @param {string} _id a unique id to be able to distinguish loading-prompts
|
||||
* @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} 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
|
||||
*/
|
||||
loading_prompt: function(_stat,_msg,_node)
|
||||
loading_prompt: function(_id,_stat,_msg,_node, _mode)
|
||||
{
|
||||
var $container = '';
|
||||
var id = 'egw-loadin-prompt_'+_id || 'egw-loading-prompt_1';
|
||||
var mode = _mode || 'spinner';
|
||||
if (_stat)
|
||||
{
|
||||
var msg = _msg || egw.lang('please wait...');
|
||||
var $node = jQuery(_node) || jQuery ('body');
|
||||
|
||||
var $container = jQuery(document.createElement('div'))
|
||||
.attr('id', 'egw-loading-prompt')
|
||||
.addClass('ui-front');
|
||||
.attr('id', id)
|
||||
.addClass('egw-loading-prompt-container ui-front');
|
||||
|
||||
var $text = jQuery(document.createElement('span'))
|
||||
.addClass('egw-loading-prompt-msg')
|
||||
.text(msg)
|
||||
.addClass('egw-loading-prompt-'+mode+'-msg')
|
||||
.text(_msg)
|
||||
.appendTo($container);
|
||||
var $animator = jQuery(document.createElement('div'))
|
||||
.addClass('egw-loading-prompt-animator')
|
||||
.addClass('egw-loading-prompt-'+mode+'-animator')
|
||||
.appendTo($container);
|
||||
$container.insertBefore($node);
|
||||
return $container;
|
||||
}
|
||||
else
|
||||
{
|
||||
$container = jQuery('#egw-loading-prompt');
|
||||
$container = jQuery('#'+id);
|
||||
if ($container.length > 0) $container.remove();
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -6355,6 +6355,96 @@ a.textSidebox {
|
||||
.pageGenTime > span:last-child:after {
|
||||
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
|
||||
*
|
||||
@ -6519,6 +6609,66 @@ span.egw_tutorial_title {
|
||||
body {
|
||||
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 {
|
||||
padding-top: 15px;
|
||||
}
|
||||
@ -6545,6 +6695,12 @@ span.egw_tutorial_title {
|
||||
touch-action: initial;
|
||||
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 {
|
||||
background: white;
|
||||
}
|
||||
@ -6754,7 +6910,7 @@ span.egw_tutorial_title {
|
||||
background-color: none !important;
|
||||
}
|
||||
.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);
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
@ -7333,16 +7489,24 @@ span.egw_tutorial_title {
|
||||
/*mobile etemplate2*/
|
||||
/*mobile etemplate2*/
|
||||
@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;
|
||||
height: 100% !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header_row {
|
||||
body .et2_nextmatch .nextmatch_header_row {
|
||||
background-color: background-color-egw-dark;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header_row select {
|
||||
body .et2_nextmatch .nextmatch_header_row select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
@ -7355,13 +7519,13 @@ span.egw_tutorial_title {
|
||||
padding-left: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header_row label {
|
||||
body .et2_nextmatch .nextmatch_header_row label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
float: left;
|
||||
font-size: large;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header_row label select {
|
||||
body .et2_nextmatch .nextmatch_header_row label select {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
float: right;
|
||||
@ -7369,33 +7533,33 @@ span.egw_tutorial_title {
|
||||
height: 50px;
|
||||
font-size: large;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header.nm_header_hide {
|
||||
body .et2_nextmatch .nextmatch_header.nm_header_hide {
|
||||
display: none !important;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header {
|
||||
body .et2_nextmatch .nextmatch_header {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
display: none;
|
||||
border: 1px solid silver;
|
||||
border-top: none;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header div.et2_box_widget {
|
||||
body .et2_nextmatch .nextmatch_header div.et2_box_widget {
|
||||
display: block;
|
||||
height: 50px;
|
||||
}
|
||||
.et2_nextmatch .nextmatch_header .et2_button {
|
||||
body .et2_nextmatch .nextmatch_header .et2_button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.et2_nextmatch .egwGridView_outer thead tr {
|
||||
body .et2_nextmatch .egwGridView_outer thead tr {
|
||||
visibility: hidden;
|
||||
}
|
||||
.et2_nextmatch .search {
|
||||
body .et2_nextmatch .search {
|
||||
background: #0c5da5;
|
||||
border: 1px solid silver;
|
||||
margin-left: 60px;
|
||||
}
|
||||
.et2_nextmatch .search button {
|
||||
body .et2_nextmatch .search button {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
font-size: large;
|
||||
@ -7406,16 +7570,16 @@ span.egw_tutorial_title {
|
||||
color: white;
|
||||
background-image: none;
|
||||
}
|
||||
.et2_nextmatch .search button:active,
|
||||
.et2_nextmatch .search button:hover {
|
||||
body .et2_nextmatch .search button:active,
|
||||
body .et2_nextmatch .search button:hover {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
.et2_nextmatch .search button:focus {
|
||||
body .et2_nextmatch .search button:focus {
|
||||
color: white;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_toggle_header {
|
||||
body .et2_nextmatch .search button.nm_toggle_header {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 5px;
|
||||
@ -7427,14 +7591,14 @@ span.egw_tutorial_title {
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_toggle_header:focus {
|
||||
body .et2_nextmatch .search button.nm_toggle_header:focus {
|
||||
outline: none;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_toggle_header:after {
|
||||
body .et2_nextmatch .search button.nm_toggle_header:after {
|
||||
font-size: xx-large;
|
||||
content: "\2630";
|
||||
}
|
||||
.et2_nextmatch .search button.nm_action_header {
|
||||
body .et2_nextmatch .search button.nm_action_header {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 5px;
|
||||
@ -7446,14 +7610,14 @@ span.egw_tutorial_title {
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_action_header:focus {
|
||||
body .et2_nextmatch .search button.nm_action_header:focus {
|
||||
outline: none;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_action_header:after {
|
||||
body .et2_nextmatch .search button.nm_action_header:after {
|
||||
font-size: xx-large;
|
||||
content: "\205D";
|
||||
}
|
||||
.et2_nextmatch .search button.nm_add_button {
|
||||
body .et2_nextmatch .search button.nm_add_button {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 5px;
|
||||
@ -7468,10 +7632,10 @@ span.egw_tutorial_title {
|
||||
border: 10px solid #0c5da5;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_add_button:focus {
|
||||
body .et2_nextmatch .search button.nm_add_button:focus {
|
||||
outline: none;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_add_button:after {
|
||||
body .et2_nextmatch .search button.nm_add_button:after {
|
||||
font-size: xx-large;
|
||||
content: "+";
|
||||
display: inline-block;
|
||||
@ -7480,10 +7644,10 @@ span.egw_tutorial_title {
|
||||
color: #0c5da5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.et2_nextmatch .search button.nm_toggle_header_on:after {
|
||||
body .et2_nextmatch .search button.nm_toggle_header_on:after {
|
||||
content: "\2715";
|
||||
}
|
||||
.et2_nextmatch .search input {
|
||||
body .et2_nextmatch .search input {
|
||||
width: 20%;
|
||||
height: 50px;
|
||||
font-size: large;
|
||||
@ -7492,36 +7656,36 @@ span.egw_tutorial_title {
|
||||
background-color: #0c5da5;
|
||||
color: white;
|
||||
}
|
||||
.et2_nextmatch .search input:active {
|
||||
body .et2_nextmatch .search input:active {
|
||||
border: none;
|
||||
background: #0c5da5;
|
||||
}
|
||||
.et2_nextmatch .search input:focus {
|
||||
body .et2_nextmatch .search input:focus {
|
||||
border: none;
|
||||
backgroun: #0c5da5;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.et2_nextmatch .header_row_right {
|
||||
body .et2_nextmatch .header_row_right {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.et2_nextmatch .header_row_right div[id$=favorite_wrapper] {
|
||||
body .et2_nextmatch .header_row_right div[id$=favorite_wrapper] {
|
||||
margin: 0;
|
||||
top: 0 !important;
|
||||
height: 50px;
|
||||
}
|
||||
.et2_nextmatch .header_row_right * {
|
||||
body .et2_nextmatch .header_row_right * {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
.et2_nextmatch .header_row_right .et2_dropdown button {
|
||||
body .et2_nextmatch .header_row_right .et2_dropdown button {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.et2_nextmatch .header_count {
|
||||
body .et2_nextmatch .header_count {
|
||||
margin: 0;
|
||||
height: 50px;
|
||||
font-size: large;
|
||||
@ -7532,37 +7696,37 @@ span.egw_tutorial_title {
|
||||
border-radius: 0;
|
||||
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;
|
||||
}
|
||||
.et2_nextmatch table.egwGridView_grid tbody tr.focused {
|
||||
body .et2_nextmatch table.egwGridView_grid tbody tr.focused {
|
||||
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;
|
||||
}
|
||||
.et2_nextmatch table.egwGridView_grid tbody tr:hover {
|
||||
body .et2_nextmatch table.egwGridView_grid tbody tr:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.et2_nextmatch table.egwGridView_grid tbody tr.swipe {
|
||||
body .et2_nextmatch table.egwGridView_grid tbody tr.swipe {
|
||||
background-color: #ffc200;
|
||||
border: none;
|
||||
}
|
||||
.et2_nextmatch .egwGridView_outer thead tr th {
|
||||
body .et2_nextmatch .egwGridView_outer thead tr th {
|
||||
font-size: large;
|
||||
}
|
||||
.dtree img {
|
||||
body .dtree img {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
.dtree table,
|
||||
.dtree tr,
|
||||
.dtree td {
|
||||
body .dtree table,
|
||||
body .dtree tr,
|
||||
body .dtree td {
|
||||
padding: 2px;
|
||||
padding-left: 0;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.dtree .containerTableStyle {
|
||||
body .dtree .containerTableStyle {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,6 +37,59 @@
|
||||
|
||||
@media all {
|
||||
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;
|
||||
// iOS appHeader class
|
||||
div.egw_fw_mobile_iOS_popup_appHeader{
|
||||
@ -83,6 +136,10 @@
|
||||
tr{
|
||||
touch-action:initial;
|
||||
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;
|
||||
}
|
||||
&: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);
|
||||
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
@ -960,266 +1017,277 @@
|
||||
@mobile-button-width: 50px;
|
||||
@mobile-nm-search-bg: #0c5da5;
|
||||
@media only screen and (min-width: 320px) and (max-width: 1279px) {
|
||||
div.ui-dialog {
|
||||
width:100% !important;
|
||||
height:100% !important;
|
||||
left:0 !important;
|
||||
top:0 !important;
|
||||
}
|
||||
.et2_nextmatch {
|
||||
.nextmatch_header_row
|
||||
{
|
||||
background-color: background-color-egw-dark;
|
||||
body
|
||||
{
|
||||
div#egw_message {
|
||||
bottom: 0px;
|
||||
top: auto;
|
||||
left: 0px;
|
||||
right: 0px !important;
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
div.ui-dialog {
|
||||
width:100% !important;
|
||||
height:100% !important;
|
||||
left:0 !important;
|
||||
top:0 !important;
|
||||
}
|
||||
.et2_nextmatch {
|
||||
.nextmatch_header_row
|
||||
{
|
||||
background-color: background-color-egw-dark;
|
||||
|
||||
select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @mobile-elem-height;
|
||||
font-size: large;
|
||||
background-size: 32px;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
border-bottom: none;
|
||||
padding-left:10px;
|
||||
max-width:none;
|
||||
}
|
||||
label {
|
||||
display:block;
|
||||
width: 100%;
|
||||
float: left;
|
||||
font-size: large;
|
||||
select {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @mobile-elem-height;
|
||||
font-size: large;
|
||||
background-size: 32px;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
border-bottom: none;
|
||||
padding-left:10px;
|
||||
max-width:none;
|
||||
}
|
||||
label {
|
||||
display:block;
|
||||
width: 100%;
|
||||
float: left;
|
||||
font-size: large;
|
||||
select {
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
height: @mobile-elem-height;
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nextmatch_header.nm_header_hide {
|
||||
display:none !important;
|
||||
}
|
||||
.nextmatch_header {
|
||||
background-color: white;
|
||||
padding:0;
|
||||
display:none;
|
||||
border: 1px solid silver;
|
||||
border-top:none;
|
||||
div.et2_box_widget {
|
||||
display:block;
|
||||
height:@mobile-elem-height;
|
||||
}
|
||||
.et2_button {
|
||||
width:@mobile-button-width;
|
||||
height: @mobile-elem-height;
|
||||
}
|
||||
|
||||
}
|
||||
.egwGridView_outer {
|
||||
thead {
|
||||
tr {
|
||||
visibility:hidden;
|
||||
th{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.search {
|
||||
background: @mobile-nm-search-bg;
|
||||
border: 1px solid silver;
|
||||
margin-left: 60px;
|
||||
button {
|
||||
height: @mobile-elem-height;
|
||||
width: @mobile-button-width;
|
||||
font-size:large;
|
||||
background-color: @mobile-nm-search-bg;
|
||||
border: none;
|
||||
margin:0;
|
||||
border-right: 1px solid silver;
|
||||
color: white;
|
||||
background-image:none;
|
||||
&:active, &:hover {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
color: white;
|
||||
box-shadow:none !important;
|
||||
}
|
||||
}
|
||||
button.nm_toggle_header {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right:5px;
|
||||
border-left:1px solid silver;
|
||||
border:0;
|
||||
color: white;
|
||||
width:50px;
|
||||
height:50px;
|
||||
display:block;
|
||||
float:right;
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
&:after{
|
||||
font-size:xx-large;
|
||||
content:"\2630";
|
||||
}
|
||||
|
||||
}
|
||||
button.nm_action_header {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right:5px;
|
||||
border-left:1px solid silver;
|
||||
border:0;
|
||||
color: white;
|
||||
width:50px;
|
||||
height:50px;
|
||||
display:block;
|
||||
float:right;
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
&:after{
|
||||
font-size:xx-large;
|
||||
content:"\205D";
|
||||
}
|
||||
}
|
||||
button.nm_add_button {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right:5px;
|
||||
border-left:1px solid silver;
|
||||
border:0;
|
||||
color: white;
|
||||
width:50px;
|
||||
height:50px;
|
||||
display:block;
|
||||
float:right;
|
||||
background: white;
|
||||
border: 10px solid @mobile-nm-search-bg;
|
||||
border-radius: 50px;
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
&:after{
|
||||
font-size:xx-large;
|
||||
content:"+";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 10px;
|
||||
color:@mobile-nm-search-bg;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
button.nm_toggle_header_on {
|
||||
&:after {
|
||||
content:"\2715";
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 20%;
|
||||
height: @mobile-elem-height;
|
||||
font-size: large;
|
||||
margin:0;
|
||||
border:0;
|
||||
background-color:@mobile-nm-search-bg;
|
||||
color: white;
|
||||
&:active{
|
||||
border:none;
|
||||
background: @mobile-nm-search-bg;
|
||||
}
|
||||
&:focus {
|
||||
border:none;
|
||||
backgroun:@mobile-nm-search-bg;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_row_right {
|
||||
div[id$=favorite_wrapper] {
|
||||
margin:0;
|
||||
top:0 !important;
|
||||
height:@mobile-elem-height;
|
||||
}
|
||||
height: @mobile-elem-height;
|
||||
width: 100%;
|
||||
padding:0;
|
||||
* {
|
||||
display:inline-block;
|
||||
float:left;
|
||||
}
|
||||
.et2_dropdown {
|
||||
button {
|
||||
height:@mobile-elem-height;
|
||||
width: @mobile-button-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_count {
|
||||
margin:0;
|
||||
height:@mobile-elem-height;
|
||||
font-size: large;
|
||||
margin-top: -3px;
|
||||
margin-right: 0px;
|
||||
float:right;
|
||||
border: none;
|
||||
border-radius:0;
|
||||
border-left:1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
table.egwGridView_grid {
|
||||
tr {
|
||||
img {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr.focused
|
||||
{
|
||||
background-image: none;
|
||||
}
|
||||
tr.selected {
|
||||
background: rgba(255, 194, 0, 0.5) !important;
|
||||
}
|
||||
tr {
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
tr.swipe{
|
||||
background-color:rgba(255, 194, 0, 1);
|
||||
border:none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.egwGridView_outer {
|
||||
thead tr th {
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nextmatch_header.nm_header_hide {
|
||||
display:none !important;
|
||||
}
|
||||
.nextmatch_header {
|
||||
background-color: white;
|
||||
padding:0;
|
||||
display:none;
|
||||
border: 1px solid silver;
|
||||
border-top:none;
|
||||
div.et2_box_widget {
|
||||
display:block;
|
||||
height:@mobile-elem-height;
|
||||
|
||||
.dtree {
|
||||
img {
|
||||
width:24px !important;
|
||||
height:24px !important;
|
||||
}
|
||||
.et2_button {
|
||||
width:@mobile-button-width;
|
||||
height: @mobile-elem-height;
|
||||
table , tr, td
|
||||
{
|
||||
padding: 2px;
|
||||
padding-left: 0;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
.egwGridView_outer {
|
||||
thead {
|
||||
tr {
|
||||
visibility:hidden;
|
||||
th{
|
||||
|
||||
}
|
||||
}
|
||||
.containerTableStyle {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
background: @mobile-nm-search-bg;
|
||||
border: 1px solid silver;
|
||||
margin-left: 60px;
|
||||
button {
|
||||
height: @mobile-elem-height;
|
||||
width: @mobile-button-width;
|
||||
font-size:large;
|
||||
background-color: @mobile-nm-search-bg;
|
||||
border: none;
|
||||
margin:0;
|
||||
border-right: 1px solid silver;
|
||||
color: white;
|
||||
background-image:none;
|
||||
&:active, &:hover {
|
||||
background: transparent;
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
color: white;
|
||||
box-shadow:none !important;
|
||||
}
|
||||
}
|
||||
button.nm_toggle_header {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right:5px;
|
||||
border-left:1px solid silver;
|
||||
border:0;
|
||||
color: white;
|
||||
width:50px;
|
||||
height:50px;
|
||||
display:block;
|
||||
float:right;
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
&:after{
|
||||
font-size:xx-large;
|
||||
content:"\2630";
|
||||
}
|
||||
|
||||
}
|
||||
button.nm_action_header {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right:5px;
|
||||
border-left:1px solid silver;
|
||||
border:0;
|
||||
color: white;
|
||||
width:50px;
|
||||
height:50px;
|
||||
display:block;
|
||||
float:right;
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
&:after{
|
||||
font-size:xx-large;
|
||||
content:"\205D";
|
||||
}
|
||||
}
|
||||
button.nm_add_button {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right:5px;
|
||||
border-left:1px solid silver;
|
||||
border:0;
|
||||
color: white;
|
||||
width:50px;
|
||||
height:50px;
|
||||
display:block;
|
||||
float:right;
|
||||
background: white;
|
||||
border: 10px solid @mobile-nm-search-bg;
|
||||
border-radius: 50px;
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
&:after{
|
||||
font-size:xx-large;
|
||||
content:"+";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 10px;
|
||||
color:@mobile-nm-search-bg;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
button.nm_toggle_header_on {
|
||||
&:after {
|
||||
content:"\2715";
|
||||
}
|
||||
}
|
||||
input {
|
||||
width: 20%;
|
||||
height: @mobile-elem-height;
|
||||
font-size: large;
|
||||
margin:0;
|
||||
border:0;
|
||||
background-color:@mobile-nm-search-bg;
|
||||
color: white;
|
||||
&:active{
|
||||
border:none;
|
||||
background: @mobile-nm-search-bg;
|
||||
}
|
||||
&:focus {
|
||||
border:none;
|
||||
backgroun:@mobile-nm-search-bg;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_row_right {
|
||||
div[id$=favorite_wrapper] {
|
||||
margin:0;
|
||||
top:0 !important;
|
||||
height:@mobile-elem-height;
|
||||
}
|
||||
height: @mobile-elem-height;
|
||||
width: 100%;
|
||||
padding:0;
|
||||
* {
|
||||
display:inline-block;
|
||||
float:left;
|
||||
}
|
||||
.et2_dropdown {
|
||||
button {
|
||||
height:@mobile-elem-height;
|
||||
width: @mobile-button-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header_count {
|
||||
margin:0;
|
||||
height:@mobile-elem-height;
|
||||
font-size: large;
|
||||
margin-top: -3px;
|
||||
margin-right: 0px;
|
||||
float:right;
|
||||
border: none;
|
||||
border-radius:0;
|
||||
border-left:1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
table.egwGridView_grid {
|
||||
tr {
|
||||
img {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr.focused
|
||||
{
|
||||
background-image: none;
|
||||
}
|
||||
tr.selected {
|
||||
background: rgba(255, 194, 0, 0.5) !important;
|
||||
}
|
||||
tr {
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
tr.swipe{
|
||||
background-color:rgba(255, 194, 0, 1);
|
||||
border:none;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.egwGridView_outer {
|
||||
thead tr th {
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dtree {
|
||||
img {
|
||||
width:24px !important;
|
||||
height:24px !important;
|
||||
}
|
||||
table , tr, td
|
||||
{
|
||||
padding: 2px;
|
||||
padding-left: 0;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.containerTableStyle {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6344,6 +6344,96 @@ a.textSidebox {
|
||||
.pageGenTime > span:last-child:after {
|
||||
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
|
||||
*
|
||||
|
||||
@ -320,4 +320,96 @@ a.textSidebox
|
||||
|
||||
.pageGenTime > span:last-child:after {
|
||||
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 #############
|
||||
Loading…
Reference in New Issue
Block a user