Feat/files progress feedback

[rafaelramalho19]

Resolves #1206

UI context information: https://www.figma.com/file/BQjzJcaKuNrNgeDnoZ664D/Web-UI-upload%2Fdownload-progress?node-id=0%3A1

Here's a video showing the current status:
https://dl.dropboxusercontent.com/s/a94hwolhhtjb8bn/TQQGFkhNpF.mp4

Questions

• @jessicaschilling what do you think about the UI? Anything you would want changed?

[jessicaschilling]

@rafaelramalho19 This is great, thank you so much! A few thoughts below.

• It's tough from the video to see in-progress state; is it possible to screenshot?
• Can we please style file icons to match how they appear in the main files list? I'm sorry if I wasn't clear about that in the black/white wireframes; I can provide high-fidelity wireframes in future if you'd rather, it just takes a little longer. (I don't know how tough it'll be to match the actual icon to the file type in the import feedback ... if that's too much we could just use generic file/folder icons that match the main files window, but would definitely be better if it could accurately reflect what the user will see in the main files window once they're uploaded.)
• Can the both the main border and the dividers in the import area please be the same gray as the dividers in the main files screen?
• Ditto text colors to match, please: black text should be the dark gray as it appears in file names in main files screen, gray text should be the lighter gray from main files screen.
• Can the background behind "Imported x files" please be the same color as what's behind the browse bar at the top of the screen?
• Finally - I realize we didn't create an affordance for the user to close the import feedback. First inclination would be to add the X icon to the right of the expand/collapse chevron, but I'm a little concerned that might read as "cancel all the imports". If it's possible to see a screenshot of the in-progress state, that might help to clarify a bit.

Thanks again!

[rafaelramalho19]

1. It is kinda hard to see the progress status due to the redux bug I told you earlier. But here it is: https://dl.dropboxusercontent.com/s/qdcsdu964yww7c8/2XiwW54lpG.mp4

2. Styled the icons with the same color, however, I don't currently have the information to decide what type of icon to show (only if it's a folder or file). If you find it important, I'll try to investigate further on how to achieve that. https://i.imgur.com/8SKLGik.png

3. Like so? https://i.imgur.com/dOWRgD7.png

4. Changed the colors, like this? https://i.imgur.com/fac96TE.png

5. Done: https://i.imgur.com/RRjk8vn.png

6: Do you like this interaction and UI? https://dl.dropboxusercontent.com/s/yzrg6ag7kfz3w3z/6UQusRifgh.mp4

[jessicaschilling]

@rafaelramalho19 This is awesome! 😊

Three quick requests:

1. Could the X/chevron controls in the top right please be nudged to the right slightly, so the visual margin is equal on top, bottom, and right?
   
2. Let's keep the files just the generic file icon for now (not worth the work in differentiating file types, as you noted), but please use the "no word lines" file icon:
   
3. The folder icon isn't quite the same as the one from the main files view. Could it please be the same one? (Hopefully this isn't an ipfs-css inconsistency problem ...)
   

Thank you!

[rafaelramalho19]

@jessicaschilling done https://i.imgur.com/hbIWJ3E.png

[jessicaschilling]

Awesome, thanks!

[jessicaschilling]

Awesome, thanks!

[lidel]

Small nits:

If user selects some files right after importing them, "selection info bar" slides from the bottom and things look a bit awkward:

• the X button has different shade -- I think we should use the lighter color everywhere

• would be cool if "progress feedback" moved above the info bar,
  but if its too much work i think an easy fix would be to tweak z-index and bring the "progress bar" behind "selection bar" (caveat: make sure to not hide error popups in the process – see below)

---

Another thing, when importing a directory with a name that is already present, I get this error message, which surfaces some icon extravaganza we need to tame :-)

I think we should cleanup icons:

• use "X" (just character, no circle) for closing (including the orange error box)
• use "(X)" only for failed operation

[rafaelramalho19]

@lidel does this cover all your suggestions?

Moving the progress bar to the top of the selection info is possible, but it involves adding calculations of the offsetHeight + adding event listeners for resizing, and that decreases performance.

But if you and @jessicaschilling think that it's worth it, I'll do it 😄

[jessicaschilling]

I’m not terribly bothered by the positioning of the progress bar, since it’s indefinite progress right now. Might want to revisit once we have the opportunity for actual progress? But I’ll defer to @lidel.