Merge "Unify move and long comment chunks UI styles"
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified_test.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified_test.js
index c08764e..2be85c3 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified_test.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified_test.js
@@ -116,7 +116,7 @@
assert.equal(rowEls.length, 3);
assert.isTrue(moveControlsRow.classList.contains('movedOut'));
assert.equal(cells.length, 3);
- assert.isTrue(cells[2].classList.contains('moveLabel'));
+ assert.isTrue(cells[2].classList.contains('moveHeader'));
assert.equal(cells[2].textContent, 'Moved out');
});
@@ -139,7 +139,7 @@
assert.equal(rowEls.length, 3);
assert.isTrue(moveControlsRow.classList.contains('movedIn'));
assert.equal(cells.length, 3);
- assert.isTrue(cells[2].classList.contains('moveLabel'));
+ assert.isTrue(cells[2].classList.contains('moveHeader'));
assert.equal(cells[2].textContent, 'Moved in');
});
});
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.ts b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.ts
index 9ddfde4..96cb56a 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.ts
@@ -748,13 +748,12 @@
const cells = [...Array(numberOfCells).keys()].map(() =>
this._createElement('td')
);
- const moveDescriptionDiv = this._createElement('div', 'moveDescription');
- const icon = this._createElement('iron-icon');
- icon.setAttribute('icon', 'gr-icons:move-item');
- moveDescriptionDiv.appendChild(icon);
- moveDescriptionDiv.appendChild(descriptionTextDiv);
- cells[descriptionIndex].appendChild(moveDescriptionDiv);
- cells[descriptionIndex].classList.add('moveLabel');
+
+ const moveRangeHeader = this._createElement('gr-range-header');
+ moveRangeHeader.setAttribute('icon', 'gr-icons:move-item');
+ moveRangeHeader.appendChild(descriptionTextDiv);
+ cells[descriptionIndex].classList.add('moveHeader');
+ cells[descriptionIndex].appendChild(moveRangeHeader);
cells.forEach(c => {
controls.appendChild(c);
});
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts
index c98f772..e2bc312 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.ts
@@ -235,44 +235,25 @@
/* dueToMove */
.dueToMove .content.add .contentText,
- .dueToMove .moveControls.movedIn .moveLabel,
+ .dueToMove .moveControls.movedIn .moveHeader,
.delta.total.dueToMove .content.add .contentText {
background-color: var(--diff-moved-in-background);
}
.dueToMove .content.remove .contentText,
- .dueToMove .moveControls.movedOut .moveLabel,
+ .dueToMove .moveControls.movedOut .moveHeader,
.delta.total.dueToMove .content.remove .contentText {
background-color: var(--diff-moved-out-background);
}
- .delta.dueToMove .movedIn .moveDescription {
- color: var(--diff-moved-in-label-color);
+ .delta.dueToMove .movedIn .moveHeader {
+ --gr-range-header-color: var(--diff-moved-in-label-color);
}
- .delta.dueToMove .movedOut .moveDescription {
- color: var(--diff-moved-out-label-color);
- }
- .moveLabel {
- font-family: var(--font-family, ''), 'Roboto Mono';
- font-size: var(--font-size-small, 12px);
- font-weight: var(--code-hint-font-weight, 500);
- line-height: var(--line-height-small, 16px);
- padding: var(--spacing-s) var(--spacing-m);
- margin: var(--spacing-s);
- }
- .delta.dueToMove .moveDescription {
- display: flex;
- justify-content: flex-end;
+ .delta.dueToMove .movedOut .moveHeader {
+ --gr-range-header-color: var(--diff-moved-out-label-color);
}
- .moveDescription iron-icon {
- color: inherit;
- margin-right: var(--spacing-s);
- height: var(--line-height-small, 16px);
- width: var(--line-height-small, 16px);
- }
-
- .moveDescription a {
+ .moveHeader a {
color: inherit;
}
diff --git a/polygerrit-ui/app/elements/diff/gr-range-header/gr-range-header.ts b/polygerrit-ui/app/elements/diff/gr-range-header/gr-range-header.ts
new file mode 100644
index 0000000..21289fb
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-range-header/gr-range-header.ts
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {customElement, property} from '@polymer/decorators';
+import {htmlTemplate} from './gr-range-header_html';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
+
+/**
+ * Represents a header (label) for a code chunk whenever showing
+ * diffs.
+ * Used as a labeled header to describe selections in code for cases
+ * like long comments and moved in/out chunks.
+ */
+@customElement('gr-range-header')
+export class GrRangeHeader extends PolymerElement {
+ @property({type: String})
+ icon?: string;
+
+ static get template() {
+ return htmlTemplate;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'gr-range-header': GrRangeHeader;
+ }
+}
diff --git a/polygerrit-ui/app/elements/diff/gr-range-header/gr-range-header_html.ts b/polygerrit-ui/app/elements/diff/gr-range-header/gr-range-header_html.ts
new file mode 100644
index 0000000..34e01db
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-range-header/gr-range-header_html.ts
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {html} from '@polymer/polymer/lib/utils/html-tag';
+
+export const htmlTemplate = html`
+ <style>
+ .row {
+ color: var(--gr-range-header-color);
+ display: flex;
+ font-family: var(--font-family, ''), 'Roboto Mono';
+ font-size: var(--font-size-small, 12px);
+ font-weight: var(--code-hint-font-weight, 500);
+ line-height: var(--line-height-small, 16px);
+ justify-content: flex-end;
+ padding: var(--spacing-s) var(--spacing-l);
+ }
+ .icon {
+ color: var(--gr-range-header-color);
+ height: var(--line-height-small, 16px);
+ width: var(--line-height-small, 16px);
+ margin-right: var(--spacing-s);
+ }
+ </style>
+ <div class="row">
+ <iron-icon class="icon" icon="[[icon]]"></iron-icon>
+ <slot></slot>
+ </div>
+`;
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts b/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts
index 3d35c26..d64e02d 100644
--- a/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts
+++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint.ts
@@ -15,6 +15,7 @@
* limitations under the License.
*/
+import '../gr-range-header/gr-range-header';
import {customElement, property} from '@polymer/decorators';
import {CommentRange} from '../../../types/common';
import {htmlTemplate} from './gr-ranged-comment-hint_html';
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_html.ts b/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_html.ts
index 670bfd2..09b7110 100644
--- a/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_html.ts
+++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_html.ts
@@ -22,25 +22,16 @@
</style>
<style include="shared-styles">
.row {
- color: var(--ranged-comment-hint-text-color);
display: flex;
- font-family: var(--font-family, ''), 'Roboto Mono';
- font-size: var(--font-size-small, 12px);
- font-weight: var(--code-hint-font-weight, 500);
- line-height: var(--line-height-small, 16px);
- justify-content: flex-end;
- margin: var(--spacing-xs) 0;
- padding: var(--spacing-s) var(--spacing-l);
+ --gr-range-header-color: var(--ranged-comment-hint-text-color);
}
- .icon {
- color: var(--ranged-comment-hint-text-color);
- height: var(--line-height-small, 16px);
- width: var(--line-height-small, 16px);
- margin-right: var(--spacing-s);
+ gr-range-header {
+ flex-grow: 1;
}
</style>
- <div class="row rangeHighlight">
- <iron-icon class="icon" icon="gr-icons:comment"></iron-icon>
- [[_computeRangeLabel(range)]]
+ <div class="rangeHighlight row">
+ <gr-range-header icon="gr-icons:comment"
+ >[[_computeRangeLabel(range)]]</gr-range-header
+ >
</div>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_test.ts b/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_test.ts
index 932c367..1ddfcf6 100644
--- a/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_test.ts
+++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-hint/gr-ranged-comment-hint_test.ts
@@ -16,14 +16,24 @@
*/
import '../../../test/common-test-setup-karma';
+import './gr-ranged-comment-hint';
import {CommentRange} from '../../../types/common';
import {GrRangedCommentHint} from './gr-ranged-comment-hint';
+import {flush} from '@polymer/polymer/lib/legacy/polymer.dom';
+
+import {html} from '@polymer/polymer/lib/utils/html-tag';
+
+const basicFixture = fixtureFromTemplate(html`
+ <gr-ranged-comment-hint></gr-ranged-comment-hint>
+`);
+
suite('gr-ranged-comment-hint tests', () => {
let element: GrRangedCommentHint;
- setup(() => {
- element = fixtureFromElement('gr-ranged-comment-hint').instantiate();
+ setup(async () => {
+ element = basicFixture.instantiate() as GrRangedCommentHint;
+ await flush();
});
test('shows line range', async () => {
@@ -34,7 +44,7 @@
end_character: 3,
} as CommentRange;
await flush();
- const textDiv = element.root!.querySelector<HTMLDivElement>('.row');
- assert.equal(textDiv!.innerText.trim(), 'Long comment range 2 - 5');
+ const textDiv = element.root?.querySelector('gr-range-header');
+ assert.equal(textDiv?.innerText.trim(), 'Long comment range 2 - 5');
});
});
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts b/polygerrit-ui/app/elements/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts
index ee9e8f9..131825a 100644
--- a/polygerrit-ui/app/elements/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts
+++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts
@@ -27,11 +27,9 @@
<style>
.rangeHighlight {
background-color: var(--diff-highlight-range-color);
- display: inline;
}
.rangeHoverHighlight {
background-color: var(--diff-highlight-range-hover-color);
- display: inline;
}
</style>
</template>
