composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-18 16:18:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°5888 - Handle modal sizes using CSS instead of JS

Browse Source
This commit is contained in:
Stephen Abello
2023-04-13 15:30:53 +02:00
parent 68817c70ee
commit 92e044fdf4
2 changed files with 59 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
css/backoffice/components/_modal.scss
View File

@@ -6,6 +6,35 @@
/* SCSS variables */
$ibo-modal--max-height: 90vh !default;
$ibo-modal--max-width: 90vw !default;
$ibo-modal--extra-small--relative-height: 20vh !default;
$ibo-modal--extra-small--absolute-height: 150px !default;
$ibo-modal--extra-small--height: calc(min(#{$ibo-modal--extra-small--relative-height}, #{$ibo-modal--extra-small--absolute-height})) !default;
$ibo-modal--extra-small--relative-width: 20vw !default;
$ibo-modal--extra-small--absolute-width: 200px !default;
$ibo-modal--extra-small--width: calc(min(#{$ibo-modal--extra-small--relative-width}, #{$ibo-modal--extra-small--absolute-width})) !default;
$ibo-modal--small--relative-height: 60vh !default;
$ibo-modal--small--absolute-height: 400px !default;
$ibo-modal--small--height: calc(min(#{$ibo-modal--small--relative-height}, #{$ibo-modal--small--absolute-height})) !default;
$ibo-modal--small--relative-width: 60vw !default;
$ibo-modal--small--absolute-width: 800px !default;
$ibo-modal--small--width: calc(min(#{$ibo-modal--small--relative-width}, #{$ibo-modal--small--absolute-width})) !default;
$ibo-modal--medium--relative-height: 75vh !default;
$ibo-modal--medium--absolute-height: 600px !default;
$ibo-modal--medium--height: calc(min(#{$ibo-modal--medium--relative-height}, #{$ibo-modal--medium--absolute-height})) !default;
$ibo-modal--medium--relative-width: 75vw !default;
$ibo-modal--medium--absolute-width: 1200px !default;
$ibo-modal--medium--width: calc(min(#{$ibo-modal--medium--relative-width}, #{$ibo-modal--medium--absolute-width})) !default;
$ibo-modal--large--relative-height: 90vh !default;
$ibo-modal--large--absolute-height: 900px !default;
$ibo-modal--large--height: calc(min(#{$ibo-modal--large--relative-height}, #{$ibo-modal--large--absolute-height})) !default;
$ibo-modal--large--relative-width: 90vw !default;
$ibo-modal--large--absolute-width: 1800px !default;
$ibo-modal--large--width: calc(min(#{$ibo-modal--large--relative-width}, #{$ibo-modal--large--absolute-width})) !default;
$ibo-modal-option--do-not-show-again--margin-top: $ibo-spacing-500 !default;
$ibo-modal--is-informative--min-width: $ibo-size-700 !default;
@@ -20,6 +49,22 @@ $ibo-modal--is-informative--is-success--highlight--background-color: $ibo-color-
.ibo-modal{
max-height: $ibo-modal--max-height !important;
max-width: $ibo-modal--max-width !important;
&.ibo-is-extra-small{
height: $ibo-modal--extra-small--height !important;
width: $ibo-modal--extra-small--width !important;
}
&.ibo-is-small{
height: $ibo-modal--small--height !important;
width: $ibo-modal--small--width !important;
}
&.ibo-is-medium{
height: $ibo-modal--medium--height !important;
width: $ibo-modal--medium--width !important;
}
&.ibo-is-large{
height: $ibo-modal--large--height !important;
width: $ibo-modal--large--width !important;
}
}
// Modal Option - Do not show again

34
js/pages/backoffice/toolbox.js
View File

@@ -207,30 +207,24 @@ CombodoModal._InstantiateModal = function(oModalElem, oOptions) {
title: oOptions.title,
buttons: this._ConvertButtonDefinition(oOptions.buttons)
};
let aSizeMap = {
'xs': 'extra-small',
's': 'small',
'md': 'medium',
'lg': 'large',
};
// Resize to desired size
switch (typeof oOptions.size) {
case 'string':
switch (oOptions.size) {
case 'xs':
oJQueryOptions.width = Math.min(window.innerWidth * 0.2, '200px');
oJQueryOptions.height = Math.min(window.innerHeight * 0.2, '150px');
break;
case 'sm':
oJQueryOptions.width = Math.min(window.innerWidth * 0.6, '800px');
oJQueryOptions.height = Math.min(window.innerHeight * 0.6, '400px');
break;
case 'md':
oJQueryOptions.width = Math.min(window.innerWidth * 0.75, '1200px');
oJQueryOptions.height = Math.min(window.innerHeight * 0.75, '600px');
break;
case 'lg':
oJQueryOptions.width = Math.min(window.innerWidth * 0.9, '1800px');
oJQueryOptions.height = Math.min(window.innerHeight * 0.9, '900px');
break;
if(aSizeMap[oOptions.size] !== undefined) {
let sSize = 'ibo-is-' + aSizeMap[oOptions.size];
if (oJQueryOptions.classes['ui-dialog-content'] !== undefined) {
oJQueryOptions.classes['ui-dialog-content'] += ' ' + sSize;
} else {
oJQueryOptions.classes['ui-dialog-content'] = sSize;
}
}
break;