Restyle download dialog

Moves close button to the bottom, adds borders like other dialogs.

Bug: Issue 8884
Change-Id: I12adab48151f12f5dc7db2e1a992ea23d25f5e22

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

@@ -28,21 +28,32 @@ limitations under the License.
       :host {
         background-color: var(--dialog-background-color);
         display: block;
-        padding: 1em;
       }
-      header {
+      section {
         display: flex;
+        padding: .5em 1.5em;
       }
-      footer {
+      section:not(:first-of-type) {
+        border-top: 1px solid var(--border-color);
+      }
+      .flexContainer {
         display: flex;
         justify-content: space-between;
         padding-top: .75em;
       }
+      .footer {
+        justify-content: flex-end;
+      }
       .closeButtonContainer {
+        align-items: flex-end;
         display: flex;
         flex: 0;
         justify-content: flex-end;
       }
+      .patchFiles,
+      .archivesContainer {
+        padding-bottom: .5em;
+      }
       .patchFiles {
         margin-right: 2em;
       }
@@ -56,26 +67,26 @@ limitations under the License.
         margin-right: 0;
       }
       .title {
-        text-align: center;
         flex: 1;
+        font-family: var(--font-family-bold);
+      }
+      .hidden {
+        display: none;
       }
     </style>
-    <header>
+    <section>
       <span class="title">
         Patch set [[patchNum]] of [[_computePatchSetQuantity(change.revisions)]]
       </span>
-      <span class="closeButtonContainer">
-        <gr-button id="closeButton"
-            link
-            on-tap="_handleCloseTap">Close</gr-button>
-      </span>
-    </header>
-     <gr-download-commands
+    </section>
+    <section class$="[[_computeShowDownloadCommands(_schemes)]]">
+      <gr-download-commands
           id="downloadCommands"
           commands="[[_computeDownloadCommands(change, patchNum, _selectedScheme)]]"
           schemes="[[_schemes]]"
           selected-scheme="{{_selectedScheme}}"></gr-download-commands>
-    <footer>
+    </section>
+    <section class="flexContainer">
       <div class="patchFiles">
         <label>Patch file</label>
         <div>
@@ -104,7 +115,14 @@ limitations under the License.
           </template>
         </div>
       </div>
-    </footer>
+    </section>
+    <section class="footer">
+      <span class="closeButtonContainer">
+        <gr-button id="closeButton"
+            link
+            on-tap="_handleCloseTap">Close</gr-button>
+      </span>
+    </section>
   </template>
   <script src="gr-download-dialog.js"></script>
 </dom-module>

polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.js

@@ -172,5 +172,9 @@
         this._selectedScheme = schemes.sort()[0];
       }
     },
+
+    _computeShowDownloadCommands(schemes) {
+      return schemes.length ? '' : 'hidden';
+    },
   });
 })();

polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_test.html

@@ -183,5 +183,10 @@ limitations under the License.
         MockInteractions.tap(element.$$('.closeButtonContainer gr-button'));
       });
     });
+
+    test('_computeShowDownloadCommands', () => {
+      assert.equal(element._computeShowDownloadCommands([]), 'hidden');
+      assert.equal(element._computeShowDownloadCommands(['test']), '');
+    });
   });
 </script>

polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html

@@ -55,8 +55,6 @@ limitations under the License.
       .commands {
         display: flex;
         flex-direction: column;
-        border-bottom: 1px solid var(--border-color);
-        border-top: 1px solid var(--border-color);
         padding: .5em;
       }
       gr-copy-clipboard {