Skip to content
This repository was archived by the owner on Dec 16, 2025. It is now read-only.

Commit 44a1414

Browse files
ebidelebidel
authored
Migrate to app layout elements (#31)
* Migrate to app-layout elements. Fixes #30 * Fix up tests * Update bower.json * Fix tests for realz
1 parent 9d54d77 commit 44a1414

File tree

6 files changed

+146
-112
lines changed

6 files changed

+146
-112
lines changed

‎bower.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,21 @@
55
"main": "google-codelab-elements.html",
66
"license": "Apache2",
77
"dependencies": {
8+
"app-layout": "PolymerElements/app-layout#^0.10.0",
89
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.5",
910
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.3",
1011
"iron-icons": "PolymerElements/iron-icons#^1.0.3",
1112
"iron-localstorage": "PolymerElements/iron-localstorage#^1.0.4",
1213
"neon-animation": "PolymerElements/neon-animation#^1.2.2",
1314
"paper-button": "PolymerElements/paper-button#^1.0.3",
1415
"paper-dialog": "PolymerElements/paper-dialog#^1.0.1",
15-
"paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.3",
1616
"paper-fab": "PolymerElements/paper-fab#^1.0.3",
17-
"paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#^1.0.8",
1817
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.3",
1918
"paper-item": "PolymerElements/paper-item#^1.0.2",
2019
"paper-menu": "PolymerElements/paper-menu#^1.1.0",
2120
"paper-radio-button": "PolymerElements/paper-radio-button#^1.0.6",
2221
"paper-radio-group": "PolymerElements/paper-radio-group#^1.0.4",
2322
"paper-styles": "PolymerElements/paper-styles#^1.0.11",
24-
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.4",
2523
"google-prettify": "google/code-prettify"
2624
},
2725
"devDependencies": {

‎codelab-style.html‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -29,38 +29,64 @@
2929
background: inherit;
3030
padding: 0;
3131
};
32-
--paper-drawer-panel-left-drawer-container: {
32+
33+
--app-drawer-content-container: {
3334
background: var(--google-codelab-background, --paper-grey-100);
34-
overflow-y: auto;
35-
z-index: 1;
36-
};
37-
--paper-drawer-panel-main-container: {
38-
background: var(--google-codelab-background, --paper-grey-300);
3935
};
36+
37+
--nav-height: 64px;
4038
}
4139

4240

4341
:host([theme="minimal"]) {
4442
position: relative;
4543
}
4644

47-
:host(:not([theme="minimal"])) [drawer] {
48-
height: auto !important; /* override default styling */
49-
margin: 16px 16px 16px 12px;
45+
#headerpanel {
46+
position: fixed;
47+
left: 0;
48+
right: 0;
49+
z-index: 1;
50+
margin-left: 256px; /* drawer width */
51+
}
52+
53+
#headerpanel[narrow] {
54+
margin-left: 0;
5055
}
5156

57+
.drawer-content-wrapper {
58+
padding: 16px;
59+
}
60+
61+
#main-content {
62+
background: var(--google-codelab-background, --paper-grey-300);
63+
}
64+
65+
#pages {
66+
top: var(--nav-height);
67+
}
5268

5369
#controls[narrow] {
5470
width: 100%;
5571
}
5672

57-
paper-toolbar {
73+
#main-toolbar {
5874
background: var(--google-codelab-header-background, --paper-blue-600);
5975
color: #fff;
76+
display: flex;
77+
align-items: center;
78+
justify-content: space-between;
79+
height: var(--nav-height);
80+
padding: 0 16px;
6081
}
6182

62-
paper-toolbar .title {
83+
#main-toolbar .title {
6384
margin: 0 8px;
85+
flex: 1;
86+
font-weight: 300;
87+
white-space: nowrap;
88+
overflow: hidden;
89+
text-overflow: ellipsis;
6490
}
6591

6692
paper-icon-button[icon=menu] {
@@ -88,11 +114,11 @@
88114
margin-right: 3px;
89115
}
90116

91-
:host(:not([theme="minimal"])) [drawer] .countdown {
117+
:host(:not([theme="minimal"])) #drawer .countdown {
92118
display: none;
93119
}
94120

95-
:host([theme="minimal"]) [drawer] .countdown {
121+
:host([theme="minimal"]) #drawer .countdown {
96122
padding: 0 16px 16px 16px;
97123
font-style: italic;
98124
color: var(--paper-blue-500);
@@ -101,7 +127,7 @@
101127
}
102128

103129
#controls {
104-
position: absolute;
130+
position: fixed;
105131
right: 0;
106132
bottom: 16px;
107133
padding: 0 16px;
@@ -205,18 +231,11 @@
205231
#metadata {
206232
color: var(--google-codelab-footer-text-color, #777);
207233
font-size: 0.7em;
208-
}
209-
210-
:host(:not([theme="minimal"])) #metadata {
211-
position: fixed;
212-
bottom: 8px;
213-
background-color: var(--paper-grey-100);
214-
padding: 4px 8px;
234+
flex: 0 0 80px;
215235
}
216236

