From 35394476a6b05d652fb3f6e0ee8b4b7c4bee4c2e Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 6 Apr 2020 11:42:47 +0200 Subject: [PATCH] Improve scrollbars and modal size --- .../src/less2/include/markdown.less | 5 ++ customize.dist/src/less2/include/modal.less | 11 +++- .../src/less2/include/modals-ui-elements.less | 22 ++++--- www/common/common-interface.js | 9 ++- www/common/common-ui-elements.js | 5 +- www/common/diffMarked.js | 21 +++++-- www/common/drive-ui.js | 5 +- www/common/inner/common-mediatag.js | 59 +++---------------- www/filepicker/inner.js | 6 +- www/teams/inner.js | 6 +- 10 files changed, 73 insertions(+), 76 deletions(-) diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 631fe8f12..867dbacc9 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -90,6 +90,11 @@ border: 1px solid #BBB; } + pre.mermaid { + svg { + max-width: 100%; + } + } } .markdown_preformatted-code (@color: #333) { diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index 044763c59..635a65b71 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -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; diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index a5869aa6a..24906d576 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -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; - } - } } } } diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 5a7cf8754..4c4518434 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -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) { diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index d73b91692..aae6b09b9 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -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 = $('

').text(Messages.fm_newFile); var $description = $('

').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(); }); }; diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js index ccf240685..c385a606c 100644 --- a/www/common/diffMarked.js +++ b/www/common/diffMarked.js @@ -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; } diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 7c76d3255..899405fa1 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -2946,17 +2946,18 @@ define([ $element.append($('', {'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 = $('

').text(Messages.fm_newFile); var $description = $('

').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); }); }; diff --git a/www/common/inner/common-mediatag.js b/www/common/inner/common-mediatag.js index a4145c6f9..001bae062 100644 --- a/www/common/inner/common-mediatag.js +++ b/www/common/inner/common-mediatag.js @@ -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, { diff --git a/www/filepicker/inner.js b/www/filepicker/inner.js index 2eb9b4120..205a0b8db 100644 --- a/www/filepicker/inner.js +++ b/www/filepicker/inner.js @@ -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'); diff --git a/www/teams/inner.js b/www/teams/inner.js index ae67c6f6e..af011167d 100644 --- a/www/teams/inner.js +++ b/www/teams/inner.js @@ -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) {