[UI] Change modal default size to css & add 'autoHeight' property

Author: skerdudou

CHANGES.md

@@ -5,6 +5,11 @@ Running 4.3.0
 ----------------------
 [Migration help](https://github.com/vertigo-io/vertigo/wiki/Vertigo-Migration-Guide#from-420-to-430)
 
+* [Ui] Various fix
+  - Fileupload, add can be triggered by keybloard
+  - Select, searchable component state is now correctly cleared on mounting
+* [Ui] Change modal default size from 'style' to css & add 'autoHeight' property
+
 more to come :)
 
 

vertigo-ui-vuejs/src/methods.js

@@ -459,6 +459,30 @@ export default {
         var component = this.$refs[componentId];
         component.addFiles(event.dataTransfer.files);
     },
+    modal_iframeLoad(ifrm) {
+        let compId = ifrm.dataset.componentId;
+        let autoHeight = ifrm.dataset.autoHeight;
+        let doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
+        
+        if (autoHeight === 'true') {
+            ifrm.style.opacity = '0'; // should be already hidden but otherwise we hide it to avoid flickering
+            //ifrm.style.height = "100px"; // set to 100px to get height without blank padding at bottom, but not less than 100px
+        
+            let newHeight = this.getDocHeight(doc) + 4 + "px"; // IE opt. for bing/msn needs a bit added or scrollbar appears
+        
+            ifrm.style.height = ""; // reset iframe height to extends again
+            this.componentStates[compId].height = newHeight; // set the height of the modal
+        }
+        this.componentStates[compId].loading = false;
+        ifrm.style.opacity = '1'; // show the iframe
+    },
+    getDocHeight : function(doc) {
+        doc = doc || document;
+        let body = doc.body, html = doc.documentElement;
+        let height = Math.max( body.scrollHeight, body.offsetHeight, 
+                               html.scrollHeight, html.offsetHeight, html.clientHeight);
+        return height;
+    },
     httpPostAjax: function (url, paramsIn, options) {
         var paramsInResolved = !paramsIn ? [] :  Array.isArray(paramsIn) ? this.vueDataParams(paramsIn) : paramsIn;
         let vueData = this.$data.vueData;

vertigo-ui/src/main/resources/io/vertigo/ui/components/layout/modal.html

@@ -1,17 +1,28 @@
-<th:block th:fragment="modal(componentId, title, closeLabel, srcUrl, width, height, iframe_attrs, section_attrs, modal_attrs)" 
+<th:block th:fragment="modal(componentId, title, closeLabel, srcUrl, width, height, autoHeight, iframe_attrs, section_attrs, modal_attrs)" 
 	  th:assert="${componentId} != null"
-	  th:attr=" objectKey=${model.vContext['componentStates'].addComponentState(componentId).addPrimitive('opened', false)},
-	   objectKey=${model.vContext['componentStates']['__${componentId}__'].addPrimitive('title', title?:'')},
-	   objectKey=${model.vContext['componentStates']['__${componentId}__'].addPrimitive('srcUrl', srcUrl?:'')}" >
+	  th:attr=" objectKey=${model.vContext['componentStates'].addComponentState(componentId)
+	                                                         .addPrimitive('opened', false)
+	                                                         .addPrimitive('loading', true)
+	                                                         .addPrimitive('title', title?:'')
+                                                             .addPrimitive('srcUrl', srcUrl?:'')
+                                                             .addPrimitive('width', width?:'')
+                                                             .addPrimitive('height', height?:'')}" >
 	<q-dialog th:v-model="|componentStates.${componentId}.opened|" th:attr="__${modal_attrs}__">
 			<vu:content>
 			<q-card class="bg-white v-modal">
 				<q-toolbar class="bg-primary" th:if="${title != null}">
 				    <vu:button flat dense v-close-popup icon="keyboard_arrow_left" color="primary" textColor="white" th:title="#{layout.modal.close}" />
 				    <q-toolbar-title class="text-white">{{ componentStates.[[${componentId}]].title }}</q-toolbar-title>
 				</q-toolbar>
-				<q-card-section class="q-pa-none" th:style="|width:${width?:'560px'};height:${height?:'420px'}" th:attr="__${section_attrs}__">
-					<iframe th:v-bind:src="|componentStates.${componentId}.srcUrl|" th:attr="__${iframe_attrs}__" ></iframe>
+				<q-card-section class="q-pa-none" th::style="|{width:componentStates.${componentId}.width, height:componentStates.${componentId}.height}|" th:attr="__${section_attrs}__">
+					<div class="loading absolute-center" th:v-if="|componentStates.${componentId}.loading|"><q-spinner-tail size="xl"></q-spinner-tail></div>
+					<iframe th:v-bind:src="|componentStates.${componentId}.srcUrl|"
+					        th:attr="__${iframe_attrs}__"
+					        th:style="${autoHeight == true ? 'height:100px; opacity:0':''}"
+					        th:@vue:before-mount="|componentStates.${componentId}.loading=true; componentStates.${componentId}.height='${height?:''}';|"
+					        onload="VUiPage.modal_iframeLoad(this)"
+					        th:data-auto-height="${autoHeight}"
+					        th:data-component-id="${componentId}"></iframe>
 				</q-card-section>
 				<q-toolbar th:if="${closeLabel} != null" class="bg-primary" >
 				    <q-btn flat v-close-popup th:label="${closeLabel}" text-color="white" ></q-btn>

vertigo-ui/src/main/resources/io/vertigo/ui/static/css/vertigo-ui.css

@@ -432,6 +432,8 @@ table .q-uploader .q-btn {
 }
 
 .q-dialog__inner--minimized .v-modal .q-card__section {
+	width: 560px;
+	height: 420px;
 	max-height: calc(100vh - 100px);
 	max-width: calc(100vw - 100px);
 	overflow: auto;