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: 64px;
      }
      :host:hover {
        opacity: 1;
      }
      hax-context-item {
        display: block;
        margin: 6px 0;
        width: 32px;
      }
      .area {
        width: 32px;
        float: left;
        opacity: .3;
        visibility: visible;
        transition: .8s all ease;
      }
      .area:hover {
        opacity: 1;
      }
    </style>
    <div class="area">
      <hax-context-item
        light
        mini
        icon="image:add-to-photos"
        label="Add"
        event-name="hax-manager-open"
        value="0"
        direction="left"></hax-context-item>
      <hax-context-item
        light
        mini
        icon="search"
        label="Find"
        event-name="hax-manager-open"
        value="1"
        direction="left"></hax-context-item>
      <hax-context-item
        light
        mini
        icon="view-quilt"
        label="Make"
        event-name="hax-manager-open"
        value="2"
        direction="left"></hax-context-item>
    </div>
    <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
        disabled
        icon="editor:drag-handle"
        label="Drag"
        event-name="hax-make-draggable"
        direction="right"></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>