Add toolbar with 'create' button to 'Create node' window, improve visual style of form, and fix scrolling/resizing of windows

feature/core
Sven Slootweg 11 years ago
parent 74aa2409b1
commit e73e5d970e

@ -45,6 +45,23 @@ div.window-outer
bottom: 0px;
}
div.window-inner-wrapper
{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow-y: auto;
overflow-x: auto;
}
.window-noscroll
{
overflow-x: hidden !important;
overflow-y: hidden !important;
}
div.window-close
{
float: right;

@ -77,6 +77,12 @@ form.inline
color: white;
}
.pure-button.okay
{
background-color: #148C29;
color: white;
}
.pure-button.search
{
background-color: #152DBA;
@ -104,10 +110,15 @@ form.inline
h1.form
{
font-size: 16px;
margin-top: 7px;
margin-top: 0px;
margin-bottom: 6px;
}
.form-block
{
margin-bottom: 5px;
}
.pure-form label
{
font-size: 95%;
@ -128,3 +139,26 @@ textarea
{
height: 90px;
}
.toolbarwindow-contents
{
position: absolute;
padding: 7px;
top: 0px;
left: 0px;
right: 0px;
bottom: 38px;
overflow-x: hidden;
overflow-y: auto;
}
.toolbarwindow-toolbar
{
position: absolute;
padding: 4px;
height: 30px;
left: 0px;
right: 0px;
bottom: 0px;
text-align: right;
}

@ -90,6 +90,8 @@ function JsdeWindow(options)
if(typeof options.min_height === "undefined") { this.min_height = 120; }
if(typeof options.resizable === "undefined") { this.resizable = true; }
if(typeof options.noscroll === "undefined") { this.noscroll = false; }
this.SetPosition(this.x, this.y);
this.SetSize(this.width, this.height);
@ -106,6 +108,11 @@ function JsdeWindow(options)
$(this._outer).find(".window-resizer").mousedown(this._HandleStartResize.bind(this));
if(this.noscroll)
{
$(this._outer).find(".window-inner-wrapper").addClass("window-noscroll");
}
this.BringToForeground();
}

@ -41,7 +41,8 @@ $(function(){
y: 40,
title: "Create new node",
contents: "Loading...",
source_url: "/nodes/create"
source_url: "/nodes/create",
noscroll: true
});
});

@ -68,8 +68,9 @@
</div>
</div>
<div class="window-outer">
<div class="window-inner">
<div class="window-inner-wrapper">
<div class="window-inner">
</div>
</div>
<div class="window-resizer">
</div>

@ -1,41 +1,48 @@
<form class="pure-form pure-form-aligned form_createnode">
<div class="pure-g">
<div class="pure-u-1">
<h1 class="form">Node</h1>
</div>
<div class="formfield">
<div class="pure-u-1-3 label">
<label for="input_createnode_name">Name</label>
</div>
<div class="pure-u-2-3">
<input class="pure-input-1" type="text" name="name" id="input_createnode_name">
</div>
</div>
<div class="formfield">
<div class="pure-u-1-3 label">
<label for="input_createnode_notes">Notes</label>
</div>
<div class="pure-u-2-3">
<textarea class="pure-input-1" name="notes" id="input_createnode_notes"></textarea>
</div>
</div>
<div class="form_createnode_properties">
<div class="pure-u-1">
<h1 class="form">Properties</h1>
<div class="toolbarwindow-contents">
<div class="pure-g">
<div class="form-block">
<div class="pure-u-1">
<h1 class="form">Node</h1>
</div>
<div class="formfield">
<div class="pure-u-1-3 label">
<label for="input_createnode_name">Name</label>
</div>
<div class="pure-u-2-3">
<input class="pure-input-1" type="text" name="name" id="input_createnode_name">
</div>
</div>
<div class="formfield">
<div class="pure-u-1-3 label">
<label for="input_createnode_notes">Notes</label>
</div>
<div class="pure-u-2-3">
<textarea class="pure-input-1" name="notes" id="input_createnode_notes"></textarea>
</div>
</div>
</div>
<div class="property">
<input type="text" class="pure-input-1-2 group-first" name="property_name[]" placeholder="Name">
<input type="text" class="pure-input-1-2 group-last" name="property_value[]" placeholder="Value">
</div>
<div class="property">
<input type="text" class="pure-input-1-2 group-first" name="property_name[]" placeholder="Name">
<input type="text" class="pure-input-1-2 group-last" name="property_value[]" placeholder="Value">
<div class="form_createnode_properties form-block">
<div class="pure-u-1">
<h1 class="form">Properties</h1>
</div>
<div class="property">
<input type="text" class="pure-input-1-2 group-first" name="property_name[]" placeholder="Name">
<input type="text" class="pure-input-1-2 group-last" name="property_value[]" placeholder="Value">
</div>
<div class="property">
<input type="text" class="pure-input-1-2 group-first" name="property_name[]" placeholder="Name">
<input type="text" class="pure-input-1-2 group-last" name="property_value[]" placeholder="Value">
</div>
</div>
</div>
</div>
<div class="toolbarwindow-toolbar">
<button type="submit" class="pure-button okay shadow"><i class="icon-ok"></i>Create</button>
</div>
</form>

Loading…
Cancel
Save