Settings CSS revamp

Redoes some of the CSS in the settings view, mainly to generalize much of the logic used to space the first and last column and to unify the look and feel of the user inputs on the page. Change-Id: I07422c3bbd071598693aa952fe7f806c4d6025e4
2017-06-23 15:35:55 -07:00
parent e5dacc572c
commit a856c40e69
11 changed files with 174 additions and 104 deletions
--- a/polygerrit-ui/app/elements/settings/gr-agreements-list/gr-agreements-list.html
+++ b/polygerrit-ui/app/elements/settings/gr-agreements-list/gr-agreements-list.html
@@ -23,27 +23,30 @@ limitations under the License.
 <dom-module id="gr-agreements-list">
  <template>
    <style include="shared-styles">
-      .nameHeader {
-        width: 15em;
+      #agreements .nameColumn {
+        min-width: 11em;
+        width: auto;
      }
-      .descriptionHeader {
-        width: 21.5em;
+      #agreements .descriptionColumn {
+        width: auto;
      }
    </style>
    <style include="gr-form-styles"></style>
    <div class="gr-form-styles">
-      <table>
+      <table id="agreements">
        <thead>
          <tr>
-            <th class="nameHeader">Name</th>
-            <th class="descriptionHeader">Description</th>
+            <th class="nameColumn">Name</th>
+            <th class="descriptionColumn">Description</th>
          </tr>
        </thead>
        <tbody>
          <template is="dom-repeat" items="[[_agreements]]">
            <tr>
-              <td><a href$="[[getUrlBase(item.url)]]">[[item.name]]</a></td>
-              <td>[[item.description]]</td>
+              <td class="nameColumn">
+                <a href$="[[getUrlBase(item.url)]]">[[item.name]]</a>
+              </td>
+              <td class="descriptionColumn">[[item.description]]</td>
            </tr>
          </template>
        </tbody>
--- a/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.html
@@ -24,29 +24,28 @@ limitations under the License.

 <dom-module id="gr-change-table-editor">
  <template>
-    <style include="shared-styles">
-      table {
-        margin-top: 1em;
+    <style include="shared-styles"></style>
+    <style include="gr-form-styles">
+      #changeCols {
+        width: auto;
      }
-      th.nameHeader {
-        width: 11em;
+      #changeCols .visibleHeader {
+        text-align: center;
      }
