public inbox for [email protected]
help / color / mirror / Atom feedFrom: Dave Page <[email protected]>
To: PostgreSQL WWW <[email protected]>
Subject: Copy script button cleanup
Date: Tue, 2 Dec 2025 11:29:40 +0000
Message-ID: <CA+OCxoxH75C4Q79bOfxpwXJtgZxjgTtR1xa+cWL0NVBNnT_OyA@mail.gmail.com> (raw)
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
view thread (8+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: Copy script button cleanup
In-Reply-To: <CA+OCxoxH75C4Q79bOfxpwXJtgZxjgTtR1xa+cWL0NVBNnT_OyA@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox