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

Improve scrollbars and modal size

Browse Source
This commit is contained in:
yflory 2020-04-06 11:42:47 +02:00
parent 18a4d2a72c
commit 35394476a6
10 changed files with 73 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
customize.dist/src/less2/include/markdown.less
View File

@ -90,6 +90,11 @@
border: 1px solid #BBB; border: 1px solid #BBB;
} }
pre.mermaid {
svg {
max-width: 100%;
}
}
} }
.markdown_preformatted-code (@color: #333) { .markdown_preformatted-code (@color: #333) {

11
customize.dist/src/less2/include/modal.less
View File

@ -24,6 +24,9 @@
.cp-modal-container { .cp-modal-container {
display: none; display: none;
align-items: center;
justify-content: center;
z-index: 100000; //Z modal container z-index: 100000; //Z modal container
position: absolute; position: absolute;
top: 0; top: 0;
@ -39,9 +42,11 @@
padding: @variables_padding; padding: @variables_padding;
position: absolute; position: relative;
top: 15vh; bottom: 15vh; //top: 15vh; bottom: 15vh;
left: 10vw; right: 10vw; //left: 10vw; right: 10vw;
width: 90vw;
max-height: 95vh;
overflow: auto; overflow: auto;

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

@ -111,20 +111,24 @@
#cp-mediatag-preview-modal { #cp-mediatag-preview-modal {
.cp-modal { .cp-modal {
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
.cp-mediatag-container { .cp-mediatag-container {
width: 100%; width: 100%;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: auto;
media-tag { media-tag {
& > * { & > * {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
video, iframe {
margin-bottom: -5px;
}
& > iframe { & > iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 75vh;
} }
& > .plain-text-reader { & > .plain-text-reader {
white-space: pre-wrap; white-space: pre-wrap;
@ -134,22 +138,26 @@
padding: 5px; padding: 5px;
} }
} }
pre.mermaid {
overflow: unset;
}
.cp-spinner { .cp-spinner {
border-color: @colortheme_logo-1; border-color: @colortheme_logo-1;
border-top-color: transparent; border-top-color: transparent;
} }
} }
.cp-mediatag-control {
align-self: center;
.fa {
margin: 10px;
cursor: pointer;
}
}
.cp-mediatag-outer { .cp-mediatag-outer {
display: flex; display: flex;
height: 100%; height: 100%;
width: 100%; width: 100%;
align-items: center; align-items: center;
.cp-mediatag-control {
.fa {
margin: 10px;
cursor: pointer;
}
}
} }
} }
} }

9
www/common/common-interface.js
View File

@ -473,6 +473,7 @@ define([
var hide = function () { var hide = function () {
if (cfg.onClose) { return void cfg.onClose(); } if (cfg.onClose) { return void cfg.onClose(); }
$blockContainer.hide(); $blockContainer.hide();
if (cfg.onClosed) { cfg.onClosed(); }
}; };
$blockContainer.html('').appendTo($body); $blockContainer.html('').appendTo($body);
var $block = $(h('div.cp-modal')).appendTo($blockContainer); var $block = $(h('div.cp-modal')).appendTo($blockContainer);
@ -488,7 +489,13 @@ define([
hide(); hide();
} }
}); });
return $blockContainer; return {
$modal: $blockContainer,
show: function () {
$blockContainer.css('display', 'flex');
},
hide: hide
};
}; };
UI.alert = function (msg, cb, opt) { UI.alert = function (msg, cb, opt) {

5
www/common/common-ui-elements.js
View File

@ -2545,10 +2545,11 @@ define([
return void $(".cp-app-drive-element-row.cp-app-drive-new-ghost").click(); return void $(".cp-app-drive-element-row.cp-app-drive-new-ghost").click();
} }
var $modal = UI.createModal({ var modal = UI.createModal({
id: 'cp-app-toolbar-creation-dialog', id: 'cp-app-toolbar-creation-dialog',
$body: $('body') $body: $('body')
}); });
var $modal = modal.$modal;
var $title = $('<h3>').text(Messages.fm_newFile); var $title = $('<h3>').text(Messages.fm_newFile);
var $description = $('<p>').html(Messages.creation_newPadModalDescription); var $description = $('<p>').html(Messages.creation_newPadModalDescription);
$modal.find('.cp-modal').append($title); $modal.find('.cp-modal').append($title);
@ -2634,7 +2635,7 @@ define([
$modal.find('.cp-modal').append($container).append($advancedContainer); $modal.find('.cp-modal').append($container).append($advancedContainer);
window.setTimeout(function () { window.setTimeout(function () {
$modal.show(); modal.show();
$modal.focus(); $modal.focus();
}); });
}; };

21
www/common/diffMarked.js
View File

@ -351,6 +351,7 @@ define([
var onPreview = function ($mt) { var onPreview = function ($mt) {
return function () { return function () {
var isSvg = $mt.is('pre.mermaid');
var mts = []; var mts = [];
$content.find('media-tag, pre.mermaid').each(function (i, el) { $content.find('media-tag, pre.mermaid').each(function (i, el) {
if (el.nodeName.toLowerCase() === "pre") { if (el.nodeName.toLowerCase() === "pre") {
@ -368,16 +369,26 @@ define([
// Find initial position // Find initial position
var idx = -1; var idx = -1;
mts.some(function (obj, i) { mts.some(function (obj, i) {
if (obj.src === $mt.attr('src')) { if (isSvg && $mt.find('svg').attr('id') === $(obj.svg).find('svg').attr('id')) {
idx = i;
return true;
}
if (!isSvg && obj.src === $mt.attr('src')) {
idx = i; idx = i;
return true; return true;
} }
}); });
if (idx === -1) { if (idx === -1) {
mts.unshift({ if (isSvg) {
src: $mt.attr('src'), mts.unshift({
key: $mt.attr('data-crypto-key') svg: $mt[0].cloneNode(true)
}); });
} else {
mts.unshift({
src: $mt.attr('src'),
key: $mt.attr('data-crypto-key')
});
}
idx = 0; idx = 0;
} }

5
www/common/drive-ui.js
View File

@ -2946,17 +2946,18 @@ define([
$element.append($('<span>', {'class': 'cp-app-drive-element-name'}) $element.append($('<span>', {'class': 'cp-app-drive-element-name'})
.text(Messages.fm_newFile)); .text(Messages.fm_newFile));
$element.click(function () { $element.click(function () {
var $modal = UI.createModal({ var modal = UI.createModal({
id: 'cp-app-drive-new-ghost-dialog', id: 'cp-app-drive-new-ghost-dialog',
$body: $('body') $body: $('body')
}); });
var $modal = modal.$modal;
var $title = $('<h3>').text(Messages.fm_newFile); var $title = $('<h3>').text(Messages.fm_newFile);
var $description = $('<p>').text(Messages.fm_newButtonTitle); var $description = $('<p>').text(Messages.fm_newButtonTitle);
$modal.find('.cp-modal').append($title); $modal.find('.cp-modal').append($title);
$modal.find('.cp-modal').append($description); $modal.find('.cp-modal').append($description);
var $content = createNewPadIcons($modal, isInRoot); var $content = createNewPadIcons($modal, isInRoot);
$modal.find('.cp-modal').append($content); $modal.find('.cp-modal').append($content);
window.setTimeout(function () { $modal.show(); }); window.setTimeout(function () { modal.show(); });
addNewPadHandlers($modal, isInRoot); addNewPadHandlers($modal, isInRoot);
}); });
}; };

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

@ -216,52 +216,24 @@ define([
var priv = metadataMgr.getPrivateData(); var priv = metadataMgr.getPrivateData();
var left, right; var left, right;
var checkSize = function () {};
var $modal = UI.createModal({ var modal = UI.createModal({
id: 'cp-mediatag-preview-modal', id: 'cp-mediatag-preview-modal',
onClose: function () {
$(window).off('resize', checkSize);
},
$body: $('body') $body: $('body')
}).show().focus(); });
var $container = $modal.find('.cp-modal').append(h('div.cp-mediatag-outer', [ modal.show();
var $modal = modal.$modal.focus();
var $container = $modal.find('.cp-modal').append([
h('div.cp-mediatag-control', left = h('span.fa.fa-chevron-left')), h('div.cp-mediatag-control', left = h('span.fa.fa-chevron-left')),
h('div.cp-mediatag-container', [ h('div.cp-mediatag-container', [
h('div.cp-loading-spinner-container', h('span.cp-spinner')), h('div.cp-loading-spinner-container', h('span.cp-spinner')),
]), ]),
h('div.cp-mediatag-control', right = h('span.fa.fa-chevron-right')), h('div.cp-mediatag-control', right = h('span.fa.fa-chevron-right')),
])); ]);
var $left = $(left); var $left = $(left);
var $right = $(right); var $right = $(right);
var $inner = $container.find('.cp-mediatag-container'); var $inner = $container.find('.cp-mediatag-container');
var el;
checkSize = function () {
if (!el) { return; }
if (el.nodeName === 'BUTTON') {
return $container.find('.cp-mediatag-container').css('height', 'auto');
}
var size = el.naturalHeight || el.videoHeight;
if ($(el).find('svg').length) {
var h = $(el).find('svg').prop('height');
size = Number(h) || (h.baseVal && h.baseVal.value);
}
if (el.nodeName !== 'IMG' && el.nodeName !== 'VIDEO') {
$container.find('.cp-mediatag-container').css('height', '100%');
}
if (!size) { return; }
// Center small images and videos
$container.find('.cp-mediatag-container').css('height', '100%');
if (size < $container.height()) {
$container.find('.cp-mediatag-container').css('height', 'auto');
}
};
$(window).on('resize', checkSize);
var $spinner = $container.find('.cp-loading-spinner-container'); var $spinner = $container.find('.cp-loading-spinner-container');
var locked = false; var locked = false;
@ -292,8 +264,6 @@ define([
if (cfg.svg) { if (cfg.svg) {
$spinner.hide(); $spinner.hide();
$inner.append(cfg.svg); $inner.append(cfg.svg);
el = cfg.svg;
checkSize();
locked = false; locked = false;
return; return;
} }
@ -321,24 +291,9 @@ define([
$inner.append(tag); $inner.append(tag);
var observer = new MutationObserver(function(mutations) { var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function() {
locked = false; locked = false;
$spinner.hide(); $spinner.hide();
if (mutation.addedNodes.length === 1) {
el = mutation.addedNodes[0];
if (el.readyState === 0) {
// Wait for the video to be ready before checking the size
el.onloadedmetadata = checkSize;
return;
}
if (el.complete === false) {
el.onload = checkSize;
return;
}
setTimeout(function () {
checkSize();
});
}
}); });
}); });
observer.observe(tag, { observer.observe(tag, {

6
www/filepicker/inner.js
View File

@ -81,11 +81,13 @@ define([
var createFileDialog = function () { var createFileDialog = function () {
var types = filters.types || []; var types = filters.types || [];
// Create modal // Create modal
var $blockContainer = UI.createModal({ var modal = UI.createModal({
id: 'cp-filepicker-dialog', id: 'cp-filepicker-dialog',
$body: $body, $body: $body,
onClose: hideFileDialog onClose: hideFileDialog
}).show(); });
modal.show();
var $blockContainer = modal.$modal;
// Set the fixed content // Set the fixed content
var $block = $blockContainer.find('.cp-modal'); var $block = $blockContainer.find('.cp-modal');

6
www/teams/inner.js
View File

@ -535,9 +535,11 @@ define([
}; };
var makePermissions = function () { var makePermissions = function () {
var $blockContainer = UI.createModal({ var modal= UI.createModal({
id: 'cp-teams-roster-dialog', id: 'cp-teams-roster-dialog',
}).show(); });
modal.show();
var $blockContainer = modal.$modal;
var makeRow = function (arr, first) { var makeRow = function (arr, first) {
return arr.map(function (val) { return arr.map(function (val) {