Tweaks to the reply dialog to make it usable with drafts
+ Re-center once drafts have been loaded.
+ Clamp the drafts section so that it scrolls and doesn't
push the action buttons off screen.
+ Allow the dialog a bit more width if it needs it.
+ Set a max-height of 90vh.
Change-Id: Ifae6d1ccfadcae38a3907c55bf3bab6e906a0472
diff --git a/polygerrit-ui/app/elements/gr-change-view.html b/polygerrit-ui/app/elements/gr-change-view.html
index b8d8bfd..05eb709 100644
--- a/polygerrit-ui/app/elements/gr-change-view.html
+++ b/polygerrit-ui/app/elements/gr-change-view.html
@@ -87,7 +87,8 @@
margin-left: var(--default-horizontal-margin);
}
gr-reply-dialog {
- width: 30em;
+ min-width: 30em;
+ max-width: 50em;
}
.changeStatus {
color: #999;
@@ -170,6 +171,7 @@
margin-top: .5em;
}
gr-reply-dialog {
+ min-width: initial;
width: 90vw;
}
.download {
@@ -447,7 +449,9 @@
},
_handleReplyOverlayOpen: function(e) {
- this.$.replyDialog.reload();
+ this.$.replyDialog.reload().then(function() {
+ this.async(function() { this.$.replyOverlay.center() }, 1);
+ }.bind(this));
this.$.replyDialog.focus();
},
diff --git a/polygerrit-ui/app/elements/gr-reply-dialog.html b/polygerrit-ui/app/elements/gr-reply-dialog.html
index ed01928..ead001a 100644
--- a/polygerrit-ui/app/elements/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/gr-reply-dialog.html
@@ -26,6 +26,7 @@
<style>
:host {
display: block;
+ max-height: 90vh;
}
:host([disabled]) {
pointer-events: none;
@@ -33,10 +34,20 @@
:host([disabled]) .container {
opacity: .5;
}
+ .container {
+ display: flex;
+ flex-direction: column;
+ max-height: 90vh;
+ }
section {
border-top: 1px solid #ddd;
padding: .5em .75em;
}
+ .textareaContainer,
+ .labelsContainer,
+ .actionsContainer {
+ flex-shrink: 0;
+ }
.textareaContainer {
position: relative;
}
@@ -74,6 +85,9 @@
iron-selector > gr-button.iron-selected {
background-color: #ddd;
}
+ .draftsContainer {
+ overflow-y: auto;
+ }
.draftsContainer h3 {
margin-top: .25em;
}
@@ -98,9 +112,10 @@
placeholder="Say something..."
disabled="{{disabled}}"
rows="4"
+ max-rows="15"
bind-value="{{draft}}"></iron-autogrow-textarea>
</section>
- <section>
+ <section class="labelsContainer">
<template is="dom-repeat"
items="[[_computeLabelArray(permittedLabels)]]" as="label">
<div class="labelContainer">
@@ -179,7 +194,7 @@
},
reload: function() {
- this.$.draftsXHR.generateRequest();
+ return this.$.draftsXHR.generateRequest().completes;
},
focus: function() {
