Fix func/temp/comment editor resizing

This commit is contained in:
Nick O'Leary 2014-11-13 17:21:12 +00:00
parent 9c8d9550a7
commit 3cb423a0b4
5 changed files with 56 additions and 20 deletions

View File

@ -1,5 +1,5 @@
<!--
Copyright 2013 IBM Corp.
Copyright 2013, 2014 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -19,9 +19,11 @@
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-func"><i class="fa fa-wrench"></i> Function</label>
<input type="hidden" id="node-input-func" autofocus="autofocus">
<div class="form-row" style="margin-bottom: 0px;">
<label for="node-input-func"><i class="fa fa-wrench"></i> Function</label>
<input type="hidden" id="node-input-func" autofocus="autofocus">
</div>
<div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-func-editor" ></div>
</div>
<div class="form-row">
@ -71,7 +73,14 @@
});
function functionDialogResize(ev,ui) {
$("#node-input-func-editor").css("height",(ui.size.height-275)+"px");
var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorRow = $("#dialog-form>div.node-text-editor-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$(".node-text-editor").css("height",height+"px");
};
$( "#dialog" ).on("dialogresize", functionDialogResize);

View File

@ -19,9 +19,11 @@
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<div class="form-row" style="margin-bottom: 0px;">
<label for="node-input-template"><i class="fa fa-file-code-o"></i> Template</label>
<input type="hidden" id="node-input-template" autofocus="autofocus">
</div>
<div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-template-editor" ></div>
</div>
<div class="form-row">
@ -63,7 +65,14 @@
oneditprepare: function() {
function templateDialogResize(ev,ui) {
$("#node-input-template-editor").css("height",(ui.size.height-200)+"px");
var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorRow = $("#dialog-form>div.node-text-editor-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$(".node-text-editor").css("height",height+"px");
};
$( "#dialog" ).on("dialogresize", templateDialogResize);

View File

@ -19,9 +19,11 @@
<label for="node-input-name"><i class="fa fa-comment"></i> Comment</label>
<input type="text" id="node-input-name" placeholder="Comment">
</div>
<div class="form-row">
<div class="form-row" style="margin-bottom: 0px;">
<label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> More</label>
<input type="hidden" id="node-input-info" autofocus="autofocus">
</div>
<div class="form-row node-text-editor-row">
<div style="height: 250px;" class="node-text-editor" id="node-input-info-editor" ></div>
</div>
<div class="form-tips">Tip: this isn't meant for "War and Peace" - but useful notes can be kept here.</div>
@ -53,7 +55,14 @@
min:1
});
function functionDialogResize(ev,ui) {
$("#node-input-info-editor").css("height",(ui.size.height-235)+"px");
var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorRow = $("#dialog-form>div.node-text-editor-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$(".node-text-editor").css("height",height+"px");
};
$( "#dialog" ).on("dialogresize", functionDialogResize);
$( "#dialog" ).one("dialogopen", function(ev) {

View File

@ -19,17 +19,18 @@
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row" style="padding-top:10px;">
<div class="form-row">
If msg.<input type="text" id="node-input-property" style="width: 200px;"/>
</div>
<div class="form-row">
<div id="node-input-rule-container-div" style="border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
<ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;">
</ol>
<div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
<div id="node-input-rule-container-div" style="box-sizing: border-box; border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
<ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;"></ol>
</div>
<a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> Add</a>
</div>
<div>
<div class="form-row">
<a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> rule</a>
</div>
<div class="form-row">
<select id="node-input-checkall" style="width:100%; margin-right:5px;">
<option value="true">checking all rules</option>
<option value="false">stopping after first match</option>
@ -159,7 +160,14 @@
}
function switchDialogResize(ev,ui) {
$("#node-input-rule-container-div").css("height",(ui.size.height-260)+"px");
var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
var height = $("#dialog-form").height();
for (var i=0;i<rows.size();i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorRow = $("#dialog-form>div.node-input-rule-container-row");
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$("#node-input-rule-container-div").css("height",height+"px");
};
$( "#dialog" ).on("dialogresize", switchDialogResize);

View File

@ -658,12 +658,13 @@ g.link_unknown path.link_line {
margin-bottom: 5px;
}
form.dialog-form {
#dialog-form {
margin: 0;
height: 100%;
}
.form-row {
clear: both;
margin-bottom:20px;
margin-bottom:10px;
}
.form-row label {
display: inline-block;
@ -1050,7 +1051,7 @@ i.spinner {
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
}
.ui-dialog .ui-dialog-content {
padding: 30px 30px 10px 30px;
padding: 25px 25px 10px 25px;
}
.ui-dialog .ui-dialog-titlebar {
padding: 10px;