217237
#feedback a {
218238
color: currentcolor;
219-
text-decoration: underline;
220239
}
221240

222241
@media (min-width: 641px) {

‎demo/codelab.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,28 @@
2020
<meta charset="utf-8">
2121
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
2222
<title>codelab demo</title>
23-
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
23+
<script src="../../webcomponentsjs/webcomponents-lite.min.js" aysnc></script>
24+
<script>
25+
window.Polymer = window.Polymer || {dom: 'shadow', lazyRegister: true};
26+
</script>
2427
<link rel="stylesheet"
2528
href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700">
2629
<link rel="import" href="../../iron-icons/iron-icons.html">
2730
<link rel="import" href="../../paper-button/paper-button.html">
2831
<link rel="import" href="../google-codelab-elements.html">
29-
<style>
30-
body {
31-
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
32-
}
32+
<style is="custom-style">
33+
body {
34+
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
35+
background: var(--google-codelab-background, --paper-grey-300);
36+
}
3337
</style>
3438
</head>
35-
<body unresolved class="fullbleed">
39+
<body>
3640

3741
<google-codelab title="Build Google Maps Using Web Components & No Code!"
3842
feedback-link="https://github.com/googlecodelabs"
39-
environment="web">
43+
environment="web"
44+
last-updated="2016-07-18">
4045

4146
<google-codelab-step label="Overview" duration="2">
4247

‎google-codelab.html‎

Lines changed: 87 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,10 @@
2323
<link rel="import" href="../neon-animation/animations/slide-from-left-animation.html">
2424
<link rel="import" href="../neon-animation/animations/slide-right-animation.html">
2525
<link rel="import" href="../neon-animation/animations/slide-left-animation.html">
26-
<link rel="import" href="../paper-drawer-panel/paper-drawer-panel.html">
27-
<link rel="import" href="../paper-scroll-header-panel/paper-scroll-header-panel.html">
28-
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
26+
27+
<link rel="import" href="../app-layout/app-header-layout/app-header-layout.html">
28+
<link rel="import" href="../app-layout/app-drawer/app-drawer.html">
29+
<link rel="import" href="../app-layout/app-drawer-layout/app-drawer-layout.html">
2930
<link rel="import" href="../paper-button/paper-button.html">
3031
<link rel="import" href="../paper-dialog/paper-dialog.html">
3132
<link rel="import" href="../paper-fab/paper-fab.html">
@@ -73,87 +74,97 @@
7374
on-iron-localstorage-load="_stateLoaded">
7475
</iron-localstorage>
7576

76-
<paper-drawer-panel id="drawer" narrow="{{_narrow}}" selected="{{currDrawer}}">
77+
<app-drawer-layout fullbleed narrow="{{_narrow}}" >
78+
<app-drawer id="drawer" swipe-open>
7779

78-
<div drawer class="layout vertical">
79-
<div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
80-
class="countdown layout horizontal">
81-
<iron-icon icon="schedule"></iron-icon> <span>{{remaining}}</span>
82-
</div>
80+
<div class="drawer-content-wrapper layout vertical" style="height:100%">
81+
82+
<div class="flex" style="overflow: auto;">
83+
<div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
84+
class="countdown layout horizontal">
85+
<iron-icon icon="schedule"></iron-icon> <span>[[remaining]]</span>
86+
</div>
8387

84-
<paper-menu id="toc" class="flex" selected="{{selected}}"
85-
on-iron-select="_allowCodelabComplete">
86-
<template is="dom-repeat" items="{{steps}}" strip-whitespace>
87-
<paper-item class$="{{_tocItemClass(selected, index)}}">
88-
<i>{{item.step}}</i><span>{{item.label}}</span>
89-
</paper-item>
90-
</template>
91-
</paper-menu>
92-
93-
<div id="metadata">
94-
<template is="dom-if" if="{{feedbackLink}}" strip-whitespace>
95-
<div id="feedback">
88+
<paper-menu id="toc" class="flex" selected="{{selected}}"
89+
on-iron-select="_allowCodelabComplete">
90+
<template is="dom-repeat" items="{{steps}}" strip-whitespace>
91+
<paper-item class$="{{_tocItemClass(selected, index)}}">
92+
<i>{{item.step}}</i><span>{{item.label}}</span>
93+
</paper-item>
94+
</template>
95+
</paper-menu>
96+
</div>
97+
98+
<div id="metadata">
99+
<template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
100+
<div id="last-updated">Last updated on {{lastUpdated}}.</div>
101+
</template>
102+
<div id="feedback" hidden$="[[!feedbackLink]]">
96103
Did you find a mistake?
97104
<a target="_blank" href$="{{feedbackLink}}">Please file a bug</a>.
98105
</div>
99-
</template>
106+
</div>
100107

101-
<template is="dom-if" if="{{lastUpdated}}" strip-whitespace>
102-
<div id="last-updated">Last updated on {{lastUpdated}}.</div>
103-
</template>
104108
</div>
105109

106-
</div>
110+
</app-drawer>
107111

108-
<paper-scroll-header-panel id="headerpanel" fixed main>
109-
<paper-toolbar hidden$="[[noToolbar]]">
110-
<template is="dom-if" if="{{_narrow}}" strip-whitespace>
111-
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
112-
</template>
113-
<template is="dom-if" if="{{!_narrow}}" strip-whitespace>
114-
<paper-icon-button icon="arrow-back" on-tap="_goToHome"></paper-icon-button>
115-
</template>
116-
<h1 class="title">{{title}}</h1>
117-
<div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
118-
class="countdown layout horizontal">
119-
<iron-icon icon="schedule"></iron-icon> <span>{{remaining}}</span>
112+
<app-header-layout fullbleed>
113+
114+
<div id="headerpanel" fixed narrow$="[[_narrow]]">
115+
<div id="main-toolbar" hidden$="[[noToolbar]]">
116+
<div>
117+
<template is="dom-if" if="{{_narrow}}" strip-whitespace>
118+
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
119+
</template>
120+
<template is="dom-if" if="{{!_narrow}}" strip-whitespace>
121+
<paper-icon-button icon="arrow-back" on-tap="_goToHome"></paper-icon-button>
122+
</template>
123+
</div>
124+
<h3 class="title">[[title]]</h3>
125+
<div title="Time remaining" hidden$="{{!_isPositiveNum(duration)}}"
126+
class="countdown layout horizontal">
127+
<iron-icon icon="schedule"></iron-icon> <span>{{remaining}}</span>
128+
</div>
120129
</div>
121-
</paper-toolbar>
122-
123-
<neon-animated-pages id="pages" selected="{{selected}}"
124-
on-iron-deselect="_onStepLeave"
125-
on-iron-items-changed="_onStepsChanged">
126-
<content select="google-codelab-step"></content>
127-
</neon-animated-pages>
128-
129-
</paper-scroll-header-panel>
130-
131-
</paper-drawer-panel>
132-
133-
<footer id="controls" hidden$="[[noArrows]]" narrow$="[[_narrow]]">
134-
<div class="fabs layout horizontal justified">
135-
<paper-fab raised class="navbutton prevbutton" icon="chevron-left"
136-
on-tap="selectPrevious"
137-
title="Previous step"
138-
disabled$="{{_isFirstStep(selected)}}">
139-
</paper-fab>
140-
141-
<div>
142-
<template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
143-
<paper-fab icon="chevron-right" raised class="navbutton nextbutton"
144-
title="{{_nextFabTitle(selected)}}"
145-
on-tap="selectNext">
146-
</paper-fab>
147-
</template>
148-
149-
<template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
150-
<paper-fab icon="done" raised class="navbutton donebutton"
151-
on-tap="_goToHome" title="Complete codelab">
152-
</paper-fab>
153-
</template>
154130
</div>
155-
</div>
156-
</footer>
131+
132+
<div id="main-content">
133+
134+
<neon-animated-pages id="pages" selected="{{selected}}"
135+
on-iron-deselect="_onStepLeave"
136+
on-iron-items-changed="_onStepsChanged">
137+
<content select="google-codelab-step"></content>
138+
</neon-animated-pages>
139+
140+
<footer id="controls" hidden$="[[noArrows]]" narrow$="[[_narrow]]">
141+
<div class="fabs layout horizontal justified">
142+
<paper-fab raised class="navbutton prevbutton" icon="chevron-left"
143+
on-tap="selectPrevious"
144+
title="Previous step"
145+
disabled$="{{_isFirstStep(selected)}}">
146+
</paper-fab>
147+
148+
<div>
149+
<template is="dom-if" if="{{_showNextFab(selected, steps)}}" strip-whitespace>
150+
<paper-fab icon="chevron-right" raised class="navbutton nextbutton"
151+
title="{{_nextFabTitle(selected)}}"
152+
on-tap="selectNext">
153+
</paper-fab>
154+
</template>
155+
156+
<template is="dom-if" if="{{_showDoneFab(selected, steps)}}" strip-whitespace>
157+
<paper-fab icon="done" raised class="navbutton donebutton"
158+
on-tap="_goToHome" title="Complete codelab">
159+
</paper-fab>
160+
</template>
161+
</div>
162+
</div>
163+
</footer>
164+
</div>
165+
166+
</app-header-layout>
167+
</app-drawer-layout>
157168

158169
<paper-dialog id="resumeDialog" modal>
159170
<h2>Would you like to resume where you left off?</h2>
@@ -469,7 +480,8 @@ <h2>Would you like to resume where you left off?</h2>
469480
this.steps.slice(this.selected).forEach(function(item) {
470481
remain += (item.duration || 0);
471482
});
472-
this._setRemaining(remain + ' min remaining');
483+
var str = this._narrow ? '' : ' remaining';
484+
this._setRemaining(remain + ' min' + str);
473485
},
474486

475487
_resume: function() {
@@ -509,7 +521,7 @@ <h2>Would you like to resume where you left off?</h2>
509521
},
510522

511523
_scrollToTopOfStep: function() {
512-
this.$.headerpanel.scrollToTop();
524+
document.body.scrollTop = 0;
513525
},
514526

515527
_isPositiveNum: function(duration) {

0 commit comments

Comments
 (0)