opendev/gerrit
Code Issues Proposed changes

Merge "Revert "Revert "A11y - Arrows and checkmarks in Relation chain"" with fix"

Browse Source
This commit is contained in:
Ben Rohlfs
2020-09-07 09:21:23 +00:00
committed by Gerrit Code Review
parent 3ab290951a 7a735e5484
commit d07a03a981
4 changed files with 23 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
polygerrit-ui/app/elements/change/gr-change-view/gr-change-view_html.ts
View File

@@ -165,6 +165,7 @@ export const htmlTemplate = html`
margin-bottom: var(--spacing-l);
max-height: var(--relation-chain-max-height, 2em);
overflow: hidden;
position: relative; /* for arrowToCurrentChange to have position:absolute and be hidden */
}
.commitContainer {
display: flex;

11
polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list.js
View File

@@ -222,17 +222,6 @@ class GrRelatedChangesList extends GestureEventListeners(
return GerritNav.getUrlForChangeById(changeNum, project, opt_patchNum);
}
_computeChangeContainerClass(currentChange, relatedChange) {
const classes = ['changeContainer'];
if ([relatedChange, currentChange].includes(undefined)) {
return classes;
}
if (this._changesEqual(relatedChange, currentChange)) {
classes.push('thisChange');
}
return classes.join(' ');
}
/**
* Do the given objects describe the same change? Compares the changes by
* their numbers.

29
polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list_html.ts
View File

@@ -37,9 +37,8 @@ export const htmlTemplate = html`
.changeContainer {
display: flex;
}
.changeContainer.thisChange:before {
content: '➔';
width: 1.2em;
.arrowToCurrentChange {
position: absolute;
}
h4,
section div {
@@ -105,9 +104,15 @@ export const htmlTemplate = html`
items="[[_relatedResponse.changes]]"
as="related"
>
<div
class$="rightIndent [[_computeChangeContainerClass(change, related)]]"
>
<template is="dom-if" if="[[_changesEqual(related, change)]]">
<span
role="img"
class="arrowToCurrentChange"
aria-label="Arrow marking current change"
>➔</span
>
</template>
<div class="rightIndent changeContainer">
<a
href$="[[_computeChangeURL(related._change_number, related.project, related._revision_number)]]"
class$="[[_computeLinkClass(related)]]"
@@ -131,7 +136,15 @@ export const htmlTemplate = html`
items="[[_submittedTogether.changes]]"
as="related"
>
<div class$="[[_computeChangeContainerClass(change, related)]]">
<template is="dom-if" if="[[_changesEqual(related, change)]]">
<span
role="img"
class="arrowToCurrentChange"
aria-label="Arrow marking current change"
>➔</span
>
</template>
<div class="changeContainer">
<a
href$="[[_computeChangeURL(related._number, related.project)]]"
class$="[[_computeLinkClass(related)]]"
@@ -143,6 +156,8 @@ export const htmlTemplate = html`
tabindex="-1"
title="Submittable"
class$="submittableCheck [[_computeLinkClass(related)]]"
role="img"
aria-label="Submittable"
>✓</span
>
</div>

13
polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list_test.js
View File

@@ -209,19 +209,6 @@ suite('gr-related-changes-list tests', () => {
]);
});
test('_computeChangeContainerClass', () => {
const change1 = {change_id: 123, _number: 0};
const change2 = {change_id: 456, _change_number: 1};
const change3 = {change_id: 123, _number: 2};
assert.notEqual(element._computeChangeContainerClass(
change1, change1).indexOf('thisChange'), -1);
assert.equal(element._computeChangeContainerClass(
change1, change2).indexOf('thisChange'), -1);
assert.equal(element._computeChangeContainerClass(
change1, change3).indexOf('thisChange'), -1);
});
test('_changesEqual', () => {
const change1 = {change_id: 123, _number: 0};
const change2 = {change_id: 456, _number: 1};