Add right click menu for multiple components #14640
Conversation
AdRiley
changed the title
AdRiley
requested review from
PabloBuchu,
farmaazon,
indiv0,
kazcw,
somebody1234 and
vitvakatu
as code owners
| <DropdownMenu | ||
| v-if="nodeSelection.selected.size > 1" | ||
| v-model:open="alignmentMenuOpenModel" | ||
| class="alignmentSubmenu" | ||
| placement="right-start" | ||
| title="Align" | ||
| @pointerenter="handleAlignmentMenuEnter" | ||
| @pointerleave="handleAlignmentMenuLeave" | ||
| > |
There was a problem hiding this comment.
We use here a heavily customized DropDownMenu, which is misnamed (it's not dropping down anymore), with :deep selectors to style it. For me these are signs this should be a separate component, not DropdownMenu. It may be based of MenuEntry regarding styling. It could also take some logic from GraphNode.
| <div | ||
| class="alignmentSubmenuPanel" | ||
| @pointerenter="handleAlignmentMenuEnter" | ||
| @pointerleave="handleAlignmentMenuLeave" | ||
| > | ||
| <MenuPanel class="alignmentMenu"> | ||
| <MenuEntry | ||
| v-for="action in alignmentMenuActions" | ||
| :key="action" | ||
| :action="action" | ||
| @click="closeAllMenus" | ||
| /> | ||
| </MenuPanel> | ||
| </div> |
There was a problem hiding this comment.
This seems like an instance of ActionMenu
| function closeAllMenus() { | ||
| // Close both menus | ||
| alignmentMenuOpen.value = false | ||
| contextMenuTrigger.value?.close() | ||
| } |
There was a problem hiding this comment.
Should be both menus opened by once anytime?
We usually handle such things using Interactions - an example in https://github.com/enso-org/enso/blob/develop/app/gui/src/project-view/components/DropdownMenu.vue#L28-36
| const { | ||
| menuOpen: alignmentMenuOpen, | ||
| menuOpenModel: alignmentMenuOpenModel, | ||
| handleMenuEnter: handleAlignmentMenuEnter, | ||
| handleMenuLeave: handleAlignmentMenuLeave, | ||
| } = useHoverMenu() |
There was a problem hiding this comment.
Shouldn't this logic be a part of every "DropDownMenu"?
| /** Whether the menu is currently open */ | ||
| menuOpen: menuOpen as Ref<boolean>, | ||
| /** Two-way binding model for v-model:open that respects hover state */ | ||
| menuOpenModel, |
There was a problem hiding this comment.
It's not quite clear to me, when reading menuOpen may differ from reading menuOpenModel
| clearMenuCloseTimeout() | ||
| }) | ||
|
|
||
| return { |
There was a problem hiding this comment.
As a rule, we return proxyRefs from composables.
Pull Request Description
Closes #14587
Important Notes
Checklist
Please ensure that the following checklist has been satisfied before submitting the PR:
Scala,
Java,
TypeScript,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
or the Snowflake database integration, a run of the Extra Tests has been scheduled.