UI - Filters live preview - improvements to layout

changedetectionio/flask_app.py

@@ -1450,7 +1450,8 @@ def changedetection_app(config=None, datastore_o=None):
             {
                 'after_filter': text_after_filter,
                 'before_filter': text_before_filter.decode('utf-8') if isinstance(text_before_filter, bytes) else text_before_filter,
-                'trigger_line_numbers': trigger_line_numbers
+                'duration': time.time() - now,
+                'trigger_line_numbers': trigger_line_numbers,
             }
         )
 

changedetectionio/static/js/watch-settings.js

@@ -25,15 +25,15 @@ function request_textpreview_update() {
         const name = $element.attr('name'); // Get the name attribute of the element
         data[name] = $element.is(':checkbox') ? ($element.is(':checked') ? $element.val() : false) : $element.val();
     });
-
+    $('#text-preview-spinner').show();
     $.abortiveSingularAjax({
         type: "POST",
         url: preview_text_edit_filters_url,
         data: data,
         namespace: 'watchEdit'
     }).done(function (data) {
+        $('#text-preview-spinner').fadeOut();
         $('#filters-and-triggers #text-preview-before-inner').text(data['before_filter']);
-
         $('#filters-and-triggers #text-preview-inner')
             .text(data['after_filter'])
             .highlightLines([
@@ -42,10 +42,8 @@ function request_textpreview_update() {
                     'lines': data['trigger_line_numbers']
                 }
             ]);
-
-
-
     }).fail(function (error) {
+        $('#text-preview-spinner').fadeOut();
         if (error.statusText === 'abort') {
             console.log('Request was aborted due to a new request being fired.');
         } else {

changedetectionio/static/styles/scss/parts/_minitabs.scss

@@ -7,6 +7,16 @@
     border-top: none;
   }
 
+  .minitabs-content {
+    width: 100%;
+    display: flex;
+    > div {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: scroll;
+    }
+  }
+
   .minitabs {
     display: flex;
     border-bottom: 1px solid #ccc;

changedetectionio/static/styles/scss/parts/_preview_text_filter.scss

@@ -42,9 +42,8 @@ body.preview-text-enabled {
     color: var(--color-text-input);
     font-family: "Courier New", Courier, monospace; /* Sets the font to a monospace type */
     font-size: 70%;
-    overflow-x: scroll;
+    word-break: break-word;
     white-space: pre-wrap; /* Preserves whitespace and line breaks like <pre> */
-    overflow-wrap: break-word; /* Allows long words to break and wrap to the next line */
   }
 }
 

changedetectionio/static/styles/styles.css

@@ -434,6 +434,13 @@ html[data-darkmode="true"] #toggle-light-mode .icon-dark {
     padding: 20px;
     border: 1px solid #ccc;
     border-top: none; }
+  .minitabs-wrapper .minitabs-content {
+    width: 100%;
+    display: flex; }
+    .minitabs-wrapper .minitabs-content > div {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: scroll; }
   .minitabs-wrapper .minitabs {
     display: flex;
     border-bottom: 1px solid #ccc; }
@@ -488,11 +495,9 @@ body.preview-text-enabled {
     font-family: "Courier New", Courier, monospace;
     /* Sets the font to a monospace type */
     font-size: 70%;
-    overflow-x: scroll;
+    word-break: break-word;
     white-space: pre-wrap;
-    /* Preserves whitespace and line breaks like <pre> */
+    /* Preserves whitespace and line breaks like <pre> */ }
-    overflow-wrap: break-word;
-    /* Allows long words to break and wrap to the next line */ }
 
 #activate-text-preview {
   right: 0;

changedetectionio/templates/edit.html

@@ -424,15 +424,17 @@ Unavailable") }}
                     </script>
                     <br>
                     {#<div id="text-preview-controls"><span id="text-preview-refresh" class="pure-button button-xsmall">Refresh</span></div>#}
-
                     <div class="minitabs-wrapper">
-                        <div id="text-preview-inner" class="monospace-preview">
+                      <div class="minitabs-content">
-                            <p>Loading...</p>
+                          <div id="text-preview-inner" class="monospace-preview">
-                        </div>
+                              <p>Loading...</p>
-                        <div id="text-preview-before-inner" style="display: none;" class="monospace-preview">
+                          </div>
-                            <p>Loading...</p>
+                          <div id="text-preview-before-inner" style="display: none;" class="monospace-preview">
-                        </div>
+                              <p>Loading...</p>
+                          </div>
+                      </div>
                     </div>
+                    <div class="spinner" style="display: none;" id="text-preview-spinner"></div>
             </div>
           </div>
         </div>