oliver-sanders
commented
2 years ago Had a look at doing this with Element, I did get something half-working but it is a little more difficult than just using the Popover component off the shelf. The reason being that we have centralised the menu so that rather than having one menu per Cylc object (i.e. icon the user can click on) we have one centralised menu which we move around.
The Popover component does not expect the thing it pops-over to change so isn't a free solution, we'd have to develop some boilerplate to make this happen.
For reference, here's a branch trying Element out:
https://github.com/oliver-sanders/cylc-ui/tree/its-elemental
In the design document (#87) the context menus had a "callout" shape with a small triangle pointing at the associated element (the one the user clicked to open the menu).
This is intended to make it clear which element the mutation list is applying to. The "Element" component framework provides a "popover" component which is very similar (although the triangle is a little too small for my liking):
https://element.eleme.io/?ref=madewithvuejs.com#/en-US/component/popover#popover
Note that when we implement selection the selection may contain more than one element.
Pull requests welcome!