diff --git a/media/css/main.css b/media/css/main.css index dede2b90..4f4e007f 100644 --- 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: 3rem; + 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 60bc9f6e..03bb99b3 100644 --- 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 335efb2a..faa458d3 100644 --- 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] + '
'; + // 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 + '
'; + } } 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 30e7b51a..1ff54aed 100644 --- 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 a11e7a0f..7cf91d2a 100644 --- a/templates/pages/download/linux/debian.html +++ b/templates/pages/download/linux/debian.html @@ -58,7 +58,8 @@ Automated repository configuration:
sudo apt install -y postgresql-common
 sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh
- + +

@@ -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 - + + Install PostgreSQL: (replace "18" by the version you want)

sudo apt install postgresql-18
- + +

diff --git a/templates/pages/download/linux/redhat.html b/templates/pages/download/linux/redhat.html index e352dccb..5a75d0c1 100644 --- 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:

  • Copy, paste and run the relevant parts of the setup script:
    
    -        
    +        
    +        
         
  • diff --git a/templates/pages/download/linux/ubuntu.html b/templates/pages/download/linux/ubuntu.html index d2f123fa..150a2f1d 100644 --- a/templates/pages/download/linux/ubuntu.html +++ b/templates/pages/download/linux/ubuntu.html @@ -57,7 +57,8 @@ Automated repository configuration:
    sudo apt install -y postgresql-common
     sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh
    - + +

    @@ -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 - + + Install PostgreSQL: (replace "18" by the version you want)

    sudo apt install postgresql-18
    - + +