Update labels in gr-change-metadata to have new look

Bug: Issue 7910
Change-Id: I16b6dddd421523d4fb8b3cbd99596b48fd997999

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html

@@ -17,6 +17,7 @@ limitations under the License.
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
 <link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../../styles/gr-voting-styles.html">
 <link rel="import" href="../../core/gr-navigation/gr-navigation.html">
 <link rel="import" href="../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.html">
 <link rel="import" href="../../plugins/gr-endpoint-param/gr-endpoint-param.html">
@@ -32,6 +33,7 @@ limitations under the License.
 
 <dom-module id="gr-change-metadata">
   <template>
+    <style include="gr-voting-styles"></style>
     <style include="shared-styles">
       .hideDisplay {
         display: none;
@@ -62,21 +64,31 @@ limitations under the License.
       .labelValueContainer:not(:first-of-type) {
         margin-top: .25em;
       }
-      .labelValueContainer .approved,
-      .labelValueContainer .notApproved {
+      .labelValueContainer span {
+        align-items: baseline;
         display: inline-flex;
-        padding: .1em .3em;
+      }
+      .labelValueContainer {
         border-radius: 3px;
+        padding: .1em .3em;
       }
-      .labelValue {
-        display: inline-block;
-        padding-right: .3em;
+      gr-label {
+        margin-right: .3em;
+        padding: .05em .85em;
+        text-align: center;
+        @apply --vote-chip-styles;
       }
-      .approved {
-        background-color: #d4ffd4;
+      .max {
+        background-color: var(--vote-color-max);
       }
-      .notApproved {
-        background-color: #ffd4d4;
+      .min {
+        background-color: var(--vote-color-min);
+      }
+      .positive {
+        background-color: var(--vote-color-positive);
+      }
+      .negative {
+        background-color: var(--vote-color-negative);
       }
       .labelStatus .value {
         max-width: 9em;
@@ -275,11 +287,11 @@ limitations under the License.
                 items="[[_computeLabelValues(labelName, change.labels.*)]]"
                 as="label">
               <div class="labelValueContainer">
-                <span class$="[[label.className]]">
+                <span>
                   <gr-label
                       has-tooltip
                       title="[[_computeValueTooltip(change, label.value, labelName)]]"
-                      class="labelValue">
+                      class$="[[label.className]] voteChip">
                     [[label.value]]
                   </gr-label>
                   <gr-account-chip

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js

@@ -137,15 +137,25 @@
       const t = labels[labelName];
       if (!t) { return result; }
       const approvals = t.all || [];
+      const values = Object.keys(t.values);
       for (const label of approvals) {
         if (label.value && label.value != labels[labelName].default_value) {
           let labelClassName;
           let labelValPrefix = '';
           if (label.value > 0) {
             labelValPrefix = '+';
-            labelClassName = 'approved';
+            if (parseInt(label.value, 10) ===
+                parseInt(values[values.length - 1], 10)) {
+              labelClassName = 'max';
+            } else {
+              labelClassName = 'positive';
+            }
           } else if (label.value < 0) {
-            labelClassName = 'notApproved';
+            if (parseInt(label.value, 10) === parseInt(values[0], 10)) {
+              labelClassName = 'min';
+            } else {
+              labelClassName = 'negative';
+            }
           }
           result.push({
             value: labelValPrefix + label.value,

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_test.html

@@ -662,5 +662,79 @@ limitations under the License.
         });
       });
     });
+
+    suite('label colors', () => {
+      test('-2 to +2', () => {
+        element.change = {
+          labels: {
+            'Code-Review': {
+              all: [
+                {value: 2, name: 'user 2'},
+                {value: 1, name: 'user 1'},
+                {value: -1, name: 'user 3'},
+                {value: -2, name: 'user 4'},
+              ],
+              values: {
+                '-2': 'Awful',
+                '-1': 'Don\'t submit as-is',
+                ' 0': 'No score',
+                '+1': 'Looks good to me',
+                '+2': 'Ready to submit',
+              },
+            },
+          },
+        };
+        flushAsynchronousOperations();
+        const labels = Polymer.dom(element.root).querySelectorAll('gr-label');
+        assert.isTrue(labels[0].classList.contains('max'));
+        assert.isTrue(labels[1].classList.contains('positive'));
+        assert.isTrue(labels[2].classList.contains('negative'));
+        assert.isTrue(labels[3].classList.contains('min'));
+      });
+
+      test('-1 to +1', () => {
+        element.change = {
+          labels: {
+            CI: {
+              all: [
+                {value: 1, name: 'user 1'},
+                {value: -1, name: 'user 2'},
+              ],
+              values: {
+                '-1': 'Don\'t submit as-is',
+                ' 0': 'No score',
+                '+1': 'Looks good to me',
+              },
+            },
+          },
+        };
+        flushAsynchronousOperations();
+        const labels = Polymer.dom(element.root).querySelectorAll('gr-label');
+        assert.isTrue(labels[0].classList.contains('max'));
+        assert.isTrue(labels[1].classList.contains('min'));
+      });
+
+      test('0 to +2', () => {
+        element.change = {
+          labels: {
+            CI: {
+              all: [
+                {value: 1, name: 'user 2'},
+                {value: 2, name: 'user '},
+              ],
+              values: {
+                ' 0': 'Don\'t submit as-is',
+                '+1': 'No score',
+                '+2': 'Looks good to me',
+              },
+            },
+          },
+        };
+        flushAsynchronousOperations();
+        const labels = Polymer.dom(element.root).querySelectorAll('gr-label');
+        assert.isTrue(labels[0].classList.contains('positive'));
+        assert.isTrue(labels[1].classList.contains('max'));
+      });
+    });
   });
 </script>

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html

@@ -17,10 +17,12 @@ limitations under the License.
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../bower_components/iron-selector/iron-selector.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../../styles/gr-voting-styles.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 
 <dom-module id="gr-label-score-row">
   <template>
+    <style include="gr-voting-styles"></style>
     <style include="shared-styles">
       .labelContainer {
         align-items: center;
@@ -55,28 +57,26 @@ limitations under the License.
       gr-button {
         min-width: 40px;
         --gr-button: {
-          border: 1px solid rgba(0,0,0,.12);
-          border-radius: 12px;
-          box-shadow: none;
           padding: .2em .85em;
+          @apply(--vote-chip-styles);
         }
         --gr-button-background: var(--button-background-color, #f5f5f5);
         --gr-button-color: black;
       }
       iron-selector > gr-button.iron-selected.max {
-        --button-background-color: #9fcc6b;
+        --button-background-color: var(--vote-color-max);
       }
       iron-selector > gr-button.iron-selected.positive {
-        --button-background-color: #c9dfaf;
+        --button-background-color: var(--vote-color-positive);
       }
       iron-selector > gr-button.iron-selected.min {
-        --button-background-color: #f7a1ad;
+        --button-background-color: var(--vote-color-min);
       }
       iron-selector > gr-button.iron-selected.negative {
-        --button-background-color: #f7c4cb;
+        --button-background-color: #var(--vote-color-negative);;
       }
       iron-selector > gr-button.iron-selected.neutral {
-        --button-background-color: #ebf5fb;
+        --button-background-color: var(--vote-color-neutral);;
       }
       .placeholder {
         display: inline-block;

polygerrit-ui/app/styles/gr-voting-styles.html

@@ -0,0 +1,36 @@
+<!--
+Copyright (C) 2017 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.
+-->
+
+<dom-module id="gr-voting-styles">
+  <template>
+    <style>
+      :host {
+        --vote-color-max: #9fcc6b;
+        --vote-color-positive: #c9dfaf;
+        --vote-color-min: #f7a1ad;
+        --vote-color-negative: #f7c4cb;
+        --vote-color-neutral: #ebf5fb;
+
+        --vote-chip-styles: {
+          border: 1px solid rgba(0,0,0,.12);
+          border-radius: 12px;
+          box-shadow: none;
+          min-width: 40px;
+        }
+      }
+    </style>
+  </template>
+</dom-module>