choco-wiki icon indicating copy to clipboard operation
choco-wiki copied to clipboard

Install Page Usability Suggestions

Open ferventcoder opened this issue 8 years ago • 4 comments

From a recent email:

I was getting a new machine setup and obviously went to chocolatey to accelerate the process.

image

Quick Usability Suggestions

  1. Since the copy to clipboard icon is does not use the "cursor: pointer" css, it isn't obvious that it is clickable. I'd consider making the "copy command" text a javascript/link/action that also copies.
  2. Instead of changing that, I think it would be even better if you copied the way that gist does their copy command. It is inline the with the text being copied, the icon is a little more obvious that it is a clipboard, it uses the hand pointer, the button changes color on hover, and there is a tooltip to tell you exactly what it is. Dare I say it is perfection in this regard. Since you're use the <pre> tag for your text, it looks like bootstrap's documentation has a nice working example too.

image

image

  1. I had to spend 60 seconds searching for the exact ExecutionPolicy text I needed to use to get chocolatey to work. It would save everyone a little effort/grief if you made it a copy-able text snippit as well. I'm guessing you did it the way you did because there are security ramifications of setting it to unrestricted, but I think a simple warning note that they need to know what they're doing should suffice.

ferventcoder avatar Jan 12 '17 15:01 ferventcoder

  1. Since the copy to clipboard icon is does not use the "cursor: pointer" css, it isn't obvious that it is clickable. I'd consider making the "copy command" text a javascript/link/action that also copies.

I like that.

  1. Instead of changing that, I think it would be even better if you copied the way that gist does their copy command. It is inline the with the text being copied, the icon is a little more obvious that it is a clipboard, it uses the hand pointer, the button changes color on hover, and there is a tooltip to tell you exactly what it is. Dare I say it is perfection in this regard.

It's initially what I wanted, however I'm not the best with css. I know other folks want this as well.

  1. I had to spend 60 seconds searching for the exact ExecutionPolicy text I needed to use to get chocolatey to work. It would save everyone a little effort/grief if you made it a copy-able text snippit as well. I'm guessing you did it the way you did because there are security ramifications of setting it to unrestricted, but I think a simple warning note that they need to know what they're doing should suffice.

Received that feedback as well. I totally thought it being 2017 we could show the easy PowerShell way to folks, but maybe it is best to keep the cmd.exe version up there as well and offer it - I've always envisioned a panel where you click on "Cmd.exe" or "PowerShell" and then click copy from that.

Other folks have mentioned the Execution Policy bits - all of Chocolatey's install scripts are signed, so we could ask them to set something like RemoteSigned.

ferventcoder avatar Jan 12 '17 15:01 ferventcoder

@ferventcoder I recently added this to my blog, as you can see here:

http://www.gep13.co.uk/blog/adding-clickable-links-for-headers#the-implementation

Move the mouse into the code section.

This was done using this:

http://www.digitaltapestry.net/posts/wyam-anchors-and-code-copy#clipboard.js

No reason that it shouldn't work for chocolatey.org as well. Would you like me to take a look?

gep13 avatar Jan 13 '17 08:01 gep13

The beauty of the approach that I have adopted is that it working for any code block added to the page.

gep13 avatar Jan 13 '17 08:01 gep13

I think we've touched on a few of these here.

ferventcoder avatar Mar 30 '17 04:03 ferventcoder