Skip to content

Commit

Permalink
jsdialog: use minial size of a dialog needed
Browse files Browse the repository at this point in the history 
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 <[email protected]>
Change-Id: I7b38b9200e190cfc184bf4bfe8b7bd814c60d5a6
  • Loading branch information
@eszkadev
eszkadev committed Oct 6, 2023
1 parent 68d2eb7 commit e527984
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 24 deletions.
1 change: 1 addition & 0 deletions browser/css/btns.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
35 changes: 27 additions & 8 deletions browser/css/jsdialogs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,41 @@
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;
border-radius: var(--border-radius);
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);
}
Expand All @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down
33 changes: 19 additions & 14 deletions browser/src/control/Control.JSDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -246,31 +249,33 @@ 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);
L.DomUtil.create('span', 'ui-button-icon ui-icon ui-icon-closethick', button);
}
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] = {
Expand Down Expand Up @@ -389,15 +394,15 @@ 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)
newTopPosition = 0;
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)
Expand All @@ -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;
}
};

Expand Down
4 changes: 2 additions & 2 deletions cypress_test/integration_tests/desktop/impress/sidebar_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});

Expand All @@ -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')
Expand Down

0 comments on commit e527984

Please sign in to comment.