cylc-ui icon indicating copy to clipboard operation
cylc-ui copied to clipboard

Simplify mutation menu

Open MetRonnie opened this issue 9 months ago • 3 comments

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 the c-data-interactive element that was clicked on
  • :key prop - this allows the menu to re-open when clicking between c-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

MetRonnie avatar May 02 '24 15:05 MetRonnie

Latest change should make it immune to that kind of thing

MetRonnie avatar May 08 '24 15:05 MetRonnie

Fixed.

oliver-sanders avatar May 08 '24 15:05 oliver-sanders

@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

MetRonnie avatar May 08 '24 15:05 MetRonnie

I've also renamed the v-cylc-object directive to v-command-menu as that is more descriptive IMO

MetRonnie avatar May 13 '24 10:05 MetRonnie