Commit a4b4720d authored by Fabian-Andree Heidemann's avatar Fabian-Andree Heidemann
Browse files

[mainGUI] make dialog resizeable with flexbox property

[filebrowser] adapt dialog changes for fileselector
parent 10eafe4d
......@@ -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}
......
......@@ -72,7 +72,7 @@
/* file selector */
.fileselector {
height: 300px;
height: 100vh;
> .file-content > .alert {
top: 55px;
}
......
......@@ -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) {
......
......@@ -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
......@@ -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 */
......
......@@ -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());
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment