🌈 style: backups and editor dialog

octoprint_klipper/static/css/klipper.css

@@ -149,6 +149,31 @@ ul#klipper-settings {
   height: -webkit-fill-available;
 }
 
+div#klipper_backups_dialog {
+  min-height: 300px;
+  display: flex;
+  flex-flow: column;
+  min-height: 400px;
+}
+
+div#klipper_backups_dialog div.modal-body {
+  min-height: 350px;
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+}
+
+div#klipper_backups_dialog .editor-controls {
+  flex: 0 auto;
+	display: flex;
+	align-items: stretch;
+  flex-flow: row wrap;
+}
+
+div#klipper_backups_dialog div.modal-body .textarea {
+  overflow: auto;
+}
+
 div#klipper_backups_dialog div.modal-body textarea {
   margin-bottom: 0px !important;
   padding-left: 0px !important;
@@ -177,6 +202,10 @@ div#settings_plugin_klipper div.tab-content {
   overflow: auto;
 }
 
+div#settings_plugin_klipper div.tab-content .border{
+  border-bottom: 1px solid;
+}
+
 div#settings_plugin_klipper div.tab-footer {
   height: 20px;
   width: 100%;
@@ -228,7 +257,7 @@ div#settings_plugin_klipper div.tab-content div#conf.tab-pane div.control-group
 }
 
 div#klipper_editor {
-  height: 80%;
+  min-height: 300px;
   display: flex;
   flex-flow: column;
 }
@@ -247,7 +276,7 @@ div#klipper_editor .modal-header {
 
 div#klipper_editor .modal-body {
   overflow: auto;
-  min-height: 300px;
+  min-height: 250px;
   display: flex;
   flex-flow: column;
   flex-grow: 1;
@@ -277,9 +306,6 @@ div#klipper_editor .modal-body .editor-controls {
 	align-items: center;
 }
 
-div#klipper_editor .flex-end {
-  align-self: flex-end;
-}
 
 div#klipper_editor div.conf-editor {
   width: 99%;

octoprint_klipper/static/js/klipper_settings.js

