Skip to content

Commit c750c0e

Browse files
dpagedpage
committed
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.
1 parent 5965c24 commit c750c0e

File tree

7 files changed

+106
-25
lines changed

7 files changed

+106
-25
lines changed

‎media/css/main.css‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2001,10 +2001,53 @@ button.imagebutton {
20012001
position: relative;
20022002
}
20032003

2004+
.pg-script-container pre.code {
2005+
padding-right: 4rem;
2006+
min-height: 3.5rem;
2007+
display: flex;
2008+
align-items: center;
2009+
}
2010+
20042011
.pg-script-copy-btn {
20052012
position: absolute;
2006-
top: 8px;
2007-
right: 8px;
2013+
top: 0.5rem;
2014+
right: 0.5rem;
2015+
background: transparent;
2016+
border: none;
2017+
font-size: 1rem;
2018+
padding: 4px 6px;
2019+
cursor: pointer;
2020+
transition: color 0.2s;
2021+
}
2022+
2023+
.pg-script-copy-btn-root {
2024+
right: 2rem;
2025+
}
2026+
2027+
.pg-script-copy-btn i {
2028+
color: #555 !important;
2029+
margin: 0 !important;
2030+
transition: color 0.2s;
2031+
}
2032+
2033+
.pg-script-copy-btn:hover i {
2034+
color: #336791 !important;
2035+
}
2036+
2037+
.pg-script-copy-btn.copied i {
2038+
color: #28a745 !important;
2039+
}
2040+
2041+
[data-theme="dark"] .pg-script-copy-btn i {
2042+
color: #ccc !important;
2043+
}
2044+
2045+
[data-theme="dark"] .pg-script-copy-btn:hover i {
2046+
color: #fff !important;
2047+
}
2048+
2049+
[data-theme="dark"] .pg-script-copy-btn.copied i {
2050+
color: #7dff7d !important;
20082051
}
20092052

20102053
.nobr {

‎media/js/download.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,31 @@ function setupHandlers() {
2222
copyScript(this, 'script-box');
2323
});
2424
}
25+
if (document.getElementById("copy-btn-root") && document.getElementById("script-box")) {
26+
document.getElementById('copy-btn-root').addEventListener('click', function () {
27+
copyScript(this, 'script-box', true);
28+
});
29+
}
2530
if (document.getElementById("copy-btn2") && document.getElementById("script-box2")) {
2631
document.getElementById('copy-btn2').addEventListener('click', function () {
2732
copyScript(this, 'script-box2');
2833
});
2934
}
35+
if (document.getElementById("copy-btn2-root") && document.getElementById("script-box2")) {
36+
document.getElementById('copy-btn2-root').addEventListener('click', function () {
37+
copyScript(this, 'script-box2', true);
38+
});
39+
}
3040
if (document.getElementById("copy-btn3") && document.getElementById("script-box3")) {
3141
document.getElementById('copy-btn3').addEventListener('click', function () {
3242
copyScript(this, 'script-box3');
3343
});
3444
}
45+
if (document.getElementById("copy-btn3-root") && document.getElementById("script-box3")) {
46+
document.getElementById('copy-btn3-root').addEventListener('click', function () {
47+
copyScript(this, 'script-box3', true);
48+
});
49+
}
3550
}
3651

3752
document.addEventListener("DOMContentLoaded", setupHandlers);

‎media/js/main.js‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -34,40 +34,46 @@ window.addEventListener("hashchange", shiftWindow);
3434
/* Copy a script from an HTML element to the clipboard,
3535
* removing comments and blank lines.
3636
* Arguments:
37-
* trigger: The button calling the function, whose label will be updated
37+
* trigger: The button calling the function, whose icon will be updated
3838
* elem: The element containing the script to copy
39+
* stripSudo: If true, remove 'sudo ' from the start of lines
3940
*/
4041

