Update the copy script button styling and add a no-sudo variant.

This update replaces the horrible text based copy script buttons on the Linux package
download pages with nice icons, add a variant that copies the code without the sudo
prefixes, and tidies up the styling in general.

diff --git a/media/css/main.css b/media/css/main.css
index dede2b90a544adbea6e382d0043a24c3f58c40cc..6aed61e076c80f792c80e1f69a3d7a42ecc6e2be 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -2001,10 +2001,53 @@ button.imagebutton {
   position: relative;
 }
 
+.pg-script-container pre.code {
+  padding-right: 4rem;
+  min-height: 3.5rem;
+  display: flex;
+  align-items: center;
+}
+
 .pg-script-copy-btn {
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: transparent;
+  border: none;
+  font-size: 1rem;
+  padding: 4px 6px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.pg-script-copy-btn-root {
+  right: 2rem;
+}
+
+.pg-script-copy-btn i {
+  color: #555 !important;
+  margin: 0 !important;
+  transition: color 0.2s;
+}
+
+.pg-script-copy-btn:hover i {
+  color: #336791 !important;
+}
+
+.pg-script-copy-btn.copied i {
+  color: #28a745 !important;
+}
+
+[data-theme="dark"] .pg-script-copy-btn i {
+  color: #ccc !important;
+}
+
+[data-theme="dark"] .pg-script-copy-btn:hover i {
+  color: #fff !important;
+}
+
+[data-theme="dark"] .pg-script-copy-btn.copied i {
+  color: #7dff7d !important;
 }
 
 .nobr {

diff --git a/media/js/download.js b/media/js/download.js
index 60bc9f6ee805bd58badafa1c1eb414378a1ae1a8..03bb99b378de0d6f6fb67d04f203ab9fb3f16931 100644 (file)
--- a/media/js/download.js
+++ b/media/js/download.js
@@ -22,16 +22,31 @@ function setupHandlers() {
             copyScript(this, 'script-box');
         });
     }
+    if (document.getElementById("copy-btn-root") && document.getElementById("script-box")) {
+        document.getElementById('copy-btn-root').addEventListener('click', function () {
+            copyScript(this, 'script-box', true);
+        });
+    }
     if (document.getElementById("copy-btn2") && document.getElementById("script-box2")) {
         document.getElementById('copy-btn2').addEventListener('click', function () {
             copyScript(this, 'script-box2');
         });
     }
+    if (document.getElementById("copy-btn2-root") && document.getElementById("script-box2")) {
+        document.getElementById('copy-btn2-root').addEventListener('click', function () {
+            copyScript(this, 'script-box2', true);
+        });
+    }
     if (document.getElementById("copy-btn3") && document.getElementById("script-box3")) {
         document.getElementById('copy-btn3').addEventListener('click', function () {
             copyScript(this, 'script-box3');
         });
     }
+    if (document.getElementById("copy-btn3-root") && document.getElementById("script-box3")) {
+        document.getElementById('copy-btn3-root').addEventListener('click', function () {
+            copyScript(this, 'script-box3', true);
+        });
+    }
 }
 
 document.addEventListener("DOMContentLoaded", setupHandlers);

diff --git a/media/js/main.js b/media/js/main.js
index 335efb2ada24d22e0db0fae85d71557776a0e055..faa458d35cbf767374287bd85c99bafbdfcc19bc 100644 (file)
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -34,31 +34,37 @@ window.addEventListener("hashchange", shiftWindow);
 /* Copy a script from an HTML element to the clipboard,
  * removing comments and blank lines.
  * Arguments:
- *   trigger: The button calling the function, whose label will be updated
+ *   trigger: The button calling the function, whose icon will be updated
  *   elem: The element containing the script to copy
+ *   stripSudo: If true, remove 'sudo ' from the start of lines
  */
 
-function copyScript(trigger, elem) {
-    var raw = document.getElementById(elem).innerHTML;
+function copyScript(trigger, elem, stripSudo = false) {
+    const raw = document.getElementById(elem).innerHTML;
 
     // Create a scratch div to copy from
-    var scratch = document.createElement("div");
+    const scratch = document.createElement("div");
     document.body.appendChild(scratch);
 
     // Copy the contents of the script box into the scratch div, removing
-    // comments and blank lines
-    var lines = raw.split("\n");
-    var output = '';
-    for (var l = 0; l < lines.length; l++) {
-        if (lines[l][0] != '#' && lines[l].trim() != '')
-            output += lines[l] + '<br />';
+    // comments and blank lines, and optionally stripping sudo
+    const lines = raw.split("\n");
+    let output = '';
+    for (let l = 0; l < lines.length; l++) {
+        if (lines[l][0] != '#' && lines[l].trim() != '') {
+            let line = lines[l];
+            if (stripSudo) {
+                line = line.replace(/^(\s*)sudo /, '$1');
+            }
+            output += line + '<br />';
+        }
     }
     scratch.innerHTML = output.trim();
 
     // Perform the copy
     if(document.body.createTextRange) {
         // IE 11
-        var range = document.body.createTextRange();
+        const range = document.body.createTextRange();
         range.moveToElementText(scratch);
         range.select();
         document.execCommand("Copy");
@@ -66,8 +72,8 @@ function copyScript(trigger, elem) {
     }
     else if(window.getSelection) {
         // Sane browsers
-        var selection = window.getSelection();
-        var range = document.createRange();
+        const selection = window.getSelection();
+        const range = document.createRange();
         range.selectNodeContents(scratch);
         selection.removeAllRanges();
         selection.addRange(range);
@@ -79,11 +85,16 @@ function copyScript(trigger, elem) {
     scratch.parentNode.removeChild(scratch);
 
     // Indicate to the user that the script was copied
-    var label = trigger.innerHTML;
-    trigger.innerHTML = 'Copied!';
+    const icon = trigger.querySelector('i');
+    const originalClass = stripSudo ? 'fa-terminal' : 'fa-copy';
+    icon.classList.remove(originalClass);
+    icon.classList.add('fa-check');
+    trigger.classList.add('copied');
 
     setTimeout(function() {
-        trigger.innerHTML = label;
+        icon.classList.remove('fa-check');
+        icon.classList.add(originalClass);
+        trigger.classList.remove('copied');
     }, 3000);
 }
 

diff --git a/templates/downloads/js/yum.js b/templates/downloads/js/yum.js
index 30e7b51a2eac6acf7d9aa45f81b8ca2450a6d880..1ff54aed2537e817df4b216d5cc5971c16a5c5c3 100644 (file)
--- a/templates/downloads/js/yum.js
+++ b/templates/downloads/js/yum.js
@@ -151,6 +151,7 @@ function verChanged() {
 
   if (!ver || ver === "-1") {
      document.getElementById('copy-btn').style.display = 'none';
+     document.getElementById('copy-btn-root').style.display = 'none';
      scriptBox.innerHTML = 'Select platform, architecture, and version above';
      return;
   }
@@ -184,6 +185,7 @@ function verChanged() {
   }
 
   document.getElementById('copy-btn').style.display = 'block';
+  document.getElementById('copy-btn-root').style.display = 'block';
 }
 
 /* Event handlers */
@@ -191,6 +193,9 @@ function setupHandlers() {
     document.getElementById('copy-btn').addEventListener('click', function () {
         copyScript(this, 'script-box');
     });
+    document.getElementById('copy-btn-root').addEventListener('click', function () {
+        copyScript(this, 'script-box', true);
+    });
     document.getElementById('version').addEventListener('change', verChanged);
     document.getElementById('platform').addEventListener('change', platChanged);
     document.getElementById('arch').addEventListener('change', archChanged);

diff --git a/templates/pages/download/linux/debian.html b/templates/pages/download/linux/debian.html
index a11e7a0f7950a6138be7ab153472d0dc476912be..7cf91d2a34b9ca816f31a10bc5b7e4ca2cae1727 100644 (file)
--- a/templates/pages/download/linux/debian.html
+++ b/templates/pages/download/linux/debian.html
@@ -58,7 +58,8 @@ Automated repository configuration:
 <div class="pg-script-container">
     <pre id="script-box" class="code">sudo apt install -y postgresql-common
 sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh</pre>
-    <button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
+    <button id="copy-btn-root" class="pg-script-copy-btn pg-script-copy-btn-root" title="Copy to clipboard (without sudo, for root)"><i class="fas fa-terminal"></i></button>
+    <button id="copy-btn" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
 </div>
 
 <p>
@@ -77,14 +78,16 @@ sudo sh -c "echo 'deb [signed-by=/usr/share/postgresql-common/pgdg/apt.postgresq
 
 # Update the package lists:
 sudo apt update</pre>
-    <button id="copy-btn2" class="pg-script-copy-btn">Copy Script</button>
+    <button id="copy-btn2-root" class="pg-script-copy-btn pg-script-copy-btn-root" title="Copy to clipboard (without sudo, for root)"><i class="fas fa-terminal"></i></button>
+    <button id="copy-btn2" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
 </div>
 
 Install PostgreSQL: (replace "18" by the version you want)
 
 <div class="pg-script-container">
     <pre id="script-box3" class="code">sudo apt install postgresql-18</pre>
-    <button id="copy-btn3" class="pg-script-copy-btn">Copy Script</button>
+    <button id="copy-btn3-root" class="pg-script-copy-btn pg-script-copy-btn-root" title="Copy to clipboard (without sudo, for root)"><i class="fas fa-terminal"></i></button>
+    <button id="copy-btn3" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
 </div>
 
 <p>

diff --git a/templates/pages/download/linux/redhat.html b/templates/pages/download/linux/redhat.html
index e352dccb13e08791e76abaa92de2c05167fc80a0..5a75d0c1e3c29bd14f3fd48393c691fb8ac7323f 100644 (file)
--- a/templates/pages/download/linux/redhat.html
+++ b/templates/pages/download/linux/redhat.html
@@ -60,7 +60,8 @@ To use the PostgreSQL Yum Repository, follow these steps:
   <li>Copy, paste and run the relevant parts of the setup script:
     <div class="pg-script-container">
         <pre id="script-box" class="code"></pre>
-        <button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
+        <button id="copy-btn-root" class="pg-script-copy-btn pg-script-copy-btn-root" title="Copy to clipboard (without sudo, for root)"><i class="fas fa-terminal"></i></button>
+        <button id="copy-btn" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
     </div>
   </li>
 </ol>

diff --git a/templates/pages/download/linux/ubuntu.html b/templates/pages/download/linux/ubuntu.html
index d2f123fa64876caf9f4a8a1f5d9e7dd5c9c36df5..150a2f1d6c13199a51282247b8a99433b76b25d5 100644 (file)
--- a/templates/pages/download/linux/ubuntu.html
+++ b/templates/pages/download/linux/ubuntu.html
@@ -57,7 +57,8 @@ Automated repository configuration:
 <div class="pg-script-container">
     <pre id="script-box" class="code">sudo apt install -y postgresql-common
 sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh</pre>
-    <button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
+    <button id="copy-btn-root" class="pg-script-copy-btn pg-script-copy-btn-root" title="Copy to clipboard (without sudo, for root)"><i class="fas fa-terminal"></i></button>
+    <button id="copy-btn" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
 </div>
 
 <p>
@@ -76,14 +77,16 @@ sudo sh -c "echo 'deb [signed-by=/usr/share/postgresql-common/pgdg/apt.postgresq
 
 # Update the package lists:
 sudo apt update</pre>
-    <button id="copy-btn2" class="pg-script-copy-btn">Copy Script</button>
+    <button id="copy-btn2-root" class="pg-script-copy-btn pg-script-copy-btn-root" title="Copy to clipboard (without sudo, for root)"><i class="fas fa-terminal"></i></button>
+    <button id="copy-btn2" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
 </div>
 
 Install PostgreSQL: (replace "18" by the version you want)
 
 <div class="pg-script-container">
     <pre id="script-box3" class="code">sudo apt install postgresql-18</pre>
-    <button id="copy-btn3" class="pg-script-copy-btn">Copy Script</button>
+    <button id="copy-btn3-root" class="pg-script-copy-btn pg-script-copy-btn-root" title="Copy to clipboard (without sudo, for root)"><i class="fas fa-terminal"></i></button>
+    <button id="copy-btn3" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
 </div>
 
 <p>