diff options
| author | ryoh <ryoh@chromium.org> | 2016-03-14 21:51:36 -0700 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2016-03-15 04:52:55 +0000 |
| commit | c5ede89bfac494ed9c7f7f0aad554507ea1efa63 (patch) | |
| tree | 2be7c6b770d791f4689e36c8e05bfb8b5afb04b9 | |
| parent | 62135c58ea7f78ea8446ad412a5b34c4821542a8 (diff) | |
| download | chromium_src-c5ede89bfac494ed9c7f7f0aad554507ea1efa63.zip chromium_src-c5ede89bfac494ed9c7f7f0aad554507ea1efa63.tar.gz chromium_src-c5ede89bfac494ed9c7f7f0aad554507ea1efa63.tar.bz2 | |
Gallery: add loading indicator for thumbnails.
BUG=591293
Review URL: https://codereview.chromium.org/1787433003
Cr-Commit-Position: refs/heads/master@{#381177}
| -rw-r--r-- | ui/file_manager/gallery/css/gallery.css | 19 | ||||
| -rw-r--r-- | ui/file_manager/gallery/js/ribbon.js | 7 |
2 files changed, 24 insertions, 2 deletions
diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css index e9267f0..5ccdbec 100644 --- a/ui/file_manager/gallery/css/gallery.css +++ b/ui/file_manager/gallery/css/gallery.css @@ -442,7 +442,7 @@ files-toggle-ripple::shadow .ripple.activated { .gallery .image-wrapper { height: 100%; overflow: hidden; - position: relative; + position: absolute; width: 100%; } @@ -463,6 +463,23 @@ files-toggle-ripple::shadow .ripple.activated { } } +.gallery .ribbon-image > .indicator { + -webkit-transition: opacity 500ms ease-in; + background-image: -webkit-image-set( + url(../images/100/slide_view.png) 1x, + url(../images/200/slide_view.png) 2x); + background-position: center; + background-repeat: no-repeat; + height: 100%; + opacity: 0; + position: absolute; + width: 100%; +} + +.gallery .ribbon-image > .indicator.loading { + opacity: 0.2; +} + .gallery .ribbon-image[selected] > .selection-frame { border: 2px solid rgb(27, 168, 243); box-sizing: border-box; diff --git a/ui/file_manager/gallery/js/ribbon.js b/ui/file_manager/gallery/js/ribbon.js index b55c317..c86c037 100644 --- a/ui/file_manager/gallery/js/ribbon.js +++ b/ui/file_manager/gallery/js/ribbon.js @@ -436,6 +436,7 @@ Ribbon.prototype.renderThumbnail_ = function(index) { this.selectionModel_.setIndexSelected(index, true); }.bind(this)); + util.createChild(thumbnail, 'indicator loading'); util.createChild(thumbnail, 'image-wrapper'); util.createChild(thumbnail, 'selection-frame'); @@ -461,6 +462,10 @@ Ribbon.prototype.setThumbnailImage_ = function(thumbnail, item) { if (!item.getThumbnailMetadataItem()) return; + var hideIndicator = function() { + thumbnail.querySelector('.indicator').classList.toggle('loading', false); + }; + this.thumbnailModel_.get([item.getEntry()]).then(function(metadataList) { var loader = new ThumbnailLoader( item.getEntry(), @@ -473,7 +478,7 @@ Ribbon.prototype.setThumbnailImage_ = function(thumbnail, item) { thumbnail.querySelector('.image-wrapper'), ThumbnailLoader.FillMode.AUTO, ThumbnailLoader.OptimizationMode.NEVER_DISCARD, - undefined /* opt_onSuccess */, + hideIndicator /* opt_onSuccess */, undefined /* opt_onError */, undefined /* opt_onGeneric */, 0.35 /* opt_autoFillThreshold */, |