pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Custom control containers are now Collapsable if user wants so.

Browse source
This commit is contained in:
Marc 2015-04-21 01:23:01 +02:00
parent de8484b6f8
commit 2edb92112a
2 changed files with 37 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/octoprint/static/js/app/viewmodels/control.js
View file

@ -138,8 +138,8 @@ $(function() {
return control;
}
if (control.hasOwnProperty("template") && control.hasOwnProperty("key") && control.hasOwnProperty("template_key") && !control.hasOwnProperty("output")) {
control.output = ko.observable("");
if (control.hasOwnProperty("template") && control.hasOwnProperty("key") && control.hasOwnProperty("deflt") && control.hasOwnProperty("template_key") && !control.hasOwnProperty("output")) {
control.output = ko.observable(control.deflt);
if (!self.feedbackControlLookup.hasOwnProperty(control.key)) {
self.feedbackControlLookup[control.key] = {};
}
@ -151,6 +151,9 @@ $(function() {
if (!control.hasOwnProperty("layout") || !(control.layout == "vertical" || control.layout == "horizontal" || control.layout == "horizontal_grid")) {
control.layout = "vertical";
}
if (!control.hasOwnProperty("collapsable"))
control.collapsable = false;
}
if (control.hasOwnProperty("input")) {
@ -340,7 +343,7 @@ $(function() {
self.displayMode = function (customControl) {
if (customControl.hasOwnProperty("children")) {
return "customControls_containerTemplate";
return (customControl.hasOwnProperty("name") && customControl.name != "") ? "customControls_containerTemplate_accordion" : "customControls_containerTemplate";
} else {
return "customControls_controlTemplate";
}

38
src/octoprint/templates/tabs/control.jinja2
View file

@ -107,20 +107,16 @@
<!-- Templates for custom controls -->
<script type="text/html" id="customControls_containerTemplate">
<div class="custom_section" data-bind="css: { 'custom_section_vertical_section': !($parent && $parent.layout == 'horizontal'), 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
<!-- ko if: name -->
<a class="accordion-toggle" data-toggle="collapse" data-bind="attr: { 'data-target': '#' + id() }"><h1 data-bind="text: name"></h1></a>
<!-- /ko -->
<!-- ko if: layout == 'vertical' -->
<div class="custom_section custom_section_vertical collapse in" data-bind="template: { name: $root.displayMode, foreach: children }, attr: { 'id': id }"></div>
<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 collapse in" data-bind="template: { name: $root.displayMode, foreach: children }, attr: { 'id': id }"></div>
<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 collapse in" data-bind="attr: { 'id': id }">
<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 -->
@ -128,6 +124,34 @@
<!-- /ko -->
</div>
</script>
<script type="text/html" id="customControls_containerTemplate_accordion">
<div class="custom_section accordion-group" data-bind="css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
<!-- ko if: name -->
<div class="accordion-heading">
<a class="accordion-toggle" style="display: block; text-decoration: none" data-bind="style: { 'cursor': collapsable ? '' : 'default' }, attr: { 'data-target': collapsable ? '#' + id() : '', 'data-toggle': collapsable ? 'collapse' : '', 'onclick': collapsable ? '$(this).children().toggleClass(\'icon-caret-right icon-caret-down\')' : '' }"><h1 data-bind="text: name, css: { 'icon-caret-down': collapsable }"></h1></a>
</div>
<!-- /ko -->
<!-- ko if: layout -->
<div class="accordion-body" data-bind="attr: { 'id': 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>
<!-- /ko -->
<!-- ko if: layout == 'horizontal' -->
<div class="custom_section custom_section_horizontal accordion-inner" 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 accordion-inner">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="customControls_controlTemplate">
<form class="form-inline custom_control">
<!-- ko template: { name: 'customControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->