Break 'gr-account-label' out of 'gr-account-link'
'gr-account-label' is used now in 'gr-reviewer-list' for
reviewer suggestion list.
Change-Id: I3c55ca6fa661fb086106b56fa329575c6d9e2536
diff --git a/polygerrit-ui/app/elements/gr-account-label.html b/polygerrit-ui/app/elements/gr-account-label.html
new file mode 100644
index 0000000..3a528f2
--- /dev/null
+++ b/polygerrit-ui/app/elements/gr-account-label.html
@@ -0,0 +1,81 @@
+<!--
+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="gr-avatar.html">
+
+<dom-module id="gr-account-label">
+ <template>
+ <style>
+ :host {
+ display: inline;
+ }
+ gr-avatar {
+ height: 1.3em;
+ width: 1.3em;
+ vertical-align: -.3em;
+ }
+ .text:hover {
+ @apply(--gr-account-label-text-hover-style);
+ }
+ </style>
+ <span title$="[[_computeAccountTitle(account)]]">
+ <gr-avatar account="[[account]]"
+ image-size="[[avatarImageSize]]"></gr-avatar>
+ <span class="text">
+ <span>[[account.name]]</span>
+ <span hidden$="[[!_computeShowEmail(showEmail, account)]]">
+ ([[account.email]])
+ </span>
+ </span>
+ </span>
+ </template>
+ <script>
+ (function() {
+ 'use strict';
+
+ Polymer({
+ is: 'gr-account-label',
+
+ properties: {
+ account: Object,
+ avatarImageSize: {
+ type: Number,
+ value: 32,
+ },
+ showEmail: {
+ type: Boolean,
+ value: false,
+ },
+ },
+
+ _computeAccountTitle: function(account) {
+ if (!account || !account.name) { return; }
+ var result = util.escapeHTML(account.name);
+ if (account.email) {
+ result += ' <' + util.escapeHTML(account.email) + '>';
+ }
+ return result;
+ },
+
+ _computeShowEmail: function(showEmail, account) {
+ return !!(showEmail && account && account.email);
+ },
+
+ });
+ })();
+ </script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/gr-account-link.html b/polygerrit-ui/app/elements/gr-account-link.html
index 55791c6..e4e4f63 100644
--- a/polygerrit-ui/app/elements/gr-account-link.html
+++ b/polygerrit-ui/app/elements/gr-account-link.html
@@ -15,7 +15,7 @@
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="gr-avatar.html">
+<link rel="import" href="gr-account-label.html">
<dom-module id="gr-account-link">
<template>
@@ -27,24 +27,17 @@
color: var(--default-text-color);
text-decoration: none;
}
- a:hover span {
- text-decoration: underline;
- }
- gr-avatar {
- height: 1.3em;
- width: 1.3em;
- vertical-align: -.3em;
+ gr-account-label {
+ --gr-account-label-text-hover-style: {
+ text-decoration: underline;
+ };
}
</style>
<span>
- <a href$="[[_computeOwnerLink(account)]]"
- title$="[[_computeAccountTitle(account)]]">
- <gr-avatar account="[[account]]"
- image-size="[[avatarImageSize]]"></gr-avatar>
- <span>[[account.name]]</span>
- <span hidden$="[[!_computeShowEmail(showEmail, account)]]">
- (<span>[[account.email]]</span>)
- </span>
+ <a href$="[[_computeOwnerLink(account)]]">
+ <gr-account-label account="[[account]]"
+ avatar-image-size="[[avatarImageSize]]"
+ show-email="[[showEmail]]"></gr-account-label>
</a>
</span>
</template>
@@ -68,24 +61,11 @@
},
_computeOwnerLink: function(account) {
- if (!account) { return ''; }
+ if (!account) { return; }
var accountID = account.email || account._account_id;
return '/q/owner:' + encodeURIComponent(accountID) + '+status:open';
},
- _computeAccountTitle: function(account) {
- if (!account || !account.name) { return ''; }
- var result = util.escapeHTML(account.name);
- if (account.email) {
- result += ' <' + util.escapeHTML(account.email) + '>';
- }
- return result;
- },
-
- _computeShowEmail: function(showEmail, account) {
- return showEmail && account && account.email;
- },
-
});
})();
</script>
diff --git a/polygerrit-ui/app/elements/gr-reviewer-list.html b/polygerrit-ui/app/elements/gr-reviewer-list.html
index ace5623..dd457ed 100644
--- a/polygerrit-ui/app/elements/gr-reviewer-list.html
+++ b/polygerrit-ui/app/elements/gr-reviewer-list.html
@@ -97,10 +97,8 @@
on-mouseenter="_handleMouseEnterItem"
on-tap="_handleItemTap"
selected$="[[_computeSelected(index, _selectedIndex)]]">
- <span>[[account.name]]</span>
- <span hidden$="[[!account.email]]">
- ([[account.email]])
- </span>
+ <gr-account-label
+ account="[[account]]" show-email></gr-account-label>
</div>
</template>
</div>
@@ -307,8 +305,9 @@
var accountEl;
var eventPath = Polymer.dom(e).path;
for (var i = 0; i < eventPath.length; i++) {
- if (eventPath[i].classList.contains('account')) {
- accountEl = eventPath[i];
+ var el = eventPath[i];
+ if (el.classList && el.classList.contains('account')) {
+ accountEl = el;
break;
}
}
diff --git a/polygerrit-ui/app/test/gr-account-label-test.html b/polygerrit-ui/app/test/gr-account-label-test.html
new file mode 100644
index 0000000..67f8f8743
--- /dev/null
+++ b/polygerrit-ui/app/test/gr-account-label-test.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-account-label</title>
+
+<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../bower_components/web-component-tester/browser.js"></script>
+<script src="../scripts/fake-app.js"></script>
+<script src="../scripts/util.js"></script>
+
+<link rel="import" href="../elements/gr-account-label.html">
+
+<test-fixture id="basic">
+ <template>
+ <gr-account-label></gr-account-label>
+ </template>
+</test-fixture>
+
+<script>
+ suite('gr-account-label tests', function() {
+ var element;
+
+ setup(function() {
+ element = fixture('basic');
+ });
+
+ test('computed fields', function() {
+ assert.equal(element._computeAccountTitle(
+ {
+ name: 'Andrew Bonventre',
+ email: 'andybons+gerrit@gmail.com'
+ }),
+ 'Andrew Bonventre <andybons+gerrit@gmail.com>');
+
+ assert.equal(element._computeAccountTitle(
+ { name: 'Andrew Bonventre' }),
+ 'Andrew Bonventre');
+
+ assert.equal(element._computeShowEmail(true,
+ {
+ name: 'Andrew Bonventre',
+ email: 'andybons+gerrit@gmail.com'
+ }), true);
+
+ assert.equal(element._computeShowEmail(true,
+ { name: 'Andrew Bonventre' }), false);
+
+ assert.equal(element._computeShowEmail(false,
+ { name: 'Andrew Bonventre' }), false);
+
+ assert.equal(element._computeShowEmail(
+ true, undefined), false);
+
+ assert.equal(element._computeShowEmail(
+ false, undefined), false);
+ });
+
+ });
+</script>
diff --git a/polygerrit-ui/app/test/gr-account-link-test.html b/polygerrit-ui/app/test/gr-account-link-test.html
index 4cca49f..b4679a0 100644
--- a/polygerrit-ui/app/test/gr-account-link-test.html
+++ b/polygerrit-ui/app/test/gr-account-link-test.html
@@ -49,17 +49,6 @@
assert.equal(element._computeOwnerLink({ _account_id: 42 }),
'/q/owner:42+status:open');
-
- assert.equal(element._computeAccountTitle(
- {
- name: 'Andrew Bonventre',
- email: 'andybons+gerrit@gmail.com'
- }),
- 'Andrew Bonventre <andybons+gerrit@gmail.com>');
-
- assert.equal(element._computeAccountTitle(
- { name: 'Andrew Bonventre' }),
- 'Andrew Bonventre');
});
});
diff --git a/polygerrit-ui/app/test/index.html b/polygerrit-ui/app/test/index.html
index 309ba01..d7f9182 100644
--- a/polygerrit-ui/app/test/index.html
+++ b/polygerrit-ui/app/test/index.html
@@ -24,6 +24,7 @@
var testFiles = [];
[ 'gr-account-dropdown-test.html',
+ 'gr-account-label-test.html',
'gr-account-link-test.html',
'gr-avatar-test.html',
'gr-change-actions-test.html',
