Add gr-tooltip-behavior and gr-tooltip element
What it looks like: http://imgur.com/U37fSkk Will only trigger if the element has a title value and also has its hasTooltip property set. Add titles to the label buttons and turn tooltips on for those. Bug: Issue 3901 Change-Id: Id02f79bcf218419ab92d8100477ced093623f4d2
This commit is contained in:
parent
21ea71953f
commit
8914cb0153
@ -0,0 +1,18 @@
|
|||||||
|
<!--
|
||||||
|
Copyright (C) 2016 The Android Open Source Project
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
-->
|
||||||
|
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||||
|
<link rel="import" href="../../elements/shared/gr-tooltip/gr-tooltip.html">
|
||||||
|
<script src="gr-tooltip-behavior.js"></script>
|
@ -0,0 +1,110 @@
|
|||||||
|
// Copyright (C) 2016 The Android Open Source Project
|
||||||
|
//
|
||||||
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
// you may not use this file except in compliance with the License.
|
||||||
|
// You may obtain a copy of the License at
|
||||||
|
//
|
||||||
|
// http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
//
|
||||||
|
// Unless required by applicable law or agreed to in writing, software
|
||||||
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
// See the License for the specific language governing permissions and
|
||||||
|
// limitations under the License.
|
||||||
|
(function(window) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var BOTTOM_OFFSET = 10;
|
||||||
|
|
||||||
|
var TooltipBehavior = {
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
hasTooltip: Boolean,
|
||||||
|
|
||||||
|
_tooltip: Element,
|
||||||
|
_titleText: String,
|
||||||
|
},
|
||||||
|
|
||||||
|
attached: function() {
|
||||||
|
if (!this.hasTooltip) { return; }
|
||||||
|
|
||||||
|
this.addEventListener('mouseover', this._handleShowTooltip.bind(this));
|
||||||
|
this.addEventListener('mouseout', this._handleHideTooltip.bind(this));
|
||||||
|
this.addEventListener('focusin', this._handleShowTooltip.bind(this));
|
||||||
|
this.addEventListener('focusout', this._handleHideTooltip.bind(this));
|
||||||
|
this.listen(window, 'scroll', '_handleWindowScroll');
|
||||||
|
},
|
||||||
|
|
||||||
|
detached: function() {
|
||||||
|
this.unlisten(window, 'scroll', '_handleWindowScroll');
|
||||||
|
},
|
||||||
|
|
||||||
|
_handleShowTooltip: function(e) {
|
||||||
|
if (!this.hasAttribute('title') || this._tooltip) { return; }
|
||||||
|
|
||||||
|
// Store the title attribute text then set it to an empty string to
|
||||||
|
// prevent it from showing natively.
|
||||||
|
this._titleText = this.getAttribute('title');
|
||||||
|
this.setAttribute('title', '');
|
||||||
|
|
||||||
|
var tooltip = document.createElement('gr-tooltip');
|
||||||
|
tooltip.text = this._titleText;
|
||||||
|
|
||||||
|
// Set visibility to hidden before appending to the DOM so that
|
||||||
|
// calculations can be made based on the element’s size.
|
||||||
|
tooltip.style.visibility = 'hidden';
|
||||||
|
Polymer.dom(document.body).appendChild(tooltip);
|
||||||
|
this._positionTooltip(tooltip);
|
||||||
|
tooltip.style.visibility = null;
|
||||||
|
|
||||||
|
this._tooltip = tooltip;
|
||||||
|
},
|
||||||
|
|
||||||
|
_handleHideTooltip: function(e) {
|
||||||
|
if (!this.hasAttribute('title') ||
|
||||||
|
!this._titleText ||
|
||||||
|
this === document.activeElement) { return; }
|
||||||
|
|
||||||
|
this.setAttribute('title', this._titleText);
|
||||||
|
if (this._tooltip && this._tooltip.parentNode) {
|
||||||
|
this._tooltip.parentNode.removeChild(this._tooltip);
|
||||||
|
}
|
||||||
|
this._tooltip = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
_handleWindowScroll: function(e) {
|
||||||
|
if (!this._tooltip) { return; }
|
||||||
|
|
||||||
|
this._positionTooltip(this._tooltip);
|
||||||
|
},
|
||||||
|
|
||||||
|
_positionTooltip: function(tooltip) {
|
||||||
|
var offset = this._getOffset(this);
|
||||||
|
var top = offset.top;
|
||||||
|
var left = offset.left;
|
||||||
|
|
||||||
|
top -= this.offsetHeight + BOTTOM_OFFSET;
|
||||||
|
left -= (tooltip.offsetWidth / 2) - (this.offsetWidth / 2);
|
||||||
|
left = Math.max(0, left);
|
||||||
|
top = Math.max(0, top);
|
||||||
|
|
||||||
|
tooltip.style.left = left + 'px';
|
||||||
|
tooltip.style.top = top + 'px';
|
||||||
|
},
|
||||||
|
|
||||||
|
_getOffset: function(el) {
|
||||||
|
var top = 0;
|
||||||
|
var left = 0;
|
||||||
|
for (var node = el; node; node = node.offsetParent) {
|
||||||
|
if (node.offsetTop) { top += node.offsetTop; }
|
||||||
|
if (node.offsetLeft) { left += node.offsetLeft; }
|
||||||
|
}
|
||||||
|
top += window.scrollY;
|
||||||
|
left += window.scrollX;
|
||||||
|
return {top: top, left: left};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
window.Gerrit = window.Gerrit || {};
|
||||||
|
window.Gerrit.TooltipBehavior = TooltipBehavior;
|
||||||
|
})(window);
|
@ -125,7 +125,8 @@ limitations under the License.
|
|||||||
<template is="dom-repeat"
|
<template is="dom-repeat"
|
||||||
items="[[_computePermittedLabelValues(permittedLabels, label)]]"
|
items="[[_computePermittedLabelValues(permittedLabels, label)]]"
|
||||||
as="value">
|
as="value">
|
||||||
<gr-button data-value$="[[value]]">[[value]]</gr-button>
|
<gr-button has-tooltip data-value$="[[value]]"
|
||||||
|
title$="[[_computeLabelValueTitle(labels, label, value)]]">[[value]]</gr-button>
|
||||||
</template>
|
</template>
|
||||||
</iron-selector>
|
</iron-selector>
|
||||||
</div>
|
</div>
|
||||||
|
@ -89,6 +89,10 @@
|
|||||||
if (total > 1) { return total + ' Drafts'; }
|
if (total > 1) { return total + ' Drafts'; }
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_computeLabelValueTitle: function(labels, label, value) {
|
||||||
|
return labels[label].values[value];
|
||||||
|
},
|
||||||
|
|
||||||
_computeLabelArray: function(labelsObj) {
|
_computeLabelArray: function(labelsObj) {
|
||||||
return Object.keys(labelsObj).sort();
|
return Object.keys(labelsObj).sort();
|
||||||
},
|
},
|
||||||
|
@ -15,6 +15,7 @@ limitations under the License.
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||||
|
<link rel="import" href="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html">
|
||||||
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior.html">
|
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior.html">
|
||||||
|
|
||||||
<dom-module id="gr-button">
|
<dom-module id="gr-button">
|
||||||
|
@ -31,6 +31,7 @@
|
|||||||
|
|
||||||
behaviors: [
|
behaviors: [
|
||||||
Gerrit.KeyboardShortcutBehavior,
|
Gerrit.KeyboardShortcutBehavior,
|
||||||
|
Gerrit.TooltipBehavior,
|
||||||
],
|
],
|
||||||
|
|
||||||
hostAttributes: {
|
hostAttributes: {
|
||||||
|
49
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
Normal file
49
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
Copyright (C) 2016 The Android Open Source Project
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||||
|
|
||||||
|
<dom-module id="gr-tooltip">
|
||||||
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
--gr-tooltip-arrow-size: .6em;
|
||||||
|
|
||||||
|
background-color: #333;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||||
|
color: #fff;
|
||||||
|
font-size: .75rem;
|
||||||
|
padding: .5em .85em;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.arrow {
|
||||||
|
border-left: var(--gr-tooltip-arrow-size) solid transparent;
|
||||||
|
border-right: var(--gr-tooltip-arrow-size) solid transparent;
|
||||||
|
border-top: var(--gr-tooltip-arrow-size) solid #333;
|
||||||
|
bottom: -var(--gr-tooltip-arrow-size);
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - var(--gr-tooltip-arrow-size));
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
[[text]]
|
||||||
|
<i class="arrow"></i>
|
||||||
|
</template>
|
||||||
|
<script src="gr-tooltip.js"></script>
|
||||||
|
</dom-module>
|
||||||
|
|
24
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js
Normal file
24
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
// Copyright (C) 2016 The Android Open Source Project
|
||||||
|
//
|
||||||
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
// you may not use this file except in compliance with the License.
|
||||||
|
// You may obtain a copy of the License at
|
||||||
|
//
|
||||||
|
// http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
//
|
||||||
|
// Unless required by applicable law or agreed to in writing, software
|
||||||
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
// See the License for the specific language governing permissions and
|
||||||
|
// limitations under the License.
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Polymer({
|
||||||
|
is: 'gr-tooltip',
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
text: String,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})();
|
Loading…
Reference in New Issue
Block a user