Introduce responsive layout media queries and clean up gr-diff-view a bit

This also re-introduces app-theme.html that we will use for general color choices and any other CSS vars that should be shared. In the future it should be separated into two different files: one for theming and one for UI layout that we'd prefer users not to change. The use of ems and rems is for the responsive layout. In the case that the font size changes as a result of the window changing size, the margins/padding should be relative to that font size, not absolute. Not everything was fixed to be relative sizing. That will come in a further change as the UI is more fleshed out. Change-Id: I5a0e7cb6e46a4ca4e1ea52c71c9b7c75f1b42608
2015-11-22 16:56:50 -05:00 · 2015-11-22 16:56:50 -05:00 · 64ad58f19f
commit 64ad58f19f
parent 80bde79e0d
12 changed files with 154 additions and 76 deletions
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@ -15,6 +15,7 @@ limitations under the License.
 -->

 <link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../styles/app-theme.html">
 <link rel="import" href="gr-change-list-view.html">
 <link rel="import" href="gr-change-view.html">
 <link rel="import" href="gr-diff-view.html">
@ -24,6 +25,7 @@ limitations under the License.
  <template>
    <style>
      :host {
+        background-color: var(--secondary-color);
        display: flex;
        min-height: 100vh;
        flex-direction: column;
@ -35,8 +37,9 @@ limitations under the License.
      }
      header,
      footer {
-        background-color: #eee;
-        padding: 10px 20px;
+        background-color: var(--primary-color);
+        color: var(--primary-text-color);
+        padding: .5rem 1.25rem;
      }
      header {
        display: flex;
@ -44,11 +47,10 @@ limitations under the License.
      }
      main {
        flex: 1;
-        padding: 20px 0;
      }
      .bigTitle {
-        color: #000;
-        font-size: 24px;
+        color: var(--primary-text-color);
+        font-size: 1.75em;
        text-decoration: none;
      }
      .bigTitle:hover {
--- a/polygerrit-ui/app/elements/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/gr-change-list-item.html
@ -23,31 +23,36 @@ limitations under the License.
      :host {
        display: table-row;
      }
+      :host([selected]) {
+        background-color: #d8EdF9;
+      }
      th, td {
        border-bottom: 1px solid #eee;
-        padding: 2px 5px;
+        padding: .3em .5em;
        vertical-align: top;
      }
      th {
-        background: #eee;
+        background: #ddd;
        text-align: left;
      }
      a {
-        color: #000;
+        color: var(--default-text-color);
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .positionIndicator {
-        opacity: .1;
        visibility: hidden;
      }
+      :host([selected]) .positionIndicator {
+        visibility: visible;
+      }
      .avatarImage {
        border-radius: 50%;
-        height: 16px;
-        vertical-align: -3px;
-        width: 16px;
+        height: 1.3em;
+        vertical-align: -.3em;
+        width: 1.3em;
      }
      .u-monospace {
        font-family: 'Source Code Pro';
--- a/polygerrit-ui/app/elements/gr-change-list-view.html
+++ b/polygerrit-ui/app/elements/gr-change-list-view.html
@ -22,21 +22,24 @@ limitations under the License.
  <template>
    <style>
      :host {
+        background-color: var(--view-background-color);
        display: block;
+        margin: 0 1.25rem;
      }
      gr-change-list {
-        margin: 0 20px;
-        width: calc(100% - 40px);
+        margin-top: 1em;
+        width: 100%;
      }
      nav {
-        padding: 10px 0;
+        margin-bottom: 1em;
+        padding: .5em 0;
        text-align: center;
      }
      nav a {
        display: inline-block;
      }
      nav a:first-of-type {
-        margin-right: 10px;
+        margin-right: .5em;
      }
      [hidden] {
        display: none !important;
--- a/polygerrit-ui/app/elements/gr-change-list.html
+++ b/polygerrit-ui/app/elements/gr-change-list.html
@ -23,18 +23,8 @@ limitations under the License.
    <style>
      :host {
        display: table;
-        border: 1px solid #eee;
        border-collapse: collapse;
      }
-      :host:focus gr-change-list-item[selected]::shadow {
-        background-color: #d8EdF9;
-      }
-      :host gr-change-list-item[selected]::shadow .positionIndicator {
-        visibility: visible;
-      }
-      :host:focus gr-change-list-item[selected]::shadow .positionIndicator {
-        opacity: 1;
-      }
    </style>

    <iron-a11y-keys
--- a/polygerrit-ui/app/elements/gr-change-view.html
+++ b/polygerrit-ui/app/elements/gr-change-view.html
@ -24,15 +24,19 @@ limitations under the License.
  <template>
    <style>
      :host {
+        background-color: var(--view-background-color);
        display: block;
      }
      .container {
-        margin: 0 20px;
+        margin: 1em 0;
+        padding-top: 1em;
      }
-      .changeInfo,
-      .summary {
+      h2 {
+        padding: 0 var(--default-horizontal-margin);
+      }
+      section {
        margin: 10px 0;
-        padding: 10px 0;
+        padding: 10px var(--default-horizontal-margin);
      }
      table {
        border-collapse: collapse;
@ -45,16 +49,15 @@ limitations under the License.
        font-weight: bold;
        text-align: right;
      }
-      .summary {
-        font-family: 'Source Code Pro', Menlo, 'Lucida Console', Monaco, monospace;
-        margin: 10px 0;
-        overflow-x: auto;
-        padding: 10px 0;
-        white-space: pre-wrap;
-      }
      .summary {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
+        font-family: 'Source Code Pro', Menlo, 'Lucida Console', Monaco, monospace;
+        overflow-x: auto;
+        white-space: pre-wrap;
+      }
+      gr-file-list {
+        padding: 0 var(--default-horizontal-margin) 10px;
      }
    </style>
    <iron-ajax id="detailXHR"
@ -69,10 +72,10 @@ limitations under the License.

    <div class="container">
      <h2>
-         <a href$="[[_computeChangePath(change._number)]]">[[change._number]]</a><span>:</span>
-         <span>[[change.subject]]</span>
+        <a href$="[[_computeChangePath(change._number)]]">[[change._number]]</a><span>:</span>
+        <span>[[change.subject]]</span>
      </h2>
-      <div class="changeInfo">
+      <section class="changeInfo">
        <table>
          <tr>
            <td class="changeInfo-label">Owner</td>
@ -112,8 +115,8 @@ limitations under the License.
            </td>
          </tr>
        </table>
-      </div>
-      <div class="summary">[[_computeCurrentRevisionMessage(change)]]</div>
+      </section>
+      <section class="summary">[[_computeCurrentRevisionMessage(change)]]</section>
      <gr-file-list change-num="[[changeNum]]"
                    patch-num="[[_computePatchNum(change.current_revision)]]"
                    revision="[[change.current_revision]]"
--- a/polygerrit-ui/app/elements/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/gr-diff-view.html
@ -21,16 +21,16 @@ limitations under the License.
  <template>
    <style>
      :host {
+        background-color: var(--view-background-color);
        display: block;
+        margin: 1em 1.25rem;
      }
      h3 {
-        border-bottom: 1px solid #ddd;
-        margin: 0 20px 20px 20px;
-        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
+        padding: .75em 1em;
      }
      .mainContainer {
-        margin: 0 auto;
-        max-width: calc(100% - 40px);
+        max-width: 100%;
        overflow: auto;
      }
      .diffContainer {
@ -39,14 +39,27 @@ limitations under the License.
        white-space: pre;
      }
      .diffNumbers {
-        border-right: 1px solid #eee;
-        color: #aaa;
-        padding: 0 10px;
+        background-color: #ddd;
+        color: #666;
+        padding: 0 .75em;
        text-align: right;
      }
      .diffContent {
-        min-width: 80ch;
+        border-right: 1px solid #ddd;
+        min-width: calc(80ch + 2px);
+        overflow-x: auto;
        padding-left: 2px;
+        width: calc(80ch + 2px);
+      }
+      .diffContainer.leftOnly .diffContent,
+      .diffContainer.rightOnly .diffContent {
+        overflow: visible;
+      }
+      .diffContainer.leftOnly .right {
+        display: none;
+      }
+      .diffContainer.rightOnly .left {
+        display: none;
      }
      .ruler {
        display: block;
@ -114,14 +127,14 @@ limitations under the License.
        on-response="_handleRightCommentsResponse"></iron-ajax>
    <h3>
      <a href$="[[_computeChangePath(_changeNum)]]">[[_changeNum]]</a><span>:</span>
-      <span>[[_change.subject]]</span>
+      <span>[[_change.subject]]</span> — <span>[[params.path]]</span>
    </h3>
    <div class="mainContainer">
      <div class="diffContainer" id="diffContainer">
-        <div class="diffNumbers" id="leftDiffNumbers"></div>
-        <div class="diffContent" id="leftDiffContent"></div>
-        <div class="diffNumbers" id="rightDiffNumbers"></div>
-        <div class="diffContent" id="rightDiffContent"></div>
+        <div class="diffNumbers left" id="leftDiffNumbers"></div>
+        <div class="diffContent left" id="leftDiffContent"></div>
+        <div class="diffNumbers right" id="rightDiffNumbers"></div>
+        <div class="diffContent right" id="rightDiffContent"></div>
      </div>
    </div>
  </template>
@ -157,7 +170,7 @@ limitations under the License.
      },

      listeners: {
-        'diffContainer.tap': '_diffContainerTapHandler'
+        'diffContainer.tap': '_diffContainerTapHandler',
      },

      _paramsChanged: function(value) {
@ -345,6 +358,12 @@ limitations under the License.
        if (!diff || !diff.content) { return; }
        if (this._basePatchNum && leftComments == null) { return; }
        if (rightComments == null) { return; }
+
+        this.$.diffContainer.classList.toggle('rightOnly',
+            diff.change_type == Changes.DiffType.ADDED);
+        this.$.diffContainer.classList.toggle('leftOnly',
+            diff.change_type == Changes.DiffType.REMOVED);
+
        var initialLineNum = 0 + (diff.content.skip || 0);
        var ctx = {
          rowNum: 0,
@ -509,11 +528,12 @@ limitations under the License.

      _createElement: function(tagName, className) {
        var el = document.createElement(tagName);
-        // These classes are added to account for Polymer's polyfill behavior.
-        // In order to guarantee sufficient specificity within the CSS rules,
-        // these are added to every element. Since the Polymer DOM utility
-        // functions (which would do this automatically) are not being used for
-        // performance reasons, this is done manually.
+        // When Shady DOM is being used, these classes are added to account for
+        // Polymer's polyfill behavior. In order to guarantee sufficient
+        // specificity within the CSS rules, these are added to every element.
+        // Since the Polymer DOM utility functions (which would do this
+        // automatically) are not being used for performance reasons, this is
+        // done manually.
        el.className = 'style-scope gr-diff-view ' + className;
        return el;
      },
--- a/polygerrit-ui/app/elements/gr-message.html
+++ b/polygerrit-ui/app/elements/gr-message.html
@ -42,15 +42,15 @@ limitations under the License.
        padding: 7px 0 10px;
      }
      .expanded .contentContainer {
-        margin-left: 45px;
+        margin-left: calc(var(--default-horizontal-margin) + 25px);
      }
      .collapsed .contentContainer {
        color: #777;
-        margin-left: 35px;
+        margin-left: calc(var(--default-horizontal-margin) + 15px);
      }
      .avatar {
        position: absolute;
-        left: 0;
+        left: var(--default-horizontal-margin);
      }
      .collapsed .avatar {
        top: 8px;
@ -59,12 +59,12 @@ limitations under the License.
        top: 10px;
      }
      .collapsed .avatar {
-        height: 25px;
-        width: 25px;
+        height: 1.75em;
+        width: 1.75em;
      }
      .expanded .avatar {
-        height: 35px;
-        width: 35px;
+        height: 2.5em;
+        width: 2.5em;
      }
      .name {
        font-weight: bold;
@ -79,7 +79,7 @@ limitations under the License.
      }
      .collapsed .name,
      .collapsed gr-date-formatter {
-        color: #000;
+        color: var(--default-text-color);
      }
      .expanded .name {
        cursor: pointer;
@ -90,7 +90,7 @@ limitations under the License.
      }
      gr-date-formatter {
        position: absolute;
-        right: 0;
+        right: var(--default-horizontal-margin);
        top: 10px;
      }
      .file {
--- a/polygerrit-ui/app/elements/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/gr-messages-list.html
@ -24,7 +24,11 @@ limitations under the License.
        display: block;
      }
      h3 {
-        margin: 20px 0 5px;
+        margin-bottom: .35em;
+      }
+      h3,
+      gr-message {
+        padding: 0 var(--default-horizontal-margin);
      }
    </style>
    <h3>Messages</h3>
--- a/polygerrit-ui/app/elements/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/gr-search-bar.html
@ -25,13 +25,13 @@ limitations under the License.
      }
      form {
        display: flex;
+        margin-left: 3em;
      }
      input,
      button {
        border: 1px solid #aaa;
-        font-family: inherit;
-        font-size: 14px;
-        padding: 2px 5px;
+        font: inherit;
+        padding: .2em .5em;
      }
      input {
        flex: 1;
--- a/polygerrit-ui/app/scripts/changes.js
+++ b/polygerrit-ui/app/scripts/changes.js
@ -16,6 +16,15 @@

 var Changes = Changes || {};

+Changes.DiffType = {
+  ADDED: 'ADDED',
+  COPIED: 'COPIED',
+  DELETED: 'DELETED',
+  MODIFIED: 'MODIFIED',
+  RENAMED: 'RENAMED',
+  REWRITE: 'REWRITE',
+};
+
 // Must be kept in sync with the ListChangesOption enum and protobuf.
 Changes.ListChangesOption = {
  LABELS: 0,
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@ -0,0 +1,26 @@
+<!--
+Copyright (C) 2015 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.
+-->
+<style is="custom-style">
+:root {
+  --primary-color: #fff;
+  --primary-text-color: #000;
+  --search-border-color: #ddd;
+  --secondary-color: #f1f2f3;
+  --default-text-color: #000;
+  --view-background-color: #fff;
+  --default-horizontal-margin: 1.25rem;
+}
+</style>
--- a/polygerrit-ui/app/styles/main.css
+++ b/polygerrit-ui/app/styles/main.css
@ -30,5 +30,21 @@ body {
  transition: none; /* Override the default Polymer fade-in. */
 }
 body {
-  font: 14px 'Open Sans', sans-serif;
+  font: 11px 'Open Sans', sans-serif;
+}
+
+@media only screen and (min-width: 1240px) {
+  body {
+    font-size: 12px;
+  }
+}
+@media only screen and (min-width: 1340px) {
+  body {
+    font-size: 13px;
+  }
+}
+@media only screen and (min-width: 1450px) {
+  body {
+    font-size: 14px;
+  }
 }