opendev/gerrit
Code Issues Proposed changes

Introduce gr-tooltip-content element and add for draft comment

Browse Source 
This change introduces an element that can wrap a tooltip around
arbitrary contents. Previously, we could only attach a tooltip to a
Polymer element, and want more granularity than that for the purposes
of positioning.

The new tooltip element takes the following arguments:
- title (the contents of the tooltip, required)
- showIcon (optional, to show an info icon)
- maxWidth (optional, to pass a max-width to the tooltip itself).

The tooltip itself will be attached to the content inside of the
<gr-tooltip-content> wrapper.

One tooltip has been added using this new element for the 'DRAFT' text
in the gr-diff-comment'.

Bug: Issue 4539
Change-Id: Iff05c785052c643ef1f1cc01d101b21c48c6299f
This commit is contained in:
Becky Siegel
2017-03-10 16:37:17 -08:00
parent 673702bf1f
commit c9e4a34e77
9 changed files with 183 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
polygerrit-ui/app/behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js
View File

@@ -63,6 +63,7 @@
var tooltip = document.createElement('gr-tooltip');
tooltip.text = this._titleText;
tooltip.maxWidth = this.getAttribute('max-width');
// Set visibility to hidden before appending to the DOM so that
// calculations can be made based on the element’s size.

10
polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
View File

@@ -21,6 +21,8 @@ limitations under the License.
<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
<link rel="import" href="../../shared/gr-storage/gr-storage.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../../shared/gr-tooltip-content/gr-tooltip-content.html">
<dom-module id="gr-diff-comment">
<template>
@@ -183,7 +185,13 @@ limitations under the License.
<div class="header" id="header" on-click="_handleToggleCollapsed">
<div class="headerLeft">
<span class="authorName">[[comment.author.name]]</span>
<span class="draftLabel">DRAFT</span>
<gr-tooltip-content class="draftLabel"
has-tooltip
title="This draft is only visible to you. To publish drafts, click the red 'Reply' button at the top of the change or press the 'A' key."
max-width="20em"
show-icon>
DRAFT
</gr-tooltip-content>
</div>
<div class="headerMiddle">
<span class="collapsedContent">[[comment.message]]</span>

26
polygerrit-ui/app/elements/shared/gr-tooltip-content/gr-tooltip-content.html Normal file
View File

@@ -0,0 +1,26 @@
<!--
Copyright (C) 2017 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="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html">
<dom-module id="gr-tooltip-content">
<template>
<content></content>
<span class="arrow" hidden$="[[!showIcon]]">&#9432;</span>
</template>
<script src="gr-tooltip-content.js"></script>
</dom-module>

39
polygerrit-ui/app/elements/shared/gr-tooltip-content/gr-tooltip-content.js Normal file
View File

@@ -0,0 +1,39 @@
// Copyright (C) 2017 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-content',
properties: {
title: {
type: String,
reflectToAttribute: true,
},
maxWidth: {
type: String,
reflectToAttribute: true,
},
showIcon: {
type: Boolean,
value: false,
},
},
behaviors: [
Gerrit.TooltipBehavior,
],
});
})();

50
polygerrit-ui/app/elements/shared/gr-tooltip-content/gr-tooltip-content_test.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<!--
Copyright (C) 2017 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.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>gr-storage</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<link rel="import" href="gr-tooltip-content.html">
<test-fixture id="basic">
<template>
<gr-tooltip-content>
</gr-tooltip-content>
</template>
</test-fixture>
<script>
suite('gr-tooltip-content tests', function() {
var element;
setup(function() {
element = fixture('basic');
});
test('icon is not visible by default', function() {
assert.equal(Polymer.dom(element.root)
.querySelector('.arrow').hidden, true);
});
test('icon is visible with showIcon property', function() {
element.showIcon = true;
assert.equal(Polymer.dom(element.root)
.querySelector('.arrow').hidden, false);
});
});
</script>

1
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
View File

@@ -30,6 +30,7 @@ limitations under the License.
padding: .5em .85em;
position: absolute;
z-index: 1000;
max-width: var(--tooltip-max-width);
}
.arrow {
border-left: var(--gr-tooltip-arrow-size) solid transparent;

9
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.js
View File

@@ -19,6 +19,15 @@
properties: {
text: String,
maxWidth: {
type: String,
observer: '_updateWidth',
},
},
_updateWidth: function(maxWidth) {
this.customStyle['--tooltip-max-width'] = maxWidth;
this.updateStyles();
},
});
})();

46
polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip_test.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<!--
Copyright (C) 2017 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.
-->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>gr-storage</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<script src="../../../bower_components/web-component-tester/browser.js"></script>
<link rel="import" href="gr-tooltip.html">
<test-fixture id="basic">
<template>
<gr-tooltip>
</gr-tooltip>
</template>
</test-fixture>
<script>
suite('gr-tooltip tests', function() {
var element;
setup(function() {
element = fixture('basic');
});
test('max-width is respected if set', function() {
element.text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit' +
', sed do eiusmod tempor incididunt ut labore et dolore magna aliqua';
element.maxWidth = '50px';
assert.equal(getComputedStyle(element).width, '50px');
});
});
</script>

2
polygerrit-ui/app/test/index.html
View File

@@ -103,6 +103,8 @@ limitations under the License.
'shared/gr-rest-api-interface/gr-reviewer-updates-parser_test.html',
'shared/gr-select/gr-select_test.html',
'shared/gr-storage/gr-storage_test.html',
'shared/gr-tooltip/gr-tooltip_test.html',
'shared/gr-tooltip-content/gr-tooltip-content_test.html',
].forEach(function(file) {
file = elementsPath + file;
testFiles.push(file);