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;
        width: 32px;
      }
      :host:hover {
        opacity: 1;
      }
      hax-context-item {
        display: block;
        margin: 6px 0;
        width: 32px;
      }
      .area {
        width: 32px;
        float: left;
        opacity: .5;
        visibility: visible;
        transition: .8s all ease;
      }
      .area:hover {
        opacity: 1;
      }
    </style>
    <div class="area">
      <hax-context-item
        light
        mini
        icon="arrow-upward"
        label="Move up"
        event-name="grid-plate-up"
        direction="left"></hax-context-item>
      <hax-context-item
        light
        mini
        icon="arrow-downward"
        label="Move down"
        event-name="grid-plate-down"
        direction="left"></hax-context-item>
    </div>
  </template>

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