designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../core-pages/core-pages.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="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-progress/paper-progress.html">

<polymer-element name="kune-app">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      core_selector, div {
        font-size: 16px;
      }
      #main_core_drawer_panel {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
      #drawerPanel, #main_left_section {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        margin-top: 40px;
        background-color: white;
      }
      #main_right_section {
        margin-top: 40px;
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #sitebar_toolbar {
        right: 0px;
        left: 0px;
        height: 40px;
        color: rgb(255, 255, 255);
        fill: rgb(255, 255, 255);
        top: 0px;
        position: absolute;
        background-color: rgb(255, 204, 170);
      }
      #space_selector_paper_tabs {
        color: rgb(255, 255, 255);
        left: 0px;
        top: 0px;
        position: absolute;
        opacity: 1;
        height: 40px;
        background-color: rgb(255, 204, 170);
      }
      paper-tabs#space_selector_paper_tabs::shadow #selectionBar {
        background-color: rgb(105, 49, 47);
      }
      paper-tabs#space_selector_paper_tabs::shadow #selectionBar {
        height: 4px;
      }
      paper-button.custom > core-icon {
        margin-right: 4px;
      }
      #sitebar_language_btn, #sitebar_user_btn, #sitebar_search_icon, #sitebar_more_icon {
        margin-top: -20px;
      }
      #paper_progress {
        right: 50%;
        top: 0px;
        position: absolute;
      }
      .hidden {
        display: none;
      }
      #core_selector {
        width: 100%;
        background-color: gray;
      }
      #collapse_inbox, #collapse_chat {
        width: 100%;
        min-height: 15px;
        padding: 15px;
        border: 1px solid rgb(222, 222, 222);
        display: block !important;
      }
      #paper_tab {
        width: 120px !important;
      }
      #paper_tab1 {
        width: 24px !important;
      }
    </style>
    <core-drawer-panel transition responsivewidth="600px" selected="main" narrow="{{ narrow }}" forcenarrow id="main_core_drawer_panel" touch-action="pan-y">
      <section id="drawerPanel" drawer>
        <core-selector selected="{{ sel }}" selectedindex="0" id="core_selector">
          <core-collapse id="collapse_inbox" fixedsize opened active>
            <div id="div">I'm inbox. Click to expand.</div>
            <p id="p">asdf asdf ads fasd </p>
            <p id="p">asdf asdf ads fasd </p>
            <p id="p">asdf asdf ads fasd </p>
          </core-collapse>
          <core-collapse id="collapse_chat" fixedsize>
            <div>I'm chat. Click to expand.</div>
            <p id="p">This is the chat</p>
            <p id="p">asdf asdf ads fasd </p>
            <p id="p">asdf asdf ads fasd </p>
            <p id="p">asdf asdf ads fasd </p>
          </core-collapse>
        </core-selector>
        <paper-fab icon="view-column" mini id="inbox_show_hide" class="btn_gray" core-drawer-toggle></paper-fab>
      </section>
      <section id="main_right_section" main>
        <core-pages selected="{{ selected }}" selectedindex="0" notap>
          <div id="home_space" active>Home</div>
          <div id="group_space">Group space</div>
          <div id="user_space">Inbox</div>
          <div id="chat_space">Chat</div>
        </core-pages>
        <core-toolbar id="sitebar_toolbar">
          <paper-tabs selected="{{ selected }}" selectedindex="0" id="space_selector_paper_tabs" horizontal center layout>
            <paper-tab id="paper_tab" inline flex center-center horizontal layout active>
              <img id="home_space_icon" class="hidden-xs hidden-sm" src="http://polymer.comunes.org/kune/kune-logo-sitebar-white-narrow-false.png"></img>
            </paper-tab>
            <paper-tab id="paper_tab1" inline flex center-center horizontal layout>
              <paper-icon-button icon="group-work" id="group_space_icon"></paper-icon-button>
            </paper-tab>
            <paper-tab id="paper_tab2" inline flex center-center horizontal layout>
              <paper-icon-button icon="mail" id="user_space_icon"></paper-icon-button>
            </paper-tab>
            <paper-tab id="paper_tab3" inline flex center-center horizontal layout>
              <paper-icon-button icon="speaker-notes" id="chat_icon"></paper-icon-button>
            </paper-tab>
          </paper-tabs>
          <div id="div1" flex></div>
          <div id="div2">
            <core-icon-button icon="translate" id="sitebar_language_btn" class="hidden">English</core-icon-button>
          </div>
          <core-icon-button icon="account-circle" id="sitebar_user_btn">
            <span id="span" class="hidden">John Doe</span>
          </core-icon-button>
          <paper-icon-button icon="search" id="sitebar_search_icon"></paper-icon-button>
          <paper-icon-button icon="more-vert" id="sitebar_more_icon"></paper-icon-button>
          <paper-progress value="10" ratio="10" id="paper_progress"></paper-progress>
        </core-toolbar>
      </section>
    </core-drawer-panel>
  </template>

  <script>

    Polymer({
      toggleDrawer: function () {
        <!-- https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel.methods.togglePanel -->
        <!-- http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ -->
        console.log('polymer element', this.$.drawerPanel);
      	// this.$.drawerPanel.closeDrawer();
        console.log('polymer element', this.$.drawerPanel.getOwnPropertyNames());
    },
      selected: 0,
      narrow: true,
      drawerSelected: 0,
      sel: 0,
      pageSelected: 0
    });

  </script>

</polymer-element>