Merge "Fix box-shadow of collapsed commit message"
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 90d9997..02b017b 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -190,10 +190,6 @@
height: 0;
margin-bottom: var(--spacing-l);
}
- #commitMessage.collapsed {
- max-height: 36em;
- overflow: hidden;
- }
#relatedChanges.collapsed {
margin-bottom: var(--spacing-l);
max-height: var(--relation-chain-max-height, 2em);
@@ -449,12 +445,13 @@
</div>
<div
id="commitMessage"
- class$="commitMessage [[_computeCommitClass(_commitCollapsed, _latestCommitMessage)]]">
+ class="commitMessage">
<gr-editable-content id="commitMessageEditor"
editing="[[_editingCommitMessage]]"
content="{{_latestCommitMessage}}"
storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]"
- remove-zero-width-space>
+ remove-zero-width-space
+ collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]">
<gr-linked-text pre
content="[[_latestCommitMessage]]"
config="[[_projectConfig.commentlinks]]"
@@ -477,7 +474,7 @@
<div
id="commitCollapseToggle"
class="collapseToggleContainer"
- hidden$="[[_computeCommitToggleHidden(_latestCommitMessage)]]">
+ hidden$="[[!_commitCollapsible]]">
<gr-button
link
id="commitCollapseToggleButton"
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 10f575b..7536c2c 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
@@ -184,7 +184,8 @@
_hideEditCommitMessage: {
type: Boolean,
computed: '_computeHideEditCommitMessage(_loggedIn, ' +
- '_editingCommitMessage, _change, _editMode)',
+ '_editingCommitMessage, _change, _editMode, _commitCollapsed, ' +
+ '_commitCollapsible)',
},
_diffAgainst: String,
/** @type {?string} */
@@ -243,10 +244,16 @@
computed:
'_computeChangeStatusChips(_change, _mergeable, _submitEnabled)',
},
+ /** If false, then the "Show more" button was used to expand. */
_commitCollapsed: {
type: Boolean,
value: true,
},
+ /** Is the "Show more/less" button visible? */
+ _commitCollapsible: {
+ type: Boolean,
+ computed: '_computeCommitCollapsible(_latestCommitMessage)',
+ },
_relatedChangesCollapsed: {
type: Boolean,
value: true,
@@ -543,10 +550,12 @@
return this.changeStatuses(change, options);
}
- _computeHideEditCommitMessage(loggedIn, editing, change, editMode) {
+ _computeHideEditCommitMessage(
+ loggedIn, editing, change, editMode, collapsed, collapsible) {
if (!loggedIn || editing ||
(change && change.status === this.ChangeStatus.MERGED) ||
- editMode) {
+ editMode ||
+ (collapsed && collapsible)) {
return true;
}
@@ -1589,9 +1598,8 @@
return 'Change ' + changeNum;
}
- _computeCommitClass(collapsed, commitMessage) {
- if (this._computeCommitToggleHidden(commitMessage)) { return ''; }
- return collapsed ? 'collapsed' : '';
+ _computeCommitMessageCollapsed(collapsed, collapsible) {
+ return collapsible && collapsed;
}
_computeRelatedChangesClass(collapsed) {
@@ -1628,9 +1636,9 @@
}
}
- _computeCommitToggleHidden(commitMessage) {
- if (!commitMessage) { return true; }
- return commitMessage.split('\n').length < MIN_LINES_FOR_COMMIT_COLLAPSE;
+ _computeCommitCollapsible(commitMessage) {
+ if (!commitMessage) { return false; }
+ return commitMessage.split('\n').length >= MIN_LINES_FOR_COMMIT_COLLAPSE;
}
_getOffsetHeight(element) {
@@ -1658,8 +1666,6 @@
// bottom margin.
const EXTRA_HEIGHT = 30;
let newHeight;
- const hasCommitToggle =
- !this._computeCommitToggleHidden(this._latestCommitMessage);
if (window.matchMedia(`(max-width: ${BREAKPOINT_RELATED_SMALL})`)
.matches) {
@@ -1678,7 +1684,7 @@
MINIMUM_RELATED_MAX_HEIGHT);
newHeight = medRelatedHeight;
} else {
- if (hasCommitToggle) {
+ if (this._commitCollapsible) {
// Make sure the content is lined up if both areas have buttons. If
// the commit message is not collapsed, instead use the change info
// height.
@@ -1701,7 +1707,7 @@
stylesToUpdate['--relation-chain-max-height'] = newHeight + 'px';
// Update the max-height of the relation chain to this new height.
- if (hasCommitToggle) {
+ if (this._commitCollapsible) {
stylesToUpdate['--related-change-btn-top-padding'] = remainder + 'px';
}
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
index 9c23d0e..1ef79cf 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
@@ -1238,14 +1238,16 @@
});
test('commitCollapseToggle functions', () => {
- element._latestCommitMessage = _.times(31, String).join('\n');
+ element._latestCommitMessage = _.times(35, String).join('\n');
assert.isTrue(element._commitCollapsed);
+ assert.isTrue(element._commitCollapsible);
assert.isTrue(
- element.$.commitMessage.classList.contains('collapsed'));
+ element.$.commitMessageEditor.hasAttribute('collapsed'));
MockInteractions.tap(element.$.commitCollapseToggleButton);
assert.isFalse(element._commitCollapsed);
+ assert.isTrue(element._commitCollapsible);
assert.isFalse(
- element.$.commitMessage.classList.contains('collapsed'));
+ element.$.commitMessageEditor.hasAttribute('collapsed'));
});
});
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
index 69c280b..627f948 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.html
@@ -38,6 +38,10 @@
box-shadow: var(--elevation-level-1);
padding: var(--spacing-m);
}
+ :host([collapsed]) .viewer {
+ max-height: 36em;
+ overflow: hidden;
+ }
.editor iron-autogrow-textarea {
background-color: var(--view-background-color);
width: 100%;
