third_party/polymer/v0_8/components-chromium/paper-toolbar/paper-toolbar.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Side by Side Diff: third_party/polymer/v0_8/components-chromium/paper-toolbar/paper-toolbar.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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-toolbar/index.html ('k') | third_party/polymer/v0_8/components-chromium/paper-toolbar/paper-toolbar-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

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

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

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

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

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

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

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

	9 <link rel="import" href="../paper-styles/paper-styles.html">

	10

	11 <!--

9 `paper-toolbar` is a horizontal bar containing items that can be used for	12 `paper-toolbar` is a horizontal bar containing items that can be used for

10 label, navigation, search and actions. The items place inside the	13 label, navigation, search and actions. The items place inside the

11 `paper-toolbar` are projected into a `class="horizontal center layout"` containe r inside of	14 `paper-toolbar` are projected into a `class="horizontal center layout"` containe r inside of

12 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'	15 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'

13 sizing.	16 sizing.

14	17

15 Example:	18 Example:

16	19

17 <paper-toolbar>	20 <paper-toolbar>

18 <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button >	21 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>

19 <div flex>Title</div>	22 <div title>Title</div>

20 <paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button >	23 <paper-icon-button icon="more" on-tap="moreAction"></paper-icon-button>

21 </paper-toolbar>	24 </paper-toolbar>

22	25

23 `paper-toolbar` has a standard height, but can made be taller by setting `tall`	26 `paper-toolbar` has a standard height, but can made be taller by setting `tall`

24 class on the `paper-toolbar`. This will make the toolbar 3x the normal height.	27 class on the `paper-toolbar`. This will make the toolbar 3x the normal height.

25	28

26 <paper-toolbar class="tall">	29 <paper-toolbar class="tall">

27 <paper-icon-button icon="menu"></paper-icon-button>	30 <paper-icon-button icon="menu"></paper-icon-button>

28 </paper-toolbar>	31 </paper-toolbar>

29	32

30 Apply `medium-tall` class to make the toolbar medium tall. This will make the	33 Apply `medium-tall` class to make the toolbar medium tall. This will make the

31 toolbar 2x the normal height.	34 toolbar 2x the normal height.

32	35

33 <paper-toolbar class="medium-tall">	36 <paper-toolbar class="medium-tall">

34 <paper-icon-button icon="menu"></paper-icon-button>	37 <paper-icon-button icon="menu"></paper-icon-button>

35 </paper-toolbar>	38 </paper-toolbar>

36	39

37 When `tall`, items can pin to either the top (default), middle or bottom. Use	40 When `tall`, items can pin to either the top (default), middle or bottom. Use

38 `middle` class for middle content and `bottom` class for bottom content.	41 `middle` class for middle content and `bottom` class for bottom content.

39	42

40 <paper-toolbar class="tall">	43 <paper-toolbar class="tall">

41 <paper-icon-button icon="menu"></paper-icon-button>	44 <paper-icon-button icon="menu"></paper-icon-button>

42 <div class="middle">Middle Title</div>	45 <div title class="middle">Middle Title</div>

43 <div class="bottom">Bottom Title</div>	46 <div title class="bottom">Bottom Title</div>

44 </paper-toolbar>	47 </paper-toolbar>

45	48

46 For `medium-tall` toolbar, the middle and bottom contents overlap and are	49 For `medium-tall` toolbar, the middle and bottom contents overlap and are

47 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are	50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are

48 still honored separately.	51 still honored separately.

49	52

50 @group Polymer Core Elements	53 ### Styling

51 @element paper-toolbar

52 @homepage github.io

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

54 <link rel="import" href="../paper-styles/paper-styles.html">

55	54

56 <style is="x-style">	55 The following custom properties and mixins are available for styling:

57	56

58 * {	57 Custom property \| Description \| Default

	58 ----------------\|-------------\|----------

	59 `--paper-toolbar-background` \| Toolbar background color \| `--default-primary -color`

	60 `--paper-toolbar-color` \| Toolbar foreground color \| `--text-primary-co lor`

	61 `--paper-toolbar` \| Mixin applied to the toolbar \| `{}`

59	62

60 --paper-toolbar-background: var(--default-primary-color);	63 ### Accessibility

61 --paper-toolbar-color: var(--text-primary-color);	64

62 }	65 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the `title` attribute will

63 </style>	66 be used as the label of the toolbar via `aria-labelledby`.

	67

	68 @demo demo/index.html

	69 -->

64	70

65 </head><body><dom-module id="paper-toolbar">	71 </head><body><dom-module id="paper-toolbar">

66	72

67 <style>	73 <style>

68 :host {	74 :host {

69 /* technical */	75 /* technical */

70 display: block;	76 display: block;

71 position: relative;	77 position: relative;

72 box-sizing: border-box;	78 box-sizing: border-box;

73 -moz-box-sizing: border-box;	79 -moz-box-sizing: border-box;

74	80

75 /* size */	81 /* size */

76 height: 64px;	82 height: 64px;

77	83

78 background: var(--paper-toolbar-background);	84 background: var(--paper-toolbar-background, --default-primary-color);

79 color: var(--paper-toolbar-color);	85 color: var(--paper-toolbar-color, --text-primary-color);

80 mixin(--paper-font-title);

81	86

82 mixin(--paper-toolbar);	87 @apply(--paper-toolbar);

83 }	88 }

