mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-26 00:29:38 +01:00
Implement loading aware framework animation
This commit is contained in:
Hadi Nategh
parent
fb30713cbb
commit
fb83d97150
@ -39,6 +39,9 @@ var fw_base = (function(){ "use strict"; return Class.extend(
|
||||
this.applications = new Object();
|
||||
this.activeApp = null;
|
||||
|
||||
// keeps the firstload animation gauge in sync
|
||||
this.firstload_animation_gauge = 0;
|
||||
|
||||
this.apps = null;
|
||||
|
||||
this.tabApps = JSON.parse(egw.getSessionItem('api', 'fw_tab_apps')||null) || {};
|
||||
@ -520,6 +523,7 @@ var fw_base = (function(){ "use strict"; return Class.extend(
|
||||
if (_status == 5 && !_app.isFrameworkTab) _app.tab.hideTabHeader(true);
|
||||
|
||||
}
|
||||
if (this.activeApp && this.activeApp.appName != _app.appName) this.firstload_animation(_app.appName);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -1347,5 +1351,25 @@ var fw_base = (function(){ "use strict"; return Class.extend(
|
||||
})
|
||||
egw.setSessionItem('api', 'darkmode',state);
|
||||
egw.json('EGroupware\\Api\\Framework\\Ajax::ajax_set_darkmode_flag',[state]).sendRequest();
|
||||
},
|
||||
|
||||
/**
|
||||
* firstload animation
|
||||
* @param string _app app name
|
||||
* @param int _gauge 0 - 100
|
||||
*/
|
||||
firstload_animation: function(_app, _gauge)
|
||||
{
|
||||
if (_app)
|
||||
{
|
||||
jQuery('.fl_app.'+_app).css({
|
||||
opacity: 1
|
||||
});
|
||||
}
|
||||
let progress = jQuery('.fl_progress');
|
||||
let gauge = progress.children();
|
||||
|
||||
this.firstload_animation_gauge = _gauge ? _gauge : (this.firstload_animation_gauge == 0 ? 10 : (this.firstload_animation_gauge+5));
|
||||
gauge.width(this.firstload_animation_gauge+"%");
|
||||
}
|
||||
});}).call(this);
|
||||
|
||||
@ -165,6 +165,7 @@ var fw_browser = (function(){ "use strict"; return Class.extend(
|
||||
},5000);
|
||||
|
||||
this.loadingDeferred.always(function() {
|
||||
framework.firstload_animation(self.app.appName);
|
||||
if(self.ajaxLoaderDiv)
|
||||
{
|
||||
|
||||
|
||||
@ -841,7 +841,7 @@ abstract class Framework extends Framework\Extra
|
||||
*/
|
||||
protected static function _get_navbar_apps()
|
||||
{
|
||||
$first = key($GLOBALS['egw_info']['user']['apps']);
|
||||
$first = key((array)$GLOBALS['egw_info']['user']['apps']);
|
||||
if(is_array($GLOBALS['egw_info']['user']['apps']['admin']) && $first != 'admin')
|
||||
{
|
||||
$newarray['admin'] = $GLOBALS['egw_info']['user']['apps']['admin'];
|
||||
|
||||
@ -252,6 +252,11 @@ abstract class Ajax extends Api\Framework
|
||||
$extra['check-framework'] = $_GET['cd'] !== 'no' && $GLOBALS['egw_info']['flags']['nonavbar'] !== 'popup';
|
||||
}
|
||||
}
|
||||
|
||||
//add loader animation
|
||||
$this->tpl->set_var('firstload_animation', $this->_get_firstload_animation());
|
||||
$this->tpl->set_var('firstload_animation_style', $this->_get_firstload_animation_style());
|
||||
|
||||
// allow apps to load JavaScript or CSS files, knowing we're loading the framework or not
|
||||
Api\Hooks::process(array(
|
||||
'location' => 'framework_header',
|
||||
@ -367,6 +372,72 @@ abstract class Ajax extends Api\Framework
|
||||
$this->topmenu_items[] = '<a id="topmenu_' . $id . '" href="'.htmlspecialchars($app_data['url']).'" title="'.$app_data['title'].'">'.$title.'</a>';
|
||||
}
|
||||
|
||||
/**
|
||||
* set style for firstload animation
|
||||
* @return string
|
||||
*/
|
||||
private function _get_firstload_animation_style()
|
||||
{
|
||||
return '
|
||||
#egw_fw_firstload .fl_app {
|
||||
opacity:0.3;
|
||||
width: 50px;
|
||||
height:50px;
|
||||
background-repeat: no-repeat;
|
||||
clip-path: polygon(100% 9%, 73% 4%, 67% 3%, 63% 2%, 56% 1%, 48% 0, 41% 1%, 33% 3%, 26% 6%, 21% 9%, 16% 13%,
|
||||
11% 19%, 7% 24%, 4% 30%, 1% 38%, 0 46%, 0 53%, 1% 61%, 3% 67%, 5% 72%, 8% 77%, 12% 83%, 16% 87%, 21% 91%,
|
||||
27% 95%, 32% 97%, 39% 99%, 46% 100%, 53% 100%, 60% 99%, 67% 97%, 74% 94%, 79% 91%, 85% 86%, 90% 81%,
|
||||
94% 74%, 97% 67%, 98% 58%);
|
||||
background-color: #b0dccc;
|
||||
transition: opacity 1s cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
#egw_fw_firstload .fl_apps {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
display: block;
|
||||
background: transparent;
|
||||
margin: 35% auto 20px;
|
||||
}
|
||||
#egw_fw_firstload .fl_wrapper {
|
||||
margin:auto;
|
||||
width:40%;
|
||||
}
|
||||
#egw_fw_firstload .fl_progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
border: 1px solid #b1dccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#egw_fw_firstload .fl_progress div{
|
||||
width: 0%;
|
||||
height: 5px;
|
||||
background-color: #005d8b;
|
||||
transition: width 0.2s linear;
|
||||
}
|
||||
';
|
||||
}
|
||||
|
||||
/**
|
||||
* get firstload animation content
|
||||
* @return string
|
||||
*/
|
||||
private function _get_firstload_animation()
|
||||
{
|
||||
$content = $appsDiv = '';
|
||||
$apps = array_filter($this->navbar_apps(), static function($a){
|
||||
if (!in_array($a['name'], ['about', 'wiki', 'devtools', 'preferences'])) return $a;
|
||||
});
|
||||
foreach ($apps as $app)
|
||||
{
|
||||
$appsDiv .= '<div class="fl_app '.htmlspecialchars($app['name']).'"'.
|
||||
' 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.
|
||||
'</div><div class="fl_progress"><div></div></div></div></div>';
|
||||
return $content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add info items to the topmenu template class to be displayed
|
||||
*
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
}
|
||||
html[data-darkmode='1'] #mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
|
||||
html[data-darkmode='1'] #mail_sidebox_header {
|
||||
border-color: #5db9ec!important;
|
||||
border-color: #5db9ec !important;
|
||||
}
|
||||
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
|
||||
border-top-color: #5db9ec !important;
|
||||
@ -1515,20 +1515,20 @@ span.ui-icon-search {
|
||||
box-shadow: -2px 1px 9px 3px #B4B4B4;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
padding-left: .8em;
|
||||
padding-right: .8em;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
padding-top: 0.7em;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding-left: .8em;
|
||||
padding-right: .8em;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
font-size: 12pt;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
background: white;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
right: .8em;
|
||||
right: 0.8em;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border: 1px solid #B4B4B4;
|
||||
@ -6336,7 +6336,7 @@ a.textSidebox {
|
||||
}
|
||||
}
|
||||
.egw-loading-prompt-container::before {
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
content: "";
|
||||
background-color: #aaaaaa;
|
||||
width: 100%;
|
||||
@ -6415,7 +6415,7 @@ a.textSidebox {
|
||||
z-index: 999;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
border: solid 10px #679FD2;
|
||||
border: solid 10px #679FD2;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
/**
|
||||
@ -6782,19 +6782,6 @@ table.egwGridView_grid img.et2_appicon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#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;
|
||||
-webkit-animation: fw-firstload 2s infinite;
|
||||
animation: fw-firstload 2s infinite;
|
||||
-moz-animation: fw-firstload 2s infinite;
|
||||
}
|
||||
#egw_fw_sidebar #egw_fw_sidemenu #addressbook_sidebox_content .egw_fw_ui_category_active {
|
||||
background-color: #003366 !important;
|
||||
}
|
||||
|
||||
@ -124,7 +124,7 @@
|
||||
}
|
||||
html[data-darkmode='1'] #mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
|
||||
html[data-darkmode='1'] #mail_sidebox_header {
|
||||
border-color: #5db9ec!important;
|
||||
border-color: #5db9ec !important;
|
||||
}
|
||||
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
|
||||
border-top-color: #5db9ec !important;
|
||||
@ -1505,20 +1505,20 @@ span.ui-icon-search {
|
||||
box-shadow: -2px 1px 9px 3px #B4B4B4;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
padding-left: .8em;
|
||||
padding-right: .8em;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
padding-top: 0.7em;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding-left: .8em;
|
||||
padding-right: .8em;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
font-size: 12pt;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
background: white;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
right: .8em;
|
||||
right: 0.8em;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border: 1px solid #B4B4B4;
|
||||
@ -6326,7 +6326,7 @@ a.textSidebox {
|
||||
}
|
||||
}
|
||||
.egw-loading-prompt-container::before {
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
content: "";
|
||||
background-color: #aaaaaa;
|
||||
width: 100%;
|
||||
@ -6405,7 +6405,7 @@ a.textSidebox {
|
||||
z-index: 999;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
border: solid 10px #679FD2;
|
||||
border: solid 10px #679FD2;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
/**
|
||||
@ -6772,19 +6772,6 @@ table.egwGridView_grid img.et2_appicon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#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;
|
||||
-webkit-animation: fw-firstload 2s infinite;
|
||||
animation: fw-firstload 2s infinite;
|
||||
-moz-animation: fw-firstload 2s infinite;
|
||||
}
|
||||
#egw_fw_sidebar #egw_fw_sidemenu #addressbook_sidebox_content .egw_fw_ui_category_active {
|
||||
background-color: #003366 !important;
|
||||
}
|
||||
|
||||
@ -24,19 +24,6 @@
|
||||
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;
|
||||
-webkit-animation: fw-firstload 2s infinite;
|
||||
animation: fw-firstload 2s infinite;
|
||||
-moz-animation: fw-firstload 2s infinite;
|
||||
}
|
||||
}
|
||||
#egw_fw_sidebar {
|
||||
#egw_fw_sidemenu {
|
||||
|
||||
@ -21,6 +21,9 @@
|
||||
<style type="text/css">
|
||||
{app_css}
|
||||
</style>
|
||||
<style type="text/css">
|
||||
{firstload_animation_style}
|
||||
</style>
|
||||
{java_script}
|
||||
</head>
|
||||
<body {body_tags}>
|
||||
@ -55,5 +58,7 @@
|
||||
</div>
|
||||
<div id="egw_fw_sidebar_r"></div>
|
||||
</div>
|
||||
<div id="egw_fw_firstload"></div>
|
||||
<div id="egw_fw_firstload">
|
||||
{firstload_animation}
|
||||
</div>
|
||||
<!-- END framework -->
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
*/
|
||||
et2_loadingFinished: function() {
|
||||
this._super.apply(this, arguments);
|
||||
framework.firstload_animation('', 100);
|
||||
setTimeout(function(){jQuery('#egw_fw_firstload').remove();}, 1000);
|
||||
},
|
||||
|
||||
@ -119,8 +120,8 @@
|
||||
}
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
//Stop the loading animation after 3sec if for whatever reason it didn't end
|
||||
setTimeout(function(){jQuery('#egw_fw_firstload').remove();}, 3000);
|
||||
//Stop the loading animation after 5sec if for whatever reason it didn't end
|
||||
setTimeout(function(){jQuery('#egw_fw_firstload').remove();}, 5000);
|
||||
window.framework = new fw_pixelegg("egw_fw_sidemenu", "egw_fw_tabs",
|
||||
window.egw_webserverUrl, egw_setSideboxSize,"egw_fw_splitter", 255, 245); // should be identical to jdots_framework::(DEFAULT|MIN)_SIDEBAR_WIDTH
|
||||
window.callManual = window.framework.callManual;
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
}
|
||||
html[data-darkmode='1'] #mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
|
||||
html[data-darkmode='1'] #mail_sidebox_header {
|
||||
border-color: #5db9ec!important;
|
||||
border-color: #5db9ec !important;
|
||||
}
|
||||
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
|
||||
border-top-color: #5db9ec !important;
|
||||
@ -1526,20 +1526,20 @@ span.ui-icon-search {
|
||||
box-shadow: -2px 1px 9px 3px #B4B4B4;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
padding-left: .8em;
|
||||
padding-right: .8em;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
padding-top: 0.7em;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding-left: .8em;
|
||||
padding-right: .8em;
|
||||
padding-left: 0.8em;
|
||||
padding-right: 0.8em;
|
||||
font-size: 12pt;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
background: white;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
right: .8em;
|
||||
right: 0.8em;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border: 1px solid #B4B4B4;
|
||||
@ -6347,7 +6347,7 @@ a.textSidebox {
|
||||
}
|
||||
}
|
||||
.egw-loading-prompt-container::before {
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
content: "";
|
||||
background-color: #aaaaaa;
|
||||
width: 100%;
|
||||
@ -6426,7 +6426,7 @@ a.textSidebox {
|
||||
z-index: 999;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
border: solid 10px #679FD2;
|
||||
border: solid 10px #679FD2;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
/**
|
||||
@ -6590,19 +6590,6 @@ span.egw_tutorial_title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#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;
|
||||
-webkit-animation: fw-firstload 2s infinite;
|
||||
animation: fw-firstload 2s infinite;
|
||||
-moz-animation: fw-firstload 2s infinite;
|
||||
}
|
||||
#egw_fw_sidebar #egw_fw_sidemenu #addressbook_sidebox_content .egw_fw_ui_category_active {
|
||||
background-color: #003366 !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user