hax-plate-context.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="hax-context-item-menu.html">
<link rel="import" href="hax-context-item.html">

<!--
`hax-plate-context`
A context menu that provides common grid plate based authoring options.

@demo demo/index.html

@microcopy - the mental model for this element
 - context menu - this is a menu of text based buttons and events for use in a larger solution.
 - grid plate - the container / full HTML tag which can have operations applied to it.
-->

<dom-module id="hax-plate-context">
  <template>
    <style>
      :host {
        display: block;
        background-color: white;
        width: 40px;
      }
      hax-context-item-menu,
      hax-context-item {
        display: block;
        margin: 0;
        width: 40px;
        height: 40px;
      }
      hax-context-item ::shadow paper-icon-button {
        height: 40px;
      }
    </style>
    <hax-context-item
      icon="arrow-upward"
      label="Move element up"
      event-name="grid-plate-up"
      direction="left"></hax-context-item>
    <hax-context-item
      icon="arrow-downward"
      label="Move element down"
      event-name="grid-plate-down"
      direction="left"></hax-context-item>
    <hax-context-item
      icon="content-copy"
      icon-class="green-text text-lighten-2"
      label="Duplcate element"
      event-name="grid-plate-duplicate"
      direction="left"></hax-context-item>
    <hax-context-item
      icon="delete"
      icon-class="red-text text-darken-2"
      label="Delete element"
      event-name="grid-plate-delete"
      direction="left"></hax-context-item>
  </template>

  <script>
    Polymer({
      is: 'hax-plate-context',
    });
  </script>
</dom-module>