@@ -202,7 +202,6 @@ $(function () {
       var dialog = $("#klipper_backups_dialog");
       dialog.modal({
         show: "true",
-        minHeight: "600px",
       });
     };
 

octoprint_klipper/templates/klipper_backups_dialog.jinja2

@@ -4,39 +4,56 @@
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h3 id="klipper_dialog_label">{{ _('Backups') }}</h3>
   </div>
-  <div class="modal-body klipper-column-fluid">
+  <div class="modal-body">
-    <div class="klipper-row-fluid">
+    <div class="editor-controls">
-      <div class="klipper-fluid-item-2" data-bind="visible: $root.klipperViewModel.hasRightKo('CONFIG')">
+      <div class="klipper-btn-group klipper-fluid-item-1" data-bind="visible: $root.klipperViewModel.hasRightKo('CONFIG')">
-        <button class="btn btn-small" data-bind="click: listBakFiles" title="{{ _('Refresh file list') }}"><i class="icon-refresh"></i>
-          Refresh</button>
         <div class="btn-group">
-          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="far fa-square"></i> <span class="caret"></span></button>
+          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
+            <i class="far fa-square"></i>
+            <span class="caret"></span>
+          </button>
           <ul class="dropdown-menu">
-            <li><a href="javascript:void(0)" data-bind="click: markFilesOnPage">{{ _('Select all on this page') }}</a>
+            <li>
+              <a href="javascript:void(0)" data-bind="click: markFilesOnPage">{{ _('Select all on this page') }}</a>
+            </li>
+            <li>
+              <a href="javascript:void(0)" data-bind="click: markAllFiles">{{ _('Select all') }}</a>
+            </li>
+            <li class="divider">
+            </li>
+            <li>
+              <a href="javascript:void(0)" data-bind="click: clearMarkedFiles">{{ _('Clear selection') }}</a>
             </li>
-            <li><a href="javascript:void(0)" data-bind="click: markAllFiles">{{ _('Select all') }}</a></li>
-            <li class="divider"></li>
-            <li><a href="javascript:void(0)" data-bind="click: clearMarkedFiles">{{ _('Clear selection') }}</a></li>
           </ul>
         </div>
+        <button class="btn btn-small" data-bind="click: listBakFiles" title="{{ _('Refresh file list') }}">
+          <i class="icon-refresh"></i> {{ _('Refresh Files') }}
+        </button>
+
         <button class="btn btn-small"
           data-bind="click: restoreMarkedFiles, enable: markedForFileRestore().length > 0">{{ _('Restore selected') }}</button>
-        <button class="btn btn-small" data-bind="click: removeMarkedFiles, enable: markedForFileRestore().length > 0">{{
+        <button class="btn btn-small"
-          _('Delete selected') }}</button>
+          data-bind="click: removeMarkedFiles, enable: markedForFileRestore().length > 0">{{ _('Delete selected') }}</button>
       </div>
       <div class="pull-right">
         <div class="btn-group">
-          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="fas fa-wrench"></i> <span class="caret"></span></button>
+          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
+            <i class="fas fa-wrench"></i>
+            <span class="caret"></span>
+          </button>
           <ul class="dropdown-menu dropdown-menu-right">
             <li><a href="javascript:void(0)" data-bind="click: function() { backups.changeSorting('name'); }"><i class="fas fa-check"
                   data-bind="style: {visibility: backups.currentSorting() == 'name' ? 'visible' : 'hidden'}"></i> {{ _('Sort by name') }}
-                ({{ _('ascending') }})</a></li>
+                ({{ _('ascending') }})</a>
+            </li>
             <li><a href="javascript:void(0)" data-bind="click: function() { backups.changeSorting('date'); }"><i class="fas fa-check"
                   data-bind="style: {visibility: backups.currentSorting() == 'date' ? 'visible' : 'hidden'}"></i> {{ _('Sort by date') }}
-                ({{ _('descending') }})</a></li>
+                ({{ _('descending') }})</a>
+            </li>
             <li><a href="javascript:void(0)" data-bind="click: function() { backups.changeSorting('size'); }"><i class="fas fa-check"
                   data-bind="style: {visibility: backups.currentSorting() == 'size' ? 'visible' : 'hidden'}"></i> {{ _('Sort by file size') }}
-                ({{ _('descending') }})</a></li>
+                ({{ _('descending') }})</a>
+            </li>
           </ul>
         </div>
       </div>
@@ -86,10 +103,8 @@
             data-bind="click: backups.nextPage">»</a></li>
       </ul>
     </div>
-    <div class="klipper-fluid-item-3">
+    <div class="textarea">
       <textarea readonly data-bind="value: CfgContent" id="klipper_bak_text"></textarea>
     </div>
   </div>
-  <div class="modal-footer">
-  </div>
 </div>

octoprint_klipper/templates/klipper_editor.jinja2

@@ -10,7 +10,7 @@
     <div class="editor-controls">
       <span class="control-label">Filename:</span>
       <input type="text" data-bind="value: CfgFilename">
-      <div class="klipper-btn-group">
+      <div class="klipper-btn-group klipper-fluid-item-2">
         <button class="btn btn-small" data-bind="click: saveCfg" title="{{ _('Save Config') }}">
           <i class="fas fa-save"></i> {{ _('Save Config') }}
         </button>
@@ -24,14 +24,14 @@
           <i class="fas fa-spell-check"></i> {{ _('Check Syntax') }}
         </button>
       </div>
-      <span class="flex-end">
+      <div class="pull-right">
         <a href='#' style="text-decoration: none;" data-bind="click: minusFontsize" title="{{ _('Decrease Fontsize') }}">
           <i class="fas fa-search-minus"></i>
         </a>
         <a href='#' style="text-decoration: none;" data-bind="click: plusFontsize" title="{{ _('Increase Fontsize') }}">
           <i class="fas fa-search-plus"></i>
         </a>
-      </span>
+      </div>
     </div>
     <div class="conf-editor" id="conf_editor">
       <input id="hdnLoadKlipperConfig" type="hidden" data-bind="value: configBound(CfgContent)">

octoprint_klipper/templates/klipper_settings.jinja2

@@ -21,8 +21,7 @@
             data-bind="checked: settings.settings.plugins.klipper.connection.replace_connection_panel">
         </div>
       </div>
-
+      <div class="control-group border">
-      <div class="control-group">
         <label class="control-label">{{ _('Show Short Messages') }}</label>
         <div class="controls">
           <label class="checkbox" title="{{ _('on NavBar') }}"><input type="checkbox"
@@ -38,8 +37,8 @@
             data-bind="checked: settings.settings.plugins.klipper.configuration.debug_logging" />
         </div>
       </div>
-      <div class="control-group">
+      <div class="control-group border">
-        <label class="control-label">Editor</label>
+        <label class="control-label">{{ _('Config Editor') }}</label>
         <div class="controls">
           <label class="checkbox" title="{{ _('Check parsing on save') }}"><input type="checkbox"
             data-bind="checked: settings.settings.plugins.klipper.configuration.parse_check" /> {{ _('Check parsing on save') }}
@@ -62,7 +61,7 @@
           <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.configuration.logpath" />
         </div>
       </div>
-      <div class="control-group">
+      <div class="control-group border">
         <label class="control-label">{{ _('Configuration Reload Command') }}</label>
         <div class="controls">
           <select data-bind="value: settings.settings.plugins.klipper.configuration.reload_command">
@@ -232,15 +231,6 @@
         <h3 class="text-center m-0">{{ _('Config Files') }}</h3>
         <div class="klipper-row-fluid">
           <div class="klipper-fluid-item-2" data-bind="visible: $root.klipperViewModel.hasRightKo('CONFIG')">
-            <button class="btn btn-small" data-bind="click: newFile" title="{{ _('Add new File') }}">
-              <i class="far fa-file"></i> {{ _('New File') }}
-            </button>
-            <button class="btn btn-small" data-bind="click: showEditor" title="{{ _('Open last config') }}">
-              <i class="fas fa-file-code"></i> {{ _('Show Editor') }}
-            </button>
-            <button class="btn btn-small" data-bind="click: listCfgFiles" title="{{ _('Refresh file list') }}">
-              <i class="icon-refresh"></i> {{ _('Refresh Files') }}
-            </button>
             <div class="btn-group">
               <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="far fa-square"></i>
                 <span class="caret"></span>
@@ -252,6 +242,15 @@
                 <li><a href="javascript:void(0)" data-bind="click: clearMarkedFiles">{{ _('Clear selection') }}</a></li>
               </ul>
             </div>
+            <button class="btn btn-small" data-bind="click: newFile" title="{{ _('Add new File') }}">
+              <i class="far fa-file"></i> {{ _('New File') }}
+            </button>
+            <button class="btn btn-small" data-bind="click: showEditor" title="{{ _('Open last config') }}">
+              <i class="fas fa-file-code"></i> {{ _('Show Editor') }}
+            </button>
+            <button class="btn btn-small" data-bind="click: listCfgFiles" title="{{ _('Refresh file list') }}">
+              <i class="icon-refresh"></i> {{ _('Refresh Files') }}
+            </button>
             <button class="btn btn-small"
               data-bind="click: removeMarkedFiles, enable: markedForFileRemove().length > 0">{{ _('Delete selected') }}</button>
           </div>