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

@@ -225,12 +225,13 @@
                 else
                     control.collapsed = ko.observable(false);
             }
-            
+
             if (control.hasOwnProperty("input")) {
                 control.input = ko.observableArray(self._processInput(control.input));
             }
 
             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) {
@@ -417,7 +430,7 @@
 
                 switch (self.customControlDialogViewModel.type()) {
                     case "container": {
-                        element.name(ret.name);                           
+                        element.name(ret.name);
                         element.layout(ret.layout);
                         element.collapsed(ret.collapsed);
                         break;
@@ -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")) {
@@ -618,4 +652,4 @@
         ["loginStateViewModel", "settingsViewModel", "controlViewModel", "customControlDialogViewModel"],
         "#settings_plugin_customControl"
     ]);
-});
+});

octoprint_customControl/static/js/customControlDialog.js

@@ -30,7 +30,7 @@
                 return false;
 
             var inputs = self.element().input()
-            for(var i = 0; i < inputs.length; i++)    
+            for(var i = 0; i < inputs.length; i++)
             {
                 if (inputs[i].hasOwnProperty("slider")) {
                     if (typeof inputs[i].slider == "object")
@@ -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()) {
@@ -254,4 +257,4 @@
         [],
         "#customControlDialog"
     ]);
-});
+});

octoprint_customControl/templates/customControl_hookedsettings.jinja2

@@ -3,14 +3,14 @@
 <div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }">
 </div>
 
-<!-- "width: 588px" to be the same as teh real Control tab-->						
+<!-- "width: 588px" to be the same as teh real Control tab-->
 <div class="innerSortable" 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>
 		<a href="#" cmd="createContainer">{{ _('Create Container') }}</a>
 	</li>
-</ul>			
+</ul>
 <ul id="commandContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
 	<li><a href="#" cmd="editElement">{{ _('Edit') }}</a></li>
 	<li><a href="#" cmd="deleteElement">{{ _('Delete') }}</a></li>
@@ -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>
-<!-- End of templates for custom controls -->
+<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 -->