Work on Input part and small fixes

This commit is contained in:
Marc
2015-04-22 09:30:04 +02:00
parent 03a85d24d0
commit 71e04c3673
4 changed files with 125 additions and 69 deletions

View File

@ -16,7 +16,7 @@
<div class="control-group">
<label class="control-label">{{ _('Layout') }}</label>
<div class="controls">
<select data-bind="options: $root.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
<select data-bind="options: $parent.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
</div>
</div>
<!-- ko if: name && name() != "" -->
@ -35,7 +35,7 @@
</div>
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label>
<label class="control-label"><input type="checkbox" data-bind="checked: $parent.useInputs"></input>{{ _('Use Inputs') }}</label>
</div>
<!-- ko if: $root.useInputs -->
<div class="control-group">
@ -57,16 +57,18 @@
<div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div>
<div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div>
<div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
<!-- ko if: $root.hasSlider -->
<div class="span2"><input class="span12" data-bind="value: slide().min"></input></div>
<div class="span2"><input class="span12" data-bind="value: slide().max"></input></div>
<div class="span1"><input class="span12" data-bind="value: slide().step"></input></div>
<!-- ko if: slider -->
<div class="span2"><input class="span12" data-bind="value: slider.min"></input></div>
<div class="span2"><input class="span12" data-bind="value: slider.max"></input></div>
<div class="span1"><input class="span12" data-bind="value: slider.step"></input></div>
<div class="span1"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
<!-- /ko -->
<div class="span1"><a title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput($data)"><i class="icon-trash"></i></a></div>
<div class="span1" data-bind="ifnot: slider, css: { 'offset5': $root.hasSlider() }"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
</div>
</div>
<div class="row-fluid">
<div class="offset11 span1"><a title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
<div class="offset10 span1"><a href="#" title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
<div class="span1"><a href="#" title="Add Slider" class="btn btn-primary" data-bind="click: $root.addSliderInput"><i class="icon-plus"></i></a></div>
</div>
</div>
<!-- /ko -->
@ -88,7 +90,7 @@
<div class="control-group">
<label class="control-label">{{ _('Default Message') }}</label>
<div class="controls">
<input style="width: 97%" data-bind="value: deflt"></input>
<input style="width: 97%" data-bind="value: defaultValue"></input>
</div>
</div>
<!-- /ko -->

View File

@ -2,8 +2,9 @@
<div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }, visible: loginState.isUser">
</div>
<div style="clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
<!-- "width: 588px" to be the same as teh real Control tab-->
<div style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
<ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
<li>
@ -44,24 +45,24 @@
</ul>
<!-- Templates for custom controls -->
<script type="text/html" id="settingsCustomControls_containerTemplate">
<div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<script type="text/html" id="settingsCustomControls_containerTemplate">
<div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate_accordion">
<div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }">
@ -73,7 +74,7 @@
</div>
<!-- /ko -->
<!-- ko if: layout -->
<!-- ko if: layout -->
<div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
@ -93,25 +94,27 @@
</div>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate">
<form class="form-inline control-tab custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
<form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('deflt') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') } --><!-- /ko -->
</form>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_input">
<!-- ko foreach: input -->
<div class="form-inline">
<label style="cursor: default" data-bind="text: name"></label>
<!-- ko if: slider -->
<input type="number" style="width: 100px" data-bind="slider: {value: value, min: slider.min, max: slider.max, step: slider.step}">
<input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step()}">
<!-- /ko -->
<!-- ko ifnot: slider -->
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue">
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_output">
<label style="cursor: default" data-bind="text: deflt"></label>
<label style="cursor: default" data-bind="text: defaultValue"></label>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_command">
<button class="btn" data-bind="text: name"></button>