public inbox for [email protected]
help / color / mirror / Atom feedCopy script button cleanup
8+ messages / 4 participants
[nested] [flat]
* Copy script button cleanup
@ 2025-12-02 11:29 Dave Page <[email protected]>
2025-12-02 14:41 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
0 siblings, 1 reply; 8+ messages in thread
From: Dave Page @ 2025-12-02 11:29 UTC (permalink / raw)
To: PostgreSQL WWW <[email protected]>
The Copy Script buttons on the Linux package installation pages look
horrific. See before.png.
The attached patch makes them look much nicer, with proper sizing and an
icon based button. On click, it briefly changes to a green checkmark to
show confirmation. See the after screenshots.
I'll apply this in a couple of days if there are no objections.
--
Dave Page
pgAdmin: https://www.pgadmin.org
PostgreSQL: https://www.postgresql.org
pgEdge: https://www.pgedge.com
Attachments:
[image/png] before.png (307.1K, ../../CA+OCxoxH75C4Q79bOfxpwXJtgZxjgTtR1xa+cWL0NVBNnT_OyA@mail.gmail.com/3-before.png)
download | view image
[application/octet-stream] copy_script_buttons_v1.diff (5.5K, ../../CA+OCxoxH75C4Q79bOfxpwXJtgZxjgTtR1xa+cWL0NVBNnT_OyA@mail.gmail.com/4-copy_script_buttons_v1.diff)
download | inline diff:
diff --git a/media/css/main.css b/media/css/main.css
index dede2b90..34e04cb5 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -2001,10 +2001,49 @@ button.imagebutton {
position: relative;
}
+.pg-script-container pre.code {
+ padding-right: 2.5rem;
+ 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 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/main.js b/media/js/main.js
index 335efb2a..6be75fa8 100644
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -79,12 +79,26 @@ function copyScript(trigger, elem) {
scratch.parentNode.removeChild(scratch);
// Indicate to the user that the script was copied
- var label = trigger.innerHTML;
- trigger.innerHTML = 'Copied!';
-
- setTimeout(function() {
- trigger.innerHTML = label;
- }, 3000);
+ var icon = trigger.querySelector('i');
+ if (icon) {
+ icon.classList.remove('fa-copy');
+ icon.classList.add('fa-check');
+ trigger.classList.add('copied');
+
+ setTimeout(function() {
+ icon.classList.remove('fa-check');
+ icon.classList.add('fa-copy');
+ trigger.classList.remove('copied');
+ }, 3000);
+ } else {
+ // Fallback for text-based buttons
+ var label = trigger.innerHTML;
+ trigger.innerHTML = 'Copied!';
+
+ setTimeout(function() {
+ trigger.innerHTML = label;
+ }, 3000);
+ }
}
/*
diff --git a/templates/pages/download/linux/debian.html b/templates/pages/download/linux/debian.html
index a11e7a0f..6901eb38 100644
--- a/templates/pages/download/linux/debian.html
+++ b/templates/pages/download/linux/debian.html
@@ -58,7 +58,7 @@ 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" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
</div>
<p>
@@ -77,14 +77,14 @@ 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" 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" 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 e352dccb..7215a083 100644
--- a/templates/pages/download/linux/redhat.html
+++ b/templates/pages/download/linux/redhat.html
@@ -60,7 +60,7 @@ 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" 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 d2f123fa..7226616a 100644
--- a/templates/pages/download/linux/ubuntu.html
+++ b/templates/pages/download/linux/ubuntu.html
@@ -57,7 +57,7 @@ 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" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
</div>
<p>
@@ -76,14 +76,14 @@ 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" 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" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
</div>
<p>
[image/png] after.png (302.2K, ../../CA+OCxoxH75C4Q79bOfxpwXJtgZxjgTtR1xa+cWL0NVBNnT_OyA@mail.gmail.com/5-after.png)
download | view image
^ permalink raw reply [nested|flat] 8+ messages in thread
* Re: Copy script button cleanup
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
@ 2025-12-02 14:41 ` Magnus Hagander <[email protected]>
2025-12-03 10:38 ` Re: Copy script button cleanup Dave Page <[email protected]>
2025-12-03 13:26 ` Re: Copy script button cleanup Daniel Gustafsson <[email protected]>
0 siblings, 2 replies; 8+ messages in thread
From: Magnus Hagander @ 2025-12-02 14:41 UTC (permalink / raw)
To: Dave Page <[email protected]>; +Cc: PostgreSQL WWW <[email protected]>
On Tue, 2 Dec 2025 at 12:30, Dave Page <[email protected]> wrote:
> The Copy Script buttons on the Linux package installation pages look
> horrific. See before.png.
>
> The attached patch makes them look much nicer, with proper sizing and an
> icon based button. On click, it briefly changes to a green checkmark to
> show confirmation. See the after screenshots.
>
> I'll apply this in a couple of days if there are no objections.
>
>
LGTM in general and certainly is a lot prettier.
Can you explain what that "fallback for text based buttons" is? Aren't
they all replaced with icons?
Oh, and I'm told you're not supposed to use "var" for variables in js due
to the broken scoping :)
And while you're poking at it, one thing I've really wanted is a "copy
without the sudo parts". But I'm guessing that would be a lot more
complicated than what you're fixing here...
--
Magnus Hagander
Me: https://www.hagander.net/ <http://www.hagander.net/;
Work: https://www.redpill-linpro.com/ <http://www.redpill-linpro.com/;
^ permalink raw reply [nested|flat] 8+ messages in thread
* Re: Copy script button cleanup
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
2025-12-02 14:41 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
@ 2025-12-03 10:38 ` Dave Page <[email protected]>
2025-12-03 22:28 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
1 sibling, 1 reply; 8+ messages in thread
From: Dave Page @ 2025-12-03 10:38 UTC (permalink / raw)
To: Magnus Hagander <[email protected]>; +Cc: PostgreSQL WWW <[email protected]>
On Tue, 2 Dec 2025 at 14:41, Magnus Hagander <[email protected]> wrote:
>
>
> On Tue, 2 Dec 2025 at 12:30, Dave Page <[email protected]> wrote:
>
>> The Copy Script buttons on the Linux package installation pages look
>> horrific. See before.png.
>>
>> The attached patch makes them look much nicer, with proper sizing and an
>> icon based button. On click, it briefly changes to a green checkmark to
>> show confirmation. See the after screenshots.
>>
>> I'll apply this in a couple of days if there are no objections.
>>
>>
> LGTM in general and certainly is a lot prettier.
>
> Can you explain what that "fallback for text based buttons" is? Aren't
> they all replaced with icons?
>
Oh, yeah. That's no longer needed now the patch is complete. I'll remove it.
>
> Oh, and I'm told you're not supposed to use "var" for variables in js due
> to the broken scoping :)
>
Old habits die hard :-(
>
> And while you're poking at it, one thing I've really wanted is a "copy
> without the sudo parts". But I'm guessing that would be a lot more
> complicated than what you're fixing here...
>
Ask and thou shalt receive.
2 patches attached. Both fix the original issue. One also adds the no sudo
button.
--
Dave Page
pgAdmin: https://www.pgadmin.org
PostgreSQL: https://www.postgresql.org
pgEdge: https://www.pgedge.com
Attachments:
[application/octet-stream] copy_script_buttons_no_sudo_v1.diff (11.6K, ../../CA+OCxoyE1J2hY7tR=mw+ikQSPbD61ftjouk4fkvkmA4qfaODDA@mail.gmail.com/3-copy_script_buttons_no_sudo_v1.diff)
download | inline diff:
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] + '<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 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:
<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 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:
<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 d2f123fa..150a2f1d 100644
--- 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>
[application/octet-stream] copy_script_buttons_v2.diff (6.8K, ../../CA+OCxoyE1J2hY7tR=mw+ikQSPbD61ftjouk4fkvkmA4qfaODDA@mail.gmail.com/4-copy_script_buttons_v2.diff)
download | inline diff:
diff --git a/media/css/main.css b/media/css/main.css
index dede2b90..34e04cb5 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -2001,10 +2001,49 @@ button.imagebutton {
position: relative;
}
+.pg-script-container pre.code {
+ padding-right: 2.5rem;
+ 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 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/main.js b/media/js/main.js
index 335efb2a..4d18db87 100644
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -39,17 +39,17 @@ window.addEventListener("hashchange", shiftWindow);
*/
function copyScript(trigger, elem) {
- var raw = document.getElementById(elem).innerHTML;
+ 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++) {
+ const lines = raw.split("\n");
+ let output = '';
+ for (let l = 0; l < lines.length; l++) {
if (lines[l][0] != '#' && lines[l].trim() != '')
output += lines[l] + '<br />';
}
@@ -58,7 +58,7 @@ function copyScript(trigger, elem) {
// 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 +66,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 +79,15 @@ 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');
+ icon.classList.remove('fa-copy');
+ icon.classList.add('fa-check');
+ trigger.classList.add('copied');
setTimeout(function() {
- trigger.innerHTML = label;
+ icon.classList.remove('fa-check');
+ icon.classList.add('fa-copy');
+ trigger.classList.remove('copied');
}, 3000);
}
diff --git a/templates/pages/download/linux/debian.html b/templates/pages/download/linux/debian.html
index a11e7a0f..6901eb38 100644
--- a/templates/pages/download/linux/debian.html
+++ b/templates/pages/download/linux/debian.html
@@ -58,7 +58,7 @@ 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" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
</div>
<p>
@@ -77,14 +77,14 @@ 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" 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" 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 e352dccb..7215a083 100644
--- a/templates/pages/download/linux/redhat.html
+++ b/templates/pages/download/linux/redhat.html
@@ -60,7 +60,7 @@ 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" 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 d2f123fa..7226616a 100644
--- a/templates/pages/download/linux/ubuntu.html
+++ b/templates/pages/download/linux/ubuntu.html
@@ -57,7 +57,7 @@ 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" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
</div>
<p>
@@ -76,14 +76,14 @@ 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" 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" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
</div>
<p>
^ permalink raw reply [nested|flat] 8+ messages in thread
* Re: Copy script button cleanup
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
2025-12-02 14:41 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
2025-12-03 10:38 ` Re: Copy script button cleanup Dave Page <[email protected]>
@ 2025-12-03 22:28 ` Magnus Hagander <[email protected]>
2025-12-04 09:39 ` Re: Copy script button cleanup Dave Page <[email protected]>
0 siblings, 1 reply; 8+ messages in thread
From: Magnus Hagander @ 2025-12-03 22:28 UTC (permalink / raw)
To: Dave Page <[email protected]>; +Cc: PostgreSQL WWW <[email protected]>
On Wed, 3 Dec 2025 at 11:38, Dave Page <[email protected]> wrote:
>
>
> On Tue, 2 Dec 2025 at 14:41, Magnus Hagander <[email protected]> wrote:
>
>>
>>
>> On Tue, 2 Dec 2025 at 12:30, Dave Page <[email protected]> wrote:
>>
>>> The Copy Script buttons on the Linux package installation pages look
>>> horrific. See before.png.
>>>
>>> The attached patch makes them look much nicer, with proper sizing and an
>>> icon based button. On click, it briefly changes to a green checkmark to
>>> show confirmation. See the after screenshots.
>>>
>>> I'll apply this in a couple of days if there are no objections.
>>>
>>>
>> LGTM in general and certainly is a lot prettier.
>>
>> Can you explain what that "fallback for text based buttons" is? Aren't
>> they all replaced with icons?
>>
>
> Oh, yeah. That's no longer needed now the patch is complete. I'll remove
> it.
>
>
>>
>> Oh, and I'm told you're not supposed to use "var" for variables in js due
>> to the broken scoping :)
>>
>
> Old habits die hard :-(
>
>
>>
>> And while you're poking at it, one thing I've really wanted is a "copy
>> without the sudo parts". But I'm guessing that would be a lot more
>> complicated than what you're fixing here...
>>
>
> Ask and thou shalt receive.
>
Sweet! :)
2 patches attached. Both fix the original issue. One also adds the no sudo
> button.
>
>
Looks good in a (fairly brief) check. Thanks!
--
Magnus Hagander
Me: https://www.hagander.net/ <http://www.hagander.net/;
Work: https://www.redpill-linpro.com/ <http://www.redpill-linpro.com/;
^ permalink raw reply [nested|flat] 8+ messages in thread
* Re: Copy script button cleanup
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
2025-12-02 14:41 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
2025-12-03 10:38 ` Re: Copy script button cleanup Dave Page <[email protected]>
2025-12-03 22:28 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
@ 2025-12-04 09:39 ` Dave Page <[email protected]>
2025-12-04 15:18 ` Re: Copy script button cleanup Álvaro Herrera <[email protected]>
0 siblings, 1 reply; 8+ messages in thread
From: Dave Page @ 2025-12-04 09:39 UTC (permalink / raw)
To: Magnus Hagander <[email protected]>; +Cc: PostgreSQL WWW <[email protected]>
On Wed, 3 Dec 2025 at 22:29, Magnus Hagander <[email protected]> wrote:
> On Wed, 3 Dec 2025 at 11:38, Dave Page <[email protected]> wrote:
>
>>
>>
>> On Tue, 2 Dec 2025 at 14:41, Magnus Hagander <[email protected]> wrote:
>>
>>>
>>>
>>> On Tue, 2 Dec 2025 at 12:30, Dave Page <[email protected]> wrote:
>>>
>>>> The Copy Script buttons on the Linux package installation pages look
>>>> horrific. See before.png.
>>>>
>>>> The attached patch makes them look much nicer, with proper sizing and
>>>> an icon based button. On click, it briefly changes to a green checkmark to
>>>> show confirmation. See the after screenshots.
>>>>
>>>> I'll apply this in a couple of days if there are no objections.
>>>>
>>>>
>>> LGTM in general and certainly is a lot prettier.
>>>
>>> Can you explain what that "fallback for text based buttons" is? Aren't
>>> they all replaced with icons?
>>>
>>
>> Oh, yeah. That's no longer needed now the patch is complete. I'll remove
>> it.
>>
>>
>>>
>>> Oh, and I'm told you're not supposed to use "var" for variables in js
>>> due to the broken scoping :)
>>>
>>
>> Old habits die hard :-(
>>
>>
>>>
>>> And while you're poking at it, one thing I've really wanted is a "copy
>>> without the sudo parts". But I'm guessing that would be a lot more
>>> complicated than what you're fixing here...
>>>
>>
>> Ask and thou shalt receive.
>>
>
> Sweet! :)
>
>
> 2 patches attached. Both fix the original issue. One also adds the no sudo
>> button.
>>
>>
> Looks good in a (fairly brief) check. Thanks!
>
Thanks - I fixed one more minor styling issue (minimum height of the code
boxes), and applied the no-sudo version.
--
Dave Page
pgAdmin: https://www.pgadmin.org
PostgreSQL: https://www.postgresql.org
pgEdge: https://www.pgedge.com
^ permalink raw reply [nested|flat] 8+ messages in thread
* Re: Copy script button cleanup
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
2025-12-02 14:41 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
2025-12-03 10:38 ` Re: Copy script button cleanup Dave Page <[email protected]>
2025-12-03 22:28 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
2025-12-04 09:39 ` Re: Copy script button cleanup Dave Page <[email protected]>
@ 2025-12-04 15:18 ` Álvaro Herrera <[email protected]>
2025-12-04 17:18 ` Re: Copy script button cleanup Dave Page <[email protected]>
0 siblings, 1 reply; 8+ messages in thread
From: Álvaro Herrera @ 2025-12-04 15:18 UTC (permalink / raw)
To: Dave Page <[email protected]>; +Cc: Magnus Hagander <[email protected]>; PostgreSQL WWW <[email protected]>
On 2025-Dec-04, Dave Page wrote:
> Thanks - I fixed one more minor styling issue (minimum height of the code
> boxes), and applied the no-sudo version.
Hmm, when I click the no-sudo button, a green checkmark appears. But
when I click the other one, the icon from the button disappears for a
few seconds. I suppose that's not intended.
--
Álvaro Herrera 48°01'N 7°57'E — https://www.EnterpriseDB.com/
"People get annoyed when you try to debug them." (Larry Wall)
^ permalink raw reply [nested|flat] 8+ messages in thread
* Re: Copy script button cleanup
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
2025-12-02 14:41 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
2025-12-03 10:38 ` Re: Copy script button cleanup Dave Page <[email protected]>
2025-12-03 22:28 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
2025-12-04 09:39 ` Re: Copy script button cleanup Dave Page <[email protected]>
2025-12-04 15:18 ` Re: Copy script button cleanup Álvaro Herrera <[email protected]>
@ 2025-12-04 17:18 ` Dave Page <[email protected]>
0 siblings, 0 replies; 8+ messages in thread
From: Dave Page @ 2025-12-04 17:18 UTC (permalink / raw)
To: Álvaro Herrera <[email protected]>; +Cc: Magnus Hagander <[email protected]>; PostgreSQL WWW <[email protected]>
On Thu, 4 Dec 2025 at 15:18, Álvaro Herrera <[email protected]> wrote:
> On 2025-Dec-04, Dave Page wrote:
>
> > Thanks - I fixed one more minor styling issue (minimum height of the code
> > boxes), and applied the no-sudo version.
>
> Hmm, when I click the no-sudo button, a green checkmark appears. But
> when I click the other one, the icon from the button disappears for a
> few seconds. I suppose that's not intended.
I can’t reproduce that on my laptop or phone. Do you need a hard refresh
perhaps?
>
> --
> Álvaro Herrera 48°01'N 7°57'E —
> https://www.EnterpriseDB.com/
> "People get annoyed when you try to debug them." (Larry Wall)
>
^ permalink raw reply [nested|flat] 8+ messages in thread
* Re: Copy script button cleanup
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
2025-12-02 14:41 ` Re: Copy script button cleanup Magnus Hagander <[email protected]>
@ 2025-12-03 13:26 ` Daniel Gustafsson <[email protected]>
1 sibling, 0 replies; 8+ messages in thread
From: Daniel Gustafsson @ 2025-12-03 13:26 UTC (permalink / raw)
To: Magnus Hagander <[email protected]>; +Cc: Dave Page <[email protected]>; PostgreSQL WWW <[email protected]>
> On 2 Dec 2025, at 15:41, Magnus Hagander <[email protected]> wrote:
> On Tue, 2 Dec 2025 at 12:30, Dave Page <[email protected] <mailto:[email protected]>> wrote:
>> The Copy Script buttons on the Linux package installation pages look horrific. See before.png.
>>
>> The attached patch makes them look much nicer, with proper sizing and an icon based button. On click, it briefly changes to a green checkmark to show confirmation. See the after screenshots.
>>
>> I'll apply this in a couple of days if there are no objections.
>
> LGTM in general and certainly is a lot prettier.
+1, it looks much better!
--
Daniel Gustafsson
^ permalink raw reply [nested|flat] 8+ messages in thread
end of thread, other threads:[~2025-12-04 17:18 UTC | newest]
Thread overview: 8+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2025-12-02 11:29 Copy script button cleanup Dave Page <[email protected]>
2025-12-02 14:41 ` Magnus Hagander <[email protected]>
2025-12-03 10:38 ` Dave Page <[email protected]>
2025-12-03 22:28 ` Magnus Hagander <[email protected]>
2025-12-04 09:39 ` Dave Page <[email protected]>
2025-12-04 15:18 ` Álvaro Herrera <[email protected]>
2025-12-04 17:18 ` Dave Page <[email protected]>
2025-12-03 13:26 ` Daniel Gustafsson <[email protected]>
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox