Improvements to build dropdown

[choldgraf]

A few ideas for usability that we can discuss.

1. Let's make the button extend to the right edge. e.g., if we set the btn-group div width to 100%, the left button to 70% and the right arrow to 30%, then we get:

2. ~Fix some bugginess with the popup window. On chrome in windows 10, as soon as I click anywhere inside the popup window (including trying to highlight the text) then the window disappears.~ see #158

3. ~Add some "auto-copy to clipboard" functionality, similar to how github lets you auto-copy the github URL to the clipboard. E.g., it looks like github uses a flash app called zero clipboard to do this, so maybe it won't be as trivial as it seems.~ seems more effort than needed

4. Add an option for just getting the URL and not the badge. I know it's easy for people to copy/paste the URL out of the badges themselves, but I feel like it's a fairly common usecase for people to just want the URL.

Thoughts?

[yuvipanda]

+1 on all of them (especially 4). Only thing I want to point out for #1 is to keep some CSS hygiene practices in mind (no inline styles, try see if we can do what we want with just bootstrap classes, etc).

[willingc]

@choldgraf I would open #2 as its own issue and label as a bug to target correction soon.

For now (prior to getting UX recommendations from our design folks), I would leave #1 as is. I like adding #4 with a display of the URL (either in the console similar to how we log the notebook url and token) or as a copyable field. I'm fine with #3 that lets you click to copy. I'm a -1 on using flash to accomplish #3.

@ellisonbg Do any of the interns have time to look at this from a UX perspective?

cc/@minrk

[minrk]

click-to-copy is notoriously difficult to accomplish without security-violating plugins (flash) due to browser security. I'm not sure if there's a solution that works with modern specs. I think it's pretty common to do click-to-select, then the user triggers the copy event, at least skipping the cursor-dragging step.

[choldgraf]

Sounds good - I think it's fine if we just pre-highlight the text (and make sure the text box stays up :-) )

[ellisonbg]

Yes! I just talked to @hzarea and she can work on this. I would like to try something new for this (you can be our design ginuea pigs). Previously, we had been using Sketch for design, but we have been watching Figma for a while. Figma has added a bunch of new stuff lately and I think this would be a great small design thing for us to use in testing this out. I will set that up after I get back from lunch and we can get started.

[choldgraf]

Sounds great - please let us know how we can be helpful! --

On Thu, Sep 28, 2017 at 8:51 PM Brian E. Granger notifications@github.com wrote:

Yes! I just talked to @hzarea https://github.com/hzarea and she can work on this. I would like to try something new for this (you can be our design ginuea pigs). Previously, we had been using Sketch for design, but we have been watching Figma for a while. Figma has added a bunch of new stuff lately and I think this would be a great small design thing for us to use in testing this out. I will set that up after I get back from lunch and we can get started.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jupyterhub/binderhub/issues/132#issuecomment-332945455, or mute the thread https://github.com/notifications/unsubscribe-auth/ABwSHfkVrzlzHIdGTDIzQ3Ea5pFYRX03ks5sm_jSgaJpZM4Pmf-2 .

[ellisonbg]

OK, here is the mockup that @hzarea and I have started:

https://www.figma.com/file/Y14basQDk4bekLnrEfvn9v53/Binder-Homepage

All of you should be able to view it, make comments on the design, and even see the CSS spec for everything (free Figma account required). If any of you want to help us design and edit the document, send me your email used for the figma account and I can add you to the doc.

For now we are mocking up the existing UI, but it should be easy to start making changes. Some things I noticed when doing the mockup:

• In some cases, the label above the text input boxes was essentially the same as the placeholder text.
• There is some bold styling applied to fonts, but Clear Sans Light doesn't have a bold weight (super minor).

[ellisonbg]

Just checked, anyone can view without a Figma account, but commenting and seeing the design spec requires a free account.

[ellisonbg]

Bug: the URL field in the Markdown badge is currently null before you type into the forms - if we are going to show the URL always, it should at least show the base URL

[yuvipanda]

Filed https://github.com/jupyterhub/binderhub/issues/138

[ellisonbg]

HEre is an example Markdown badge that also shows the URL:

https://raw.githubusercontent.com/altair-viz/altair_notebooks/master/README.md

[ellisonbg]

UX question: how "exposed" do you all want the badge markdown/rst to be? We have exploring design that have a much more prominent showing of the URL:

The URL could start with the base URL and then fill out dynamically as the users types the org/repo, branch and filepath. But with this design, we are struggling a bit with where to put the badge text. This is difficult as the badge text is long and we want to show it fully if we are not using flash to automate the copying. Thoughts? Maybe put that stuff in a dialog that pops up from a button or other UI interaction? This also gets to questions of how discoverable you want the badge text to be...

We will keep playing...

[yuvipanda]

@ellisonbg I like that a lot! We can some affordance there that lets people copy full badge URL maybe, but it's a lot more discoverable this way than with the dropdown.

Thank you very much to you and @hzarea for working on this!

