Files input checkboxes and menus

[fiskus]

Create package:

Revise package:

Push from directory:

[codecov[bot]]

Codecov Report

Merging #2842 (c00ac76) into master (d604a35) will decrease coverage by 0.02%. The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master    #2842      +/-   ##
==========================================
- Coverage   39.65%   39.62%   -0.03%     
==========================================
  Files         597      598       +1     
  Lines       26950    26968      +18     
  Branches     3919     3910       -9     
==========================================
  Hits        10686    10686              
- Misses      15143    15163      +20     
+ Partials     1121     1119       -2     

Flag	Coverage Δ
api-python	90.71% <ø> (ø)
catalog	12.52% <0.00%> (-0.02%)	:arrow_down:
lambda	87.30% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...p/containers/Bucket/PackageDialog/EditFileMeta.tsx	0.00% <0.00%> (ø)
...app/containers/Bucket/PackageDialog/FilesInput.tsx	0.00% <0.00%> (ø)
.../containers/Bucket/PackageDialog/FilesSelector.tsx	0.00% <0.00%> (ø)
...talog/app/containers/Bucket/PackageDialog/index.ts	0.00% <0.00%> (ø)
catalog/app/containers/Bucket/Upload.tsx	0.00% <0.00%> (ø)

:mega: Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

[fiskus]

1. Icon buttons are practically unusable with the scrollbar on the right:

Can you clarify which OS and browser did you get this screenshot on? I can't reproduce on Linux/Firefox and macOS/Safari/Firefox: scrollbar always auto hides, and even when it is shown there is enough space to click on "More" button

[nl0]

Can you clarify which OS and browser did you get this screenshot on?

macos, ff (chrome looks the same)

scrollbar always auto hides

it does after some time, but it's still very inconvenient and may be confusing for some users

and even when it is shown there is enough space to click on "More" button

it's very easy to miss and click on (or just hover over) the scrollbar instead, and when this click/hover happens the scrollbar is getting even wider

if you believe this is not a problem for ux -- i'm ok with that, we can ship it and see what actual users say

[fiskus]

I think I can add additional padding (4px). It looks natural.

I was able to accidentally click on the scrollbar only when tried to do so :) But when I try to click on a specific file when I'm targeting it scrollbar already disappears

---

One more solution is replacing "More" button with some word like Github does in container at the bottom of this page with link "Details"

[nl0]

I think I can add additional padding (4px). It looks natural.

that's ok i guess

[fiskus]

I had two goals in mind:

1. I can't unify Dialog in one piece. There are too many small differences in UI and data. So, I'll try to unify step-by-step. The first steps were Successors Select (it's not implemented everywhere still) and the unifying look for files in Files Input.
2. To unify Files Input I wanted to simplify it according to material UI guidelines: each row can have only one action besides the checkbox (I can't find proof now, maybe I'm wrong). Also, I wanted to implement a similar look for files in every Dialog so that user should get used to one UI only, even when some parts of it is not used (like the disabled menu button in "Create a package from directory")

[fiskus]

As I see in Gmail: they disobey the rule to have only one action per row if it's even the rule :) I think I can do the same: inline menu on hover over the file size

[fiskus]

Like this:

[fiskus]

https://user-images.githubusercontent.com/533229/176185394-08522f63-e645-47c7-ade3-3919e591d35a.mp4

[nl0]

As I see in Gmail: they disobey the rule to have only one action per row if it's even the rule :) I think I can do the same: inline menu on hover over the file size

maybe we should copy their approach a little more closely, e.g. use smaller nicer icon buttons instead of huge buttons with text?

[nl0]

also we should consider usability on touch devices with no proper "hover" mechanics

[fiskus]

smaller nicer icon buttons instead of huge buttons with text?

I'd prefer to have explanatory text on buttons. Simplified buttons a little:

https://user-images.githubusercontent.com/533229/177179045-33407694-c830-4eb7-9471-f0524dd9445c.mp4 https://user-images.githubusercontent.com/533229/177179051-e65bfbaf-b445-47f6-a9d5-3802e58ba542.mp4

[fiskus]

Mobile tap works as hover, but I removed opening OS's file browser on click on files