Merge "Change the layout of gr-label-scores to be a table"

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

@@ -27,42 +27,37 @@ limitations under the License.
       /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
     </style>
     <style include="shared-styles">
-      .labelContainer {
-        align-items: center;
-        display: flex;
-        margin-bottom: var(--spacing-m);
+      .labelNameCell,
+      .buttonsCell,
+      .selectedValueCell {
+        padding: var(--spacing-s) var(--spacing-m);
+        display: table-cell;
       }
-      .labelName {
-        display: inline-block;
-        flex: 0 0 auto;
-        margin-right: var(--spacing-m);
-        min-width: 7em;
-        text-align: left;
-        width: 20%;
+      /* We want the :hover highlight to extend to the border of the dialog. */
+      .labelNameCell {
+        padding-left: var(--spacing-xl);
+      }
+      .selectedValueCell {
+        padding-right: var(--spacing-xl);
+      }
+      /* This is a trick to let the selectedValueCell take the remaining width. */
+      .labelNameCell,
+      .buttonsCell {
+        white-space: nowrap;
+      }
+      .selectedValueCell {
+        width: 75%;
       }
       .labelMessage {
         color: var(--deemphasized-text-color);
       }
-      .placeholder::before {
-        content: ' ';
-      }
-      .selectedValueText {
-        color: var(--deemphasized-text-color);
-        font-style: italic;
-        margin: 0 var(--spacing-m);
-      }
-      .selectedValueText.hidden {
-        display: none;
-      }
-      .buttonWrapper {
-        flex: none;
-      }
       gr-button {
-        min-width: 40px;
+        min-width: 42px;
+        box-sizing: border-box;
         --gr-button: {
           background-color: var(--button-background-color, var(--table-header-background-color));
           color: var(--primary-text-color);
-          padding: var(--spacing-xs) var(--spacing-m);
+          padding: 0 var(--spacing-m);
           @apply --vote-chip-styles;
         }
       }
@@ -83,27 +78,27 @@ limitations under the License.
       }
       .placeholder {
         display: inline-block;
-        width: 40px;
+        width: 42px;
+        height: 1px;
+      }
+      .placeholder::before {
+        content: ' ';
+      }
+      .selectedValueCell {
+        color: var(--deemphasized-text-color);
+        font-style: italic;
+      }
+      .selectedValueCell.hidden {
+        display: none;
       }
       @media only screen and (max-width: 50em) {
-        .selectedValueText {
+        .selectedValueCell {
           display: none;
         }
       }
-      @media only screen and (max-width: 25em) {
-        .labelName {
-          margin: 0;
-          text-align: center;
-          width: 100%;
-        }
-        .labelContainer {
-          display: block;
-        }
-      }
     </style>
-    <div class="labelContainer">
-      <span class="labelName">[[label.name]]</span>
-      <div class="buttonWrapper">
+    <span class="labelNameCell">[[label.name]]</span>
+    <div class="buttonsCell">
       <template is="dom-repeat"
           items="[[_computeBlankItems(permittedLabels, label.name, 'start')]]"
           as="value">
@@ -137,10 +132,9 @@ limitations under the License.
         You don't have permission to edit this label.
       </span>
     </div>
-      <div class$="selectedValueText [[_computeHiddenClass(permittedLabels, label.name)]]">
+    <div class$="selectedValueCell [[_computeHiddenClass(permittedLabels, label.name)]]">
       <span id="selectedValueLabel">[[_selectedValueText]]</span>
     </div>
-    </div>
   </template>
   <script src="gr-label-score-row.js"></script>
 </dom-module>

polygerrit-ui/app/elements/change/gr-label-scores/gr-label-scores.html

@@ -23,18 +23,23 @@ limitations under the License.
 <dom-module id="gr-label-scores">
   <template>
     <style include="shared-styles">
+      :host {
+        display: table;
+        width: 100%;
+      }
       .mergedMessage {
         font-style: italic;
         text-align: center;
         width: 100%;
       }
+      gr-label-score-row:hover {
+        background-color: var(--hover-background-color);
+      }
+      gr-label-score-row {
+        display: table-row;
+      }
       gr-label-score-row.no-access {
-        display: var(--label-no-access-display, initial);
-      }
-      @media only screen and (max-width: 25em) {
-        :host {
-          text-align: center;
-        }
+        display: var(--label-no-access-display, table-row);
       }
     </style>
     <template is="dom-repeat" items="[[_labels]]" as="label">

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -64,6 +64,10 @@ limitations under the License.
         padding: var(--spacing-m) var(--spacing-xl);
         width: 100%;
       }
+      section.labelsContainer {
+        /* We want the :hover highlight to extend to the border of the dialog. */
+        padding: var(--spacing-m) 0;
+      }
       .actions {
         background-color: var(--dialog-background-color);
         bottom: 0;