Right click context menu #2134

tanmoyAtb · 2022-05-17T15:15:11Z

closes #2095

Some notes:
We have a right click(context menu) implementation here. The overall menu system took a refactor. I really wanted to use the MaterialMenu we already had, but for some reason the material menu just does not fire on the second right click. 🤷 I toyed around with it, and then decided to write a simple AnchorMenu. some of the behaviour is inspired from drive and dropbox.

~~I didn't add this to storage. If we feel like it should be there, I'll add that in.~~
Added to storage

Submission checklist:

Layout

Change looks good in the desktop web ui
Change looks good in the mobile web ui

Theme

Components / elements inspected in light mode
Components / elements inspected in dark mode

…t-click-menu-2095

render · 2022-05-17T15:15:16Z

Your Render PR Server URL is https://chainsafe-components-stage-pr-2134.onrender.com.

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

render · 2022-05-17T15:15:20Z

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

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

render · 2022-05-17T15:15:24Z

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

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

…monorepo into feat/right-click-menu-2095

juans-chainsafe

Amazing job! is working as expected, I tested as well in mobile of course in there you don't have the right click but I checked that all is working correctly there.

PS: I think it will be a good idea to add this to storage as well, maybe not in this ticket but I can create another if you agree

tanmoyAtb · 2022-05-18T18:03:57Z

I'm going to add this to storage and reopen this PR for review.

Tbaut

Left some minor comments in the code. The refactor with the getItemOperations brings some clarity IMHO which is great, although it's a little messy with the million params 🤷‍♂️ .

The only main problem I see is that because we don't use the "clever" menu, we end up having an unusable right click menu when we are close to the bottom of the page, and scrolling doesn't help.

bottom.mp4

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/itemOperations.tsx

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

…monorepo into feat/right-click-menu-2095

tanmoyAtb · 2022-05-20T10:37:02Z

Left some minor comments in the code. The refactor with the getItemOperations brings some clarity IMHO which is great, although it's a little messy with the million params 🤷‍♂️ .

The only main problem I see is that because we don't use the "clever" menu, we end up having an unusable right click menu when we are close to the bottom of the page, and scrolling doesn't help.

bottom.mp4

I have been able to make the AnchorMenu we have a little more clever. It should position better at the bottom and right sides now. Also, prevented scroll when menu is open (this is what the material menu does as well).

Cleaned up the item operations more and also added to storage. :D

Tbaut

Love the refactoring and new functionality. I checked mostly Files code, left a couple nits. I did play with Storage as well and noticed that the menu, when it appears is displayed a very brief moment at the top left before being displayed at the right position. See my video

flashing.mp4

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

packages/storage-ui/src/Components/Modules/FileSystemItem/itemOperations.tsx

packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx

packages/files-ui/src/UI-components/AnchorMenu.tsx

…t-click-menu-2095

…leSystemItem/FileSystemItem.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

…Operations.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

…lesList.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

…monorepo into feat/right-click-menu-2095

lgtm-com · 2022-05-23T15:21:45Z

This pull request introduces 1 alert when merging fb883ac into 7071348 - view on LGTM.com

new alerts:

1 for Unused variable, import, function or class

tanmoyAtb · 2022-05-23T16:03:32Z

Love the refactoring and new functionality. I checked mostly Files code, left a couple nits. I did play with Storage as well and noticed that the menu, when it appears is displayed a very brief moment at the top left before being displayed at the right position. See my video

flashing.mp4

I was able to see the flash in Firefox a few times. Made some changes to make sure that the dropdown only appears when we have an anchor position. Please check that it works well your side.

Tbaut

It didn't quite make the cut and was still flashing occasionally. I added some comments to completely solve the issue, with explanations. Let me know if that makes sense, and we should replicate this in storage as well.

packages/files-ui/src/UI-components/AnchorMenu.tsx

tanmoyAtb · 2022-05-24T16:56:59Z

Thanks :) :). This was perfect insight into the problem. I've made the updates to files and storage.

Tbaut · 2022-05-25T12:28:22Z

I was still having issue, so I fought a bit and arrived at a state where I really really can't reproduce in this PR #2152 :)

* some more fixes * cut the needless noise

Tbaut

awesome awesome work, the files view is feeling great thanks to this!

tanmoyAtb added 10 commits May 11, 2022 00:55

rearranged menu

fc4fc14

in progress

e928b12

Merge branch 'dev' of github.com:ChainSafe/ui-monorepo into feat/righ…

09c955d

…t-click-menu-2095

mooving items

e03af50

merged

98d9238

item selected menu restructure

76ff2a7

bulk operations added

420ee76

anchor menu

739e241

Merge branch 'dev' of github.com:ChainSafe/ui-monorepo into feat/righ…

fd1e696

…t-click-menu-2095

right click implementated

5cba6f0

github-actions bot added the Type: Feature Added to PRs to identify that the change is a new feature. label May 17, 2022

tanmoyAtb added 3 commits May 17, 2022 21:16

