infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Improve scrollbars and modal size

pull/1/head
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;
}
pre.mermaid {
svg {
max-width: 100%;
}
}
}
.markdown_preformatted-code (@color: #333) {

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

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

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

@ -111,20 +111,24 @@
#cp-mediatag-preview-modal {
.cp-modal {
display: flex;
align-items: center;
justify-content: center;
.cp-mediatag-container {
width: 100%;
flex: 1;
min-width: 0;
overflow: auto;
media-tag {
& > * {
max-width: 100%;
max-height: 100%;
}
video, iframe {
margin-bottom: -5px;
}
& > iframe {
width: 100%;
height: 100%;
min-height: 75vh;
}
& > .plain-text-reader {
white-space: pre-wrap;
@ -134,22 +138,26 @@
padding: 5px;
}
}
pre.mermaid {
overflow: unset;
}
.cp-spinner {
border-color: @colortheme_logo-1;
border-top-color: transparent;
}
}
.cp-mediatag-control {
align-self: center;
.fa {
margin: 10px;
cursor: pointer;
}
}
.cp-mediatag-outer {
display: flex;
height: 100%;
width: 100%;
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 () {
if (cfg.onClose) { return void cfg.onClose(); }
$blockContainer.hide();
if (cfg.onClosed) { cfg.onClosed(); }
};
$blockContainer.html('').appendTo($body);
var $block = $(h('div.cp-modal')).appendTo($blockContainer);
@ -488,7 +489,13 @@ define([
hide();
}
});
return $blockContainer;
return {
$modal: $blockContainer,
show: function () {
$blockContainer.css('display', 'flex');
},
hide: hide
};
};
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();
}
var $modal = UI.createModal({
var modal = UI.createModal({
id: 'cp-app-toolbar-creation-dialog',
$body: $('body')
});
var $modal = modal.$modal;
var $title = $('<h3>').text(Messages.fm_newFile);
var $description = $('<p>').html(Messages.creation_newPadModalDescription);
$modal.find('.cp-modal').append($title);
@ -2634,7 +2635,7 @@ define([
$modal.find('.cp-modal').append($container).append($advancedContainer);
window.setTimeout(function () {
$modal.show();
modal.show();
$modal.focus();
});
};

21
www/common/diffMarked.js
View File

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

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

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

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

@ -216,52 +216,24 @@ define([
var priv = metadataMgr.getPrivateData();
var left, right;
var checkSize = function () {};
var $modal = UI.createModal({
var modal = UI.createModal({
id: 'cp-mediatag-preview-modal',
onClose: function () {
$(window).off('resize', checkSize);
},
$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-container', [
h('div.cp-loading-spinner-container', h('span.cp-spinner')),
]),
h('div.cp-mediatag-control', right = h('span.fa.fa-chevron-right')),
]));
]);
var $left = $(left);
var $right = $(right);
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 locked = false;
@ -292,8 +264,6 @@ define([
if (cfg.svg) {
$spinner.hide();
$inner.append(cfg.svg);
el = cfg.svg;
checkSize();
locked = false;
return;
}
@ -321,24 +291,9 @@ define([
$inner.append(tag);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutations.forEach(function() {
locked = false;
$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, {

6
www/filepicker/inner.js
View File

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

6
www/teams/inner.js
View File

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