added button styling functionality, removed "output" in the menu

octoprint_customControl/__init__.py

@@ -8,7 +8,6 @@ from octoprint.settings import settings
 
 import octoprint.plugin
 
-
 class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
                           octoprint.plugin.TemplatePlugin,
                           octoprint.plugin.AssetPlugin):

octoprint_customControl/static/js/customControl.js

@@ -231,6 +231,7 @@
             }
 
             control.name = ko.observable(control.name || "");
+            control.style = ko.observable(control.style || "");
 
             control.width = ko.observable(control.hasOwnProperty("width") ? control.width : "2");
             control.offset = ko.observable(control.hasOwnProperty("offset") ? control.offset : "");
@@ -310,6 +311,18 @@
                 });
             }
         }
+        self.editElementStyle = function (invokedOn, contextParent, selectedMenu, style) {
+          var element = self.searchElement(self.controlsFromServer, contextParent.attr('id'));
+          if (element == undefined) {
+              self._showPopup({
+                  title: gettext("Something went wrong while creating the new Element"),
+                  type: "error"
+              });
+              return;
+          }
+
+          element.style("btn " + style);
+        }
         self.deleteElement = function (invokedOn, contextParent, selectedMenu) {
             var element = self.searchElement(self.controlsFromServer, contextParent.attr('id'));
             if (element == undefined) {
@@ -521,6 +534,30 @@
                     self.deleteElement(invokedOn, contextParent, selectedMenu);
                     break;
                 }
+                case "editStyleNormal": {
+                    self.editElementStyle(invokedOn, contextParent, selectedMenu, "");
+                    break;
+                }
+                case "editStylePrimary": {
+                    self.editElementStyle(invokedOn, contextParent, selectedMenu, "btn-primary");
+                    break;
+                }
+                case "editStyleDanger": {
+                    self.editElementStyle(invokedOn, contextParent, selectedMenu, "btn-danger");
+                    break;
+                }
+                case "editStyleWarning": {
+                    self.editElementStyle(invokedOn, contextParent, selectedMenu, "btn-warning");
+                    break;
+                }
+                case "editStyleSuccess": {
+                    self.editElementStyle(invokedOn, contextParent, selectedMenu, "btn-success");
+                    break;
+                }
+                case "editStyleInfo": {
+                    self.editElementStyle(invokedOn, contextParent, selectedMenu, "btn-info");
+                    break;
+                }
                 default: {
                     if (selectedMenu.attr('cmd').startsWith("create")) {
                         switch (selectedMenu.attr('cmd')) {
@@ -553,9 +590,6 @@
             }
         }
 
-        self.editStyle = function (type) {
-        }
-       
         self.recursiveDeleteProperties = function (list) {
             _.each(list, function (element, index, ll) {
                 if (!element.parent || (element.parent.hasOwnProperty("layout") && element.parent.layout() != "horizontal_grid")) {

octoprint_customControl/static/js/customControlDialog.js

@@ -59,6 +59,7 @@
         self.reset = function (data) {
             var element = {
                 name: undefined,
+                style: "",
                 collapsed: false,
                 commands: "",
                 confirm: "",
@@ -105,6 +106,7 @@
                     }
                     case "command": {
                         el.name = obj.name;
+                        el.style = "btn";
                         if (obj.commands.indexOf('\n') == -1)
                             el.command = obj.commands;
                         else
@@ -165,6 +167,7 @@
                     case "script":
                         {
                             el.name = obj.name;
+                            el.style = "btn";
                             el.script = obj.script;
 
                             if (self.useConfirm()) {

octoprint_customControl/templates/customControl_hookedsettings.jinja2

@@ -19,13 +19,23 @@
 		<a href="#">Style</a>
 		<ul class="dropdown-menu">
 			<li>
-				<a href="#" cmd="editStyle">Normal</a>
+				<a href="#" cmd="editStyleNormal">Normal</a>
 			</li>
 			<li class="btn-primary">
-				<a href="#" cmd="editStyle">Primary</a>
+				<a href="#" cmd="editStylePrimary">Primary</a>
 			</li>
 			<li class="btn-danger">
-				<a href="#" cmd="editStyle">Danger</a>
+				<a href="#" cmd="editStyleDanger">Danger</a>
+			</li>
+			<li class="btn-warning">
+				<a href="#" cmd="editStyleWarning">Warning</a>
+			</li>
+			<li class="btn-success">
+				<a href="#" cmd="editStyleSuccess">Success</a>
+			</li>
+			<li class="btn-info">
+				<a href="#" cmd="editStyleInfo">Info</a>
+			<li>
 			</li>
 		</ul>
 	</li>
@@ -34,10 +44,10 @@
 	<li class="dropdown-submenu">
 		<a href="#">Create Command</a>
 		<ul class="dropdown-menu">
-            <li><a href="#" cmd="createContainer">{{ _('Container') }}</a></li>
+      <li><a href="#" cmd="createContainer">{{ _('Container') }}</a></li>
 			<li><a href="#" cmd="createCommand">{{ _('Command') }}</a></li>
 			<li><a href="#" cmd="createScript">{{ _('Script Command') }}</a></li>
-			<li><a href="#" cmd="createOutput">{{ _('Output') }}</a></li>
+			<!--<li><a href="#" cmd="createOutput">{{ _('Output') }}</a></li>-->
 		</ul>
 	</li>
 	<li class="divider"></li>
@@ -76,8 +86,10 @@
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate">
     <form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, css: { 'sortable': $parent.layout() != 'horizontal_grid' }, attr: { 'id': id }">
+				<div data-bind="text: console.log($data)"></div>
         <!-- 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_command', data: $data, if: !$data.hasOwnProperty('style') && ($data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript')) } --><!-- /ko -->
+        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_command_styled', data: $data, if: $data.hasOwnProperty('style') && ($data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript')) } --><!-- /ko -->
         <!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('value') } --><!-- /ko -->
     </form>
 </script>
@@ -98,4 +110,7 @@
 <script type="text/html" id="settingsCustomControls_controlTemplate_command">
     <button class="btn" data-bind="text: name" onclick="event.preventDefault()"></button>
 </script>
+<script type="text/html" id="settingsCustomControls_controlTemplate_command_styled">
+    <button data-bind="text: name, attr: { 'class': style }" onclick="event.preventDefault()"></button>
+</script>
 <!-- End of templates for custom controls -->