designer

designer.html

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu-button/core-menu-button.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/image-icons.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../esri-html5/esri-map.html">
<link rel="import" href="../esri-html5/esri-geocoder.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-transition/core-transition-css.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      :host /deep/ input, :host /deep/ textarea {
        font: inherit;
        color: #ECE8E8;
        padding: 0;
        margin: 0.5em 0;
        background-color: transparent;
        border: none;
        outline: none;
        width: 100%;
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
        overflow: hidden;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #map {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
      }
      #core_card {
        width: 60px;
        height: 100%;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        position: absolute;
        z-index: 999;
        padding-top: 14px;
        background-color: rgb(0, 64, 128);
      }
      paper-icon-button {
        color: white;
      }
      #div2 {
        padding-bottom: 20px;
      }
      #core_animated_pages {
        width: 100%;
        height: 35%;
        overflow: hidden;
        position: absolute;
        bottom: 0px;
        z-index: 998;
        opacity: 0.9;
        margin-left: 60px;
        padding-left: 5px;
        color: white;
        background-color: rgb(0, 23, 47);
      }
    </style>
    <core-header-panel mode="waterfall" id="core_header_panel">
      <core-toolbar id="core_toolbar">
        <core-menu-button icon="more-vert" selected="0" valueattr="name" id="core_menu_button">
          <core-item label="Playgrounds" icon="settings" id="core_item" horizontal center layout on-tap="{{ deck_change }}" active></core-item>
          <core-item label="Urban Trees" icon="settings" id="core_item1" horizontal center layout on-tap="{{ deck_change }}"></core-item>
          <core-item label="Rubbish Collection" icon="settings" id="core_item2" horizontal center layout on-tap="{{ deck_change }}"></core-item>
        </core-menu-button>
        <div id="deckType">
          <h3 id="h3">{{ deckType }}</h3>
        </div>
        <div id="div">
          <h3 id="h31">Observer</h3>
        </div>
      </core-toolbar>
      <div id="div1" flex>
        </div>
      <esri-map basemap="streets" autoresize latitude="-35.32668907571624" longitude="149.1067116436549" zoom="12" id="map">
        <esri-geocoder id="esri_geocoder"></esri-geocoder>
        <core-card id="core_card" layout vertical center>
          <paper-icon-button icon="check-circle-outline" alt="Inspections" istoggle id="inspections" one flex></paper-icon-button>
          <paper-icon-button icon="warning" istoggle alt="Defects" id="defect" one flex></paper-icon-button>
          <paper-icon-button icon="image:camera" alt="Visual Inspections" istoggle id="visual" one flex on-tap="{{ stuff }}"></paper-icon-button>
          <paper-icon-button icon="info-outline" alt="Info" istoggle id="info" one flex></paper-icon-button>
          <paper-icon-button icon="settings" alt="Settings" istoggle id="settings" one flex></paper-icon-button>
          <div id="div2" layout vertical center end-justified nine flex>
            <paper-icon-button icon="settings" id="settings"></paper-icon-button>
          </div>
        </core-card>
        <div id="core_animated_pages" hidden layout vertical style="padding-right:60px;">
          <div id="panelhead" flex one layout horizontal>
            <core-icon icon="image:camera" id="core_icon" style="padding-right: 1px;margin-right: 5px; padding-top: 26px;"></core-icon> <h3>Visual Inspections</h3>
          </div>
          <div id="panelbody" flex eleven layout horizontal style="padding-top:16px;margin-right:24px;">
            <section id="section" layout vertical flex nine>
              <paper-tabs id="paper_tabs">
                <paper-tab id="paper_tab" active>COVER</paper-tab>
                <paper-tab id="paper_tab1">DEBRIS</paper-tab>
                <paper-tab id="paper_tab3">DRAINAGE</paper-tab>
                <paper-tab id="paper_tab4">EQUIPMENT</paper-tab>
              </paper-tabs>
              <section id="section1" flex relative layout vertical style="border-top:1px dotted white;">
                <div style="width:95%;position:relative;margin:16px;overflow-x:hidden;overflow-y:hidden;" layout horizontal fit >
                  <div flex two style="border: 1px dotted white;height: 140px;padding: 6px;margin-right: 20px;border-radius: 6px;">
                    <div style="height:100%;width:100%;border-radius:5px;margin:0px 16px 16px 0px;background-color: rgb(0, 64, 128);opacity:0.9;" layout vertical center>
                      <core-icon icon="image:camera" id="core_icon" style="height:85px;width:85px;margin-top:20px;"></core-icon>
                      <div>Click to add Photo</div>
                    </div>
                  </div>
                  <div flex two style="border: 1px dotted white;height: 140px;padding: 6px;margin-right: 20px;border-radius: 6px;">
                    
                  </div>
                  <div flex two style="border: 1px dotted white;height: 140px;padding: 6px;margin-right: 20px;border-radius: 6px;">
                    
                  </div>
                  <div flex two style="border: 1px dotted white;height: 140px;padding: 6px;margin-right: 20px;border-radius: 6px;">
                    
                  </div>
                  <div flex two style="border: 1px dotted white;height: 140px;padding: 6px;margin-right: 20px;border-radius: 6px;">
                    
                  </div>
                  <div flex two style="border: 1px dotted white;height: 140px;padding: 6px;margin-right: 20px;border-radius: 6px;">
                    
                  </div>
                </div>
              </section>
            </section>
          </div>
        </div>
        
      </esri-map>
    </core-header-panel>
  </template>

  <script>
	  var meta;
    var transition;
    var state = {
      opened: false
    }

    function getMeta() {
      if (!meta) {
        meta = document.createElement('core-meta');
        meta.type = 'transition';
      }
      return meta;
    }

    function setup(target) {

      if (transition) {
        transition.teardown(target);
      }

      var value = "core-transition-bottom";
      transition = getMeta().byId(value);
      transition.setup(target);
    }

    Polymer('my-element', {
      deckType: 'Playgrounds',
      deck_change: function (evt,dat,src){
        //console.log("Deck Change",evt,dat,src);
        this.deckType=src.label;
      },
      stuff: function (evt,dat,src){
        var target = this.$.core_animated_pages;
        state.opened = !state.opened;
        transition.go(target, state);
      },
      ready: function (){
        // initial setup
        setup(this.$.core_animated_pages);
        this.$.core_animated_pages.removeAttribute('hidden');
      }
    });

  </script>

</polymer-element>