forked from chromium/chromium
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Gallery: use fancy Files.app tooltip.
To use fancy Files.app tooltip outside of Files.app, extracted
tooltip_controller.js as files-tooltip element.
BUG=525332
TEST=browser_tests:FileManagerJsTest.FilesTooltip
manually tested; In Gallery, see new tooltips by hovering a mouse cursor on buttons.
Review URL: https://codereview.chromium.org/1382763003
Cr-Commit-Position: refs/heads/master@{#353721}- Loading branch information
yawano
authored and
Commit bot
committed
Oct 13, 2015
1 parent
249210b
commit bc1fe15
Showing
20 changed files
with
326 additions
and
256 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
ui/file_manager/file_manager/foreground/elements/files_tooltip.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!-- Copyright 2015 The Chromium Authors. All rights reserved. | ||
| -- Use of this source code is governed by a BSD-style license that can be | ||
| -- found in the LICENSE file. | ||
| --> | ||
|
|
||
| <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> | ||
|
|
||
| <dom-module id="files-tooltip"> | ||
| <style> | ||
| :host { | ||
| opacity: 0; | ||
| padding: 4px 6px 0; | ||
| pointer-events: none; | ||
| position: absolute; | ||
| transition: opacity 300ms; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| :host([visible]) { | ||
| opacity: .9; | ||
| } | ||
|
|
||
| :host > #label { | ||
| background-color: #323232; | ||
| border-radius: 2px; | ||
| color: white; | ||
| font-size: 12px; | ||
| line-height: 28px; | ||
| padding: 0 14px; | ||
| white-space: nowrap; | ||
| } | ||
| </style> | ||
| <template> | ||
| <div id="label"></div> | ||
| </template> | ||
| </dom-module> | ||
|
|
||
| <script src="files_tooltip.js"></script> |
226 changes: 226 additions & 0 deletions
226
ui/file_manager/file_manager/foreground/elements/files_tooltip.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,226 @@ | ||
| // Copyright 2015 The Chromium Authors. All rights reserved. | ||
| // Use of this source code is governed by a BSD-style license that can be | ||
| // found in the LICENSE file. | ||
|
|
||
| /** | ||
| * Files Tooltip. | ||
| * | ||
| * Adds target elements with addTarget or addTargets. Value of aria-label is | ||
| * used as a label of the tooltip. | ||
| * | ||
| * Usage: | ||
| * document.querySelector('files-tooltip').addTargets( | ||
| * document.querySelectorAll('[has-tooltip]')) | ||
| */ | ||
| var FilesTooltip = Polymer({ | ||
| is: 'files-tooltip', | ||
|
|
||
| properties: { | ||
| /** | ||
| * Delay for showing the tooltip in milliseconds. | ||
| */ | ||
| 'showTimeout': { | ||
| type: Number, | ||
| value: 500, // ms | ||
| readOnly: true | ||
| }, | ||
|
|
||
| /** | ||
| * Delay for hiding the tooltip in milliseconds. | ||
| */ | ||
| 'hideTimeout': { | ||
| type: Number, | ||
| value: 250, // ms | ||
| readOnly: true | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * Initializes member variables. | ||
| */ | ||
| created: function() { | ||
| /** | ||
| * @private {HTMLElement} | ||
| */ | ||
| this.visibleTooltipTarget_ = null; | ||
|
|
||
| /** | ||
| * @private {HTMLElement} | ||
| */ | ||
| this.upcomingTooltipTarget_ = null; | ||
|
|
||
| /** | ||
| * @private {number} | ||
| */ | ||
| this.showTooltipTimerId_ = 0; | ||
|
|
||
| /** | ||
| * @private {number} | ||
| */ | ||
| this.hideTooltipTimerId_ = 0; | ||
| }, | ||
|
|
||
| /** | ||
| * Adds an event listener to the body. | ||
| */ | ||
| attached: function() { | ||
| document.body.addEventListener( | ||
| 'mousedown', this.onDocumentMouseDown_.bind(this)); | ||
| }, | ||
|
|
||
| /** | ||
| * Adds targets to tooltip. | ||
| * @param {!NodeList} targets | ||
| */ | ||
| addTargets: function(targets) { | ||
| for (var i = 0; i < targets.length; i++) { | ||
| this.addTarget(targets[i]); | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * Adds a target to tooltip. | ||
| * @param {!HTMLElement} target | ||
| */ | ||
| addTarget: function(target) { | ||
| target.addEventListener('mouseover', this.onMouseOver_.bind(this, target)); | ||
| target.addEventListener('mouseout', this.onMouseOut_.bind(this, target)); | ||
| target.addEventListener('focus', this.onFocus_.bind(this, target)); | ||
| target.addEventListener('blur', this.onBlur_.bind(this, target)); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {!HTMLElement} target | ||
| * @private | ||
| */ | ||
| initShowingTooltip_: function(target) { | ||
| // Some tooltip is already visible. | ||
| if (this.visibleTooltipTarget_) { | ||
| if (this.hideTooltipTimerId_) { | ||
| clearTimeout(this.hideTooltipTimerId_); | ||
| this.hideTooltipTimerId_ = 0; | ||
| } | ||
| } | ||
|
|
||
| if (this.visibleTooltipTarget_ === target) | ||
| return; | ||
|
|
||
| this.upcomingTooltipTarget_ = target; | ||
| if (this.showTooltipTimerId_) | ||
| clearTimeout(this.showTooltipTimerId_); | ||
| this.showTooltipTimerId_ = setTimeout( | ||
| this.showTooltip_.bind(this, target), | ||
| this.visibleTooltipTarget_ ? 0 : this.showTimeout); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {!HTMLElement} target | ||
| * @private | ||
| */ | ||
| initHidingTooltip_: function(target) { | ||
| // The tooltip is not visible. | ||
| if (this.visibleTooltipTarget_ !== target) { | ||
| if (this.upcomingTooltipTarget_ === target) { | ||
| clearTimeout(this.showTooltipTimerId_); | ||
| this.showTooltipTimerId_ = 0; | ||
| } | ||
| return; | ||
| } | ||
|
|
||
| if (this.hideTooltipTimerId_) | ||
| clearTimeout(this.hideTooltipTimerId_); | ||
| this.hideTooltipTimerId_ = setTimeout( | ||
| this.hideTooltip_.bind(this), this.hideTimeout); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {!HTMLElement} target | ||
| * @private | ||
| */ | ||
| showTooltip_: function(target) { | ||
| if (this.showTooltipTimerId_) { | ||
| clearTimeout(this.showTooltipTimerId_); | ||
| this.showTooltipTimerId_ = 0; | ||
| } | ||
|
|
||
| this.visibleTooltipTarget_ = target; | ||
|
|
||
| var label = target.getAttribute('aria-label'); | ||
| if (!label) | ||
| return; | ||
|
|
||
| this.$.label.textContent = label; | ||
| var rect = target.getBoundingClientRect(); | ||
|
|
||
| var top = rect.top + rect.height; | ||
| if (top + this.offsetHeight > document.body.offsetHeight) | ||
| top = rect.top - this.offsetHeight; | ||
| this.style.top = `${Math.round(top)}px`; | ||
|
|
||
| var left = rect.left + rect.width / 2 - this.offsetWidth / 2; | ||
| if (left + this.offsetWidth > document.body.offsetWidth) | ||
| left = document.body.offsetWidth - this.offsetWidth; | ||
| this.style.left = `${Math.round(left)}px`; | ||
|
|
||
| this.setAttribute('visible', true); | ||
| }, | ||
|
|
||
| /** | ||
| * @private | ||
| */ | ||
| hideTooltip_: function() { | ||
| if (this.hideTooltipTimerId_) { | ||
| clearTimeout(this.hideTooltipTimerId_); | ||
| this.hideTooltipTimerId_ = 0; | ||
| } | ||
|
|
||
| this.visibleTooltipTarget_ = null; | ||
| this.removeAttribute('visible'); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| * @private | ||
| */ | ||
| onMouseOver_: function(target, event) { | ||
| this.initShowingTooltip_(target); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| * @private | ||
| */ | ||
| onMouseOut_: function(target, event) { | ||
| this.initHidingTooltip_(target); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| * @private | ||
| */ | ||
| onFocus_: function(target, event) { | ||
| this.initShowingTooltip_(target); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| * @private | ||
| */ | ||
| onBlur_: function(target, event) { | ||
| this.initHidingTooltip_(target); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {Event} event | ||
| * @private | ||
| */ | ||
| onDocumentMouseDown_: function(event) { | ||
| this.hideTooltip_(); | ||
|
|
||
| // Additionally prevent any scheduled tooltips from showing up. | ||
| if (this.showTooltipTimerId_) { | ||
| clearTimeout(this.showTooltipTimerId_); | ||
| this.showTooltipTimerId_ = 0; | ||
| } | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.