Add tooltips to check links
We cannot use the Polymer based TooltipMixin (which too complicated
anyway and we are happy getting rid of it at some point), because the
tooltip is being used in a LitElement.
So we are adding a new dependency on paper-tooltip.
Change-Id: Ifd0c88c214f38fcc5822a4f50f5aa624c34a9ec5
diff --git a/Documentation/js_licenses.txt b/Documentation/js_licenses.txt
index 7ef9473..0f3f350 100644
--- a/Documentation/js_licenses.txt
+++ b/Documentation/js_licenses.txt
@@ -371,6 +371,7 @@
* @polymer/paper-listbox
* @polymer/paper-tabs
* @polymer/paper-toggle-button
+* @polymer/paper-tooltip
[[Polymer-2015_license]]
----
diff --git a/Documentation/licenses.txt b/Documentation/licenses.txt
index 5f0fb65..5db997d 100644
--- a/Documentation/licenses.txt
+++ b/Documentation/licenses.txt
@@ -3328,6 +3328,7 @@
* @polymer/paper-listbox
* @polymer/paper-tabs
* @polymer/paper-toggle-button
+* @polymer/paper-tooltip
[[Polymer-2015_license]]
----
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index ef2430c..c0cfca6 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -24,6 +24,7 @@
query,
} from 'lit-element';
import {GrLitElement} from '../lit/gr-lit-element';
+import '@polymer/paper-tooltip/paper-tooltip';
import {
Category,
CheckRun,
@@ -229,6 +230,7 @@
}
renderLink(link: Link) {
+ const tooltipText = link.tooltip ?? 'Link to details';
return html`
<a href="${link.url}" target="_blank">
<iron-icon
@@ -236,6 +238,7 @@
class="launch"
icon="gr-icons:launch"
></iron-icon>
+ <paper-tooltip offset="5">${tooltipText}</paper-tooltip>
</a>
`;
}
diff --git a/polygerrit-ui/app/node_modules_licenses/licenses.ts b/polygerrit-ui/app/node_modules_licenses/licenses.ts
index f03c7e6..36b2eb5 100644
--- a/polygerrit-ui/app/node_modules_licenses/licenses.ts
+++ b/polygerrit-ui/app/node_modules_licenses/licenses.ts
@@ -250,6 +250,10 @@
license: SharedLicenses.Polymer2015
},
{
+ name: "@polymer/paper-tooltip",
+ license: SharedLicenses.Polymer2015
+ },
+ {
name: "@polymer/polymer",
license: SharedLicenses.Polymer2017
},
diff --git a/polygerrit-ui/app/package.json b/polygerrit-ui/app/package.json
index 5e15990..2f6aa05 100644
--- a/polygerrit-ui/app/package.json
+++ b/polygerrit-ui/app/package.json
@@ -24,6 +24,7 @@
"@polymer/paper-listbox": "^3.0.1",
"@polymer/paper-tabs": "^3.1.0",
"@polymer/paper-toggle-button": "^3.0.1",
+ "@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "^3.4.1",
"@types/resize-observer-browser": "^0.1.5",
"@webcomponents/shadycss": "^1.9.2",
diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts
index 18c12b0..a6f2912 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.ts
+++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -61,6 +61,7 @@
--green-200: #a8dab5;
--green-50: #e6f4ea;
--gray-900: #202124;
+ --gray-800: #3c4043;
--gray-700: #5f6368;
--gray-300: #dadce0;
--gray-100: #f1f3f4;
@@ -130,7 +131,7 @@
--disabled-button-background-color: #e8eaed;
--primary-button-background-color: var(--blue-700);
--selection-background-color: rgba(161, 194, 250, 0.1);
- --tooltip-background-color: #333;
+ --tooltip-background-color: var(--gray-900);
/* comment background colors */
--comment-background-color: #e8eaed;
--robot-comment-background-color: var(--blue-50);
@@ -275,6 +276,14 @@
--iron-overlay-backdrop: {
transition: none;
};
+ --paper-tooltip-duration-in: 0;
+ --paper-tooltip-duration-out: 0;
+ --paper-tooltip-background: var(--tooltip-background-color);
+ --paper-tooltip-opacity: 1.0;
+ --paper-tooltip-text-color: var(--tooltip-text-color);
+ --paper-tooltip: {
+ font-size: var(--font-size-small);
+ }
}
@media screen and (max-width: 50em) {
html {
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.ts b/polygerrit-ui/app/styles/themes/dark-theme.ts
index 5455a24..15ff62d 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.ts
+++ b/polygerrit-ui/app/styles/themes/dark-theme.ts
@@ -66,7 +66,7 @@
--reviewed-text-color: #dadce0;
--vote-text-color: black;
--status-text-color: black;
- --tooltip-text-color: white;
+ --tooltip-text-color: var(--gray-200);
--negative-red-text-color: #f28b82;
--positive-green-text-color: #81c995;
@@ -87,7 +87,7 @@
--disabled-button-background-color: #484a4d;
--primary-button-background-color: var(--link-color);
--selection-background-color: rgba(161, 194, 250, 0.1);
- --tooltip-background-color: #111;
+ --tooltip-background-color: var(--gray-800);
/* comment background colors */
--comment-background-color: #3c3f43;
--robot-comment-background-color: #1e3a5f;
diff --git a/polygerrit-ui/app/yarn.lock b/polygerrit-ui/app/yarn.lock
index ec3b7a0..f94f5ad 100644
--- a/polygerrit-ui/app/yarn.lock
+++ b/polygerrit-ui/app/yarn.lock
@@ -310,6 +310,14 @@
"@polymer/paper-styles" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
+"@polymer/paper-tooltip@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@polymer/paper-tooltip/-/paper-tooltip-3.0.1.tgz#cdbb06442737513f081437c6302842170ce714dc"
+ integrity sha512-yiUk09opTEnE1lK+tb501ENb+yQBi4p++Ep0eGJAHesVYKVMPNgPphVKkIizkDaU+n0SE+zXfTsRbYyOMDYXSg==
+ dependencies:
+ "@polymer/paper-styles" "^3.0.0-pre.26"
+ "@polymer/polymer" "^3.0.0"
+
"@polymer/polymer@^3.0.0", "@polymer/polymer@^3.0.5", "@polymer/polymer@^3.4.1":
version "3.4.1"
resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.4.1.tgz#333bef25711f8411bb5624fb3eba8212ef8bee96"
