From e5279841af37df22f04fe0d8f1a0133b6703b02f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20K=C5=82os?= Date: Sat, 30 Sep 2023 15:02:24 +0200 Subject: [PATCH] jsdialog: use minial size of a dialog needed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use 'position: absolute' in jsdialog-window and jsdialog-container so we don't stretch the dialog. It will use minimal needed size. Signed-off-by: Szymon Kłos Change-Id: I7b38b9200e190cfc184bf4bfe8b7bd814c60d5a6 --- browser/css/btns.css | 1 + browser/css/jsdialogs.css | 35 ++++++++++++++----- browser/src/control/Control.JSDialog.js | 33 +++++++++-------- .../desktop/impress/sidebar_spec.js | 4 +-- 4 files changed, 49 insertions(+), 24 deletions(-) diff --git a/browser/css/btns.css b/browser/css/btns.css index e4e9c0749b56..937227045d5a 100644 --- a/browser/css/btns.css +++ b/browser/css/btns.css @@ -53,6 +53,7 @@ button:not(.ui-corner-all):not(.button-primary):not(.form-field-button) { border-radius: var(--border-radius); margin: 5px; vertical-align: middle; + width: max-content; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons { diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css index 88df41e744a4..3e2add739a8f 100644 --- a/browser/css/jsdialogs.css +++ b/browser/css/jsdialogs.css @@ -17,21 +17,30 @@ background: transparent; } -.lokdialog_container.ui-dialog.ui-widget-content.modalpopup { +.lokdialog_container.ui-dialog.ui-widget-content.modalpopup, +.jsdialog-window.modalpopup { z-index: 2001; } -.jsdialog-container { +.jsdialog-window { position: absolute; z-index: 1105; } +.jsdialog-container { + position: absolute; +} + +.jsdialog-window:not(.modalpopup) .jsdialog-container:not(.snackbar) { + min-width: 400px; +} + .jsdialog.one-child-popup { border: 0; margin: 0 !important; } -.jsdialog-container.modalpopup { +.jsdialog-window.modalpopup { min-width: 198px; max-width: 498px; border: 1px solid #a4a4a4 !important; @@ -39,6 +48,10 @@ box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 2px 0 rgba(0, 0, 0, 0.1); } +.jsdialog-window.modalpopup .jsdialog-container { + position: relative; +} + .jsdialog-container .ui-dialog-titlebar { background-color: var(--color-background-lighter); } @@ -49,6 +62,10 @@ line-height: 1.5; } +.jsdialog-container .lokdialog.ui-dialog-content.ui-widget-content { + overflow: hidden; +} + .jsdialog.vertical p, .ui-frame-label { margin: auto 0px; color: var(--color-main-text); @@ -182,10 +199,7 @@ td.jsdialog > [id^='table-box']:not(.sidebar) { border-radius: var(--border-radius); background-color: var(--color-main-background); margin-inline-end: 12px; -} - -.ui-tab.jsdialog:first-child { - margin-inline-start: 12px; + margin-bottom: 6px; } .ui-tab.hidden.jsdialog { @@ -1117,12 +1131,17 @@ input[type='number']:hover::-webkit-outer-spin-button { #snackbar { border: none !important; } +.snackbar.jsdialog-window { + overflow: visible; +} #mobile-wizard.popup.snackbar, .snackbar.jsdialog-container .ui-dialog-content { min-width: 200px; background-color: #323232 !important; } - +.snackbar.jsdialog-container .ui-dialog-content { + width: max-content !important; +} #mobile-wizard.popup.snackbar #label, .snackbar.jsdialog-container #label, #mobile-wizard.popup.snackbar #label-no-action, diff --git a/browser/src/control/Control.JSDialog.js b/browser/src/control/Control.JSDialog.js index 36f1feab7d8e..a6e804ef8043 100644 --- a/browser/src/control/Control.JSDialog.js +++ b/browser/src/control/Control.JSDialog.js @@ -231,13 +231,16 @@ L.Control.JSDialog = L.Control.extend({ } // it has to be form to handle default button - container = L.DomUtil.create('form', 'jsdialog-container ui-dialog ui-widget-content lokdialog_container', containerParent); + container = L.DomUtil.create('div', 'jsdialog-window', containerParent); container.id = data.id; container.style.visibility = 'hidden'; if (data.collapsed && (data.collapsed === 'true' || data.collapsed === true)) L.DomUtil.addClass(container, 'collapsed'); + + var form = L.DomUtil.create('form', 'jsdialog-container ui-dialog ui-widget-content lokdialog_container', container); + // prevent from reloading - container.addEventListener('submit', function (event) { event.preventDefault(); }); + form.addEventListener('submit', function (event) { event.preventDefault(); }); var defaultButtonId = this._getDefaultButtonId(data.children); @@ -246,18 +249,18 @@ L.Control.JSDialog = L.Control.extend({ } // it has to be first button in the form - var defaultButton = L.DomUtil.createWithId('button', 'default-button', container); + var defaultButton = L.DomUtil.createWithId('button', 'default-button', form); defaultButton.style.display = 'none'; defaultButton.onclick = function() { if (defaultButtonId) { - var button = container.querySelector('#' + defaultButtonId); + var button = form.querySelector('#' + defaultButtonId); if (button) button.click(); } }; if (!isModalPopup || (data.hasClose)) { - var titlebar = L.DomUtil.create('div', 'ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix', container); + var titlebar = L.DomUtil.create('div', 'ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix', form); var title = L.DomUtil.create('span', 'ui-dialog-title', titlebar); title.innerText = data.title; var button = L.DomUtil.create('button', 'ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close', titlebar); @@ -265,12 +268,14 @@ L.Control.JSDialog = L.Control.extend({ } if (isModalPopup) { L.DomUtil.addClass(container, 'modalpopup'); - if (isSnackbar) + if (isSnackbar) { L.DomUtil.addClass(container, 'snackbar'); + L.DomUtil.addClass(form, 'snackbar'); + } } - var tabs = L.DomUtil.create('div', 'jsdialog-tabs', container); - var content = L.DomUtil.create('div', 'lokdialog ui-dialog-content ui-widget-content', container); + var tabs = L.DomUtil.create('div', 'jsdialog-tabs', form); + var content = L.DomUtil.create('div', 'lokdialog ui-dialog-content ui-widget-content', form); // required to exist before builder was launched (for setTabs) this.dialogs[data.id] = { @@ -389,7 +394,7 @@ L.Control.JSDialog = L.Control.extend({ if (posY + content.clientHeight > window.innerHeight) posY -= posY + content.clientHeight + 10 - window.innerHeight; } else if (isDocumentAreaPopup) { - var height = container.getBoundingClientRect().height; + var height = form.getBoundingClientRect().height; if (posY + height > containerParent.getBoundingClientRect().height) { var newTopPosition = posY - height; if (newTopPosition < 0) @@ -397,7 +402,7 @@ L.Control.JSDialog = L.Control.extend({ posY = newTopPosition; } - var width = container.getBoundingClientRect().width; + var width = form.getBoundingClientRect().width; if (posX + width > containerParent.getBoundingClientRect().width) { var newLeftPosition = posX - width; if (newLeftPosition < 0) @@ -406,11 +411,11 @@ L.Control.JSDialog = L.Control.extend({ } } } else if (isSnackbar) { - posX = window.innerWidth/2 - container.offsetWidth/2; - posY = window.innerHeight - container.offsetHeight - 40; + posX = window.innerWidth/2 - form.offsetWidth/2; + posY = window.innerHeight - form.offsetHeight - 40; } else if (force || (posX === 0 && posY === 0)) { - posX = window.innerWidth/2 - container.offsetWidth/2; - posY = window.innerHeight/2 - container.offsetHeight/2; + posX = window.innerWidth/2 - form.offsetWidth/2; + posY = window.innerHeight/2 - form.offsetHeight/2; } }; diff --git a/cypress_test/integration_tests/desktop/impress/sidebar_spec.js b/cypress_test/integration_tests/desktop/impress/sidebar_spec.js index fe0ecbccdff2..8894072a8ca0 100644 --- a/cypress_test/integration_tests/desktop/impress/sidebar_spec.js +++ b/cypress_test/integration_tests/desktop/impress/sidebar_spec.js @@ -32,7 +32,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Sidebar Tests', function() cy.cGet('#fillattr3').should('be.visible'); helper.waitUntilIdle('#fillattr2'); cy.cGet('#fillattr2').click(); - cy.cGet('.modalpopup').should('be.visible'); + cy.cGet('.modalpopup .jsdialog-container').should('be.visible'); cy.cGet('#colorset').should('be.visible'); }); @@ -42,7 +42,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Sidebar Tests', function() impressHelper.selectTextOfShape(); cy.cGet('#layoutvalueset').should('not.be.visible'); cy.cGet('#Underline .arrowbackground').click(); - cy.cGet('.modalpopup').should('be.visible'); + cy.cGet('.modalpopup .jsdialog-container').should('be.visible'); cy.cGet('#single').click(); impressHelper.triggerNewSVGForShapeInTheCenter(); cy.cGet('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')