Merge "Add polygerrit-ui/app/test/common-test-setup.html"
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
index e45e514..358340d 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
@@ -396,7 +396,11 @@
},
_handleReplyOverlayOpen(e) {
- this.$.replyDialog.focus();
+ // This is needed so that focus is not set on the reply overlay
+ // when the suggestion overaly from gr-autogrow-textarea opens.
+ if (e.target === this.$.replyOverlay) {
+ this.$.replyDialog.focus();
+ }
},
_handleReplySent(e) {
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
index c77689d..eadf667 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
@@ -22,6 +22,7 @@
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.html">
<link rel="import" href="../../shared/gr-account-chip/gr-account-chip.html">
+<link rel="import" href="../../shared/gr-textarea/gr-textarea.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
<link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html">
@@ -92,28 +93,15 @@
font-style: italic;
}
.textareaContainer {
- display: flex;
- flex: 1;
min-height: 6em;
position: relative;
}
- .textareaContainer > * {
- flex: 1;
- }
- iron-autogrow-textarea {
- padding: 0;
- font-family: var(--monospace-font-family);
- }
.previewContainer gr-formatted-text {
background: #f6f6f6;
max-height: 20vh;
overflow-y: scroll;
padding: 1em;
}
- .message {
- border: none;
- width: 100%;
- }
.draftsContainer {
flex: 1;
overflow-y: auto;
@@ -208,17 +196,20 @@
</section>
<section class="textareaContainer">
<gr-endpoint-decorator name="reply-text">
- <iron-autogrow-textarea
+ <gr-textarea
id="textarea"
class="message"
autocomplete="on"
placeholder=[[_messagePlaceholder]]
+ fixed-position-dropdown
+ hide-border="true"
+ monospace="true"
disabled="{{disabled}}"
rows="4"
max-rows="15"
- bind-value="{{draft}}"
+ text="{{draft}}"
on-bind-value-changed="_handleHeightChanged">
- </iron-autogrow-textarea>
+ </gr-textarea>
</gr-endpoint-decorator>
</section>
<section class="previewContainer">
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js
index 7f0e7d1..276e729 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.js
@@ -387,7 +387,8 @@
}
if (section === FocusTarget.BODY) {
const textarea = this.$.textarea;
- textarea.async(textarea.textarea.focus.bind(textarea.textarea));
+ textarea.async(textarea.getNativeTextarea()
+ .focus.bind(textarea.getNativeTextarea()));
} else if (section === FocusTarget.REVIEWERS) {
const reviewerEntry = this.$.reviewers.focusStart;
reviewerEntry.async(reviewerEntry.focus);
@@ -561,6 +562,7 @@
cancel() {
this.fire('cancel', null, {bubbles: false});
+ this.$.textarea.closeDropdown();
this._purgeReviewersPendingRemove(true);
this._rebuildReviewerArrays(this.change.reviewers, this._owner,
this.serverConfig);
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
index 110f09d..695e2b3 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
@@ -40,13 +40,13 @@
padding: 2px;
};
}
- :host[disabled] {
+ :host([disabled]) {
pointer-events: none;
}
- :host[disabled] .container {
+ :host([disabled]) .container {
opacity: .5;
}
- :host[is-robot-comment] {
+ :host([is-robot-comment]) {
background-color: #cfe8fc;
}
.header {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
index b069cb4..99a7054 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
@@ -28,7 +28,7 @@
:host {
display: block;
}
- :host[disabled] {
+ :host([disabled]) {
opacity: .5;
pointer-events: none;
}
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index 687c462..d101fea 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -35,10 +35,10 @@
--light-add-highlight-color: #efe;
--dark-add-highlight-color: rgba(0, 255, 0, 0.15);
}
- :host.no-left .sideBySide ::content .left,
- :host.no-left .sideBySide ::content .left + td,
- :host.no-left .sideBySide ::content .right:not([data-value]),
- :host.no-left .sideBySide ::content .right:not([data-value]) + td {
+ :host(.no-left) .sideBySide ::content .left,
+ :host(.no-left) .sideBySide ::content .left + td,
+ :host(.no-left) .sideBySide ::content .right:not([data-value]),
+ :host(.no-left) .sideBySide ::content .right:not([data-value]) + td {
display: none;
}
.diffContainer {
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
index 390778d..eb5c3ed 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
@@ -41,7 +41,7 @@
font: inherit;
padding: .3em 0;
}
- :host[down-arrow] .dropdown-trigger {
+ :host([down-arrow]) .dropdown-trigger {
padding-right: 1.4em;
}
gr-avatar {
@@ -85,7 +85,7 @@
font-weight: bold;
}
:host:not([down-arrow]) .downArrow { display: none; }
- :host[down-arrow] .downArrow {
+ :host([down-arrow]) .downArrow {
border-left: .36em solid transparent;
border-right: .36em solid transparent;
border-top: .36em solid #ccc;
diff --git a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.html b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.html
index 42ec18e..28a9e0e 100644
--- a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.html
+++ b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.html
@@ -35,10 +35,10 @@
blockquote {
max-width: var(--gr-formatted-text-prose-max-width, none);
}
- :host.noTrailingMargin p:last-child,
- :host.noTrailingMargin ul:last-child,
- :host.noTrailingMargin blockquote:last-child,
- :host.noTrailingMargin gr-linked-text.pre:last-child {
+ :host(.noTrailingMargin) p:last-child,
+ :host(.noTrailingMargin) ul:last-child,
+ :host(.noTrailingMargin) blockquote:last-child,
+ :host(.noTrailingMargin) gr-linked-text.pre:last-child {
margin: 0;
}
blockquote {
@@ -46,6 +46,7 @@
padding: 0 .7em;
}
li {
+ list-style-type: disc;
margin-left: 1.4em;
}
gr-linked-text.pre {
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js
index 9158a57..add4b6f 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js
@@ -64,6 +64,7 @@
text: {
type: String,
notify: true,
+ observer: '_handleTextChanged',
},
backgroundColor: {
type: String,
@@ -316,5 +317,10 @@
this._colonIndex = null;
this.$.textarea.textarea.focus();
},
+
+ _handleTextChanged(text) {
+ this.dispatchEvent(
+ new CustomEvent('value-changed', {detail: {value: text}}));
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
index 8d57be7..e79fb19 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -28,11 +28,13 @@
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
color: #fff;
font-size: .75rem;
- padding: .5em .85em;
position: absolute;
z-index: 1000;
max-width: var(--tooltip-max-width);
}
+ :host .tooltip {
+ padding: .5em .85em;
+ }
.arrow {
border-left: var(--gr-tooltip-arrow-size) solid transparent;
border-right: var(--gr-tooltip-arrow-size) solid transparent;
@@ -45,8 +47,10 @@
width: 0;
}
</style>
- [[text]]
- <i class="arrow"></i>
+ <div class="tooltip">
+ [[text]]
+ <i class="arrow"></i>
+ </div>
</template>
<script src="gr-tooltip.js"></script>
</dom-module>
