Make terminal commands easily copyable #122

stefansundin · 2023-09-16T19:47:20Z

This makes the terminal commands on the Downloads page easily copyable with a button click.

Screenshot:

Windows commands have the > prompt. The prompt symbols are defined in CSS so they are not selectable. 🤩

Note that the Downloads page currently doesn't work when JavaScript is disabled! I have changes locally that fix this, but I want to submit them separately to make review easier.

If the user has blocked clipboard access then they will get an error alert and the text is selected to make it easier for them to copy it manually. I was able to test this in Firefox by setting dom.allow_cut_copy=false in about:config. If anyone can figure out a way to disable clipboard write in Chrome please write a comment below (the Clipboard site permission doesn't do it).

The look and behavior of this is inspired by the Homebrew copy widget on this page: https://formulae.brew.sh/cask/keepassxc

Please let me know if you want any changes.

layouts/_default/baseof.html

droidmonkey · 2023-09-16T19:51:55Z

On the downloads page, can you also make it more obvious that the user can (and maybe should) click the "See More Options" button below the suggested download? Maybe a yellow hued color or similar styling.

stefansundin · 2023-09-16T19:53:58Z

Can I change all of them to use the yellow styling from the Linux download options?

droidmonkey · 2023-09-16T19:55:55Z

assets/js/copyable.js

+    for (const el of document.querySelectorAll('.copyable')) {
+        const btn = document.createElement('button');
+        btn.title = 'Copy to clipboard';
+        btn.textContent = '📋';


I prefer to use a "wireframe" type icon such as https://fonts.google.com/icons?selected=Material%20Icons%3Acontent_copy%3A

This comment applies to all the icons (X and Checkmark)

In my first attempt I was using an icon like that, but over time I have grown to prefer the icons that I use now. They feel more actionable to me.

I'll give it a look, but they seem out of place compared to the rest of our page styling.

Oh.. I saw your change too late. Anyway, here's what the fork awesome icons look like:

I removed the error icon since it didn't look that good. I don't think an icon is strictly necessary in that case since there's the alert dialog.

I can remove my last commit if you prefer the unicode characters instead.

droidmonkey · 2023-09-16T19:56:54Z

Yah that styling is good, maybe we need to desaturate that color a little as it is ugly. Styling the text would be nice as well, centered/bold/etc

droidmonkey · 2023-09-16T20:16:11Z

Actually looks better on my computer than your screenshot (unless you fixed the scaling is a subsequent commit):

droidmonkey · 2023-09-16T20:12:40Z

assets/js/copyable.js

+    for (const el of document.querySelectorAll('.copyable')) {
+        const btn = document.createElement('button');
+        btn.title = 'Copy to clipboard';
+        btn.textContent = '📋';


I'll give it a look, but they seem out of place compared to the rest of our page styling.

phoerious · 2023-09-20T21:31:58Z

I don't like the borders. Too much noise and the border radius is wrong.

I'm also not sure if I'm a fan of making the more options dropdown more visible. Except for the macOS special case, it's more of an expert thing.

droidmonkey · 2023-09-20T22:22:23Z

More visible doesn't have to mean "primary focus". As it stands right now it might as well be invisible.

droidmonkey · 2023-10-28T18:42:30Z

I updated the border radius and background color. The copy button background darkens slightly on hover.

@phoerious

… a button click Also change the header styling of collapsable sections on the Downloads page.

phoerious · 2023-11-29T18:38:02Z

I'm still not a huge fan of having so many borders. It's a bit confusing that those are two boxes, even though the commands belong together. Looks a bit like you could use one or the other. Perhaps we can combine them into one multiline command with && and \ line breaks?

stefansundin · 2023-12-22T01:05:16Z

Looks a bit like you could use one or the other.

For the flatpak instructions you only need to run the first command if haven't already added the remote in the proper way. As a user I prefer having each command be separately copyable.

Please let me know if there is anything I can do to help get this merged. Feel free to make changes to the branch as needed. I don't really care about the minute details as long as there is a copy button. 😄

I want to contribute another change but I want this one to be merged first since I will be doing further work on this download page, and I don't want to deal with merge conflicts if I have two PRs open. This second change will make the page usable when JavaScript is disabled, because currently it does not work at all.

Thanks.

stefansundin

Found two indentation issues. I'm really not used to having 4 spaces to indent.

stefansundin · 2023-12-22T01:08:54Z

assets/js/copyable.js

+    setTimeout(() => {
+        icon.classList.remove('fa-check');
+        icon.classList.add('fa-copy');
+      }, 1000);


Looks like I messed up the indentation on this line.

Suggested change

}, 1000);

}, 1000);

