Show review score explanation in change details Gr-tooltip is used for displaying the score explanation. In order to have gr-tooltip being applied, gr-label component was introduced as a <span> tag replacement. Gr-tooltip bug fixes: - Tooltip arrow now moves sideways if toolip was shown close to left window side. - Tooltip positioning was broken anywhere bug in fixed container's child. - Positioning math updated to use standart getBoundingClientRect instead of DOM traversal. Feature: Issue 4101 Change-Id: If62ecff33535b910b311c984993e402c6dc36be7
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html index 19f9e85..a0a9305 100644 --- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html +++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
@@ -17,6 +17,7 @@ <link rel="import" href="../../../bower_components/polymer/polymer.html"> <link rel="import" href="../../../behaviors/rest-client-behavior.html"> <link rel="import" href="../../shared/gr-account-link/gr-account-link.html"> +<link rel="import" href="../../shared/gr-label/gr-label.html"> <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html"> <link rel="import" href="../../shared/gr-editable-label/gr-editable-label.html"> <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html"> @@ -141,7 +142,12 @@ as="label"> <div class="labelValueContainer"> <span class$="[[label.className]]"> - <span class="labelValue">[[label.value]]</span> + <gr-label + has-tooltip + title="[[_computeValueTooltip(label.value, labelName)]]" + class="labelValue"> + [[label.value]] + </gr-label> <gr-account-link account="[[label.account]]"></gr-account-link> </span> </div>
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js index 379487d..e24cc4a 100644 --- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js +++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js
@@ -117,6 +117,11 @@ return result; }, + _computeValueTooltip: function(score, labelName) { + var values = this.change.labels[labelName].values; + return values[score]; + }, + _handleTopicChanged: function(e, topic) { if (!topic.length) { topic = null; } this.$.restAPI.setChangeTopic(this.change.id, topic);
diff --git a/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-interface_test.html b/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-interface_test.html index 5936bee..c12d653 100644 --- a/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-interface_test.html +++ b/polygerrit-ui/app/elements/shared/gr-js-api-interface/gr-js-api-interface_test.html
@@ -42,7 +42,7 @@ getAccount: function() { return Promise.resolve({name: 'Judy Hopps'}); }, - }) + }); element = fixture('basic'); errorStub = sinon.stub(console, 'error'); Gerrit.install(function(p) { plugin = p; }, '0.1',
diff --git a/polygerrit-ui/app/elements/shared/gr-label/gr-label.html b/polygerrit-ui/app/elements/shared/gr-label/gr-label.html new file mode 100644 index 0000000..04b12e7 --- /dev/null +++ b/polygerrit-ui/app/elements/shared/gr-label/gr-label.html
@@ -0,0 +1,23 @@ +<!-- +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="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html"> +<dom-module id="gr-label"> + <template strip-whitespace> + <content></content> + </template> + <script src="gr-label.js"></script> +</dom-module>
diff --git a/polygerrit-ui/app/elements/shared/gr-label/gr-label.js b/polygerrit-ui/app/elements/shared/gr-label/gr-label.js new file mode 100644 index 0000000..37e1f77 --- /dev/null +++ b/polygerrit-ui/app/elements/shared/gr-label/gr-label.js
@@ -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-label', + + behaviors: [ + Gerrit.TooltipBehavior, + ], + }); +})();
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html index 64ef9b2..57a7272 100644 --- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html +++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -20,7 +20,8 @@ <template> <style> :host { - --gr-tooltip-arrow-size: .6em; + --gr-tooltip-arrow-size: .5em; + --gr-tooltip-arrow-center-offset: 0; background-color: #333; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); @@ -38,6 +39,7 @@ height: 0; position: absolute; left: calc(50% - var(--gr-tooltip-arrow-size)); + margin-left: var(--gr-tooltip-arrow-center-offset); width: 0; } </style> @@ -46,4 +48,3 @@ </template> <script src="gr-tooltip.js"></script> </dom-module> -