| <!-- |
| `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> |