diff --git a/phpgwapi/js/framework/fw_browser.js b/phpgwapi/js/framework/fw_browser.js index 3b1511b580..0de839edaf 100644 --- a/phpgwapi/js/framework/fw_browser.js +++ b/phpgwapi/js/framework/fw_browser.js @@ -153,7 +153,7 @@ var fw_browser = Class.extend({ // Show loader div, start blocking var self = this; - this.ajaxLoaderDiv = jQuery('
'+egw.lang('please wait...')+'
').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); } diff --git a/phpgwapi/js/jsapi/egw_message.js b/phpgwapi/js/jsapi/egw_message.js index 1f42d027c8..a1ebf29e9a 100644 --- a/phpgwapi/js/jsapi/egw_message.js +++ b/phpgwapi/js/jsapi/egw_message.js @@ -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; } diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index c7a256b1d7..f6767fd171 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -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; } } diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 63074bca08..2745fcc183 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -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; - } } } \ No newline at end of file diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 4fba3ec840..a0a361f4d1 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -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 * diff --git a/pixelegg/less/layout_traditional.less b/pixelegg/less/layout_traditional.less index 200c39d81e..6f464dec85 100755 --- a/pixelegg/less/layout_traditional.less +++ b/pixelegg/less/layout_traditional.less @@ -320,4 +320,96 @@ a.textSidebox .pageGenTime > span:last-child:after { content: ""; - } \ No newline at end of file + } + +// ############################################################ +// # 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 ############# \ No newline at end of file