-      td.checkboxContainer {
-        border: 1px solid #fff;
+      .checkboxContainer {
        cursor: pointer;
        text-align: center;
      }
-      td.checkboxContainer:hover {
-        border: 1px solid #ddd;
+      .checkboxContainer:hover {
+        outline: 1px solid #ddd;
      }
    </style>
-    <style include="gr-form-styles"></style>
    <div class="gr-form-styles">
-      <table>
+      <table id="changeCols">
        <thead>
          <tr>
            <th class="nameHeader">Column</th>
-            <th>Visible</th>
+            <th class="visibleHeader">Visible</th>
          </tr>
        </thead>
        <tbody>
--- a/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html
@@ -22,35 +22,37 @@ limitations under the License.

 <dom-module id="gr-email-editor">
  <template>
-    <style include="shared-styles">
+    <style include="shared-styles"></style>
+    <style include="gr-form-styles">
      th {
        color: #666;
        text-align: left;
      }
-      th.emailHeader {
-        width: 32.5em;
+      #emailTable .emailColumn {
+        min-width: 32.5em;
+        width: auto;
      }
-      th.preferredHeader {
+      #emailTable .preferredHeader {
        text-align: center;
        width: 6em;
      }
-      tbody tr:nth-child(even) {
-        background-color: #f4f4f4;
-      }
-      td.preferredControl {
+      #emailTable .preferredControl {
        cursor: pointer;
+        height: auto;
        text-align: center;
      }
-      td.preferredControl:hover {
-        border: 1px solid #ddd;
+      #emailTable .preferredControl .preferredRadio {
+        height: auto;
+      }
+      .preferredControl:hover {
+        outline: 1px solid #d1d2d3;
      }
    </style>
-    <style include="gr-form-styles"></style>
    <div class="gr-form-styles">
-      <table>
+      <table id="emailTable">
        <thead>
          <tr>
-            <th class="emailHeader">Email</th>
+            <th class="emailColumn">Email</th>
            <th class="preferredHeader">Preferred</th>
            <th></th>
          </tr>
@@ -58,10 +60,11 @@ limitations under the License.
        <tbody>
          <template is="dom-repeat" items="[[_emails]]">
            <tr>
-              <td>[[item.email]]</td>
+              <td class="emailColumn">[[item.email]]</td>
              <td class="preferredControl" on-tap="_handlePreferredControlTap">
                <input
                    is="iron-input"
+                    class="preferredRadio"
                    type="radio"
                    on-change="_handlePreferredChange"
                    name="preferred"
--- a/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.html
+++ b/polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.html
@@ -21,31 +21,33 @@ limitations under the License.

 <dom-module id="gr-group-list">
  <template>
-    <style include="shared-styles">
-      .nameHeader {
-        width: 15em;
-      }
-      .descriptionHeader {
-        width: 21.5em;
-      }
-      .visibleCell {
-        text-align: center;
-      }
-    </style>
-    <style include="gr-form-styles"></style>
+    <style include="shared-styles"></style>
+    <style include="gr-form-styles">
+        #groups .nameColumn {
+          min-width: 11em;
+          width: auto;
+        }
+        .descriptionHeader {
+          min-width: 21.5em;
+        }
+        .visibleCell {
+          text-align: center;
+          width: 6em;
+        }
+      </style>
    <div class="gr-form-styles">
-      <table>
+      <table id="groups">
        <thead>
          <tr>
            <th class="nameHeader">Name</th>
            <th class="descriptionHeader">Description</th>
-            <th>Visible to all</th>
+            <th class="visibleCell">Visible to all</th>
          </tr>
        </thead>
        <tbody>
          <template is="dom-repeat" items="[[_groups]]">
            <tr>
-              <td>[[item.name]]</td>
+              <td class="nameColumn">[[item.name]]</td>
              <td>[[item.description]]</td>
              <td class="visibleCell">[[_computeVisibleToAll(item)]]</td>
            </tr>
--- a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
@@ -25,21 +25,22 @@ limitations under the License.
 <dom-module id="gr-menu-editor">
  <template>
    <style include="shared-styles">
-      th.nameHeader {
-        width: 11em;
+      .buttonColumn {
+        width: 2em;
      }
-      tbody tr:first-of-type td .move-up-button,
-      tbody tr:last-of-type td .move-down-button {
+      .moveUpButton,
+      .moveDownButton {
+        width: 100%
+      }
+      tbody tr:first-of-type td .moveUpButton,
+      tbody tr:last-of-type td .moveDownButton {
        display: none;
      }
      td.urlCell {
        word-break: break-word;
      }
-      .newTitleInput {
-        width: 10em;
-      }
      .newUrlInput {
-        width: 23em;
+        min-width: 23em;
      }
    </style>
    <style include="gr-form-styles"></style>
@@ -56,17 +57,17 @@ limitations under the License.
            <tr>
              <td>[[item.name]]</td>
              <td class="urlCell">[[item.url]]</td>
-              <td>
+              <td class="buttonColumn">
                <gr-button
                    data-index="[[index]]"
                    on-tap="_handleMoveUpButton"
-                    class="move-up-button">↑</gr-button>
+                    class="moveUpButton">↑</gr-button>
              </td>
-              <td>
+              <td class="buttonColumn">
                <gr-button
                    data-index="[[index]]"
                    on-tap="_handleMoveDownButton"
-                    class="move-down-button">↓</gr-button>
+                    class="moveDownButton">↓</gr-button>
              </td>
              <td>
                <gr-button
@@ -81,7 +82,6 @@ limitations under the License.
          <tr>
            <th>
              <input
-                  class="newTitleInput"
                  is="iron-input"
                  placeholder="New Title"
                  on-keydown="_handleInputKeydown"
--- a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor_test.html
+++ b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor_test.html
@@ -48,7 +48,7 @@ limitations under the License.
    // The index of the first row is 0, corresponding to the array.
    function move(element, index, direction) {
      const selector =
-          'tr:nth-child(' + (index + 1) + ') .move-' + direction + '-button';
+          'tr:nth-child(' + (index + 1) + ') .move' + direction + 'Button';
      const button = element.$$('tbody').querySelector(selector);
      MockInteractions.tap(button);
    }
@@ -110,12 +110,12 @@ limitations under the License.
          ['first name', 'second name', 'third name']);

      // Move the middle item down
-      move(element, 1, 'down');
+      move(element, 1, 'Down');
      assertMenuNamesEqual(element,
          ['first name', 'third name', 'second name']);

      // Moving the bottom item down is a no-op.
-      move(element, 2, 'down');
+      move(element, 2, 'Down');
      assertMenuNamesEqual(element,
          ['first name', 'third name', 'second name']);
    });
