Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1138)

Side by Side Diff: res/imp/9/app-sk.html

Issue 1411553004: Add autoroll server (Closed) Base URL: https://skia.googlesource.com/buildbot@arb_status
Patch Set: More fixes Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« autoroll/templates/main.html ('K') | « autoroll/templates/main.html ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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>
OLDNEW
« autoroll/templates/main.html ('K') | « autoroll/templates/main.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698