better loading feedback for app start, move from JS to CSS

This commit is contained in:
Jan-Christoph Borchardt 2014-06-04 15:07:15 +02:00
parent 96cfe97dae
commit 26bf64631d
3 changed files with 25 additions and 2 deletions

View File

@ -26,7 +26,9 @@
display: inline-block;
position: absolute;
left: 70px;
top: 18px;
height: 27px;
padding-top: 18px;
padding-right: 10px;
}
/* show appname next to logo */
@ -89,6 +91,7 @@
display: inline-block;
}
#navigation a {
position: relative;
width: 80px;
height: 80px;
display: inline-block;
@ -118,6 +121,25 @@
height: initial;
}
/* loading feedback for apps */
#navigation .app-loading .icon-loading-dark {
display: inline !important;
position: absolute;
top: 20px;
left: 24px;
width: 32px;
height: 32px;
background-color: rgba(0, 0, 0, .2);
border-radius: 50%;
}
#navigation .app-loading .icon {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: .2;
}
/* shift to account for missing navigation */
#body-user #controls,
#body-settings #controls {

View File

@ -1126,7 +1126,7 @@ function initCore() {
if(!$app.is('a')) {
$app = $app.closest('a');
}
$app.find('img').attr('src', OC.imagePath('core','loading-dark.gif'));
$app.addClass('app-loading');
});
}

View File

@ -99,6 +99,7 @@
<a href="<?php print_unescaped($entry['href']); ?>" title=""
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
<img class="icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
<div class="icon-loading-dark" style="display:none;"></div>
<span>
<?php p($entry['name']); ?>
</span>