Merge branch 'dev' into feat/right-click-menu-2095

6cabeb2

console and comments

9417112

Merge branch 'feat/right-click-menu-2095' of github.com:ChainSafe/ui-…

d0aad96

…monorepo into feat/right-click-menu-2095

tanmoyAtb marked this pull request as ready for review May 17, 2022 15:25

tanmoyAtb requested review from Tbaut, FSM1, asnaith and juans-chainsafe May 17, 2022 15:29

juans-chainsafe approved these changes May 18, 2022

View reviewed changes

tanmoyAtb added 2 commits May 18, 2022 22:12

catering for bin view

bdd2041

storagee re factored

2c01c0f

tanmoyAtb marked this pull request as draft May 18, 2022 18:03

Tbaut reviewed May 19, 2022

View reviewed changes

tanmoyAtb added 2 commits May 20, 2022 14:34

added to browser

53a19ef

Merge branch 'dev' into feat/right-click-menu-2095

5c4d052

tanmoyAtb and others added 4 commits May 20, 2022 16:14

re arrange and names

db6f020

lingui extract

6d0121a

types for position

d16fb46

Merge branch 'feat/right-click-menu-2095' of github.com:ChainSafe/ui-…

f7d8b34

…monorepo into feat/right-click-menu-2095

tanmoyAtb changed the title ~~Feat/right click menu 2095~~ Right click context menu May 20, 2022

tanmoyAtb marked this pull request as ready for review May 20, 2022 10:37

Tbaut reviewed May 20, 2022

View reviewed changes

Tbaut and others added 8 commits May 23, 2022 15:39

Merge branch 'dev' into feat/right-click-menu-2095

f8d2833

Merge branch 'dev' of github.com:ChainSafe/ui-monorepo into feat/righ…

8a11d85

…t-click-menu-2095

Update packages/files-ui/src/Components/Modules/FileBrowsers/views/Fi…

3b920fb

…leSystemItem/FileSystemItem.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

Update packages/storage-ui/src/Components/Modules/FileSystemItem/item…

3ace3bd

…Operations.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

Update packages/files-ui/src/UI-components/AnchorMenu.tsx

498494b

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

Merge branch 'dev' into feat/right-click-menu-2095

45d01b6

Update packages/files-ui/src/Components/Modules/FileBrowsers/views/Fi…

fb883ac

…lesList.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

Merge branch 'feat/right-click-menu-2095' of github.com:ChainSafe/ui-…

39cfd10

…monorepo into feat/right-click-menu-2095

tanmoyAtb added 2 commits May 23, 2022 21:24

resolving comments

622bdac

anchor menu changes

64906cc

Tbaut reviewed May 24, 2022

View reviewed changes

tanmoyAtb added 2 commits May 24, 2022 22:35

applied suggestions

5a0fa6d

theme vars

f272b0e

tanmoyAtb enabled auto-merge (squash) May 24, 2022 16:57

Fix context menu flash in Firefox (#2152)

20884e9

* some more fixes * cut the needless noise

Tbaut approved these changes May 25, 2022

View reviewed changes

tanmoyAtb merged commit c67ac4f into dev May 25, 2022

tanmoyAtb deleted the feat/right-click-menu-2095 branch May 25, 2022 14:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Right click context menu #2134

Right click context menu #2134

tanmoyAtb commented May 17, 2022 •

edited

Loading

render bot commented May 17, 2022

render bot commented May 17, 2022

render bot commented May 17, 2022

juans-chainsafe left a comment

tanmoyAtb commented May 18, 2022

Tbaut left a comment

tanmoyAtb commented May 20, 2022

Tbaut left a comment

lgtm-com bot commented May 23, 2022

tanmoyAtb commented May 23, 2022

Tbaut left a comment

tanmoyAtb commented May 24, 2022 •

edited

Loading

Tbaut commented May 25, 2022 •

edited

Loading

Tbaut left a comment

Right click context menu #2134

Right click context menu #2134

Conversation

tanmoyAtb commented May 17, 2022 • edited Loading

Layout

Theme

render bot commented May 17, 2022

render bot commented May 17, 2022

render bot commented May 17, 2022

juans-chainsafe left a comment

Choose a reason for hiding this comment

tanmoyAtb commented May 18, 2022

Tbaut left a comment

Choose a reason for hiding this comment

tanmoyAtb commented May 20, 2022

Tbaut left a comment

Choose a reason for hiding this comment

lgtm-com bot commented May 23, 2022

tanmoyAtb commented May 23, 2022

Tbaut left a comment

Choose a reason for hiding this comment

tanmoyAtb commented May 24, 2022 • edited Loading

Tbaut commented May 25, 2022 • edited Loading

Tbaut left a comment

Choose a reason for hiding this comment

tanmoyAtb commented May 17, 2022 •

edited

Loading

tanmoyAtb commented May 24, 2022 •

edited

Loading

Tbaut commented May 25, 2022 •

edited

Loading