From 8cba11930f8aae47533b39594dd72855a331d6c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Mon, 9 Mar 2015 11:40:47 +0100
Subject: [PATCH] WIP: Streamlining controls to not overly depend on types
 anymore

---
 docs/configuration/custom_controls.rst         |  8 ++++----
 .../static/js/app/viewmodels/control.js        | 12 +++++++-----
 src/octoprint/templates/tabs/control.jinja2    | 18 +++++++-----------
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/docs/configuration/custom_controls.rst b/docs/configuration/custom_controls.rst
index eb9af385..369255cd 100644
--- a/docs/configuration/custom_controls.rst
+++ b/docs/configuration/custom_controls.rst
@@ -98,22 +98,22 @@ of the types: ``name`` and ``type``.
 Types
 -----
 
-.. _sec-configuration-custom_controls-types:
+.. _sec-configuration-custom_controls-types-sections:
 
 Sections
 ........
 
-.. _sec-configuration-custom_controls-types:
+.. _sec-configuration-custom_controls-types-rows:
 
 Rows
 ....
 
-.. _sec-configuration-custom_controls-types:
+.. _sec-configuration-custom_controls-types-section_rows:
 
 Section rows
 ............
 
-.. _sec-configuration-custom_controls-types:
+.. _sec-configuration-custom_controls-types-commands:
 
 Commands
 ........
diff --git a/src/octoprint/static/js/app/viewmodels/control.js b/src/octoprint/static/js/app/viewmodels/control.js
index 4c045b2a..dfd96d96 100644
--- a/src/octoprint/static/js/app/viewmodels/control.js
+++ b/src/octoprint/static/js/app/viewmodels/control.js
@@ -125,8 +125,13 @@ $(function() {
             if (control.type == "feedback_command" || control.type == "feedback") {
                 control.output = ko.observable("");
                 self.feedbackControlLookup[control.name] = control.output;
-            } else if (control.type == "section" || control.type == "row" || control.type == "section_row") {
+            }
+
+            if (control.hasOwnProperty("children")) {
                 control.children = self._processControls(control.children);
+                if (!control.hasOwnProperty("layout") || !(control.layout == "vertical" || control.layout == "horizontal")) {
+                    control.layout = "vertical";
+                }
             }
 
             if (control.hasOwnProperty("input")) {
@@ -324,12 +329,9 @@ $(function() {
 
         self.displayMode = function (customControl) {
             switch (customControl.type) {
+                case "container":
                 case "section":
                     return "customControls_sectionTemplate";
-                case "row":
-                    return "customControls_rowTemplate";
-                case "section_row":
-                    return "customControls_sectionRowTemplate";
                 case "command":
                 case "commands":
                 case "script":
diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
index 1c589e57..8f9ce2d0 100644
--- a/src/octoprint/templates/tabs/control.jinja2
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -106,25 +106,21 @@
 
 <!-- Templates for custom controls -->
 <script type="text/html" id="customControls_sectionTemplate">
+    <!-- ko if: name -->
     <h1 data-bind="text: name"></h1>
+    <!-- /ko -->
 
+    <!-- ko if: layout == 'vertical' -->
     <div class="custom_section" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
-</script>
-<script type="text/html" id="customControls_rowTemplate">
+    <!-- /ko -->
+
+    <!-- ko if: layout == 'horizontal' -->
     <div class="row-fluid custom_row">
         <!-- ko foreach: children -->
         <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
         <!-- /ko -->
     </div>
-</script>
-<script type="text/html" id="customControls_sectionRowTemplate">
-    <h1 data-bind="text: name"></h1>
-
-    <div class="row-fluid custom_row custom_section">
-        <!-- ko foreach: children -->
-        <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
-        <!-- /ko -->
-    </div>
+    <!-- /ko -->
 </script>
 <script type="text/html" id="customControls_commandTemplate">
     <form class="form-inline custom_command">