Fix overlapped tooltip
Diable tooltip on status text, and show status within
the same tooltip as name and email, also change the
limit on status to be dynamically computed with
a max of 35 together wth name
Bug: Issue 11141
Bug: Issue 11140
Change-Id: I61a81a5a90135256b98d5b8c6bc4f85561647dc2
diff --git a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.html b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.html
index fb760d5..9d0782f 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.html
@@ -64,7 +64,11 @@
[[_computeEmailStr(account)]]
</span>
<template is="dom-if" if="[[account.status]]">
- (<gr-limited-text limit="10" text="[[account.status]]"></gr-limited-text>)
+ (<gr-limited-text
+ disable-tooltip="true"
+ limit="[[_computeStatusTextLength(account, _serverConfig)]]"
+ text="[[account.status]]">
+ </gr-limited-text>)
</template>
</span>
</span>
diff --git a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.js b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.js
index 0f914fb..88df33b 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.js
+++ b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label.js
@@ -66,6 +66,11 @@
return this.getUserName(config, account, false);
},
+ _computeStatusTextLength(account, config) {
+ // 35 as the max length of the name + status
+ return Math.max(10, 35 - this._computeName(account, config).length);
+ },
+
_computeAccountTitle(account, tooltip) {
// Polymer 2: check for undefined
if ([
@@ -81,11 +86,18 @@
result += this._computeName(account, this._serverConfig);
}
if (account.email) {
- result += ' <' + account.email + '>';
+ result += ` <${account.email}>`;
}
if (this.additionalText) {
- return result + ' ' + this.additionalText;
+ result += ` ${this.additionalText}`;
}
+
+ // Show status in the label tooltip instead of
+ // in a separate tooltip on status
+ if (account.status) {
+ result += ` (${account.status})`;
+ }
+
return result;
},
diff --git a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_test.html b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_test.html
index 513b67a..740dfcf 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_test.html
@@ -139,5 +139,44 @@
'TestAnon');
});
});
+
+ suite('status in tooltip', () => {
+ setup(() => {
+ element = fixture('basic');
+ element.account = {
+ name: 'test',
+ email: 'test@google.com',
+ status: 'OOO until Aug 10th',
+ };
+ element._config = {
+ user: {
+ anonymous_coward_name: 'Anonymous Coward',
+ },
+ };
+ });
+
+ test('tooltip should contain status text', () => {
+ assert.deepEqual(element.title,
+ 'test <test@google.com> (OOO until Aug 10th)');
+ });
+
+ test('status text should not have tooltip', () => {
+ flushAsynchronousOperations();
+ assert.deepEqual(element.$$('gr-limited-text').title, '');
+ });
+
+ test('status text should honor the name length and total length', () => {
+ assert.deepEqual(
+ element._computeStatusTextLength(element.account, element._config),
+ 31
+ );
+ assert.deepEqual(
+ element._computeStatusTextLength({
+ name: 'a very long long long long name',
+ }, element._config),
+ 10
+ );
+ });
+ });
});
</script>
diff --git a/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text.js b/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text.js
index 479dd1e..db13942 100644
--- a/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text.js
+++ b/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text.js
@@ -45,6 +45,15 @@
},
/**
+ * Disable the tooltip.
+ * When set to true, will not show tooltip even text is over limit
+ */
+ disableTooltip: {
+ type: Boolean,
+ value: false,
+ },
+
+ /**
* The maximum number of characters to display in the tooltop.
*/
tooltipLimit: {
@@ -72,7 +81,7 @@
}
this.hasTooltip = !!limit && !!text && text.length > limit;
- if (this.hasTooltip) {
+ if (this.hasTooltip && !this.disableTooltip) {
this.setAttribute('title', text.substr(0, tooltipLimit));
} else {
this.removeAttribute('title');
diff --git a/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text_test.html b/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text_test.html
index b07971b..7946bb6 100644
--- a/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-limited-text/gr-limited-text_test.html
@@ -92,5 +92,14 @@
assert.equal(element._computeDisplayText('foo bar', 4), 'foo…');
assert.equal(element._computeDisplayText('foo bar', null), 'foo bar');
});
+
+ test('when disable tooltip', () => {
+ sandbox.spy(element, '_updateTitle');
+ element.text = 'abcdefghijklmn';
+ element.disableTooltip = true;
+ element.limit = 10;
+ flushAsynchronousOperations();
+ assert.equal(element.getAttribute('title'), null);
+ });
});
</script>
