extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 16:03:47 +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)); this.firstload_animation_gauge = _gauge ? _gauge : (this.firstload_animation_gauge == 0 ? 10 : (this.firstload_animation_gauge+5));
gauge.width(this.firstload_animation_gauge+"%"); gauge.width(this.firstload_animation_gauge+"%");
if (_gauge == 100) window.setTimeout(function(){jQuery('#egw_fw_firstload').remove();},1000);
} }
});}).call(this); });}).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() private function _get_firstload_animation_style()
{ {
return ' 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 { #egw_fw_firstload .fl_app {
opacity:0.3; opacity:0.3;
width: 50px; width: 50px;
@ -396,17 +429,19 @@ abstract class Ajax extends Api\Framework
max-width: 400px; max-width: 400px;
display: block; display: block;
background: transparent; background: transparent;
margin: 35% auto 20px; margin: 20% auto 20px;
} }
#egw_fw_firstload .fl_wrapper { #egw_fw_firstload .fl_wrapper {
margin:auto; margin:auto;
width:40%; width:80%;
} }
#egw_fw_firstload .fl_progress { #egw_fw_firstload .fl_progress {
width: 100%; width: 100%;
max-width:400px;
height: 5px; height: 5px;
border: 1px solid #b1dccc; border: 1px solid #b1dccc;
border-radius: 5px; border-radius: 5px;
margin:auto;
} }
#egw_fw_firstload .fl_progress div{ #egw_fw_firstload .fl_progress div{
width: 0%; width: 0%;
@ -433,7 +468,7 @@ abstract class Ajax extends Api\Framework
' style="background-image:url('.htmlspecialchars($app['icon']).');'. ' style="background-image:url('.htmlspecialchars($app['icon']).');'.
'background-position:center;background-size:32px;display:inline-block;margin:1px;"></div>'; '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>'; '</div><div class="fl_progress"><div></div></div></div></div>';
return $content; return $content;
} }

19
pixelegg/css/mobile.css
View File

@ -7169,25 +7169,6 @@ img.et2_button_icon[src*="svg"]:hover {
width: 100%; width: 100%;
line-height: 32px !important; 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 { body table.egwGridView_outer thead tr th {
font-size: small !important; 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 # //# Grid & NM #

5
pixelegg/head_mobile.tpl
View File

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

3
pixelegg/js/fw_mobile.js
View File

@ -478,7 +478,6 @@
//Audio effect for toggleMenu //Audio effect for toggleMenu
var audio = jQuery('#egw_fw_menuAudioTag'); var audio = jQuery('#egw_fw_menuAudioTag');
if (egw.preference('audio_effect','common') == '1') audio[0].play(); if (egw.preference('audio_effect','common') == '1') audio[0].play();
jQuery('#egw_fw_firstload').remove();
}, },
/** /**
@ -748,6 +747,7 @@
_app, _pos); _app, _pos);
_app.tab.setTitle(_app.displayName); _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'); 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() { et2_loadingFinished: function() {
this._super.apply(this, arguments); this._super.apply(this, arguments);
framework.firstload_animation('', 100); 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%; width: 100%;
line-height: 32px !important; 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 { body table.egwGridView_outer thead tr th {
font-size: small !important; font-size: small !important;
} }