Code Inputs: Expanded view (#2785)

relates to xibosignageltd/xibo-private#829
xibosignage · Nov 4, 2024 · d9226db · d9226db
1 parent e370397
commit d9226db
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 14 deletions.
diff --git a/ui/src/core/forms.js b/ui/src/core/forms.js
@@ -1985,7 +1985,8 @@ window.forms = {
       '.xibo-code-input',
       target,
     ).each(function(_k, el) {
-      const $textArea = $(el).find('.code-input');
+      const $container = $(el);
+      const $textArea = $container.find('.code-input');
       const inputValue = $textArea.val();
       const codeType = $textArea.data('codeType');
       let valueChanged = false;
@@ -2021,8 +2022,51 @@ window.forms = {
             }
           }),
         ],
-        parent: $(el).find('.code-input-editor')[0],
+        parent: $container.find('.code-input-editor')[0],
       });
+
+      // Expand functionality
+      const $codeEditor = $container.find('.code-input-editor-container');
+      const toggleEditor = function() {
+        const isOpened = $codeEditor.hasClass('code-input-fs');
+        const codeEditorHeight = $codeEditor.height();
+
+        // Toggle class
+        $codeEditor.toggleClass('code-input-fs');
+
+        // If it's opened
+        if (isOpened) {
+          // Remove overlay
+          $('.code-fs-overlay').remove();
+
+          // Move editor back to original container
+          $codeEditor.appendTo($container);
+
+          // Remove placeholder
+          $container.find('.code-fs-placeholder').remove();
+        } else {
+          // Add overlay
+          const $codeFSOverlay = $('.custom-overlay:first').clone();
+          $codeFSOverlay
+            .removeClass('custom-overlay')
+            .addClass('code-fs-overlay custom-overlay-clone')
+            .appendTo($('body'))
+            .on('click', toggleEditor);
+          $codeFSOverlay
+            .show();
+
+          // Move editor to body
+          $codeEditor.appendTo($('body'));
+
+          // Add placeholder
+          const $codeFSPlaceholder = $('<div>')
+            .addClass('code-fs-placeholder')
+            .css('height', codeEditorHeight);
+          $codeFSPlaceholder.appendTo($container);
+        }
+      };
+
+      $container.find('.code-input-fs-btn').on('click', toggleEditor);
     });
 
     // Colour picker

diff --git a/ui/src/style/forms.scss b/ui/src/style/forms.scss
@@ -46,23 +46,98 @@
 }
 
 /* Code input */
-.code-input-group {
-    .code-input-editor-container {
-        min-height: 160px;
-        max-height: 400px;
-        border: 2px solid $xibo-color-neutral-600;
-        border-radius: 0.25rem;
+.code-input-editor-container {
+    border: 2px solid $xibo-color-neutral-600;
+    border-radius: 0.25rem;
+    position: relative;
+    overflow-y: auto;
+
+    &.non-scroll {
+        overflow-y: unset;
+    }
+
+    .code-input-editor-scrollable {
         overflow-y: auto;
+        min-height: 160px;
+        max-height: 300px;
+    }
 
-        .code-input-editor {
-            width: 100%;
-            height: 100%;
+    .code-input-fs-btn {
+        display: none;
+        position: absolute;
+        right: 6px;
+        top: 6px;
+
+        .hide-on-code-fs {
+            display: block;
         }
 
-        .cm-gutters {
+        .show-on-code-fs {
             display: none;
         }
     }
+
+    .code-input-editor {
+        width: 100%;
+        height: 100%;
+
+        .cm-focused {
+            outline: none !important;
+        }
+    }
+
+    .cm-gutters {
+        display: none;
+    }
+
+    &:hover {
+        .code-input-fs-btn {
+            display: block;
+            opacity: 0.4;
+
+            &:hover {
+                opacity: 0.8;
+            }
+        }
+    }
+
+    &.code-input-fs {
+        position: fixed;
+        width: 60vw;
+        height: 60vh;
+        left: 20vw;
+        top: 20vh;
+        z-index: $code-editor-fullscreen-z-index;
+        background-color: $xibo-color-neutral-0;
+
+        .code-input-editor-scrollable {
+            max-height: 100%;
+        }
+
+        .code-input-fs-btn {
+            display: block;
+        }
+
+        .hide-on-code-fs {
+            display: none;
+        }
+
+        .show-on-code-fs {
+            display: block;
+        }
+    }
+}
+
+.code-fs-placeholder {
+    border: 2px solid $xibo-color-neutral-600;
+    border-radius: 0.25rem;
+    background-color: $xibo-color-neutral-300;
+    min-height: 160px;
+    max-height: 400px;
+}
+
+.code-fs-overlay {
+    z-index: $code-editor-fullscreen-overlay-z-index !important;
 }
 
 /* Data input */

diff --git a/ui/src/style/variables.scss b/ui/src/style/variables.scss
@@ -75,6 +75,10 @@ $properties-panel-rich-text-container-z-index: 1050;
 
 $preview-playing-z-index: 2000;
 
+
+$code-editor-fullscreen-overlay-z-index: 2030;
+$code-editor-fullscreen-z-index: 2040;
+
 $bootbox-second-dialog-z-index: 3100;
 $context-menu-overlay-z-index: 3000;
 $loading-overlay-z-index: 3000;

diff --git a/ui/src/templates/forms/inputs/code.hbs b/ui/src/templates/forms/inputs/code.hbs
@@ -13,7 +13,13 @@
             data-{{this.name}}="{{this.value}}"
         {{/each}}
     >{{value}}</textarea>
-    <div class="code-input-editor-container">
-        <div class="code-input-editor"></div>
+    <div class="code-input-editor-container non-scroll">
+        <div class="code-input-editor-scrollable">
+            <div class="code-input-editor"></div>
+        </div>
+        <button type="button" class="code-input-fs-btn btn btn-sm btn-white">
+            <i class="fas fa-arrows-alt hide-on-code-fs"></i>
+            <i class="fas fa-compress-arrows-alt show-on-code-fs"></i>
+        </button>
     </div>
 </div>