extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 23:43:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement throbber for mobile framework

Browse Source
This commit is contained in:
Hadi Nategh 2021-04-22 16:00:52 +02:00
parent 8ec1e46ea4
commit a49ac9648e
8 changed files with 45 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
api/js/framework/fw_base.js
View File

@ -1377,5 +1377,6 @@ var fw_base = (function(){ "use strict"; return Class.extend(
this.firstload_animation_gauge = _gauge ? _gauge : (this.firstload_animation_gauge == 0 ? 10 : (this.firstload_animation_gauge+5));
gauge.width(this.firstload_animation_gauge+"%");
if (_gauge == 100) window.setTimeout(function(){jQuery('#egw_fw_firstload').remove();},1000);
}
});}).call(this);

41
api/src/Framework/Ajax.php
View File

@ -379,6 +379,39 @@ abstract class Ajax extends Api\Framework
private function _get_firstload_animation_style()
{
return '
@keyframes anim {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(-20deg);
transform: perspective(400px) rotateX(-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
60% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
opacity: 1
}
80% {
-webkit-transform: perspective(400px) rotateX(-5deg);
transform: perspective(400px) rotateX(-5deg)
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px)
}
}
#egw_fw_firstload .fl_app {
opacity:0.3;
width: 50px;
@ -396,17 +429,19 @@ abstract class Ajax extends Api\Framework
max-width: 400px;
display: block;
background: transparent;
margin: 35% auto 20px;
margin: 20% auto 20px;
}
#egw_fw_firstload .fl_wrapper {
margin:auto;
width:40%;
width:80%;
}
#egw_fw_firstload .fl_progress {
width: 100%;
max-width:400px;
height: 5px;
border: 1px solid #b1dccc;
border-radius: 5px;
margin:auto;
}
#egw_fw_firstload .fl_progress div{
width: 0%;
@ -433,7 +468,7 @@ abstract class Ajax extends Api\Framework
' style="background-image:url('.htmlspecialchars($app['icon']).');'.
'background-position:center;background-size:32px;display:inline-block;margin:1px;"></div>';
}
$content .= '<div class="fl_wrapper" style="margin:auto;width:40%;"><div class="fl_apps">'.$appsDiv.
$content .= '<div class="fl_wrapper" style="margin:auto;"><div class="fl_apps">'.$appsDiv.
'</div><div class="fl_progress"><div></div></div></div></div>';
return $content;
}

19
pixelegg/css/mobile.css
View File

@ -7169,25 +7169,6 @@ img.et2_button_icon[src*="svg"]:hover {
width: 100%;
line-height: 32px !important;
}
body #egw_fw_firstload {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: white;
height: 100%;
width: 100%;
}
body #egw_fw_firstload:before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
background-image: url(../../pixelegg/images/loading.svg);
background-position: center;
background-repeat: no-repeat;
}
body table.egwGridView_outer thead tr th {
font-size: small !important;
}

20
pixelegg/css/mobile.less
View File

@ -50,26 +50,6 @@
}
#egw_fw_firstload {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: white;
height: 100%;
width: 100%;
&:before{
content:"";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
background-image: url(../../pixelegg/images/loading.svg);
background-position: center;
background-repeat: no-repeat;
}
}
//###################
//# #
//# Grid & NM #

5
pixelegg/head_mobile.tpl
View File

@ -23,6 +23,9 @@
<style type="text/css">
{app_css}
</style>
<style type="text/css">
{firstload_animation_style}
</style>
{java_script}
</head>
<body {body_tags}>
@ -66,6 +69,6 @@
</div>
</div>
</div>
<div id="egw_fw_firstload"></div>
<div id="egw_fw_firstload">{firstload_animation}</div>
<div id="egw_fw_footer">{powered_by}</div>
<!-- END framework -->

3
pixelegg/js/fw_mobile.js
View File

@ -478,7 +478,6 @@
//Audio effect for toggleMenu
var audio = jQuery('#egw_fw_menuAudioTag');
if (egw.preference('audio_effect','common') == '1') audio[0].play();
jQuery('#egw_fw_firstload').remove();
},
/**
@ -748,6 +747,7 @@
_app, _pos);
_app.tab.setTitle(_app.displayName);
}
if (this.activeApp && this.activeApp.appName != _app.appName) this.firstload_animation(_app.appName);
},
/**
@ -944,6 +944,7 @@
window.framework.popups[i].$iFrame.trigger('onpopupload');
}
}
framework.firstload_animation('', 100);
},
/**

1
pixelegg/js/fw_pixelegg.js
View File

@ -71,7 +71,6 @@
et2_loadingFinished: function() {
this._super.apply(this, arguments);
framework.firstload_animation('', 100);
setTimeout(function(){jQuery('#egw_fw_firstload').remove();}, 1000);
},
/**

19
pixelegg/mobile/fw_mobile.css
View File

@ -6977,25 +6977,6 @@ img.et2_button_icon[src*="svg"]:hover {
width: 100%;
line-height: 32px !important;
}
body #egw_fw_firstload {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: white;
height: 100%;
width: 100%;
}
body #egw_fw_firstload:before {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
background-image: url(../../pixelegg/images/loading.svg);
background-position: center;
background-repeat: no-repeat;
}
body table.egwGridView_outer thead tr th {
font-size: small !important;
}