designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../esri-html5/esri-eui.html">
<link rel="import" href="../core-splitter/core-splitter.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_drawer_panel {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
      }
      #section {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        background-color: rgb(250, 250, 250);
      }
      #section1 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #core_selector {
        width: 100%;
        height: 50px;
        left: 1720px;
        top: 600px;
      }
      #section2 {
        min-height: 0px;
        overflow: hidden;
        height: 33%;
      }
    </style>
    <core-drawer-panel id="core_drawer_panel" touch-action>
      <section id="section" drawer>
        <esri-arcgis-server url="http://sampleserver5.arcgisonline.com/arcgis/rest/services" id="ags1"></esri-arcgis-server>
        <esri-serverpanel server="{{ $.ags1 }}" id="explorer">
  			</esri-serverpanel>
      </section>
      <section id="section1" main>
        <section id="section2" flex two>
          <section layout horizontal>
            <section flex two>
              <template repeat="{{ layer in $.explorer.service.layerArray }}">
              <div>{{ layer.name }}</div>
              </template>
            </section>
            <section flex four>
              <template bind="{{ $.explorer.service as service}}">
                    <section id="section1" flex relative>
                      <paper-input id="paper_input" label="ServiceName" floatinglabel placeholder="Service Name" disabled inputvalue="{{ service.name }}" value="{{ service.name }}"></paper-input>
                      <br/>
                      <paper-input id="paper_input" label="Description" floatinglabel placeholder="Description" multiline rows="4" disabled inputvalue="{{ service.description }}" value="{{ service.description }}"></paper-input>
                      <br/>
                      <paper-input id="paper_input" label="Copyright" floatinglabel placeholder="Copyright" multiline rows="2" disabled inputvalue="{{ service.copyrightText }}" value="{{ service.copyrightText }}"></paper-input>
                      <br/>
                      <paper-input id="paper_input" label="Capabilities" floatinglabel placeholder="Capabilities" disabled inputvalue="{{ service.capabilities }}" value="{{ service.capabilities }}"></paper-input>
                      <br/>
                    </section>
              </template>
            </section>
          </section>
        </section>
        <core-splitter direction="up" id="core_splitter" class="horizontal"></core-splitter>
        <section id="section3" flex two>
          <section layout horizontal>
            <section flex>
              <template repeat="{{ action in $.explorer.actions}}">
                <div>{{ action }}</div>
              </template>
            </section>
            <section flex four>
              
            </section>
          </section>
        </section>
      </section>
    </core-drawer-panel>
  </template>

  <script>

    Polymer('my-element', {
      set_action: function (e){
        console.log(e);
        this.$.explorer.set_action(e);
      }
    });

  </script>

</polymer-element>