Grid view

[tanmoyAtb]

closes #840

I feel comfortable with how it feels overall,
except how the selection is working in Grid view.

[render]

Your Render PR Server URL is https://files-ui-dev-pr-999.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c25dpqm1aaa5a1c70jl0.

[render]

Your Render PR Server URL is https://files-landing-dev-pr-999.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c25dpr61aaa5a1c70k5g.

[render]

Your Render PR Server URL is https://chainsafex-dev-pr-999.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c25dprm1aaa5a1c70kag.

[RyRy79261]

Looks great @tanmoyAtb

Only things personally is to set to Decending order, and personally I'd have the grid icons a lot smaller, 4 on a 1080 screen per row seems a bit large, maybe 8 per row?

@sweetpea22 What do you say to having the first item be a Up one folder button?

[Tbaut]

Nice!
This is extending already huge files. I wonder if we can break this up a little into 2 dedicated components for each view?

I've submitted a couple nits. I generally find the way we write ternary operations hard to read (cf my comment in Slack), but this can be changed across the board in a linting PR.

Something for @sweetpea22 maybe, the button to switch to grid/row is looking like an action button (new folder, delete files etc, although it's different). What do you think about having it super simple, without border?

This is not directly related to this PR, but I realized when using the grid view that the behavior with files selection is surprising. When you click on a file, and then click on another, you don't expect both to be selected, just like on Desktop (I checked Google drive it is also unselecting the previous file while selecting the new one), not sure if I made myself clear. This is maybe something we want to change and allow multiselect only when explicitly clicking on the checkbox.

[tanmoyAtb]

Looks great @tanmoyAtb

Only things personally is to set to Decending order, and personally I'd have the grid icons a lot smaller, 4 on a 1080 screen per row seems a bit large, maybe 8 per row?

@sweetpea22 What do you say to having the first item be a Up one folder button?

Yup I also felt, we could have more items in a row.
About the view switch icon, we could use the mobile view on desktop as well.

[tanmoyAtb]

I have split the FileSystemItem file into 3 files. Things looks more organised.
I also wanted to split the FileTable.view.tsx file but that was out of scope for this issue. I could create a new one for that.

[FSM1]

I have split the FileSystemItem file into 3 files. Things looks more organised.
I also wanted to split the FileTable.view.tsx file but that was out of scope for this issue. I could create a new one for that.

Awesome stuff thanks Tanmoy. I think another issue to refactor some of the view stuff will definitely help. Lets schedule that in for after the drive context refactor lands and we will see if we can optimise things a bit more then.

[sweetpea22]

looks good! one thing to take care of at some point: at screen sizes 1920px+, the grids don't stay square and long titles look like it throws the spacing off at this size. would it be helpful to truncate the filename?

[render]

Your Render PR Server URL is https://files-ui-stage-pr-999.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c28misu31hs1re75v5b0.

[tanmoyAtb]

looks good! one thing to take care of at some point: at screen sizes 1920px+, the grids don't stay square and long titles look like it throws the spacing off at this size. would it be helpful to truncate the filename?

Really great catch @sweetpea22 . I was able to fix spacing issue by having a max width on the grid item, so it doesn't spread around. In my mind, the maximum allowed filename length looks good enough now

[Tbaut]

Found some little things

• There's no cursor: pointer when hovering the files
• Is this expected
  

I think we should definitely take a decision on the file selection soon
(1) remove this click to add to selection by default
(2) remove this click to add to selection only for grid view

I'm leaning toward (1)

[tanmoyAtb]

Found some little things

• There's no cursor: pointer when hovering the files
• Is this expected
  

I think we should definitely take a decision on the file selection soon
(1) remove this click to add to selection by default
(2) remove this click to add to selection only for grid view

I'm leaning toward (1)

So I have added the cursor, and fixed the grid breaking issues.
I lean towards option 1 for too,
but then we would have to add sth like ctrl+click for selection, like in OS or google drive, in another issue

[Tbaut]

Looks great! While I was here, I added the french translation