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

Side by Side Diff: ui/login/bubble.js

Issue 2467783002: ChromeOS: update alignment of user POD error bubble. (Closed)
Patch Set: Update after review Created 4 years, 1 month 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
1 // Copyright 2014 The Chromium Authors. All rights reserved. 1 // Copyright 2014 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @fileoverview Bubble implementation. 6 * @fileoverview Bubble implementation.
7 */ 7 */
8 8
9 // TODO(xiyuan): Move this into shared. 9 // TODO(xiyuan): Move this into shared.
10 cr.define('cr.ui', function() { 10 cr.define('cr.ui', function() {
(...skipping 129 matching lines...) Expand 10 before | Expand all | Expand 10 after
140 * If not specified, bubble element content is shown. 140 * If not specified, bubble element content is shown.
141 * @private 141 * @private
142 */ 142 */
143 showContentAt_: function(pos, opt_content) { 143 showContentAt_: function(pos, opt_content) {
144 this.style.top = this.style.left = this.style.right = this.style.bottom = 144 this.style.top = this.style.left = this.style.right = this.style.bottom =
145 'auto'; 145 'auto';
146 for (var k in pos) { 146 for (var k in pos) {
147 if (typeof pos[k] == 'number') 147 if (typeof pos[k] == 'number')
148 this.style[k] = pos[k] + 'px'; 148 this.style[k] = pos[k] + 'px';
149 } 149 }
150 if (opt_content !== undefined) { 150 if (opt_content !== undefined)
151 this.innerHTML = ''; 151 this.replaceContent(opt_content);
152 this.appendChild(opt_content); 152
153 }
154 this.hidden = false; 153 this.hidden = false;
155 this.classList.remove('faded'); 154 this.classList.remove('faded');
156 }, 155 },
157 156
158 /** 157 /**
158 * Replaces error message content with the given DOM element.
159 * @param {HTMLElement} content Content to show in bubble.
160 */
161 replaceContent: function(content) {
162 this.innerHTML = '';
163 this.appendChild(content);
164 },
165
166 /**
159 * Shows the bubble for given anchor element. Bubble content is not cleared. 167 * Shows the bubble for given anchor element. Bubble content is not cleared.
160 * @param {!HTMLElement} el Anchor element of the bubble. 168 * @param {!HTMLElement} el Anchor element of the bubble.
161 * @param {!Attachment} attachment Bubble attachment (on which side of the 169 * @param {!Attachment} attachment Bubble attachment (on which side of the
162 * element it should be displayed). 170 * element it should be displayed).
163 * @param {number=} opt_offset Offset of the bubble. 171 * @param {number=} opt_offset Offset of the bubble.
164 * @param {number=} opt_padding Optional padding of the bubble. 172 * @param {number=} opt_padding Optional padding of the bubble.
165 */ 173 */
166 showForElement: function(el, attachment, opt_offset, opt_padding) { 174 showForElement: function(el, attachment, opt_offset, opt_padding) {
167 this.showContentForElement( 175 this.showContentForElement(
168 el, attachment, undefined, opt_offset, opt_padding); 176 el, attachment, undefined, opt_offset, opt_padding);
169 }, 177 },
170 178
171 /** 179 /**
172 * Shows the bubble for given anchor element. 180 * Shows the bubble for given anchor element.
173 * @param {!HTMLElement} el Anchor element of the bubble. 181 * @param {!HTMLElement} el Anchor element of the bubble.
174 * @param {!Attachment} attachment Bubble attachment (on which side of the 182 * @param {!Attachment} attachment Bubble attachment (on which side of the
175 * element it should be displayed). 183 * element it should be displayed).
176 * @param {HTMLElement} opt_content Content to show in bubble. 184 * @param {HTMLElement} opt_content Content to show in bubble.
177 * If not specified, bubble element content is shown. 185 * If not specified, bubble element content is shown.
178 * @param {number=} opt_offset Offset of the bubble attachment point from 186 * @param {number=} opt_offset Offset of the bubble attachment point from
179 * left (for vertical attachment) or top (for horizontal attachment) 187 * left (for vertical attachment) or top (for horizontal attachment)
180 * side of the element. If not specified, the bubble is positioned to 188 * side of the element. If not specified, the bubble is positioned to
181 * be aligned with the left/top side of the element but not farther than 189 * be aligned with the left/top side of the element but not farther than
182 * half of its width/height. 190 * half of its width/height.
183 * @param {number=} opt_padding Optional padding of the bubble. 191 * @param {number=} opt_padding Optional padding of the bubble.
184 */ 192 */
185 showContentForElement: function(el, attachment, opt_content, 193 showContentForElement: function(el, attachment, opt_content,
186 opt_offset, opt_padding) { 194 opt_offset, opt_padding, opt_match_width) {
jdufault 2016/11/03 23:37:04 Update doc
Alexander Alekseev 2016/11/04 00:47:05 Done.
187 /** @const */ var ARROW_OFFSET = 25; 195 /** @const */ var ARROW_OFFSET = 25;
188 /** @const */ var DEFAULT_PADDING = 18; 196 /** @const */ var DEFAULT_PADDING = 18;
189 197
190 if (opt_padding == undefined) 198 if (opt_padding == undefined)
191 opt_padding = DEFAULT_PADDING; 199 opt_padding = DEFAULT_PADDING;
192 opt_padding += 10; 200 opt_padding += 10;
193 201
194 var origin = cr.ui.login.DisplayManager.getPosition(el); 202 var origin = cr.ui.login.DisplayManager.getPosition(el);
195 var offset = opt_offset == undefined ? 203 var offset = opt_offset == undefined ?
196 [Math.min(ARROW_OFFSET, el.offsetWidth / 2), 204 [Math.min(ARROW_OFFSET, el.offsetWidth / 2),
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
230 case Bubble.Attachment.BOTTOM: 238 case Bubble.Attachment.BOTTOM:
231 pos.left = origin.left + offset[0] - ARROW_OFFSET; 239 pos.left = origin.left + offset[0] - ARROW_OFFSET;
232 pos.top = origin.top + el.offsetHeight + opt_padding; 240 pos.top = origin.top + el.offsetHeight + opt_padding;
233 break; 241 break;
234 case Bubble.Attachment.LEFT: 242 case Bubble.Attachment.LEFT:
235 pos.top = origin.top + offset[1] - ARROW_OFFSET; 243 pos.top = origin.top + offset[1] - ARROW_OFFSET;
236 pos.right = origin.right + el.offsetWidth + opt_padding; 244 pos.right = origin.right + el.offsetWidth + opt_padding;
237 break; 245 break;
238 } 246 }
239 } 247 }
248 this.style.width = '';
249 this.removeAttribute('match-width');
250 if (opt_match_width) {
251 this.setAttribute('match-width', '');
252 var elWidth =
253 window.getComputedStyle(el, null).getPropertyValue('width');
254 var paddingLeft = parseInt(window.getComputedStyle(this, null)
255 .getPropertyValue('padding-left'));
256 var paddingRight = parseInt(window.getComputedStyle(this, null)
257 .getPropertyValue('padding-right'));
258 if (elWidth)
259 this.style.width =
260 (parseInt(elWidth) - paddingLeft - paddingRight) + 'px';
261 }
240 262
241 this.anchor_ = el; 263 this.anchor_ = el;
242 this.showContentAt_(pos, opt_content); 264 this.showContentAt_(pos, opt_content);
243 }, 265 },
244 266
245 /** 267 /**
246 * Shows the bubble for given anchor element. 268 * Shows the bubble for given anchor element.
247 * @param {!HTMLElement} el Anchor element of the bubble. 269 * @param {!HTMLElement} el Anchor element of the bubble.
248 * @param {string} text Text content to show in bubble. 270 * @param {string} text Text content to show in bubble.
249 * @param {!Attachment} attachment Bubble attachment (on which side of the 271 * @param {!Attachment} attachment Bubble attachment (on which side of the
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after
352 handleWindowBlur_: function(e) { 374 handleWindowBlur_: function(e) {
353 if (!this.hidden) 375 if (!this.hidden)
354 this.hide(); 376 this.hide();
355 } 377 }
356 }; 378 };
357 379
358 return { 380 return {
359 Bubble: Bubble 381 Bubble: Bubble
360 }; 382 };
361 }); 383 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698