41-
function copyScript(trigger, elem) {
42-
var raw = document.getElementById(elem).innerHTML;
42+
function copyScript(trigger, elem, stripSudo = false) {
43+
const raw = document.getElementById(elem).innerHTML;
4344

4445
// Create a scratch div to copy from
45-
var scratch = document.createElement("div");
46+
const scratch = document.createElement("div");
4647
document.body.appendChild(scratch);
4748

4849
// Copy the contents of the script box into the scratch div, removing
49-
// comments and blank lines
50-
var lines = raw.split("\n");
51-
var output = '';
52-
for (var l = 0; l < lines.length; l++) {
53-
if (lines[l][0] != '#' && lines[l].trim() != '')
54-
output += lines[l] + '<br />';
50+
// comments and blank lines, and optionally stripping sudo
51+
const lines = raw.split("\n");
52+
let output = '';
53+
for (let l = 0; l < lines.length; l++) {
54+
if (lines[l][0] != '#' && lines[l].trim() != '') {
55+
let line = lines[l];
56+
if (stripSudo) {
57+
line = line.replace(/^(\s*)sudo /, '$1');
58+
}
59+
output += line + '<br />';
60+
}
5561
}
5662
scratch.innerHTML = output.trim();
5763

5864
// Perform the copy
5965
if(document.body.createTextRange) {
6066
// IE 11
61-
var range = document.body.createTextRange();
67+
const range = document.body.createTextRange();
6268
range.moveToElementText(scratch);
6369
range.select();
6470
document.execCommand("Copy");
6571
document.getSelection().removeAllRanges()
6672
}
6773
else if(window.getSelection) {
6874
// Sane browsers
69-
var selection = window.getSelection();
70-
var range = document.createRange();
75+
const selection = window.getSelection();
76+
const range = document.createRange();
7177
range.selectNodeContents(scratch);
7278
selection.removeAllRanges();
7379
selection.addRange(range);
@@ -79,11 +85,16 @@ function copyScript(trigger, elem) {
7985
scratch.parentNode.removeChild(scratch);
8086

8187
// Indicate to the user that the script was copied
82-
var label = trigger.innerHTML;
83-
trigger.innerHTML = 'Copied!';
88+
const icon = trigger.querySelector('i');
89+
const originalClass = stripSudo ? 'fa-terminal' : 'fa-copy';
90+
icon.classList.remove(originalClass);
91+
icon.classList.add('fa-check');
92+
trigger.classList.add('copied');
8493

8594
setTimeout(function() {
86-
trigger.innerHTML = label;
95+
icon.classList.remove('fa-check');
96+
icon.classList.add(originalClass);
97+
trigger.classList.remove('copied');
8798
}, 3000);
8899
}
89100

‎templates/downloads/js/yum.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ function verChanged() {
151151

152152
if (!ver || ver === "-1") {
153153
document.getElementById('copy-btn').style.display = 'none';
154+
document.getElementById('copy-btn-root').style.display = 'none';
154155
scriptBox.innerHTML = 'Select platform, architecture, and version above';
155156
return;
156157
}
@@ -184,13 +185,17 @@ function verChanged() {
184185
}
185186

186187
document.getElementById('copy-btn').style.display = 'block';
188+
document.getElementById('copy-btn-root').style.display = 'block';
187189
}
188190

189191
/* Event handlers */
190192
function setupHandlers() {
191193
document.getElementById('copy-btn').addEventListener('click', function () {
192194
copyScript(this, 'script-box');
193195
});
196+
document.getElementById('copy-btn-root').addEventListener('click', function () {
197+
copyScript(this, 'script-box', true);
198+
});
194199
document.getElementById('version').addEventListener('change', verChanged);
195200
document.getElementById('platform').addEventListener('change', platChanged);
196201
document.getElementById('arch').addEventListener('change', archChanged);

‎templates/pages/download/linux/debian.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ <h2>PostgreSQL Apt Repository</h2>
5858
<div class="pg-script-container">
5959
<pre id="script-box" class="code">sudo apt install -y postgresql-common
6060
sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh</pre>
61-
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
61+
<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>
62+
<button id="copy-btn" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
6263
</div>
6364

6465
<p>
@@ -77,14 +78,16 @@ <h2>PostgreSQL Apt Repository</h2>
7778

7879
# Update the package lists:
7980
sudo apt update</pre>
80-
<button id="copy-btn2" class="pg-script-copy-btn">Copy Script</button>
81+
<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>
82+
<button id="copy-btn2" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
8183
</div>
8284

8385
Install PostgreSQL: (replace "18" by the version you want)
8486

8587
<div class="pg-script-container">
8688
<pre id="script-box3" class="code">sudo apt install postgresql-18</pre>
87-
<button id="copy-btn3" class="pg-script-copy-btn">Copy Script</button>
89+
<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>
90+
<button id="copy-btn3" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
8891
</div>
8992

9093
<p>

‎templates/pages/download/linux/redhat.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ <h2>PostgreSQL Yum Repository</h2>
6060
<li>Copy, paste and run the relevant parts of the setup script:
6161
<div class="pg-script-container">
6262
<pre id="script-box" class="code"></pre>
63-
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
63+
<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>
64+
<button id="copy-btn" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
6465
</div>
6566
</li>
6667
</ol>

‎templates/pages/download/linux/ubuntu.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ <h2>PostgreSQL Apt Repository</h2>
5757
<div class="pg-script-container">
5858
<pre id="script-box" class="code">sudo apt install -y postgresql-common
5959
sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh</pre>
60-
<button id="copy-btn" class="pg-script-copy-btn">Copy Script</button>
60+
<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>
61+
<button id="copy-btn" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
6162
</div>
6263

6364
<p>
@@ -76,14 +77,16 @@ <h2>PostgreSQL Apt Repository</h2>
7677

7778
# Update the package lists:
7879
sudo apt update</pre>
79-
<button id="copy-btn2" class="pg-script-copy-btn">Copy Script</button>
80+
<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>
81+
<button id="copy-btn2" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
8082
</div>
8183

8284
Install PostgreSQL: (replace "18" by the version you want)
8385

8486
<div class="pg-script-container">
8587
<pre id="script-box3" class="code">sudo apt install postgresql-18</pre>
86-
<button id="copy-btn3" class="pg-script-copy-btn">Copy Script</button>
88+
<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>
89+
<button id="copy-btn3" class="pg-script-copy-btn" title="Copy to clipboard"><i class="far fa-copy"></i></button>
8790
</div>
8891

8992
<p>

0 commit comments

Comments
 (0)