res/imp/app-sk.html

<!--
`app-sk` provides general application layout, introducing a
responsive scaffold containing a header, toolbar, mtoolbar, rtoolbar, title and
areas for application content, as well as automatic inclusion of
common menu items, login status, and version tag.

Example:

    <app-sk mode="standard" responsive_width="600px" drawer_width="230px">
      <h1 header>Title goes here</h1>
      <div mtoolbar>middle stuff</div> <!- in the middle, between the title and rtoolbar ->
      <foo-status-sk rtoolbar></foo-status-sk> <!-to be right aligned, on the top bar ->
      <div navigation>Nav goes here</div>
      <div>Content goes here</div>
    </app-sk>

Properties:
  mode - Controls header and scrolling behavior for the paper-header-panel.
      Options are "standard", "seamed", "waterfall", "waterfall-tall", "scroll"
      and "cover". Default is "standard".

  tall_class - The class used by the paper-header-panel in waterfall-tall mode.
      Change this if the header accepts a different class for toggling height,
      e.g. "medium-tall"

  drawer_width - Width of the drawer panel, eg. "200px".

  force_narrow - Whether or not to force the paper-drawer-panel into narrow
      mode.

  narrow - Whether or not the paper-drawer-panel is currently in narrow mode.

  no_drawer - If true, no drawer panel is displayed at all.

  no_version - If true, no version element is displayed.

  responsive_width - Screen width at which the paper-drawer-panel switches into
      narrow mode.

  loginEle: The login-sk element in use by this element.

Methods:
  None.

Events:
  None.
-->
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/res/imp/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/res/imp/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="error-toast-sk.html">
<link rel="import" href="login.html">
<link rel="import" href="version-sk.html">
<dom-module id="app-sk">
  <style include="iron-flex iron-flex-alignment iron-positioning">
    paper-toolbar {
      @apply --app-sk-toolbar;
    }
    paper-drawer-panel {
      --paper-drawer-panel-main-container: {
        @apply--app-sk-main);
      };
      --paper-drawer-panel-left-drawer-container: {
        z-index: 10;
        @apply(--app-sk-drawer);
      };
    }
    #drawer {
      box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
    }
    #mainContent {
      overflow: auto;
    }
    #menuButton  {
      min-width: 40px;
      padding: 8px 0px;
    }
    #headerPanel {
      height: 100vh;
    }
  </style>

  <template>
    <paper-header-panel id="headerPanel" mode="{{mode}}" tall-class="{{tall_class}}" class=flex>
      <paper-toolbar id="header" style$="{{_headerStyle(narrow,header_height,header_responsive_height)}}">
        <paper-icon-button id="menuButton" icon="icons:menu" on-tap="_togglePanel" hidden$="{{!_showMenuButton}}"></paper-icon-button>
        <content select="[header], header, [toolbar], toolbar"></content>
        <div class="flex">
          <content select="[mtoolbar], mtoolbar"></content>
        </div>
        <content select="[rtoolbar], rtoolbar"></content>
        <login-sk id="login" email="{{logged_in_email}}" login_data="{{login_data}}"></login-sk>
      </paper-toolbar>
      <template is="dom-if" if="{{no_drawer}}">
        <div main id="mainContent" class="layout vertical">
          <content select="*"></content>
          <template is="dom-if" if="{{_showVersion(no_version)}}">
            <div class="layout horizontal">
              <div class="flex"></div>
              <version-sk></version-sk>
            </div>
          </template>
        </div>
      </template>
      <paper-drawer-panel id="drawerPanel" drawer-width="{{drawer_width}}" responsive-width="{{responsive_width}}" force-narrow$="{{force_narrow}}" narrow="{{narrow}}" hidden$="{{no_drawer}}">
        <div drawer id="drawer" class="vertical layout">
          <content id="navContent" select="[navigation], nav, [drawer], drawer"></content>
          <template is="dom-if" if="{{_showVersion(no_version)}}">
            <div class="flex"></div>
            <version-sk></version-sk>
          </template>
        </div>
        <div main id="mainContent" class="layout vertical">
          <content select="*"></content>
        </div>
      </paper-drawer-panel>
    </paper-header-panel>
    <error-toast-sk></error-toast-sk>
  </template>
  <script>
  (function() {
    Polymer({
      is: "app-sk",

      properties: {
        mode: {
          type: String,
          value: "standard",
        },
        tall_class: {
          type: String,
          value: "waterfall-tall",
        },
        drawer_width: {
          type: String,
          value: "200px",
        },
        header_height: {
          type: String,
          value: "56px",
        },
        header_responsive_height: {
          type: String,
          value: "56px",
        },
        force_narrow: {
          type: Boolean,
          value: false,
        },
        logged_in_email: {
          type: String,
          notify: true,
        },
        login_data: {
          type: Object,
          notify: true,
        },
        narrow: {
          type: Boolean,
          notify: true,
        },
        no_drawer: {
          type: Boolean,
          value: false,
        },
        no_version: {
          type: Boolean,
          value: false,
        },
        responsive_width: {
          type: String,
          value: "800px",
        },
        _showMenuButton: {
          type: Boolean,
          computed: "_computeShowMenuButton(narrow, no_drawer)",
        },
      },

      ready: function() {
        this.loginEle = this.$.login;
      },

      _computeShowMenuButton: function(narrow, no_drawer) {
        if (no_drawer) {
          return false;
        }
        return narrow;
      },

      _showVersion: function(no_version) {
        return !no_version;
      },

      _headerStyle: function(isNarrow, height, responsive_height) {
        var h = height;
        if (isNarrow) {
          h = responsive_height;
        }
        return "height: "+h+";";
      },

      _togglePanel: function() {
        this.$.drawerPanel.togglePanel();
      },
    });
  }());
  </script>
</dom-module>