Merge pull request #23 from arieboven/button-margin

Adds the possibility to add margin to button

octoprint_simpleemergencystop/__init__.py

@@ -16,7 +16,9 @@ class SimpleemergencystopPlugin(octoprint.plugin.StartupPlugin,
 		return dict(
 			emergencyGCODE="M112",
 			confirmationDialog=False,
-			big_button=False
+			big_button=False,
+			enableMargin=False,
+			marginValue=0,
 		)
 
 	def on_settings_save(self, data):

octoprint_simpleemergencystop/static/js/simpleemergencystop.js

@@ -52,12 +52,30 @@ $(function () {
 
         }
 
+        this.ses_margin_css = function () {
+            if (this.settings.enableMargin()) {
+                $('#ses_wrapper').css({
+                    'margin-left':`${this.settings.marginValue()}px`,
+                    'margin-right':`${this.settings.marginValue()}px`
+                });
+            } else {
+                $('#ses_wrapper').css({
+                    'margin-left':'0px',
+                    'margin-right':'0px'
+                });
+            }
+        };
+
+        this.ses_visible = function () {
+            return this.loginState.isUser() && this.hasControlPermition();
+        };
+
         this.big_button_visible = function () {
-            return this.loginState.isUser() && this.settings.big_button() && this.hasControlPermition();
+            return this.settings.big_button();
         };
 
         this.little_button_visible = function () {
-            return this.loginState.isUser() && !this.settings.big_button() && this.hasControlPermition();
+            return !this.settings.big_button();
         };
 
         this.can_send_command = function () {

octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2

@@ -1,3 +1,4 @@
+<div id="ses_wrapper" data-bind="css: ses_margin_css(), visible: ses_visible()">
     <div>
         <a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
             href="#">
@@ -24,6 +25,7 @@
             </div>
         </a>
     </div>
+</div>
 
 <div id="confirmation" class="modal hide fade">
     <div class="modal-header">

octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2

@@ -3,7 +3,7 @@
     <div class="control-group">
         <label class="control-label">{{ _('Emergency GCODE:') }}</label>
         <div class="controls">
-            <input type="text" class="input-block-level"
+            <input type="text" class=""
                    data-bind="value: settings.plugins.simpleemergencystop.emergencyGCODE">
         </div>
     </div>
@@ -19,6 +19,21 @@
             <input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.big_button">
         </div>
     </div>
-
+    <div class="control-group">
-
+        <label class="control-label">{{ _('Enable margin') }}</label>
+        <div class="controls">
+            <input type="checkbox" data-bind="checked: settings.plugins.simpleemergencystop.enableMargin">
+        </div>
+    </div>
+    <div class="control-group">
+        <label class="control-label">{{ _('Margin value:') }}</label>
+        <div class="controls">
+            <div class="input-append">
+                <input type="number" class="" step="5" min="0" data-bind="
+                    value: settings.plugins.simpleemergencystop.marginValue,
+                    enable: settings.plugins.simpleemergencystop.enableMargin()">
+                <span class="add-on">px</span>
+            </div>
+        </div>
+    </div>
 </form>