stefansundin · 2023-12-22T01:09:01Z

assets/js/copyable.js

+        await navigator.clipboard.writeText(textNode.textContent);
+        icon.classList.remove('fa-copy');
+        icon.classList.add('fa-check');
+      } catch (err) {


Looks like I messed up the indentation on this line.

Suggested change

} catch (err) {

} catch (err) {

stefansundin · 2024-06-12T23:41:35Z

If there is no further work to accept this change then I will close this PR in 7 days.

droidmonkey · 2024-06-12T23:45:19Z

I'm all for it 🤷‍♂️

stefansundin · 2024-06-20T00:39:04Z

Feel free to reopen this if you decide you want it after all. I just don't think there's anything else I can do to help with it. 😢

stefansundin commented Sep 16, 2023

View reviewed changes

layouts/_default/baseof.html Show resolved Hide resolved

stefansundin force-pushed the copyable branch from 6c8cb88 to 0037b59 Compare September 16, 2023 19:53

droidmonkey requested changes Sep 16, 2023

View reviewed changes

droidmonkey approved these changes Sep 16, 2023

View reviewed changes

droidmonkey added the enhancement label Sep 16, 2023

droidmonkey force-pushed the copyable branch from e83b231 to 365afa0 Compare October 28, 2023 18:40

Make the terminal commands on the Downloads page easily copyable with…

93bbc07

… a button click Also change the header styling of collapsable sections on the Downloads page.

droidmonkey force-pushed the copyable branch from 365afa0 to 93bbc07 Compare November 25, 2023 20:01

stefansundin commented Dec 22, 2023

View reviewed changes

stefansundin closed this Jun 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make terminal commands easily copyable #122

Make terminal commands easily copyable #122

stefansundin commented Sep 16, 2023 •

edited by droidmonkey

Loading

droidmonkey commented Sep 16, 2023 •

edited

Loading

stefansundin commented Sep 16, 2023

droidmonkey Sep 16, 2023

stefansundin Sep 16, 2023

droidmonkey Sep 16, 2023

stefansundin Sep 16, 2023

droidmonkey commented Sep 16, 2023 •

edited

Loading

droidmonkey commented Sep 16, 2023 •

edited

Loading

droidmonkey Sep 16, 2023

phoerious commented Sep 20, 2023 •

edited

Loading

droidmonkey commented Sep 20, 2023

droidmonkey commented Oct 28, 2023

phoerious commented Nov 29, 2023

stefansundin commented Dec 22, 2023

stefansundin left a comment

stefansundin Dec 22, 2023

stefansundin Dec 22, 2023

stefansundin commented Jun 12, 2024

droidmonkey commented Jun 12, 2024

stefansundin commented Jun 20, 2024

Make terminal commands easily copyable #122

Make terminal commands easily copyable #122

Conversation

stefansundin commented Sep 16, 2023 • edited by droidmonkey Loading

droidmonkey commented Sep 16, 2023 • edited Loading

stefansundin commented Sep 16, 2023

droidmonkey Sep 16, 2023

Choose a reason for hiding this comment

stefansundin Sep 16, 2023

Choose a reason for hiding this comment

droidmonkey Sep 16, 2023

Choose a reason for hiding this comment

stefansundin Sep 16, 2023

Choose a reason for hiding this comment

droidmonkey commented Sep 16, 2023 • edited Loading

droidmonkey commented Sep 16, 2023 • edited Loading

droidmonkey Sep 16, 2023

Choose a reason for hiding this comment

phoerious commented Sep 20, 2023 • edited Loading

droidmonkey commented Sep 20, 2023

droidmonkey commented Oct 28, 2023

phoerious commented Nov 29, 2023

stefansundin commented Dec 22, 2023

stefansundin left a comment

Choose a reason for hiding this comment

stefansundin Dec 22, 2023

Choose a reason for hiding this comment

stefansundin Dec 22, 2023

Choose a reason for hiding this comment

stefansundin commented Jun 12, 2024

droidmonkey commented Jun 12, 2024

stefansundin commented Jun 20, 2024

stefansundin commented Sep 16, 2023 •

edited by droidmonkey

Loading

droidmonkey commented Sep 16, 2023 •

edited

Loading

droidmonkey commented Sep 16, 2023 •

edited

Loading

droidmonkey commented Sep 16, 2023 •

edited

Loading

phoerious commented Sep 20, 2023 •

edited

Loading