cylc-ui
cylc-ui copied to clipboard
Simplify mutation menu
By figuring out how to use VMenu
better I was able to drop a fair amount of cruft.
We were originally using VMenu
but through various attempts to get it to behave the way we want (e.g. #927, #1269) I ended up re-implementing some of the behaviour manually (e.g. click-outside behaviour).
It turns out the key to using VMenu
and getting it to behave the way we want is not too difficult:
-
:target
prop - this allows Vuetify to take care of positioning relative to thec-data-interactive
element that was clicked on -
:key
prop - this allows the menu to re-open when clicking betweenc-data-interactive
elements by using a unique identifier for each element (so Vue knows a different element has been clicked)
Check List
- [x] I have read
CONTRIBUTING.md
and added my name as a Code Contributor. - [x] Contains logically grouped changes (else tidy your branch by rebase).
- [x] Does not contain off-topic changes (use other PRs for other changes).
- [x] Tests are included
- [x]
CHANGES.md
entry not needed as invisible to users
Latest change should make it immune to that kind of thing
Fixed.
@markgrahamdawson Tagged you for review. If you've not come across the mutation menu code before, it might be best for me to explain how it works before you review
I've also renamed the v-cylc-object
directive to v-command-menu
as that is more descriptive IMO