🌈 style: Restyle PopUps; Editor Modal Position

- change title of PopUps
- make sure position of editor modal is ok on first show

octoprint_klipper/__init__.py

@@ -608,7 +608,7 @@ __plugin_settings_overlay__ = {
         'actions': [{
             'action': 'octoklipper_restart',
             'command': 'sudo service klipper restart',
-            'name': 'Restart Klipper',
+            'name': gettext('Restart Klipper'),
             'confirm': '<h3><center><b>' + gettext("You are about to restart Klipper!") + '<br>' + gettext("This will stop ongoing prints!") + '</b></center></h3><br>Command = "sudo service klipper restart"'
         }]
     }

octoprint_klipper/cfgUtils.py

@@ -174,7 +174,7 @@ def check_cfg(self, data):
             "Error: Invalid Klipper config file:\n"
             + "{}".format(str(error))
         )
-        util.send_message(self, "PopUp", "warning", "OctoKlipper: Invalid Config data\n",
+        util.send_message(self, "PopUp", "warning", "Invalid Config data\n",
                             "\n"
                             + str(error))
 
@@ -205,7 +205,7 @@ def is_float_ok(self, dataToValidated):
             self,
             "PopUp",
             "warning",
-            "OctoKlipper: Invalid Config data\n",
+            "Invalid Config data\n",
             "\n"
             + "Invalid Value for <b>" + x + "</b> in Section: <b>" + y + "</b>\n"
             + "{}".format(str(error))

octoprint_klipper/static/css/klipper.css

@@ -150,7 +150,6 @@ ul#klipper-settings {
 }
 
 div#klipper_backups_dialog {
-  min-height: 300px;
   display: flex;
   flex-flow: column;
   min-height: 400px;
@@ -255,10 +254,6 @@ div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group
   margin: 5;
 }
 
-div#klipper_editor {
-  min-height: 300px;
-}
-
 @media (max-width: 979px) {
 
   div#klipper_editor.modal {
@@ -267,13 +262,18 @@ div#klipper_editor {
 
 }
 
-div#klipper_editor .modal-header {
-  height: 6px;
+#klipper_editor {
+  
+  display: flex;
+  flex-flow: column;
+}
+
+.octoprint-container.UICMainCont.container-fluid {
+  margin-top:0px !important;
 }
 
 div#klipper_editor .modal-body {
   overflow: auto;
-  min-height: 250px;
   display: flex;
   flex-flow: column;
 }

octoprint_klipper/static/js/klipper.js

@@ -37,16 +37,36 @@ $(function () {
     self.logMessages = ko.observableArray();
 
     self.showPopUp = function (popupType, popupTitle, message) {
-      var title = popupType.toUpperCase() + ":  " + popupTitle;
+      var title = "OctoKlipper: <br />" + popupTitle + "<br />";
+      var hide = false;
+      if (popupType == "success") {
+        hide = true
+      }
       new PNotify({
         title: title,
         text: message,
         type: popupType,
-        hide: false,
+        hide: hide,
         icon: true
       });
     };
 
+    self.onStartupComplete = function () {
+      var klipper_editor = $('#klipper_editor')
+      var modalOverflow = $(window).height() - 10 < klipper_editor.height();
+      
+      klipper_editor.css('display', 'none');
+			if (modalOverflow) {
+				klipper_editor
+					.css('margin-top', 0)
+					.addClass('modal-overflow');
+			} else {
+				klipper_editor
+					.css('margin-top', 0 - klipper_editor.height() / 2)
+					.removeClass('modal-overflow');
+			}
+    };
+
     self.showEditorDialog = function () {
       if (!self.hasRight("CONFIG")) return;
       var editorDialog = $("#klipper_editor");

octoprint_klipper/static/js/klipper_backup.js

@@ -42,6 +42,7 @@ $(function () {
     };
 
     self.onStartupComplete = function () {
+      $('#klipper_backups_dialog').css('display', 'none');
       if (self.loginState.loggedIn()) {
         self.listBakFiles();
       }

octoprint_klipper/static/js/klipper_editor.js

@@ -51,16 +51,17 @@ $(function () {
           .done(function (response) {
             var msg = ""
             if (response.is_syntax_ok == true) {
-              msg = gettext('Syntax OK')
+              self.klipperViewModel.showPopUp("success", gettext("SyntaxCheck"), gettext("SyntaxCheck OK"));
             } else {
               msg = gettext('Syntax NOK')
+              showMessageDialog(
+                msg,
+                {
+                  title: gettext("SyntaxCheck")
+                }
+              )
             }
-            showMessageDialog(
-              msg,
-              {
-                title: gettext("SyntaxCheck")
-              }
-            )
+
           });
       };
     };
@@ -73,16 +74,16 @@ $(function () {
           .done(function (response) {
             var msg = ""
             if (response.saved === true) {
-              msg = gettext('File saved.')
+              self.klipperViewModel.showPopUp("success", gettext("Save Config"), gettext("File saved."));
             } else {
-              msg = gettext('File not saved.')
+              msg = gettext('File not saved!')
+              showMessageDialog(
+                msg,
+                {
+                  title: gettext("Save Config")
+                }
+              )
             }
-            showMessageDialog(
-              msg,
-              {
-                title: gettext("Save File")
-              }
-            )
           });
       }
     };
@@ -147,6 +148,7 @@ $(function () {
               }
             )
           } else {
+            self.klipperViewModel.showPopUp("success", gettext("Reload Config"), gettext("File reloaded."));
             if (editor) {
               editor.session.setValue(response.response.config);
               editor.clearSelection();