@@ -125,13 +125,13 @@ limitations under the License.
          ['first name', 'second name', 'third name']);

      // Move the last item up twice to be the first.
-      move(element, 2, 'up');
-      move(element, 1, 'up');
+      move(element, 2, 'Up');
+      move(element, 1, 'Up');
      assertMenuNamesEqual(element,
          ['third name', 'first name', 'second name']);

      // Moving the top item up is a no-op.
-      move(element, 0, 'up');
+      move(element, 0, 'Up');
      assertMenuNamesEqual(element,
          ['third name', 'first name', 'second name']);
    });
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
@@ -40,6 +40,9 @@ limitations under the License.
      #newEmailInput {
        width: 20em;
      }
+      #email {
+        margin-bottom: 1em;
+      }
    </style>
    <style include="gr-form-styles"></style>
    <style include="gr-menu-page-styles"></style>
--- a/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html
@@ -24,10 +24,8 @@ limitations under the License.

 <dom-module id="gr-ssh-editor">
  <template>
-    <style include="shared-styles">
-      .commentHeader {
-        width: 27em;
-      }
+    <style include="shared-styles"></style>
+    <style include="gr-form-styles">
      .statusHeader {
        width: 4em;
      }
@@ -49,22 +47,29 @@ limitations under the License.
        position: absolute;
        right: 2em;
      }
+      #existing {
+        margin-bottom: 1em;
+      }
+      #existing .commentColumn {
+        min-width: 27em;
+        width: auto;
+      }
    </style>
-    <style include="gr-form-styles"></style>
    <div class="gr-form-styles">
-      <fieldset>
+      <fieldset id="existing">
        <table>
          <thead>
            <tr>
-              <th class="commentHeader">Comment</th>
+              <th class="commentColumn">Comment</th>
              <th class="statusHeader">Status</th>
              <th class="keyHeader">Public key</th>
+              <th></th>
            </tr>
          </thead>
          <tbody>
            <template is="dom-repeat" items="[[_keys]]" as="key">
              <tr>
-                <td>[[key.comment]]</td>
+                <td class="commentColumn">[[key.comment]]</td>
                <td>[[_getStatusLabel(key.valid)]]</td>
                <td>
                  <gr-button
--- a/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
@@ -22,42 +22,30 @@ limitations under the License.

 <dom-module id="gr-watched-projects-editor">
  <template>
-    <style include="shared-styles">
-      th.projectHeader {
-        width: 11em;
-      }
-      th.notificationHeader {
-        text-align: center;
-      }
-      th.notifType {
+    <style include="shared-styles"></style>
+    <style include="gr-form-styles">
+      #watchedProjects .notifType {
        text-align: center;
        padding: 0 0.4em;
      }