84	89

85 :host(.animate) {	90 :host(.animate) {

86 /* transition */	91 /* transition */

87 transition: height 0.18s ease-in;	92 transition: height 0.18s ease-in;

88 }	93 }

89	94

90 :host(.medium-tall) {	95 :host(.medium-tall) {

91 height: 128px;	96 height: 128px;

92 }	97 }

(...skipping 21 matching lines...) Expand all Loading...
114 :host(.medium-tall) {	119 :host(.medium-tall) {

115 height: 112px;	120 height: 112px;

116 }	121 }

117	122

118 :host(.tall) {	123 :host(.tall) {

119 height: 168px;	124 height: 168px;

120 }	125 }

121	126

122 .toolbar-tools {	127 .toolbar-tools {

123 height: 56px;	128 height: 56px;

124 padding: 0;

125 }	129 }

126 }	130 }

127	131

	132 #topBar {

	133 position: relative;

	134 z-index: 1;

	135 }

	136

128 /* middle bar */	137 /* middle bar */

129 #middleBar {	138 #middleBar {

130 position: absolute;	139 position: absolute;

131 top: 0;	140 top: 0;

132 right: 0;	141 right: 0;

133 left: 0;	142 left: 0;

	143 z-index: 2;

134 }	144 }

135	145

136 :host(.tall) #middleBar,	146 :host(.tall) #middleBar,

137 :host(.medium-tall) #middleBar {	147 :host(.medium-tall) #middleBar {

138 -webkit-transform: translateY(100%);	148 -webkit-transform: translateY(100%);

139 transform: translateY(100%);	149 transform: translateY(100%);

140 }	150 }

141	151

142 /* bottom bar */	152 /* bottom bar */

143 #bottomBar {	153 #bottomBar {

144 position: absolute;	154 position: absolute;

145 right: 0;	155 right: 0;

146 bottom: 0;	156 bottom: 0;

147 left: 0;	157 left: 0;

	158 z-index: 1;

148 }	159 }

149	160

150 /*	161 /*

151 * make elements (e.g. buttons) respond to mouse/touch events	162 * make elements (e.g. buttons) respond to mouse/touch events

152 *	163 *

153 * `.toolbar-tools` disables touch events so multiple toolbars can stack and not	164 * `.toolbar-tools` disables touch events so multiple toolbars can stack and not

154 * absorb events. All children must have pointer events re-enabled to work a s	165 * absorb events. All children must have pointer events re-enabled to work a s

155 * expected.	166 * expected.

156 */	167 */

157 .toolbar-tools > ::content > *:not([disabled]) {	168 .toolbar-tools > ::content > *:not([disabled]) {

158 pointer-events: auto;	169 pointer-events: auto;

159 }	170 }

160	171

	172 .toolbar-tools > ::content [title] {

	173 @apply(--paper-font-title);

	174 @apply(--layout-flex);

	175

	176 text-overflow: ellipsis;

	177 white-space: nowrap;

	178 overflow: hidden;

	179

	180 /*

	181 * Polymer/polymer/issues/1525

	182 * --paper-font-title defines a `font-weight`

	183 * let's override its value, but we need `important!`

	184 * because all mixins are resolved in rule's selector that has higher prec edence

	185 * than the current selector.

	186 */

	187 font-weight: 400 !important;

	188 }

	189

	190 /**

	191 * TODO: Refactor these selectors

	192 * Work in progress.

	193 */

	194 .toolbar-tools > ::content paper-icon-button[icon=menu] {

	195 margin-left: -8px;

	196 margin-right: 24px;

	197 }

	198

	199 .toolbar-tools > ::content paper-icon-button + paper-icon-button {

	200 margin-right: -8px;

	201 }

	202

	203 .toolbar-tools > ::content > [title],

	204 .toolbar-tools > ::content[select=".middle"] > [title],

	205 .toolbar-tools > ::content[select=".bottom"] > [title] {

	206 margin-left: 56px;

	207 }

	208

	209 .toolbar-tools > ::content > paper-icon-button + [title],

	210 .toolbar-tools > ::content[select=".middle"] paper-icon-button + [title],

	211 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + [title] {

	212 margin-left: 0;

	213 }

161 </style>	214 </style>

162	215

163 <template>	216 <template>

164	217

165 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">	218 <div id="topBar" class$="[[_computeBarClassName(justify)]]">

166 <content select=".bottom"></content>	219 <content select=":not(.middle):not(.bottom)"></content>

167 </div>	220 </div>

168	221

169 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">	222 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">

170 <content select=".middle"></content>	223 <content select=".middle"></content>

171 </div>	224 </div>

172	225

173 <div id="topBar" class$="[[_computeBarClassName(justify)]]">	226 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">

174 <content></content>	227 <content select=".bottom"></content>

175 </div>	228 </div>

176	229

177 </template>	230 </template>

178	231

179 </dom-module>	232 </dom-module>

180	233

181 <script src="paper-toolbar-extracted.js"></script></body></html>	234 <script src="paper-toolbar-extracted.js"></script></body></html>

OLD	NEW