WIP feat(Menu): ux-menu element

[bigopon]

Initial work

Markup:

<ux-button ref='menuButton' click.delegate='menuOpen = true'>Menu</ux-button>
<ux-menu open.bind='menuOpen' trigger.bind='menuButton'>
  <ux-menuitem click.delegate='zoomIn()' helper-text='ctrl + [+]'>Zoom In</ux-menuitem>
  <ux-menuitem click.delegate='zoomOut()' helper-text='ctrl + [-]'>Zoom Out</ux-menuitem>
  <ux-menuitem click.delegate='copy()' helper-text='ctrl + C'>Copy</ux-menuitem>
  <ux-menuitem click.delegate='paste()' helper-text='ctrl + V'>Paste</ux-menuitem>
  <ux-menuitem click.delegate='closeApp()' helper-text='alt + F4'>Close</ux-menuitem>
</ux-menu>

static img

bindings:

• open => default mode: two way. true = show menu ,false = hide
• trigger: what element will be used to trigger the menu
• ?? (what else here ?)

TODO:

• [ ] disabled / enabled states
• [ ] nested menu
• [ ] drop up, drop right, drop left configurable
• [ ] divider (vertical, horizontal)
• [ ] left icon , right icon
• [ ] theming

@EisenbergEffect @ZHollingshead I'm not sure how we going to handle icons, thoughts ?

[EisenbergEffect]

@bigopon This is fantastic work! @ZHollingshead Can you provide some feedback, particularly on how we'd want to handle icons. Another things to consider, could we do something cool with keyboard shortcuts, particularly making them automatically adjust based on platform e.g. cmd vs. ctrl.

[bigopon]

@EisenbergEffect how the API would be if we are to try recognise those help text ? I think they are a bit arbitrary to do

[serifine]

So I am not sure how to handle Icons right now. Especially given that the ux-icon package is so heavy at the moment. The way I would suggest handling those is have a set container that can contain whatever icon is provided (enabling the user to use a different icon set if they wish)

Something like

<ux-menuitem>
  <span class="icon">
    <!-- Icon of choice here -->
  </span>
  text
</ux-menuitem>

[serifine]

I pulled this down and took a look at it. I think it works pretty great as it is. I think it is too rigid as it is. I think the menu item itself should be able to be set using a class as well as an element. That way I could for example have an anchor element that is a link as a menu item.

<ux-menu open.bind='menuOpen' trigger.bind='menuButton'>
  <ux-menuitem click.delegate='zoomIn()' helper-text='ctrl + [+]'>Zoom In</ux-menuitem>
  <ux-menuitem click.delegate='zoomOut()' helper-text='ctrl + [-]'>Zoom Out</ux-menuitem>
  <a class="ux-menuitem" href="/${someId}/users">View Users</a>
</ux-menu>

Another idea I think would be neat is being able to simply target a button that will toggle the menu rather than having to toggle through a variable.

[bigopon]

Agree that menu should be able to be triggered from an anchor button, I left it in initial markup as a todo. I think this can be continued after we adjust the build setup and initialization of the whole lib. I kind of want to wait for main PRs in templating before progressing this.