web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add spinner while loading preview

Browse Source
This commit is contained in:
yflory 2020-03-31 17:03:16 +02:00
parent 6a10ec711a
commit d8d515a450
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
customize.dist/src/less2/include/modals-ui-elements.less
View File

@ -114,7 +114,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.cp-mediatag-container { .cp-mediatag-container {
height: 100%;
width: 100%; width: 100%;
media-tag { media-tag {
& > * { & > * {
@ -132,6 +131,10 @@
color: @cryptpad_text_col; color: @cryptpad_text_col;
} }
} }
.cp-spinner {
border-color: @colortheme_logo-1;
border-top-color: transparent;
}
} }
} }
} }

10
www/common/inner/common-mediatag.js
View File

@ -237,21 +237,27 @@ define([
}).show().focus(); }).show().focus();
var $container = $modal.find('.cp-modal').append(h('div.cp-mediatag-container', [ var $container = $modal.find('.cp-modal').append(h('div.cp-mediatag-container', [
h('div.cp-loading-spinner-container', h('span.cp-spinner')),
tag tag
])); ]));
var el; var el;
var checkSize = function () { var checkSize = function () {
if (!el) { return; } if (!el) { return; }
$container.find('.cp-mediatag-container').css('height', '');
var size = el.naturalHeight || el.videoHeight; var size = el.naturalHeight || el.videoHeight;
if (el.nodeName !== 'IMG' && el.nodeName !== 'VIDEO') {
$container.find('.cp-mediatag-container').css('height', '100%');
}
if (!size) { return; }
// Center small images and videos // Center small images and videos
if (size && size < $container.height()) { $container.find('.cp-mediatag-container').css('height', '100%');
if (size < $container.height()) {
$container.find('.cp-mediatag-container').css('height', 'auto'); $container.find('.cp-mediatag-container').css('height', 'auto');
} }
}; };
var observer = new MutationObserver(function(mutations) { var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function(mutation) {
$container.find('.cp-loading-spinner-container').remove();
if (mutation.addedNodes.length === 1) { if (mutation.addedNodes.length === 1) {
el = mutation.addedNodes[0]; el = mutation.addedNodes[0];
if (el.readyState === 0) { if (el.readyState === 0) {