Restyle download dialog
Moves close button to the bottom, adds borders like other dialogs.
Bug: Issue 8884
Change-Id: I12adab48151f12f5dc7db2e1a992ea23d25f5e22
diff --git a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html
index 9085971..545d170 100644
--- a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.html
@@ -28,21 +28,32 @@
: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 @@
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 @@
</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>
diff --git a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.js b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.js
index fa3e5c9..20449b0 100644
--- a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog.js
+++ b/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';
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_test.html b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_test.html
index 84fe8a9..19932c5 100644
--- a/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_test.html
+++ b/polygerrit-ui/app/elements/change/gr-download-dialog/gr-download-dialog_test.html
@@ -183,5 +183,10 @@
MockInteractions.tap(element.$$('.closeButtonContainer gr-button'));
});
});
+
+ test('_computeShowDownloadCommands', () => {
+ assert.equal(element._computeShowDownloadCommands([]), 'hidden');
+ assert.equal(element._computeShowDownloadCommands(['test']), '');
+ });
});
</script>
diff --git a/polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html b/polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html
index 7570533..440a6e3 100644
--- a/polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html
+++ b/polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html
@@ -55,8 +55,6 @@
.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 {
