From 8243622ba332e0b84ca1e5137fa54c0cf4975af4 Mon Sep 17 00:00:00 2001
From: Arie Boven <ar.boven@protonmail.com>
Date: Sat, 23 Mar 2024 14:27:22 +0100
Subject: [PATCH] Adds the possibility to add margin to button

---
 octoprint_simpleemergencystop/__init__.py     |  4 +-
 .../static/js/simpleemergencystop.js          | 24 +++++++--
 .../simpleemergencystop_navbar.jinja2         | 52 ++++++++++---------
 .../simpleemergencystop_settings.jinja2       | 21 ++++++--
 4 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/octoprint_simpleemergencystop/__init__.py b/octoprint_simpleemergencystop/__init__.py
index 58b3ae5..930f734 100644
--- a/octoprint_simpleemergencystop/__init__.py
+++ b/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):
diff --git a/octoprint_simpleemergencystop/static/js/simpleemergencystop.js b/octoprint_simpleemergencystop/static/js/simpleemergencystop.js
index c9b18c4..ba31ad0 100644
--- a/octoprint_simpleemergencystop/static/js/simpleemergencystop.js
+++ b/octoprint_simpleemergencystop/static/js/simpleemergencystop.js
@@ -49,15 +49,33 @@ $(function () {
                 return user.permissions.includes("control") || user.needs.role.includes("control");
             }
             else return true;
-            
+
         }
 
+        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 () {
diff --git a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2 b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
index b9340e8..beadd8c 100644
--- a/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
+++ b/octoprint_simpleemergencystop/templates/simpleemergencystop_navbar.jinja2
@@ -1,28 +1,30 @@
-<div>
-    <a data-bind="click: click, css: little_button_css(), attr: { title: get_title() }, visible: little_button_visible()"
-        href="#">
-        <span class="fa-stack">
-            <i class="far fa-circle fa-stack-2x"></i>
-            <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
-        </span>
-    </a>
-</div>
+<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="#">
+            <span class="fa-stack">
+                <i class="far fa-circle fa-stack-2x"></i>
+                <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+            </span>
+        </a>
+    </div>
 
-<div>
-    <a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
-        href="#">
-        <div class="ses_big_middle">
-            <span class="fa-stack">
-                <i class="far fa-circle fa-stack-2x"></i>
-                <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
-            </span>
-            <h5>{{ _("Emergency Stop") }}</h5>
-            <span class="fa-stack">
-                <i class="far fa-circle fa-stack-2x"></i>
-                <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
-            </span>
-        </div>
-    </a>
+    <div>
+        <a data-bind="click: click, css: big_button_css(), attr: { title: get_title() }, visible: big_button_visible()"
+            href="#">
+            <div class="ses_big_middle">
+                <span class="fa-stack">
+                    <i class="far fa-circle fa-stack-2x"></i>
+                    <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+                </span>
+                <h5>{{ _("Emergency Stop") }}</h5>
+                <span class="fa-stack">
+                    <i class="far fa-circle fa-stack-2x"></i>
+                    <i class="fas fa-hand-paper fa-stack-1x fa-inverse"></i>
+                </span>
+            </div>
+        </a>
+    </div>
 </div>
 
 <div id="confirmation" class="modal hide fade">
@@ -43,4 +45,4 @@
             _("Proceed")
             }}</a>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2 b/octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2
index 3345927..963851b 100644
--- a/octoprint_simpleemergencystop/templates/simpleemergencystop_settings.jinja2
+++ b/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>