-      td.notifControl {
+      .notifControl {
        cursor: pointer;
        text-align: center;
      }
-      td.notifControl:hover {
-        border: 1px solid #ddd;
+      .notifControl:hover {
+        outline: 1px solid #ddd;
      }
      .projectFilter {
        color: #777;
        font-style: italic;
        margin-left: 1em;
      }
-      input {
-        font-size: 1em;
-      }
-      .newProjectInput {
-        width: 10em;
-      }
      .newFilterInput {
-        width: 26em;
+        width: 100%;
      }
    </style>
-    <style include="gr-form-styles"></style>
    <div class="gr-form-styles">
-      <table>
+      <table id="watchedProjects">
        <thead>
          <tr>
            <th class="projectHeader">Project</th>
@@ -93,7 +81,7 @@ limitations under the License.
                      checked$="[[_computeCheckboxChecked(project, type.key)]]">
                </td>
              </template>
-              <td class="delete-column">
+              <td>
                <gr-button
                    data-index$="[[projectIndex]]"
                    on-tap="_handleRemoveProject">Delete</gr-button>
@@ -106,7 +94,6 @@ limitations under the License.
            <th>
              <gr-autocomplete
                  id="newProject"
-                  class="newProjectInput"
                  query="[[_query]]"
                  threshold="3"
                  placeholder="Project"></gr-autocomplete>
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
@@ -27,6 +27,7 @@ limitations under the License.
        font-size: 1em;
        height: 100%;
        width: 100%;
+        @apply --gr-autocomplete;
      }
      input.borderless,
      input.borderless:focus {
--- a/polygerrit-ui/app/styles/gr-form-styles.html
+++ b/polygerrit-ui/app/styles/gr-form-styles.html
@@ -19,17 +19,23 @@ limitations under the License.
      .gr-form-styles h1 {
        margin-bottom: .1em;
      }
+      .gr-form-styles h2 {
+        margin-bottom: .3em;
+      }
      .gr-form-styles fieldset {
        border: none;
        margin: 0 0 2em 2em;
      }
      .gr-form-styles section {
-        margin-bottom: .5em;
+        margin: .15em 0;
+        min-height: 2em;
+      }
+      .gr-form-styles section * {
+        vertical-align: middle;
      }
      .gr-form-styles .title,
      .gr-form-styles .value {
        display: inline-block;
-        vertical-align: top;
      }
      .gr-form-styles .title {
        color: #666;
@@ -37,19 +43,77 @@ limitations under the License.
        padding-right: .5em;
        width: 11em;
      }
-      .gr-form-styles input {
-        font-size: 1em;
-      }
      .gr-form-styles iron-autogrow-textarea {
        font-size: 1em;
      }
      .gr-form-styles th {
        color: #666;
        text-align: left;
+        vertical-align: bottom;
+      }
+      .gr-form-styles td,
+      .gr-form-styles tfoot th {
+        height: 2em;
+        vertical-align: middle;
+      }
+      .gr-form-styles .emptyHeader {
+        text-align: right;
      }
      .gr-form-styles tbody tr:nth-child(even) {
        background-color: #f4f4f4;
      }
+      .gr-form-styles table {
+        width: 50em;
+      }
+      .gr-form-styles th:first-child,
+      .gr-form-styles td:first-child {
+        width: 11em;
+      }
+      .gr-form-styles th:first-child input,
+      .gr-form-styles td:first-child input {
+        width: 10em;
+      }
+      .gr-form-styles input:not([type="checkbox"]),
+      .gr-form-styles select,
+      .gr-form-styles textarea {
+        border: 1px solid #d1d2d3;
+        border-radius: 2px;
+        font-size: 1em;
+        height: 2em;
+        padding: 0 .15em;
+      }
+      .gr-form-styles gr-button:not([link]) {
+        height: 2.2em;
+      }
+      .gr-form-styles td:last-child {
+        width: 5em;
+      }
+      .gr-form-styles th:last-child gr-button,
+      .gr-form-styles td:last-child gr-button {
+        width: 100%;
+      }
+      .gr-form-styles iron-autogrow-textarea {
+        border: none;
+        height: auto;
+        min-height: 2em;
+        --iron-autogrow-textarea: {
+          border: 1px solid #d1d2d3;
+          border-radius: 2px;
+          font-size: 1em;
+          padding: .25em .15em 0 .15em;
+        }
+      }
+      .gr-form-styles gr-autocomplete {
+        border: none;
+        --gr-autocomplete: {
+          border: 1px solid #d1d2d3;
+          border-radius: 2px;
+          font-size: 1em;
+          height: 2em;
+          padding: 0 .15em;
+          width: 10em;
+        }
+      }
      @media only screen and (max-width: 40em) {
        .gr-form-styles section {
          margin-bottom: 1em;
@@ -58,6 +122,9 @@ limitations under the License.
        .gr-form-styles .value {
          display: block;
        }
+        .gr-form-styles table {
+          width: 100%;
+        }
      }
    </style>
  </template>