From 92e044fdf40afc8c58c5dd1dedf2253eb65d6220 Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Thu, 13 Apr 2023 15:30:53 +0200
Subject: [PATCH] =?UTF-8?q?N=C2=B05888=20-=20Handle=20modal=20sizes=20usin?=
 =?UTF-8?q?g=20CSS=20instead=20of=20JS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/backoffice/components/_modal.scss | 45 +++++++++++++++++++++++++++
 js/pages/backoffice/toolbox.js        | 34 +++++++++-----------
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/css/backoffice/components/_modal.scss b/css/backoffice/components/_modal.scss
index 05839592c..873fc80d6 100644
--- a/css/backoffice/components/_modal.scss
+++ b/css/backoffice/components/_modal.scss
@@ -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
diff --git a/js/pages/backoffice/toolbox.js b/js/pages/backoffice/toolbox.js
index 15de95c09..10b3984f1 100644
--- a/js/pages/backoffice/toolbox.js
+++ b/js/pages/backoffice/toolbox.js
@@ -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;