Merge "PolyGerrit: introduce gr-account-chip which supports a remove button."

polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.html

@@ -17,6 +17,7 @@ limitations under the License.
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../bower_components/iron-input/iron-input.html">
 <link rel="import" href="../../../behaviors/keyboard-shortcut-behavior.html">
+<link rel="import" href="../../shared/gr-account-chip/gr-account-chip.html">
 <link rel="import" href="../../shared/gr-ajax/gr-ajax.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-request/gr-request.html">
@@ -75,16 +76,12 @@ limitations under the License.
         url="[[_computeAutocompleteURL(change)]]"
         params="[[_computeAutocompleteParams(_inputVal)]]"
         on-response="_handleResponse"></gr-ajax>
-
     <template is="dom-repeat" items="[[_reviewers]]" as="reviewer">
-      <div class="reviewer">
+      <gr-account-chip class="reviewer" account="[[reviewer]]"
-        <gr-account-link account="[[reviewer]]" show-email></gr-account-link>
+          on-remove="_handleRemove"
-        <gr-button link
+          data-account-id$="[[reviewer._account_id]]"
-            class="remove"
+          removable="[[_computeCanRemoveReviewer(reviewer, mutable)]]">
-            data-account-id$="[[reviewer._account_id]]"
+      </gr-account-chip>
-            on-tap="_handleRemoveTap"
-            hidden$="[[!_computeCanRemoveReviewer(reviewer, mutable)]]">remove</gr-button>
-      </div>
     </template>
     <div class="controlsContainer" hidden$="[[!mutable]]">
       <div class="autocompleteContainer" hidden$="[[!_showInput]]">

polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.js

@@ -161,7 +161,7 @@
       this._autocompleteData = [];
     },
 
-    _handleRemoveTap: function(e) {
+    _handleRemove: function(e) {
       e.preventDefault();
       var target = Polymer.dom(e).rootTarget;
       var accountID = parseInt(target.getAttribute('data-account-id'), 10);

polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.html

@@ -175,16 +175,19 @@ limitations under the License.
         ]
       };
       flushAsynchronousOperations();
-      var removeEls =
+      var chips =
-          Polymer.dom(element.root).querySelectorAll('.reviewer > .remove');
+        Polymer.dom(element.root).querySelectorAll('gr-account-chip');
-      assert.equal(removeEls.length, 3);
+      assert.equal(chips.length, 3);
-      Array.from(removeEls).forEach(function(el) {
+      Array.from(chips).forEach(function(el) {
         var accountID = parseInt(el.getAttribute('data-account-id'), 10);
         assert.ok(accountID);
+
+        var buttonEl = el.$$('gr-button');
+        assert.isNotNull(buttonEl);
         if (accountID == 2) {
-          assert.isTrue(el.hasAttribute('hidden'));
+          assert.isTrue(buttonEl.hasAttribute('hidden'));
         } else {
-          assert.isFalse(el.hasAttribute('hidden'));
+          assert.isFalse(buttonEl.hasAttribute('hidden'));
         }
       });
     });
@@ -240,7 +243,6 @@ limitations under the License.
 
         element._inputVal = 'andyb';
         server.respond();
-
         element._lastAutocompleteRequest.completes.then(function() {
           assert.isFalse(element.$$('.dropdown').hasAttribute('hidden'));
           var itemEls = Polymer.dom(element.root).querySelectorAll('.reviewer');
@@ -257,7 +259,7 @@ limitations under the License.
             var reviewerEls =
                 Polymer.dom(element.root).querySelectorAll('.reviewer');
             assert.equal(reviewerEls.length, 1);
-            MockInteractions.tap(element.$$('.reviewer > .remove'));
+            MockInteractions.tap(element.$$('.reviewer').$$('gr-button'));
             flushAsynchronousOperations();
             assert.isTrue(element.disabled);
             server.respond();

polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html

@@ -0,0 +1,46 @@
+<!--
+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-account-link/gr-account-link.html">
+<link rel="import" href="../gr-button/gr-button.html">
+
+<dom-module id="gr-account-chip">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        background: #ccc;
+        border-radius: .75em;
+      }
+      span.innerspan {
+        margin: .5em;
+      }
+      gr-button.remove {
+        padding: 0;
+        text-decoration: none;
+        background: #ccc;
+      }
+    </style>
+    <span class="innerspan">
+      <gr-account-link account="[[account]]"></gr-account-link>
+      <gr-button
+         hidden$="[[!removable]]" hidden
+         class="remove" on-tap="_handleRemoveTap">×</gr-button>
+    </span>
+  </template>
+  <script src="gr-account-chip.js"></script>
+</dom-module>

polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.js

@@ -0,0 +1,34 @@
+// 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-account-chip',
+
+    properties: {
+      account: Object,
+      removable: {
+        type: Boolean,
+        value: false,
+      },
+    },
+
+    _handleRemoveTap: function(e) {
+      e.preventDefault();
+      this.fire('remove', {account: this.account}, {bubbles: false});
+    },
+  });
+})();