Changes to diff view for mobile

- Hide download link and file web links from patchsets.
- Add a full file path.
- Change next/prev buttons to be arrows on either side of full path
- Change subheader to flex/wrap so that the display mode wraps to the
next line instead of the second patch set item.

Bug: Issue 5114
Change-Id: Iefb8afe9d7e2417f8aa2070e52073708c052fa4f

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html

@@ -59,7 +59,7 @@ limitations under the License.
       .jumpToFileContainer {
         display: inline-block;
       }
-      .mobileJumpToFileContainer {
+      .mobile {
         display: none;
       }
       .downArrow {
@@ -113,27 +113,46 @@ limitations under the License.
         color: #666;
       }
       .subHeader {
+        flex-wrap: wrap;
         margin: 0 var(--default-horizontal-margin) .75em;
       }
+      .subHeader > div {
+        margin-top: .25em;
+      }
       .prefsButton {
         text-align: right;
       }
-      #modeSelect {
-        margin-left: .5em;
-      }
       .separator {
         margin: 0 .25em;
       }
       @media screen and (max-width: 50em) {
+        header {
+          padding: .5em var(--default-horizontal-margin);
+        }
         .dash {
           display: none;
         }
+        .desktop {
+          display: none;
+        }
+        .fileNav {
+          align-items: flex-start;
+          display: flex;
+          margin: 0 .25em;
+        }
+        .fullFileName {
+          display: block;
+          font-size: .9em;
+          font-style: italic;
+          min-width: 50%;
+          padding: 0 .1em;
+          text-align: center;
+          width: 100%;
+          word-wrap: break-word;
+        }
         .reviewed {
           vertical-align: -.1em;
         }
-        .jumpToFileContainer {
-          display: none;
-        }
         .mobileJumpToFileContainer {
           display: block;
           width: 100%;
@@ -141,6 +160,15 @@ limitations under the License.
         .mobileJumpToFileContainer select {
           width: 100%;
         }
+        .mobileNavLink {
+          color: #000;
+          font-size: 1.5em;
+          font-weight: bold;
+          text-decoration: none;
+        }
+        .mobileNavLink:not([href]) {
+          color: #bbb;
+        }
       }
     </style>
     <header>
@@ -154,7 +182,7 @@ limitations under the License.
                type="checkbox"
                on-change="_handleReviewedChange"
                hidden$="[[!_loggedIn]]" hidden>
-        <div class="jumpToFileContainer">
+        <div class="jumpToFileContainer desktop">
           <gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
             <span>[[_computeFileDisplayName(_path)]]</span>
             <span class="downArrow">&#9660;</span>
@@ -177,7 +205,7 @@ limitations under the License.
             </div>
           </iron-dropdown>
         </div>
-        <div class="mobileJumpToFileContainer">
+        <div class="mobileJumpToFileContainer mobile">
           <select on-change="_handleMobileSelectChange">
             <template is="dom-repeat" items="[[_fileList]]" as="path">
               <option
@@ -189,7 +217,7 @@ limitations under the License.
           </select>
         </div>
       </h3>
-      <div>
+      <div class="navLinks desktop">
         <a class="navLink"
            href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]">Prev</a>
         /
@@ -209,11 +237,13 @@ limitations under the License.
               available-patches="[[_computeAvailablePatches(_change.revisions)]]"
               revisions="[[_change.revisions]]">
           </gr-patch-range-select>
-          <span class="separator">/</span>
+          <span class="download desktop">
-          <a class="downloadLink"
+            <span class="separator">/</span>
-             href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
+            <a class="downloadLink"
-            Download
+               href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
-          </a>
+              Download
+            </a>
+          </span>
         </div>
         <div>
           <select
@@ -225,11 +255,13 @@ limitations under the License.
             <option value="UNIFIED_DIFF">Unified</option>
           </select>
           <span hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]">
-            <span
+            <span class="preferences desktop">
-                hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
+              <span
-            <gr-button link
+                  hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
-                class="prefsButton"
+              <gr-button link
-                on-tap="_handlePrefsTap">Preferences</gr-button>
+                  class="prefsButton"
+                  on-tap="_handlePrefsTap">Preferences</gr-button>
+            </span>
           </span>
         </div>
       </div>
@@ -241,6 +273,14 @@ limitations under the License.
             on-save="_handlePrefsSave"
             on-cancel="_handlePrefsCancel"></gr-diff-preferences>
       </gr-overlay>
+      <div class="fileNav mobile">
+        <a class="mobileNavLink"
+           href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]"><</a>
+        <div class="fullFileName mobile">[[_computeFileDisplayName(_path)]]
+        </div>
+        <a class="mobileNavLink"
+            href$="[[_computeNavLinkURL(_path, _fileList, 1, 1)]]">></a>
+      </div>
       <gr-diff
           id="diff"
           project="[[_change.project]]"

polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html

@@ -28,7 +28,15 @@ limitations under the License.
         display: inline-block;
       }
       select {
-        max-width: 8em;
+        max-width: 15em;
+      }
+      @media screen and (max-width: 50em) {
+        .filesWeblinks {
+          display: none;
+        }
+        select {
+          max-width: 5.25em;
+        }
       }
     </style>
     Patch set:
@@ -45,7 +53,7 @@ limitations under the License.
         </template>
       </select>
     </span>
-    <span is="dom-if" if="[[filesWeblinks.meta_a]]">
+    <span is="dom-if" if="[[filesWeblinks.meta_a]]" class="filesWeblinks">
       <template is="dom-repeat" items="[[filesWeblinks.meta_a]]" as="weblink">
         <a target="_blank"
            href$="[[weblink.url]]">[[weblink.name]]</a>
@@ -63,7 +71,7 @@ limitations under the License.
           </option>
         </template>
       </select>
-      <span is="dom-if" if="[[filesWeblinks.meta_b]]">
+      <span is="dom-if" if="[[filesWeblinks.meta_b]]" class="filesWeblinks">
         <template is="dom-repeat" items="[[filesWeblinks.meta_b]]" as="weblink">
           <a target="_blank"
              href$="[[weblink.url]]">[[weblink.name]]</a>

polygerrit-ui/app/styles/app-theme.html

@@ -28,4 +28,9 @@ limitations under the License.
     transition: none;
   };
 }
+@media screen and (max-width: 50em) {
+  :root {
+    --default-horizontal-margin: .7rem;
+  }
+}
 </style>