Ipfs-webui: Files: icon for parent directory

[lidel]

The "go one level up" icon is a strong accent at the top of every subdirectory. Bit too strong?
What if we remove the icon (or just fade it out a bit) and introduce some whitespace that way?

| Now |
| ---- |
| |

No Icon |
| ---- |
| |

| Fade Out (o-20) |
| ---- |
| |

Thoughts?

[fsdiogo]

Dropbox for instance doesn't have that, you travel to the parent directory only through the breadcrumbs.

With no icon feels like something is missing, and the opacity may give the disabled sense.

I wonder if the Dropbox approach is the best one.

[hacdias]

A reason to keep it is so we drag and drop files to parent directories. It's a plus that Dropbox doesn't support. 😄

[meiqimichelle]

I think the drag and drop into parent directories is a good feature to have, but we may need to come up with a different design solution to meet that need. In these images, I assumed that in all three, I was in a deleteme directory, and all the files shown below are at the same level, and all are in that directory. Is that your intention? If not, what is the structure you are trying to show?

[jessicaschilling]

@lidel What about keeping the folder icon at full strength, but with a back arrow? (This isn't the right back arrow to use ... just a quick and dirty illustration.)

[lidel]

@jessicaschilling that could work, but I think we also need something to represent current directory:

• .. points at parent – useful when we want to go up or drag&drop files one level up
  
  
  
  • current UI is a surface for UX confusion: user can right click on it and copy... shareable link to the parent(!) directory
  
  
• . (currently missing) should point at current directory and enable user to copy shareable link for the currently viewed directory, or inspect it in IPLD Explorer

[jessicaschilling]

@lidel If we're offering actions on the current AND the parent directories (and presumably even parents of those parents, etc), it might make more sense to make those actions available from the breadcrumbs, as mentioned above.

What about ...

• Enabling the right-click menu (that we currently have for items in the main table) for relevant breadcrumb items (inspect, copy CID, share, maybe even rename)
• To reinforce interactivity of the breadcrumbs, plus just to be nice, displaying a directory's CID on hover of the breadcrumb (see below)
• Ideally you could even drag a file over the breadcrumb itself to drop a file into that directory in the breadcrumb trail, though realize this adds complexity to this work; right now we're just exposing that whole files screen as the drag/drop surface, but that's got its own UI quirks (I can drag something to the side nav?)

If we took the above steps, would then remove the ".." folders from the main file grid entirely.

[lidel]

@jessicaschilling I like and agree with everything you suggested :+1:

I believe support for drag&drop to breadcrumbs will be _extremely useful pattern_ for quickly organizing files:

• when dragging a file or multiple checked files to breadcrumb, there should be visual indicator to make it very clear which crumb is the target
• (not sure if this is a real problem) perhaps after user drops file(s) on a crumb, there should be an option to choose if file should be moved or copied (different people / operating systems prefer / have different default action, this delegates the choice to the user)

[jessicaschilling]

@lidel Good points. 😊 Sounds like the remaining question is "how hard do we want to prioritize this?"

Personally I think this is a big enough win for the user that we could bump it up in our queue a bit ... but let me know. (heads up @rafaelramalho19 ... since this would eventually land on your plate!)

[lidel]

I agree, this would be a pretty significant improvement.
Ok if you want to prioritize this (could be tackled before async refactor etc).

[jessicaschilling]

@lidel thanks! @rafaelramalho19 ... can you please add this to your queue? Many thanks!