forms: horizontal layout and unit support (#245)

* update

* sync

[skip ci]

* always required

[skip ci]

* append support

* update schemas

[skip ci]

* typo

[skip ci]

* adjustment

* update

[skip ci]

* sync

[skip ci]

* slightly smaller logo

[skip ci]

* also for checkboxes

[skip ci]

* new connection lost page

[skip ci]

* update con_lost page

[skip ci]

* lost change

[skip ci]

* fix center position

[skip ci]
This commit is contained in:
brindosch 2016-09-17 23:37:44 +02:00 committed by redPanther
parent 70eed516c4
commit f349f4b0ee
9 changed files with 130 additions and 36 deletions

View File

@ -1,15 +1,22 @@
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom:0">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
</div>
</nav>
<div class="container" style="margin-top:50px">
<div class="panel panel-danger" style="box-shadow: 10px 10px 5px #BBBBBB;">
<div class="panel-heading"><i class="fa fa-exclamation-triangle"></i> Connection to Hyperion Service lost!</div>
<div class="panel-body"><a href="/">reconnect</a></div>
<div class="container" style="margin:20px auto;">
<center>
<div class="logoimg" style="width:234px;height:80px;"></div>
<div>
<h2>Lost connection to Hyperion service!<h1>
<hr>
<h4>Possible reasons:</h4>
<p>1. Hyperion restarts</p>
<p>2. You perform an update</p>
<p>3. An older browser session</p>
<p>3. Hyperion isn't running</p>
<hr>
<i class="fa fa-refresh fa-spin" style="font-size:50px"></i>
<h4>This page will be automatically refreshed.</h4>
<h4>We reconnect again after Hyperion is available.</h4>
<a href="/">If not, click me</a>
</div>
</center>
</div>
</div>

View File

@ -49,9 +49,21 @@ table.borderless td,table.borderless th{border: none !important;}
.introd{padding-left:14px;border-left:5px solid #0088cc;}
.introd h4{line-height:25px;}
.overlay {
/*backported bootstrap 4 forms-label alignment*/
.col-form-label {
padding-top: .5rem;
padding-bottom: .5rem;
margin-bottom: 0;
}
.logoimg{
background-image: url('/img/hyperion/hyperionlogo.png');
background-repeat: no-repeat;
}
.overlay {
background-image: url('/img/hyperion/hyperionwhitelogo.png');
background-repeat: no-repeat;
background-position: center center;
background-color: rgba(1, 1, 1, 0.7);
position: fixed;

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -1938,6 +1938,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
var self = this, i;
if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
this.format = this.schema.format;
if(!this.format && this.schema.media && this.schema.media.type) {
@ -2122,7 +2123,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
if(this.format) this.input.setAttribute('data-schemaformat',this.format);
this.control = this.theme.getFormControl(this.label, this.input, this.description);
this.control = this.theme.getFormControl(this.label, this.input, this.description, this.append);
this.container.appendChild(this.control);
// Any special formatting that needs to happen after the input is added to the dom
@ -2717,6 +2718,12 @@ JSONEditor.defaults.editors.object = JSONEditor.AbstractEditor.extend({
this.container.appendChild(this.description);
}
// Appends
if(this.schema.append) {
this.append = this.theme.getAppend(this.schema.append);
this.container.appendChild(this.append);
}
// Validation error placeholder area
this.error_holder = document.createElement('div');
this.container.appendChild(this.error_holder);
@ -3313,6 +3320,10 @@ JSONEditor.defaults.editors.array = JSONEditor.AbstractEditor.extend({
if(this.schema.description) {
this.description = this.theme.getDescription(this.schema.description);
this.container.appendChild(this.description);
}
if(this.schema.append) {
this.append = this.theme.getAppend(this.schema.append);
this.container.appendChild(this.append);
}
this.error_holder = document.createElement('div');
this.container.appendChild(this.error_holder);
@ -3988,6 +3999,10 @@ JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
if(this.schema.description) {
this.description = this.theme.getDescription(this.schema.description);
this.container.appendChild(this.description);
}
if(this.schema.append) {
this.append = this.theme.getAppend(this.schema.append);
this.container.appendChild(this.append);
}
this.panel = this.theme.getIndentedPanel();
this.container.appendChild(this.panel);
@ -4974,6 +4989,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
var self = this;
if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
if(this.options.compact) this.container.className += ' compact';
@ -5320,6 +5336,7 @@ JSONEditor.defaults.editors.selectize = JSONEditor.AbstractEditor.extend({
var self = this;
if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
if(this.options.compact) this.container.className += ' compact';
@ -5547,6 +5564,7 @@ JSONEditor.defaults.editors.multiselect = JSONEditor.AbstractEditor.extend({
var self = this, i;
if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
if(this.schema.append) this.append = this.theme.getFormInputAppend(this.schema.append);
if((!this.schema.format && this.option_keys.length < 8) || this.schema.format === "checkbox") {
this.input_type = 'checkboxes';
@ -6025,6 +6043,9 @@ JSONEditor.defaults.editors.arraySelectize = JSONEditor.AbstractEditor.extend({
if(this.schema.description) {
this.description = this.theme.getDescription(this.schema.description);
}
if(this.schema.append) {
this.append = this.theme.getAppend(this.schema.append);
}
this.input = document.createElement('select');
this.input.setAttribute('multiple', 'multiple');
@ -6307,6 +6328,11 @@ JSONEditor.AbstractTheme = Class.extend({
el.innerHTML = text;
return el;
},
getAppend: function(text) {
var el = document.createElement('p');
el.innerHTML = text;
return el;
},
getCheckboxDescription: function(text) {
return this.getDescription(text);
},
@ -6518,7 +6544,13 @@ JSONEditor.defaults.themes.bootstrap2 = JSONEditor.AbstractTheme.extend({
el.textContent = text;
return el;
},
getFormControl: function(label, input, description) {
getFormInputAppend: function(text) {
var el = document.createElement('div');
el.className = 'input-group-addon';
el.textContent = text;
return el;
},
getFormControl: function(label, input, description, append) {
var ret = document.createElement('div');
ret.className = 'control-group';
@ -6676,26 +6708,35 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
}
return el;
},
getFormControl: function(label, input, description) {
getFormControl: function(label, input, description, append) {
var group = document.createElement('div');
var subgroup = document.createElement('div');
if(label && input.type === 'checkbox') {
group.className += ' checkbox';
label.appendChild(input);
label.style.fontSize = '14px';
group.style.marginTop = '0';
if (append){
group.className += ' form-group';
if(label) {
label.className += ' col-form-label col-md-2';
group.appendChild(label);
input.style.position = 'relative';
input.style.cssFloat = 'left';
}
group.appendChild(subgroup);
subgroup.className += 'col-md-10 input-group';
subgroup.appendChild(input);
subgroup.appendChild(append);
}
else {
group.className += ' form-group';
if(label) {
label.className += ' control-label';
label.className += ' col-form-label col-md-2';
group.appendChild(label);
}
group.appendChild(input);
group.appendChild(subgroup);
subgroup.className += ' input-group col-md-10';
subgroup.appendChild(input);
if (input.type === 'checkbox'){
label.style.fontWeight = 'bold';
}
}
if(description) group.appendChild(description);
@ -6713,6 +6754,12 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
el.innerHTML = text;
return el;
},
getFormInputAppend: function(text) {
var el = document.createElement('div');
el.className = 'input-group-addon';
el.textContent = text;
return el;
},
getHeaderButtonHolder: function() {
var el = this.getButtonHolder();
el.style.marginLeft = '10px';

View File

@ -30,6 +30,7 @@
"name" :
{
"type" : "string",
"title" : "Configuration name",
"required" : true,
"propertyOrder" : 1
},
@ -48,6 +49,7 @@
"colorOrder" :
{
"type" : "string",
"title" : "RGB byte order",
"enum" : ["rgb", "bgr", "rbg", "brg", "gbr", "grb"],
"propertyOrder" : 3
}
@ -397,6 +399,7 @@
"minimum" : 25,
"maximum": 600,
"default" : 200,
"append" : "ms",
"propertyOrder" : 3
},
"updateFrequency" :
@ -406,6 +409,7 @@
"minimum" : 1.000,
"maximum" : 100.000,
"default" : 25.000,
"append" : "Hz",
"propertyOrder" : 4
},
"updateDelay" :
@ -415,6 +419,7 @@
"minimum" : 0,
"maximum": 2048,
"default" : 0,
"append" : "ms",
"propertyOrder" : 5
},
"continuousOutput" :
@ -430,9 +435,11 @@
"grabber-v4l2" :
{
"type":"array",
"title" : "USB Grabber",
"items":
{
"type" : "object",
"title" : "USB Grabber",
"properties" :
{
"enable" :
@ -469,6 +476,7 @@
"type" : "integer",
"title" : "Width",
"default" : -1,
"append" : "Pixel",
"propertyOrder" : 5
},
"height" :
@ -476,6 +484,7 @@
"type" : "integer",
"title" : "Height",
"default" : -1,
"append" : "Pixel",
"propertyOrder" : 6
},
"frameDecimation" :
@ -520,6 +529,7 @@
"title" : "Crop left",
"minimum" : 0,
"default" : 0,
"append" : "Pixel",
"propertyOrder" : 12
},
"cropRight" :
@ -528,6 +538,7 @@
"title" : "Crop right",
"minimum" : 0,
"default" : 0,
"append" : "Pixel",
"propertyOrder" : 13
},
"cropTop" :
@ -536,6 +547,7 @@
"title" : "Crop top",
"minimum" : 0,
"default" : 0,
"append" : "Pixel",
"propertyOrder" : 14
},
"cropBottom" :
@ -544,6 +556,7 @@
"title" : "Crop bottom",
"minimum" : 0,
"default" : 0,
"append" : "Pixel",
"propertyOrder" : 15
},
"redSignalThreshold" :
@ -553,6 +566,7 @@
"minimum" : 0.0,
"maximum" : 1.0,
"default" : 0.1,
"append" : "%",
"propertyOrder" : 16
},
"greenSignalThreshold" :
@ -562,6 +576,7 @@
"minimum" : 0.0,
"maximum" : 1.0,
"default" : 0.1,
"append" : "%",
"propertyOrder" : 17
},
"blueSignalThreshold" :
@ -571,6 +586,7 @@
"minimum" : 0.0,
"maximum" : 1.0,
"default" : 0.1,
"append" : "%",
"propertyOrder" : 18
}
},
@ -601,20 +617,23 @@
{
"type" : "integer",
"title" : "Width",
"default" : 96
"default" : 96,
"append" : "Pixel"
},
"height" :
{
"type" : "integer",
"title" : "Height",
"default" : 96
"default" : 96,
"append" : "Pixel"
},
"frequency_Hz" :
{
"type" : "integer",
"title" : "Frequency",
"minimum" : 0,
"default" : 10
"default" : 10,
"append" : "Hz"
},
"priority" :
{
@ -628,28 +647,32 @@
"type" : "integer",
"title" : "Crop left",
"minimum" : 0,
"default" : 0
"default" : 0,
"append" : "Pixel"
},
"cropRight" :
{
"type" : "integer",
"title" : "Crop right",
"minimum" : 0,
"default" : 0
"default" : 0,
"append" : "Pixel"
},
"cropTop" :
{
"type" : "integer",
"title" : "Crop top",
"minimum" : 0,
"default" : 0
"default" : 0,
"append" : "Pixel"
},
"cropBottom" :
{
"type" : "integer",
"title" : "Crop bottom",
"minimum" : 0,
"default" : 0
"default" : 0,
"append" : "Pixel"
},
"useXGetImage" :
{
@ -707,6 +730,7 @@
"minimum" : 0.0,
"maximum" : 1.0,
"default" : 0.05,
"append" : "%",
"propertyOrder" : 2
},
"unknownFrameCnt" :

View File

@ -17,6 +17,7 @@
"type": "integer",
"title":"Delay after connect",
"default": 250,
"append" : "ms",
"propertyOrder" : 3
}
},

View File

@ -17,6 +17,7 @@
"type": "integer",
"title":"Delay after connect",
"default": 250,
"append" : "ms",
"propertyOrder" : 3
}
},

View File

@ -17,6 +17,7 @@
"type": "integer",
"title":"Delay after connect",
"default": 250,
"append" : "ms",
"propertyOrder" : 3
}
},

View File

@ -23,8 +23,9 @@
},
"transitiontime": {
"type": "integer",
"title":"Transistion time (x100ms)",
"title":"Transistion time",
"default" : 1,
"append" : "x100ms",
"propertyOrder" : 4
},
"switchOffOnBlack": {