Fix copy buttons

gm3dmo · Feb 20, 2025 · 726db76 · 726db76
1 parent d2a9e6b
commit 726db76
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/powerindex/static/script.js b/powerindex/static/script.js
@@ -114,18 +114,24 @@ function executeScript(scriptName) {
         const headersElement = document.getElementById('headers');
         const stderrElement = document.getElementById('stderr');
         const stderrCopyButton = document.querySelector('.stderr-copy');
+        const headersCopyButton = document.querySelector('.headers-copy');
+        const stdoutCopyButton = document.querySelector('.stdout-copy');
 
         if (data.is_json) {
             stdoutElement.innerHTML = data.stdout;
         } else {
             stdoutElement.textContent = data.stdout || '';
         }
 
+        // Show/hide copy buttons based on content
+        stdoutCopyButton.style.display = data.stdout ? 'block' : 'none';
+        stderrCopyButton.style.display = data.stderr ? 'block' : 'none';
+        headersCopyButton.style.display = data.headers ? 'block' : 'none';
+
         // Always use innerHTML for headers as it contains highlighted JSON
         headersElement.innerHTML = data.headers || '';
 
         stderrElement.textContent = data.stderr || '';
-        stderrCopyButton.style.display = data.stderr ? 'block' : 'none';
 
         button.textContent = 'Execute';
         button.disabled = false;

diff --git a/powerindex/static/styles.css b/powerindex/static/styles.css
@@ -517,16 +517,24 @@ tr:hover {
 }
 
 .output-header {
+    margin-bottom: 10px;
+}
+
+.header-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
 }
 
-.output-header h4 {
+.header-title h4 {
     margin: 0;
 }
 
+.stdout-copy {
+    display: block;
+}
+
 .output-search {
     padding: 4px 8px;
     border: 1px solid #ddd;
@@ -709,3 +717,33 @@ html body #stderr .highlight-wrapper .highlight {
 [data-theme="dark"] .output-box h4 {
     color: white;
 }
+
+/* Move headers search box to the left */
+#headersSearch {
+    margin: 0 0 10px 0;
+    width: 200px;
+    height: 30px;
+    padding: 0 8px;
+}
+
+.headers-controls {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.stderr-copy,
+.stdout-copy,
+.headers-copy {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: block;
+}
+
+#stdout {
+    border: none;
+    margin: 0;
+    padding: 0;
+}
diff --git a/powerindex/templates/index.html b/powerindex/templates/index.html
@@ -70,7 +70,10 @@ <h4>Rendered Script</h4>
                 <div class="output-boxes">
                     <div class="output-box">
                         <div class="output-header">
-                            <h4>Standard Output</h4>
+                            <div class="header-title">
+                                <h4>Standard Output</h4>
+                                <button class="copy-button stdout-copy" onclick="copyScriptContent('stdout')">Copy</button>
+                            </div>
                             <input type="text" 
                                    id="stdoutSearch" 
                                    class="output-search" 
@@ -89,15 +92,9 @@ <h4>Standard Error</h4>
                         </div>
                     </div>
                     <div class="output-box">
-                        <div class="output-header">
-                            <h4>Headers</h4>
-                            <input type="text" 
-                                   id="headersSearch" 
-                                   class="output-search" 
-                                   placeholder="Search headers..."
-                                   onkeyup="searchOutput('headers')">
-                        </div>
+                        <h4>Headers</h4>
                         <button class="copy-button headers-copy" onclick="copyScriptContent('headers')">Copy</button>
+                        <input type="text" id="headersSearch" onkeyup="searchOutput('headers')" placeholder="Search headers...">
                         <div class="highlight-wrapper">
                             <div class="highlight">
                                 <pre id="headers">{{ headers }}</pre>