💄: files tweaks

[hacdias]

Blocked by:

• feat: generic doc icon ipfs-shipyard/ipfs-css#18

Changes:

• Removes 'status' column for now since it's not yet used
• Status and Size disappear on small screens
• New file icon
• Adds the hash behind the name
• Improve tooltip component
• when clicking the hash you go to inspect
• Adding button shows progress

License: MIT
Signed-off-by: Henrique Dias hacdias@gmail.com

[hacdias]

Progress so far:

[hacdias]

Questions for you (@lidel @olizilla @alanshaw @fsdiogo).

Should we just use the native tooltip through title attr? Why asking this? Because the hash currently doesn't have a tooltip and it might never have, but we could also apply this tooltip to the hash. What's your thoughts on this?

Go bold or don't go bold?

Go Smaller or Don't Go Smaller?

Smaller with Bold:

Smaller without Bold:

Clicking on the hash should copy the hash, go to Inspect or just open the file as clicking on the name would do?

[lidel]

I'd give tooltip to both hash and filename, as we may have very long ones that get truncated, and tooltip should have the full version.

As for file listing, I like first and last version, but last one may be easier on the eyes.
Perhaps we could bold filename only when it is selected via checkbox?

[hacdias]

@lidel,

I'd give tooltip to both hash and filename, as we may have very long ones that get truncated, and tooltip should have the full version.

Yes, makes sense.

As for file listing, I like first and last version, but last one may be easier on the eyes. Perhaps we could bold filename only when it is selected via checkbox?

So you prefer the smaller font-size with bold when checked, right?

A question:

Clicking on the hash should copy the hash, go to Inspect or just open the file as clicking on the name would do?

[hacdias]

Hmm, Lighthouse says any font below 16px is small. Using f6 for the name and size, they end up with 14px.

[hacdias]

A suggestion for upload progress instead of adding the files directly to the list. What do you think? Which one seems better? This or adding the pending files on the file list?

[lidel]

As for file listing, I like first and last version, but last one may be easier on the eyes. Perhaps we could bold filename only when it is selected via checkbox?
So you prefer the smaller font-size with bold when checked, right?

Actually I have no preference on the font size, just don't think we should bold all the time, but only when selected.

Clicking on the hash should copy the hash, go to Inspect or just open the file as clicking on the name would do?

Very good question. Personally I would expect it to copy, as it is the most common action I do with CIDs, but it may be a developer bias. I feel this needs more interviews / data points :)

A suggestion for upload progress instead of adding the files directly to the list. What do you think?

I like it because it "is good enough for now" and solves problem of reporting progress on multiple files and cancelling entire operation.
Perhaps label could be replaced with % progress, to be in line with the way downloads work right now?
Following that convention, clicking on it during upload would cancel the upload and restore original label.

[hacdias]

Very good question. Personally I would expect it to copy, as it is the most common action I do with CIDs, but it may be a developer bias. I feel this needs more interviews / data points :)

Sure, makes sense. let's wait for more opinions.

I like it because it solves problem of reporting progress on multiple files and cancelling entire operation.
Perhaps label could be replaced with % progress, to be in line with the way downloads work right now?
Following that convention, clicking on it during upload would cancel the upload and restore original label.

Didn't know we could cancel the add process and I can't find info about it. Either way, cancel it should just stop the process and leave everything as-is or shall we also remove the already added files?

[lidel]

Good catch :) I forgot we don't have cancellable API requests due to Fetch API limitations: https://github.com/ipfs/js-ipfs-api/issues/694
Ignore cancellation then (needs to be non-cancellable for now)

[hacdias]

[hacdias]

I think this is ready to be reviewed. The CI is failing but it seems to be failing randomly at the navigation test. Should we change the timeout?

[hacdias]

A bit better on smaller screens:

Altough I find that the sidebar should be collapsed by default when screen size <= 60em.

[hacdias]

Can we merge this @lidel @olizilla @alanshaw @fsdiogo ?

[fsdiogo]

The style={{width: '2.5rem'}} should be in a variable as it's being used in all the cases.

[fsdiogo]

LGTM 👍

[hacdias]

I'm merging this now.

@olizilla you said you had an issue with some loop that was fetching ls many times. If you find a way to reproduce it, could you post it on #704, please? 😄