Remove status from account-label
Instead just rely on the status information being shown in the new
hovercard.
Add an icon instead to the account-label. And use that same icon in the
hovercard.
Screenshot: https://imgur.com/a/ACH4PBZ
Change-Id: I99c6f36d99e24cbf3a42e2a9b2c0560941c6dda6
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 c6f8aa6..f8f0123 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
@@ -14,14 +14,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../../behaviors/gr-display-name-behavior/gr-display-name-behavior.js';
-
-import '../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js';
import '../../../scripts/bundled-polymer.js';
+
+import '@polymer/iron-icon/iron-icon.js';
+import '../../../behaviors/gr-display-name-behavior/gr-display-name-behavior.js';
+import '../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.js';
import '../../../styles/shared-styles.js';
import '../gr-avatar/gr-avatar.js';
import '../gr-hovercard-account/gr-hovercard-account.js';
-import '../gr-limited-text/gr-limited-text.js';
import '../gr-rest-api-interface/gr-rest-api-interface.js';
import '../../../scripts/util.js';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
@@ -47,9 +47,9 @@
static get properties() {
return {
- /**
- * @type {{ name: string, status: string }}
- */
+ /**
+ * @type {{ name: string, status: string }}
+ */
account: Object,
title: {
type: String,
@@ -85,11 +85,6 @@
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 ([
diff --git a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.js b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.js
index 9e2ac83..26f2b9d 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.js
+++ b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.js
@@ -42,6 +42,13 @@
.showEmail .email {
display: inline-block;
}
+ iron-icon {
+ width: 14px;
+ height: 14px;
+ vertical-align: top;
+ position: relative;
+ top: 2px;
+ }
</style>
<span>
<gr-hovercard-account account="[[account]]" voteable-text="[[voteableText]]"></gr-hovercard-account>
@@ -55,8 +62,7 @@
[[_computeEmailStr(account)]]
</span>
<template is="dom-if" if="[[account.status]]">
- (<gr-limited-text disable-tooltip="true" limit="[[_computeStatusTextLength(account, _serverConfig)]]" text="[[account.status]]">
- </gr-limited-text>)
+ <iron-icon icon="gr-icons:calendar"></iron-icon>
</template>
</span>
</span>
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 db742e6..3aef8d4 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
@@ -152,45 +152,5 @@
'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.shadowRoot
- .querySelector('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-hovercard-account/gr-hovercard-account.js b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account.js
index f5893e0..0bc9cb7 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account.js
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account.js
@@ -16,6 +16,7 @@
*/
import '../../../scripts/bundled-polymer.js';
+import '@polymer/iron-icon/iron-icon.js';
import '../../../styles/shared-styles.js';
import '../gr-avatar/gr-avatar.js';
import '../gr-button/gr-button.js';
diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.js b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.js
index 97f4e72..0763420 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.js
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.js
@@ -39,6 +39,13 @@
.email {
color: var(--deemphasized-text-color);
}
+ .status iron-icon {
+ width: 14px;
+ height: 14px;
+ vertical-align: top;
+ position: relative;
+ top: 2px;
+ }
.action {
border-top: 1px solid var(--border-color);
padding: var(--spacing-s) var(--spacing-l);
@@ -68,7 +75,10 @@
</div>
<template is="dom-if" if="[[account.status]]">
<div class="status">
- <span class="title">Status:</span>
+ <span class="title">
+ <iron-icon icon="gr-icons:calendar"></iron-icon>
+ Status:
+ </span>
<span class="value">[[account.status]]</span>
</div>
</template>
diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.js b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.js
index f61b1d0..f7b8b63 100644
--- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.js
+++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.js
@@ -59,6 +59,8 @@
<g id="hourglass"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z"></path><path d="M0 0h24v24H0V0z" fill="none"></path></g>
<!-- This SVG is a copy from material.io https://material.io/icons/#mode_comment-->
<g id="comment"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path><path d="M0 0h24v24H0z" fill="none"></path></g>
+ <!-- This SVG is a copy from material.io https://material.io/icons/#calendar_today-->
+ <g id="calendar"><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"></path><path d="M0 0h24v24H0z" fill="none"></path></g>
<!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
<g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g>
<!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js -->
