opendev/gerrit
Code Issues Proposed changes

Merge "Fix related changes height calculations"

Browse Source
This commit is contained in:
Kasper Nilsson
2017-06-08 21:51:58 +00:00
committed by Gerrit Code Review
parent 397ba31875 b9f149452a
commit eda221c25d
2 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
View File

@@ -1196,9 +1196,8 @@
*/
_updateRelatedChangeMaxHeight() {
// Takes into account approximate height for the expand button and
// bottom margin
const extraHeight = 24;
let maxExistingHeight;
// bottom margin.
const EXTRA_HEIGHT = 30;
let newHeight;
const hasCommitToggle =
!this._computeCommitToggleHidden(this._latestCommitMessage);
@@ -1216,7 +1215,7 @@
// Note: extraHeight is to take into account margin/padding.
const medRelatedHeight = Math.max(
this._getOffsetHeight(this.$.mainChangeInfo) -
this._getOffsetHeight(this.$.commitMessage) - 2 * extraHeight,
this._getOffsetHeight(this.$.commitMessage) - 2 * EXTRA_HEIGHT,
MINIMUM_RELATED_MAX_HEIGHT);
newHeight = medRelatedHeight;
} else {
@@ -1224,29 +1223,30 @@
// 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.
maxExistingHeight = this._getOffsetHeight(this.$.commitMessage);
newHeight = this._getOffsetHeight(this.$.commitMessage);
} else {
maxExistingHeight = this._getOffsetHeight(this.$.mainChangeInfo) -
extraHeight;
}
// Get the line height of related changes, and convert it to the nearest
// integer.
const lineHeight = this._getLineHeight(this.$.relatedChanges);
// Figure out a new height that is divisible by the rounded line height.
const remainder = maxExistingHeight % lineHeight;
newHeight = maxExistingHeight - remainder;
// Update the max-height of the relation chain to this new height;
if (hasCommitToggle) {
this.customStyle['--related-change-btn-top-padding'] =
remainder + 'px';
newHeight = this._getOffsetHeight(this.$.commitAndRelated) -
EXTRA_HEIGHT;
}
}
if (this.$.relatedChanges.hidden) {
this.customStyle['--commit-message-max-width'] = 'none';
}
// Get the line height of related changes, and convert it to the nearest
// integer.
const lineHeight = this._getLineHeight(this.$.relatedChanges);
// Figure out a new height that is divisible by the rounded line height.
const remainder = newHeight % lineHeight;
newHeight = newHeight - remainder;
this.customStyle['--relation-chain-max-height'] = newHeight + 'px';
// Update the max-height of the relation chain to this new height.
if (hasCommitToggle) {
this.customStyle['--related-change-btn-top-padding'] =
remainder + 'px';
}
this.updateStyles();
},

18
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_test.html
View File

@@ -1203,13 +1203,13 @@ limitations under the License.
sandbox.stub(element, '_getLineHeight', () => 12);
sandbox.stub(window, 'matchMedia', () => ({matches: false}));
// 50 (existing height) - 24 (extra height) = 26 (adjusted height).
// 50 (existing height) % 12 (line height) = 2 (remainder).
// 26 (adjusted height) - 2 (remainder) = 24 (max height to set).
// 50 (existing height) - 30 (extra height) = 20 (adjusted height).
// 20 (max existing height) % 12 (line height) = 6 (remainder).
// 20 (adjusted height) - 8 (remainder) = 12 (max height to set).
element._updateRelatedChangeMaxHeight();
assert.equal(element.customStyle['--relation-chain-max-height'],
'24px');
'12px');
assert.equal(element.customStyle['--related-change-btn-top-padding'],
undefined);
});
@@ -1237,8 +1237,12 @@ limitations under the License.
sandbox.stub(window, 'matchMedia', () => ({matches: true}));
element._updateRelatedChangeMaxHeight();
// 400 (new height) % 12 (line height) = 4 (remainder).
// 400 (new height) - 4 (remainder) = 396.
assert.equal(element.customStyle['--relation-chain-max-height'],
'400px');
'396px');
});
test('_updateRelatedChangeMaxHeight in medium screen mode', () => {
@@ -1253,9 +1257,11 @@ limitations under the License.
}
});
// 100 (new height) % 12 (line height) = 4 (remainder).
// 100 (new height) - 4 (remainder) = 96.
element._updateRelatedChangeMaxHeight();
assert.equal(element.customStyle['--relation-chain-max-height'],
'100px');
'96px');
});