third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html - Issue 2633633002: Polymer: Remove unused app-layout element

Side by Side Diff: third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

Issue 2633633002: Polymer: Remove unused app-layout element (Closed)

Patch Set: Fix closure Created 3 years, 11 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:

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/app-layout/app-header-layout/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 @license

3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

9 --><html><head><link rel="import" href="../../polymer/polymer.html">

10 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">

11 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.h tml">

12 <link rel="import" href="../app-scroll-effects/app-scroll-effects-behavior.html" >

13

14 <!--

15 app-header is container element for app-toolbars at the top of the screen that c an have scroll

16 effects. By default, an app-header moves away from the viewport when scrolling d own and

17 if using `reveals`, the header slides back when scrolling back up. For example:

18

19 ```html

20 <app-header reveals>

21 <app-toolbar>

22 <div title>App name</div>

23 </app-toolbar>

24 </app-header>

25 ```

26

27 app-header can also condense when scrolling down. To achieve this behavior, the header

28 must have a larger height than the `primary` element in the light DOM. For examp le:

29

30 ```html

31 <app-header style="height: 96px;" condenses fixed>

32 <app-toolbar style="height: 64px;">

33 <div title>App name</div>

34 </app-toolbar>

35 </app-header>

36 ```

37

38 In this case the header is initially `96px` tall, and it shrinks to `64px` when scrolling down.

39 That is what is meant by "condensing".

40

41 ### Primary element

42

43 As the header condenses, the immediate children of app-header are stacked up.

44 In this case, the primary element is the immediate child that would always staye d above

45 the others as the header condenses. By default, the `primary` element is the fir st app-toolbar

46 that is an immediate children of app-header.

47

48 ```html

49 <app-header condenses>

50 <app-toolbar> Primary element </app-toolbar>

51 </app-header>

52 ```

53

54 ```html

55 <app-header condenses>

56 <app-toolbar></app-toolbar>

57 <app-toolbar primary> Primary element </app-toolbar>

58 </app-header>

59 ```

60

61 The primary element must be a direct child of app-header.

62

63 ### Scroll target

64

65 The app-header's `scrollTarget` property allows to customize the scrollable elem ent to which

66 the header responds when the user scrolls. By default, app-header uses the docum ent as

67 the scroll target, but you can customize this property by setting the id of the element, e.g.

68

69 ```html

70 <div id="scrollingRegion" style="overflow-y: auto;">

71 <app-header scroll-target="scrollingRegion">

72 </app-header>

73 </div>

74 ```

75

76 In this case, the `scrollTarget` property points to the outer div element. Alter natively,

77 you can set this property programmatically:

78

79 ```js

80 appHeader.scrollTarget = document.querySelector("#scrollingRegion");

81 ```

82

83 ## Backgrounds

84 app-header has two background layers that can be used for styling when the heade r is condensed

85 or when the scrollable element is scrolled to the top.

86

87 ## Scroll effects

88

89 Scroll effects are _optional_ visual effects applied in app-header based on scro ll position. For example,

