diff options
| author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2014-06-04 15:07:15 +0200 |
|---|---|---|
| committer | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2014-06-04 15:07:15 +0200 |
| commit | 26bf64631d7335093a8e9780e97e8187e76bb14f (patch) | |
| tree | 42cd97f7c48bbaccc5d461ba05657df026d80717 | |
| parent | 96cfe97daeab3d2069a97bcc476583993515898f (diff) | |
| download | nextcloud-server-26bf64631d7335093a8e9780e97e8187e76bb14f.tar.gz nextcloud-server-26bf64631d7335093a8e9780e97e8187e76bb14f.zip | |
better loading feedback for app start, move from JS to CSS
| -rw-r--r-- | core/css/header.css | 24 | ||||
| -rw-r--r-- | core/js/js.js | 2 | ||||
| -rw-r--r-- | core/templates/layout.user.php | 1 |
3 files changed, 25 insertions, 2 deletions
diff --git a/core/css/header.css b/core/css/header.css index 5225dbd446c..0fe20325d8f 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -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 { diff --git a/core/js/js.js b/core/js/js.js index 795ba788274..b3cefa83bee 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -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'); }); } diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 49d57bcc3f6..059491abac2 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -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> |