[choldgraf]

I think it looks good as well! IMO the most important text for people to see is the URL itself. If it's prominent, it'll both A. give people the ability to share that URL with others, and B. make them less-likely to be confused and share the URL of their kubernetes pod with people.

How does the text in the image above get created? Is it dynamically updated as people type in the fields above? I think it's important that people have the option to copy/paste a URL without hitting the launch button.

[ellisonbg]

Yes, I was imagining that the URL would start out with the base binder URL and then as the user types their org/repo/branch, the URL would fill in dynamically.

On Sat, Sep 30, 2017 at 2:02 AM, Chris Holdgraf notifications@github.com wrote:

I think it looks good as well! IMO the most important text for people to see is the URL itself. If it's prominent, it'll both A. give people the ability to share that URL with others, and B. make them less-likely to be confused and share the URL of their kubernetes pod with people.

How does the text in the image above get created? Is it dynamically updated as people type in the fields above? I think it's important that people have the option to copy/paste a URL without hitting the launch button.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jupyterhub/binderhub/issues/132#issuecomment-333295200, or mute the thread https://github.com/notifications/unsubscribe-auth/AABr0NcfaRWndMIxQzI2WNptXSlBoAEwks5sngOjgaJpZM4Pmf-2 .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[choldgraf]

Sounds good to me!

[ghost]

Hi everyone! I've been working on the Figma file today, and these screenshots include two variations I've come up with for a second dropdown copy and paste option for Markdown and reStructured Text badges. I'm not sure which one is more intuitive, so let me know what you think:

I decided to use icons to help users distinguish between the two copy and paste options. The dropdown will be in a collapsed state initially, but you have the option to click on the caret icon to expand it.

[choldgraf]

so first off, these are both awesome

second off, I prefer the first one. :-)

thank you!

[willingc]

@hzarea Lovely and thank you. :sunny:

I like the first one since it displays the badge in the bar.

All, it would be nice to have a "copy" button so users don't have to select and copy. Something along the lines of:

[ellisonbg]

Hana, awesome! Thanks for working on this. I also like the first design. Can you post a screenshot of that one with the badge UI colllapsed (just showing the header)?

On Tue, Oct 17, 2017 at 11:42 AM, Carol Willing notifications@github.com wrote:

@hzarea https://github.com/hzarea Lovely and thank you. ☀️

I like the first one since it displays the badge in the bar.

All, it would be nice to have a "copy" button so users don't have to select and copy. Something along the lines of:

[image: screenshot 2017-10-17 11 37 39] https://user-images.githubusercontent.com/2680980/31682880-3a21feba-b330-11e7-949e-9e0f3f48be56.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jupyterhub/binderhub/issues/132#issuecomment-337328967, or mute the thread https://github.com/notifications/unsubscribe-auth/AABr0NJWme8JW66AZzL3Ehu-lBmGE-bcks5stPUpgaJpZM4Pmf-2 .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub bgranger@calpoly.edu and ellisonbg@gmail.com

[ghost]

Thanks for the feedback, everyone!

@willingc that would be awesome to add a copy to clipboard option... I just added an icon to the top of the "Copy and share this URL" section and next to each of the badge options in the dropdown. I moved the icons to the right, to make things consistent.

@ellisonbg here is what I'm thinking for the collapsed state:

[choldgraf]

FWIW I'm +1 on @hzarea 's latest proposal https://github.com/jupyterhub/binderhub/issues/132#issuecomment-337678203

what's the path forward on implementing this? Would @hzarea like to take a shot and we can iterate on a PR?

[ghost]

@choldgraf I can definitely start working on this! I will start looking at the code today

[choldgraf]

Friendly ping on this issue @hzarea !

The UI is starting to organically grow to the point that it'll need pruning/re-org soon, so I think a proper UI design is becoming more relevant :-)

[willingc]

@hzarea has been working on this with @ellisonbg.

[ghost]

@choldgraf so far, I've added icons and created new divs for the new copy and paste menus, but I'm not sure how to transfer over some of the functions from the "Launch" dropdown down into the new sections. As of now, I'm going to leave a blank space for the copy and paste areas and left the same launch button above. Here's what I have so far (not finished!):

I'll try to finish this styling by the end of the week, and then we can start implementing the rest of the code into it!

[choldgraf]

sounds good to me! just checking in, looking forward to seeing it!

[betatim]

@hzarea where do you think we should put the output you currently get while a container is building:

(not the best gif in the world :-/) right now it is collapsible and at the top.

There is also a new element on the current mybinder.org page that let's you choose between a file and a URL. There was some discussion on how to do that in the future but I can't find it back right now. Something to think about more than anything else.

[choldgraf]

I think that all of the items in this issue are now finished on the Binder UI - we've got #155 for discussing how to handle logs copying etc. Thanks again to @hzarea for making the initial push to improve the front page UI :-)

[willingc]

Thanks @hzarea :tada: :cake: :art: Great work.