90 The [Material Design scrolling techniques](https://www.google.com/design/spec/pa tterns/scrolling-techniques.html)

91 recommends effects that can be installed via the `effects` property. e.g.

92

93 ```html

94 <app-header effects="waterfall">

95 <app-toolbar>App name</app-toolbar>

96 </app-header>

97 ```

98

99 #### Importing the effects

100

101 To use the scroll effects, you must explicitly import them in addition to `app-h eader`:

102

103 ```html

104 <link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scr oll-effects.html">

105 ```

106

107 #### List of effects

108

109 * blend-background

110 Fades in/out two background elements by applying CSS opacity based on scroll pos ition.

111 You can use this effect to smoothly change the background color or image of the header.

112 For example, using the mixin `--app-header-background-rear-layer` lets you assig n a different

113 background when the header is condensed:

114

115 ```css

116 app-header {

117 background-color: red;

118 --app-header-background-rear-layer: {

119 /* The header is blue when condensed */

120 background-color: blue;

121 };

122 }

123 ```

124

125 * fade-background

126 Upon scrolling past a threshold, this effect will trigger an opacity transition to

127 fade in/out the backgrounds. Compared to the `blend-background` effect,

128 this effect doesn't interpolate the opacity based on scroll position.

129

130

131 * parallax-background

132 A simple parallax effect that vertically translates the backgrounds based on a f raction

133 of the scroll position. For example:

134

135 ```css

136 app-header {

137 --app-header-background-front-layer: {

138 background-image: url(...);

139 };

140 }

141 ```

142 ```html

143 <app-header style="height: 300px;" effects="parallax-background">

144 <app-toolbar>App name</app-toolbar>

145 </app-header>

146 ```

147

148 The fraction determines how far the background moves relative to the scroll posi tion.

149 This value can be assigned via the `scalar` config value and it is typically a v alue

150 between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.

151

152 * resize-title

153 Progressively interpolates the size of the title from the element with the `titl e` attribute

154 to the element with the `condensed-title` attribute as the header condenses. For example:

155

156 ```html

157 <app-header condenses reveals effects="resize-title">

158 <app-toolbar>

159 <h4 condensed-title>App name</h4>

160 </app-toolbar>

161 <app-toolbar>

162 <h1 title>App name</h1>

163 </app-toolbar>

164 </app-header>

165 ```

166

167 * resize-snapped-title

168 Upon scrolling past a threshold, this effect fades in/out the titles using opaci ty transitions.

169 Similarly to `resize-title`, the `title` and `condensed-title` elements must be placed in the

170 light DOM.

171

172 * waterfall

173 Toggles the shadow property in app-header to create a sense of depth (as recomme nded in the

174 MD spec) between the header and the underneath content. You can change the shado w by

175 customizing the `--app-header-shadow` mixin. For example:

176

177 ```css

178 app-header {

179 --app-header-shadow: {

180 box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);

181 };

182 }

183 ```

184

185 ```html

186 <app-header condenses reveals effects="waterfall">

187 <app-toolbar>

188 <h1 title>App name</h1>

189 </app-toolbar>

190 </app-header>

191 ```

192

193 * material

194 Installs the waterfall, resize-title, blend-background and parallax-background e ffects.

195

196 ### Content attributes

197

198 Attribute \| Description \| Default

199 ----------\|---------------------\|----------------------------------------

200 `primary` \| Element that remains at the top when the header condenses. \| The fir st app-toolbar in the light DOM.

201

202

203 ## Styling

204

205 Mixin \| Description \| Default

206 ------\|-------------\|----------

207 `--app-header-background-front-layer` \| Applies to the front layer of the backgr ound. \| {}

208 `--app-header-background-rear-layer` \| Applies to the rear layer of the backgrou nd. \| {}

209 `--app-header-shadow` \| Applies to the shadow. \| {}

210

211 @group App Elements

212 @element app-header

213 @demo app-header/demo/blend-background-1.html Blend Background Image

214 @demo app-header/demo/blend-background-2.html Blend 2 Background Images

215 @demo app-header/demo/blend-background-3.html Blend Background Colors

216 @demo app-header/demo/contacts.html Contacts Demo

217 @demo app-header/demo/give.html Resize Snapped Title Demo

218 @demo app-header/demo/music.html Reveals Demo

219 @demo app-header/demo/no-effects.html Condenses and Reveals Demo

220 @demo app-header/demo/notes.html Fixed with Dynamic Shadow Demo

221 @demo app-header/demo/custom-primary-element.html Custom Primary Element Demo

222 -->

223

224 </head><body><dom-module id="app-header">

225 <template>

226 <style>

227 :host {

228 position: relative;

229 display: block;

230 transition-timing-function: linear;

231 transition-property: -webkit-transform;

232 transition-property: transform;

233 }

234

235 :host::after {

236 position: absolute;

237 right: 0px;

238 bottom: -5px;

239 left: 0px;

240 width: 100%;

241 height: 5px;

242 content: "";

243 transition: opacity 0.4s;

244 pointer-events: none;

245 opacity: 0;

246 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

247 will-change: opacity;

248 @apply(--app-header-shadow);

249 }

250

251 :host([shadow])::after {

252 opacity: 1;

253 }

254

255 #contentContainer > ::content [condensed-title] {

256 -webkit-transform-origin: left top;

257 transform-origin: left top;

258 white-space: nowrap;

259 opacity: 0;

260 }

261

262 #contentContainer > ::content [title] {

263 -webkit-transform-origin: left top;

264 transform-origin: left top;

265 white-space: nowrap;

266 }

267

268 #background {

269 @apply(--layout-fit);

270 overflow: hidden;

271 }

272

273 #backgroundFrontLayer,

274 #backgroundRearLayer {

275 @apply(--layout-fit);

276 height: 100%;

277 pointer-events: none;

278 background-size: cover;

279 }

280

281 #backgroundFrontLayer {

282 @apply(--app-header-background-front-layer);

283 }

284

285 #backgroundRearLayer {

286 opacity: 0;

287 @apply(--app-header-background-rear-layer);

288 }

289

290 #contentContainer {

291 position: relative;

292 width: 100%;

293 height: 100%;

294 }

295

296 :host([disabled]),

297 :host([disabled])::after,

298 :host([disabled]) #backgroundFrontLayer,

299 :host([disabled]) #backgroundRearLayer,

300 :host([disabled]) ::content > app-toolbar:first-of-type,

301 :host([disabled]) ::content > [primary],

302 /* Silent scrolling should not run CSS transitions */

303 :host-context(.app-layout-silent-scroll),

304 :host-context(.app-layout-silent-scroll)::after,

305 :host-context(.app-layout-silent-scroll) #backgroundFrontLayer,

306 :host-context(.app-layout-silent-scroll) #backgroundRearLayer,

307 :host-context(.app-layout-silent-scroll) ::content > app-toolbar:first-of- type,

308 :host-context(.app-layout-silent-scroll) ::content > [primary] {

309 transition: none !important;

310 }

311 </style>

312 <div id="contentContainer">

313 <content id="content"></content>

314 </div>

315 </template>

316

317 </dom-module>

318 <script src="app-header-extracted.js"></script></body></html>

OLD	NEW