search

jupyterlab / jupyterlab-git

A Git extension for JupyterLab
BSD 3-Clause "New" or "Revised" License
1.45k stars 313 forks source link

Update button should give feedback on click and should be friendly for users with eyesight issues #932

Open krassowski opened 3 years ago

krassowski commented 3 years ago

Is your feature request related to a problem? Please describe.

Diffing moderate-size notebooks takes time even at a very high-spec machine; diffing large notebooks will always take some time; the refresh button is very useful but it does not provide any feedback on clicking it. Below is an example of me trying to update a diff on my day job by clicking it once... and then again and then several times again because I am not sure if it got pressed (2 minutes GIF, feel free to skip):

update-button

  1. There is no :active pseaudoclass so I cannot see if my click worked (there is only :hover)
  2. The button stays the same after clicking and there is no visual indication of the diff reloading
  3. After the diff starts re-loading after the first click the button persist. It only disappears after some time with what appears to be n-th reloading; strangely the reloadings of diffs continue afterwards

And not directly related but still something which annoys my colorblindness:

  1. The contrast of the button is poor in the first place

Describe the solution you'd like

  1. Add :active css pseudoclass
  2. Hide button after it gets clicked or grey it out and/or show visual loading indicator
  3. If the button remains available, handle the repeated click better

For visual colors:

  1. Make it darker orange and/or make the text and border bolder and/or add dark font shadow

Additional context

krassowski commented 3 years ago

Relevant styles:

https://github.com/jupyterlab/jupyterlab-git/blob/9df356280b544b8f0e2236ef0757d57a6239ca7c/style/diff-common.css#L25-L31