| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 `app-sk` provides general application layout, introducing a | 2 `app-sk` provides general application layout, introducing a |
| 3 responsive scaffold containing a header, toolbar, menu, title and | 3 responsive scaffold containing a header, toolbar, menu, title and |
| 4 areas for application content, as well as automatic inclusion of | 4 areas for application content, as well as automatic inclusion of |
| 5 common menu items, login status, and version tag. | 5 common menu items, login status, and version tag. |
| 6 | 6 |
| 7 Example: | 7 Example: |
| 8 | 8 |
| 9 <app-sk mode="standard" responsive_width="600px" drawer_width="230px"> | 9 <app-sk mode="standard" responsive_width="600px" drawer_width="230px"> |
| 10 <h1 header>Title goes here</h1> | 10 <h1 header>Title goes here</h1> |
| (...skipping 10 matching lines...) Expand all Loading... |
| 21 Change this if the header accepts a different class for toggling height, | 21 Change this if the header accepts a different class for toggling height, |
| 22 e.g. "medium-tall" | 22 e.g. "medium-tall" |
| 23 | 23 |
| 24 drawer_width - Width of the drawer panel, eg. "200px". | 24 drawer_width - Width of the drawer panel, eg. "200px". |
| 25 | 25 |
| 26 force_narrow - Whether or not to force the paper-drawer-panel into narrow | 26 force_narrow - Whether or not to force the paper-drawer-panel into narrow |
| 27 mode. | 27 mode. |
| 28 | 28 |
| 29 narrow - Whether or not the paper-drawer-panel is currently in narrow mode. | 29 narrow - Whether or not the paper-drawer-panel is currently in narrow mode. |
| 30 | 30 |
| 31 no_drawer - If true, no drawer panel is displayed at all. |
| 32 |
| 31 responsive_width - Screen width at which the paper-drawer-panel switches into | 33 responsive_width - Screen width at which the paper-drawer-panel switches into |
| 32 narrow mode. | 34 narrow mode. |
| 33 | 35 |
| 34 Methods: | 36 Methods: |
| 35 None. | 37 None. |
| 36 | 38 |
| 37 Events: | 39 Events: |
| 38 None. | 40 None. |
| 39 --> | 41 --> |
| 40 <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-la
yout.html"> | 42 <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-la
yout.html"> |
| (...skipping 24 matching lines...) Expand all Loading... |
| 65 @apply(--app-sk-main); | 67 @apply(--app-sk-main); |
| 66 }; | 68 }; |
| 67 --paper-drawer-panel-left-drawer-container: { | 69 --paper-drawer-panel-left-drawer-container: { |
| 68 @apply(--app-sk-drawer); | 70 @apply(--app-sk-drawer); |
| 69 }; | 71 }; |
| 70 } | 72 } |
| 71 </style> | 73 </style> |
| 72 <template> | 74 <template> |
| 73 <paper-header-panel id="headerPanel" mode="{{mode}}" tallClass="{{tall_class
}}"> | 75 <paper-header-panel id="headerPanel" mode="{{mode}}" tallClass="{{tall_class
}}"> |
| 74 <paper-toolbar> | 76 <paper-toolbar> |
| 75 <template is="dom-if" if="{{narrow}}"> | 77 <template is="dom-if" if="{{_showMenuButton}}"> |
| 76 <paper-icon-button id="menuButton" icon="icons:menu" on-tap="_togglePa
nel"></paper-icon-button> | 78 <paper-icon-button id="menuButton" icon="icons:menu" on-tap="_togglePa
nel"></paper-icon-button> |
| 77 </template> | 79 </template> |
| 78 <content select="[header], header, [toolbar], toolbar"></content> | 80 <content select="[header], header, [toolbar], toolbar"></content> |
| 79 <div class="flex"></div> | 81 <div class="flex"></div> |
| 80 <app-menu-sk></app-menu-sk> | 82 <app-menu-sk></app-menu-sk> |
| 81 <login-sk></login-sk> | 83 <login-sk></login-sk> |
| 82 </paper-toolbar> | 84 </paper-toolbar> |
| 83 <paper-drawer-panel id="drawerPanel" drawer-width$="{{drawer_width}}" res
ponsive-width$="{{responsive_width}}" force-narrow$="{{force_narrow}}"> | 85 <template is="dom-if" if="{{no_drawer}}"> |
| 84 <div drawer id="drawer" class="vertical layout"> | 86 <div main id="maincontent" class="layout vertical"> |
| 85 <content select="[navigation], nav, [drawer], drawer"></content> | 87 <content select="*"></content> |
| 86 <div class="flex"></div> | 88 <div class="layout horizontal"> |
| 87 <version-sk></version-sk> | 89 <div class="flex"></div> |
| 90 <version-sk></version-sk> |
| 91 </div> |
| 88 </div> | 92 </div> |
| 89 <div main id="mainContent" class="layout vertical"> | 93 </template> |
| 90 <content select="*"></content> | 94 <template is="dom-if" if="{{!no_drawer}}"> |
| 91 </div> | 95 <paper-drawer-panel id="drawerPanel" drawer-width$="{{drawer_width}}" r
esponsive-width$="{{responsive_width}}" force-narrow$="{{force_narrow}}"> |
| 92 </paper-drawer-panel> | 96 <div drawer id="drawer" class="vertical layout"> |
| 97 <content id="navContent" select="[navigation], nav, [drawer], drawer
"></content> |
| 98 <div class="flex"></div> |
| 99 <version-sk></version-sk> |
| 100 </div> |
| 101 <div main id="mainContent" class="layout vertical"> |
| 102 <content select="*"></content> |
| 103 </div> |
| 104 </paper-drawer-panel> |
| 105 </template> |
| 93 </paper-header-panel> | 106 </paper-header-panel> |
| 94 </template> | 107 </template> |
| 95 <script> | 108 <script> |
| 96 (function() { | 109 (function() { |
| 97 Polymer({ | 110 Polymer({ |
| 98 is: "app-sk", | 111 is: "app-sk", |
| 99 | 112 |
| 100 properties: { | 113 properties: { |
| 101 mode: { | 114 mode: { |
| 102 type: String, | 115 type: String, |
| 103 value: "standard", | 116 value: "standard", |
| 104 }, | 117 }, |
| 105 tall_class: { | 118 tall_class: { |
| 106 type: String, | 119 type: String, |
| 107 value: "waterfall-tall", | 120 value: "waterfall-tall", |
| 108 }, | 121 }, |
| 109 drawer_width: { | 122 drawer_width: { |
| 110 type: String, | 123 type: String, |
| 111 value: "200px", | 124 value: "200px", |
| 112 }, | 125 }, |
| 113 force_narrow: { | 126 force_narrow: { |
| 114 type: Boolean, | 127 type: Boolean, |
| 115 value: false, | 128 value: false, |
| 116 }, | 129 }, |
| 117 narrow: { | 130 narrow: { |
| 118 type: Boolean, | 131 type: Boolean, |
| 119 notify: true, | 132 notify: true, |
| 120 readOnly: true, | 133 readOnly: true, |
| 121 }, | 134 }, |
| 135 no_drawer: { |
| 136 type: Boolean, |
| 137 value: false, |
| 138 }, |
| 122 responsive_width: { | 139 responsive_width: { |
| 123 type: String, | 140 type: String, |
| 124 value: "800px", | 141 value: "800px", |
| 125 }, | 142 }, |
| 143 _showMenuButton: { |
| 144 type: Boolean, |
| 145 computed: "_computeShowMenuButton(narrow, no_drawer)", |
| 146 }, |
| 126 }, | 147 }, |
| 127 | 148 |
| 128 ready: function() { | 149 ready: function() { |
| 129 this._setNarrow(this.$.drawerPanel.narrow); | 150 window.addEventListener("WebComponentsReady", function() { |
| 130 this.$.drawerPanel.addEventListener("narrow-changed", function() { | 151 if (!this.no_drawer) { |
| 131 this._setNarrow(this.$.drawerPanel.narrow); | 152 var drawerPanel = this.$$("#drawerPanel"); |
| 153 this._setNarrow(drawerPanel.narrow); |
| 154 drawerPanel.addEventListener("narrow-changed", function() { |
| 155 this._setNarrow(this.$$("#drawerPanel").narrow); |
| 156 }.bind(this)); |
| 157 } |
| 132 }.bind(this)); | 158 }.bind(this)); |
| 133 }, | 159 }, |
| 134 | 160 |
| 161 _computeShowMenuButton: function(narrow, no_drawer) { |
| 162 if (no_drawer) { |
| 163 return false; |
| 164 } |
| 165 return narrow; |
| 166 }, |
| 167 |
| 135 _togglePanel: function() { | 168 _togglePanel: function() { |
| 136 this.$.drawerPanel.togglePanel(); | 169 this.$.drawerPanel.togglePanel(); |
| 137 }, | 170 }, |
| 138 }); | 171 }); |
| 139 }()); | 172 }()); |
| 140 </script> | 173 </script> |
| 141 </dom-module> | 174 </dom-module> |
| OLD | NEW |