Merge "Add headers to gr-file-list"
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index 3f643dc..a51f848 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -66,6 +66,9 @@
.invisible {
visibility: hidden;
}
+ .header-row {
+ font-weight: var(--font-weight-bold);
+ }
.controlRow {
align-items: center;
display: flex;
@@ -126,22 +129,27 @@
.oldPath {
color: var(--deemphasized-text-color);
}
- .comments,
+ .header-stats {
+ text-align: center;
+ min-width: 7.5em;
+ }
.stats {
text-align: right;
+ min-width: 7.5em;
}
.comments {
padding-left: 2em;
+ min-width: 20em;
}
- .stats {
- min-width: 7em;
- }
- .row:not(.header) .stats,
+ .row:not(.header-row) .stats,
.total-stats {
font-family: var(--monospace-font-family);
+ display: flex;
}
.sizeBars {
margin-left: .5em;
+ min-width: 7em;
+ text-align: center;
}
.sizeBars.hide {
display: none;
@@ -157,6 +165,8 @@
.removed {
color: var(--vote-text-color-disliked);
text-align: left;
+ min-width: 4em;
+ padding-left: 0.5em;
}
.drafts {
color: #C62828;
@@ -277,6 +287,18 @@
<div
id="container"
on-tap="_handleFileListTap">
+ <div class="header-row row">
+ <div class="status"></div>
+ <div class="path">File</div>
+ <div class="comments">Comments</div>
+ <div class="sizeBars">Size</div>
+ <div class="header-stats">Delta</div>
+ <!-- Empty div here exists to keep spacing in sync with file rows. -->
+ <div class="reviewed hideOnEdit" hidden$="[[!_loggedIn]]"></div>
+ <div class="editFileControls showOnEdit"></div>
+ <div class="show-hide"></div>
+ </div>
+
<template is="dom-repeat"
items="[[_shownFiles]]"
id="files"
@@ -427,7 +449,7 @@
</span>
</div>
<!-- Empty div here exists to keep spacing in sync with file rows. -->
- <div class="reviewed hideOnEdit" hidden$="[[!_loggedIn]]" hidden></div>
+ <div class="reviewed hideOnEdit" hidden$="[[!_loggedIn]]"></div>
<div class="editFileControls showOnEdit"></div>
<div class="show-hide"></div>
</div>
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.html
index 22df071..8db000c 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.html
@@ -802,7 +802,7 @@
flushAsynchronousOperations();
const fileRows =
- Polymer.dom(element.root).querySelectorAll('.row:not(.header)');
+ Polymer.dom(element.root).querySelectorAll('.row:not(.header-row)');
const checkSelector = 'input.reviewed[type="checkbox"]';
const commitMsg = fileRows[0].querySelector(checkSelector);
const fileAdded = fileRows[1].querySelector(checkSelector);
@@ -933,7 +933,7 @@
sandbox.stub(element, '_expandedPathsChanged');
flushAsynchronousOperations();
const fileRows =
- Polymer.dom(element.root).querySelectorAll('.row:not(.header)');
+ Polymer.dom(element.root).querySelectorAll('.row:not(.header-row)');
// Because the label surrounds the input, the tap event is triggered
// there first.
const showHideLabel = fileRows[0].querySelector('label.show-hide');
@@ -960,7 +960,7 @@
// Tap on a file to generate the diff.
const row = Polymer.dom(element.root)
- .querySelectorAll('.row:not(.header) label.show-hide')[0];
+ .querySelectorAll('.row:not(.header-row) label.show-hide')[0];
MockInteractions.tap(row);
flushAsynchronousOperations();
@@ -990,7 +990,7 @@
sandbox.stub(element, '_expandedPathsChanged');
flushAsynchronousOperations();
const commitMsgFile = Polymer.dom(element.root)
- .querySelectorAll('.row:not(.header) a.pathLink')[0];
+ .querySelectorAll('.row:not(.header-row) a.pathLink')[0];
// Remove href attribute so the app doesn't route to a diff view
commitMsgFile.removeAttribute('href');
@@ -1570,7 +1570,7 @@
nextChunkStub = sandbox.stub(element.$.diffCursor,
'moveToNextChunk');
fileRows =
- Polymer.dom(element.root).querySelectorAll('.row:not(.header)');
+ Polymer.dom(element.root).querySelectorAll('.row:not(.header-row)');
});
test('n key with some files expanded and no shift key', () => {
@@ -1700,7 +1700,8 @@
// Commit message should not have edit controls.
const editControls =
Array.from(
- Polymer.dom(element.root).querySelectorAll('.row:not(.header)'))
+ Polymer.dom(element.root)
+ .querySelectorAll('.row:not(.header-row)'))
.map(row => row.querySelector('gr-edit-file-controls'));
assert.isTrue(editControls[0].classList.contains('invisible'));
});
