[mainGUI] make dialog resizeable with flexbox property

[filebrowser] adapt dialog changes for fileselector

vispa/extensions/file/static/css/base/base.css

@@ -8,7 +8,7 @@
 .upload-progress-container>.progress-row>.btn{float:right;margin-left:12px}
 .upload-progress-container>.progress-row>.glyphicon{float:right;margin-left:12px}
 .upload-progress-container>.progress-row>.glyphicon:hover{cursor:pointer;color:#000}
-.fileselector{height:300px}
+.fileselector{height:100vh}
 .fileselector>.file-content>.alert{top:55px}
 .fileselector .file-path-bar{position:absolute;top:3px}
 .file-rightclickmenu{position:absolute}

vispa/extensions/file/static/css/base/base.less

@@ -72,7 +72,7 @@
 /* file selector */
 
 .fileselector {
-  height: 300px;
+  height: 100vh;
   > .file-content > .alert {
     top: 55px;
   }

vispa/extensions/file/static/js/views.js

@@ -142,6 +142,7 @@ define(["vispa/views/center", "vispa/views/dialog", "./menuentries", "./browser/
       // TODO
       // This is a hack!!!
       content.addClass("fileselector");
+      content.parent().css("overflow-y", "hidden");
       this.fb.setContent(content);
   
       this.getTemplate("html/fileselectorBottom.html", function(err, tmpl) {

vispa/static/css/index.css

@@ -117,4 +117,9 @@ body>.blocker{visibility:hidden!important;opacity:0!important}
 .vispa-centerview-tab-active .vispa-centerview-tab-label,.vispa-centerview-tab-cross:active,.vispa-centerview-tab-cross:focus,.vispa-centerview-tab-cross:hover,.vispa-centerview-tab-icon a:active,.vispa-centerview-tab-icon a:focus,.vispa-centerview-tab-icon a:hover,.vispa-centerview-tab-label:active,.vispa-centerview-tab-label:focus,.vispa-centerview-tab-label:hover{color:#000;text-decoration:none}
 .vispa-centerview-tab-badge{position:relative;float:right;height:100%;display:table;margin-right:24px}
 .vispa-centerview-tab-badge span{vertical-align:middle}
+.vispa-centerview-messages>.modal{position:absolute;overflow:hidden;margin:0;display:block}
+.vispa-centerview-messages>.modal>.modal-dialog{position:relative;height:100%;width:100%;margin:0;overflow:hidden}
+.vispa-centerview-messages>.modal>.modal-dialog>.modal-content{margin:40px auto;min-width:300px;max-width:75%;width:600px;max-height:calc(100% - 50px);overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
+.vispa-centerview-messages>.modal>.modal-dialog>.modal-content>.modal-footer,.vispa-centerview-messages>.modal>.modal-dialog>.modal-content>.modal-header{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}
+.vispa-centerview-messages>.modal>.modal-dialog>.modal-content>.modal-body{overflow-y:auto;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}
 .bootbox.modal{position:absolute;top:0;right:0;bottom:0;left:0;padding-top:40px;background-color:transparent;overflow:auto;outline:0}
\ No newline at end of file

vispa/static/css/index.less

@@ -592,6 +592,38 @@
 .vispa-centerview-tab-badge span {
     vertical-align: middle;
 }
+.vispa-centerview-messages {
+    > .modal {
+        position: absolute;
+        overflow: hidden;
+        margin: 0px;
+        display: block;
+        > .modal-dialog {
+            position: relative;
+            height: 100%;
+            width: 100%;
+            margin: 0px;
+            overflow: hidden;
+            > .modal-content {
+                margin: 40px auto;
+                min-width: 300px;
+                max-width: 75%;
+                width: 600px;
+                max-height: calc(~"100% - 50px");
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                > .modal-header, > .modal-footer {
+                    flex: none;
+                }
+                > .modal-body {
+                    overflow-y: auto;
+                    flex: auto;
+                }
+            }
+        }
+    }
+}
 
 
 /* overwrite vendor classes */

vispa/static/js/common/dialog.js

@@ -36,7 +36,7 @@ define(["jquery", "emitter"], function($, Emitter) {
 
 
   var tmpl = {
-    wrapper: "<div class='modal fade' style='position: absolute; overflow: hidden; margin: 0px;'><div class='modal-dialog' style='position: relative; height: 100%; width: 100%; margin: 0px; overflow: hidden;'><div class='modal-content' style='margin: 40px auto; min-width: 300px; max-width: 75%; width: 600px; overflow: hidden;'></div></div></div>",
+    wrapper: "<div class='modal fade'><div class='modal-dialog'><div class='modal-content'></div></div></div>",
     header: "\
       <div class='modal-header'>\
         <button type='button' class='close' aria-hidden='true'>\
@@ -45,7 +45,7 @@ define(["jquery", "emitter"], function($, Emitter) {
         <h4 class='modal-title'></h4>\
       </div>\
     ",
-    body: "<div class='modal-body' style='overflow-y: auto;'></div>",
+    body: "<div class='modal-body'></div>",
     footer: "<div class='modal-footer'></div>",
     button: "<button type='button' class='btn'></button>"
   };
@@ -110,7 +110,7 @@ define(["jquery", "emitter"], function($, Emitter) {
       if (this.opts.body) {
         var bodies = $.isArray(this.opts.body) ? this.opts.body : [this.opts.body];
         if (this.opts.wrapBody) {
-          this.$body = $(tmpl.body).css("max-height", $(".vispa-workspace").height() - 200);
+          this.$body = $(tmpl.body);
           this.$body.append.apply(this.$body, bodies);
         } else {
           this.$body = $(bodies.shift());