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

Side by Side Diff: third_party/polymer/v0_8/components/paper-dialog-scrollable/paper-dialog-scrollable.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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
OLDNEW
(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 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
13 <link rel="import" href="../paper-styles/paper-styles.html">
14
15 <!--
16 `paper-dialog-scrollable` implements a scrolling area used in a Material Design dialog. It shows
17 a divider at the top and/or bottom indicating more content, depending on scroll position. Use this
18 together with elements implementing `Polymer.PaperDialogBehavior`.
19
20 <paper-dialog-impl>
21 <h2>Header</h2>
22 <paper-dialog-scrollable>
23 Lorem ipsum...
24 </paper-dialog-scrollable>
25 <div class="buttons">
26 <paper-button>OK</paper-button>
27 </div>
28 </paper-dialog-impl>
29
30 It shows a top divider after scrolling if it is not the first child in its paren t container,
31 indicating there is more content above. It shows a bottom divider if it is scrol lable and it is not
32 the last child in its parent container, indicating there is more content below. The bottom divider
33 is hidden if it is scrolled to the bottom.
34
35 @group Paper Elements
36 @element paper-dialog-scrollable
37 @demo demo/index.html
38 @hero hero.svg
39 -->
40
41 <dom-module id="paper-dialog-scrollable">
42
43 <style>
44
45 :host {
46 display: block;
47 position: relative;
48 }
49
50 :host(.is-scrolled:not(:first-child))::before {
51 content: '';
52 position: absolute;
53 top: 0;
54 left: 0;
55 right: 0;
56 height: 1px;
57 background: var(--divider-color);
58 }
59
60 :host(.can-scroll:not(.scrolled-to-bottom):not(:last-child))::after {
61 content: '';
62 position: absolute;
63 bottom: 0;
64 left: 0;
65 right: 0;
66 height: 1px;
67 background: var(--divider-color);
68 }
69
70 .scrollable {
71 padding: 0 24px;
72
73 @apply(--layout-scroll);
74
75 @apply(--paper-dialog-scrollable);
76 }
77 </style>
78
79 <template>
80 <div id="scrollable" class="scrollable">
81 <content></content>
82 </div>
83 </template>
84
85 </dom-module>
86
87 <script>
88
89 (function() {
90
91 Polymer({
92
93 is: 'paper-dialog-scrollable',
94
95 properties: {
96
97 /**
98 * The dialog element that implements `Polymer.PaperDialogBehavior` contai ning this element.
99 */
100 dialogElement: {
101 type: Object,
102 value: function() {
103 return this.parentNode;
104 }
105 }
106
107 },
108
109 listeners: {
110 'scrollable.scroll': '_onScroll',
111 'iron-resize': '_onIronResize'
112 },
113
114 /**
115 * Returns the scrolling element.
116 */
117 get scrollTarget() {
118 return this.$.scrollable;
119 },
120
121 attached: function() {
122 this.classList.add('no-padding');
123 // Set itself to the overlay sizing target
124 this.dialogElement.sizingTarget = this.scrollTarget;
125 // If the host is sized, fit the scrollable area to the container. Otherwi se let it be
126 // its natural size.
127 requestAnimationFrame(function() {
128 if (this.offsetHeight > 0) {
129 this.$.scrollable.classList.add('fit');
130 }
131 this._scroll();
132 }.bind(this));
133 },
134
135 _scroll: function() {
136 this.toggleClass('is-scrolled', this.scrollTarget.scrollTop > 0);
137 this.toggleClass('can-scroll', this.scrollTarget.offsetHeight < this.scrol lTarget.scrollHeight);
138 this.toggleClass('scrolled-to-bottom',
139 this.scrollTarget.scrollTop + this.scrollTarget.offsetHeight >= this.scr ollTarget.scrollHeight);
140 },
141
142 _onScroll: function() {
143 this._scroll();
144 }
145
146 })
147
148 })();
149
150 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698