New change summary - introduce edit pencil
Show icon (pencil edit) for all editable information
on change summary. Introduced under feature flag for new change
summary UI.
After with feature flag: https://imgur.com/a/7OjfsEW
Change-Id: I5f0f8018c855d785fe0d68b98f4753c329e8e45f
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
index a2f72b7..3b89a33 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
@@ -49,7 +49,15 @@
pointer-events: none;
}
.hashtagChip {
- margin-bottom: var(--spacing-m);
+ padding-bottom: var(--spacing-s);
+ }
+ /* consistent with section .title, .value */
+ .hashtagChip.new-change-summary-true:not(last-of-type) {
+ padding-bottom: var(--spacing-s);
+ }
+ .hashtagChip.new-change-summary-true:last-of-type {
+ display: inline;
+ vertical-align: top;
}
#externalStyle {
display: block;
@@ -340,6 +348,7 @@
placeholder="[[_computeTopicPlaceholder(_topicReadOnly)]]"
read-only="[[_topicReadOnly]]"
on-changed="_handleTopicChanged"
+ show-as-edit-pencil="[[_isNewChangeSummaryUiEnabled]]"
></gr-editable-label>
</template>
</span>
@@ -377,7 +386,7 @@
<span class="value">
<template is="dom-repeat" items="[[change.hashtags]]">
<gr-linked-chip
- class="hashtagChip"
+ class$="hashtagChip new-change-summary-[[_isNewChangeSummaryUiEnabled]]"
text="[[item]]"
href="[[_computeHashtagUrl(item)]]"
removable="[[!_hashtagReadOnly]]"
@@ -394,6 +403,7 @@
placeholder="[[_computeHashtagPlaceholder(_hashtagReadOnly)]]"
read-only="[[_hashtagReadOnly]]"
on-changed="_handleHashtagChanged"
+ show-as-edit-pencil="[[_isNewChangeSummaryUiEnabled]]"
></gr-editable-label>
</template>
</span>
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
index a2beb36..254ecca 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
@@ -42,6 +42,7 @@
import {isRemovableReviewer} from '../../../utils/change-util';
import {ReviewerState} from '../../../constants/constants';
import {appContext} from '../../../services/app-context';
+import {KnownExperimentId} from '../../../services/flags/flags';
@customElement('gr-reviewer-list')
export class GrReviewerList extends GestureEventListeners(
@@ -87,8 +88,21 @@
@property({type: Object})
_xhrPromise?: Promise<Response | undefined>;
+ @property({type: Boolean})
+ _isNewChangeSummaryUiEnabled = false;
+
private readonly restApiService = appContext.restApiService;
+ private readonly flagsService = appContext.flagsService;
+
+ /** @override */
+ ready() {
+ super.ready();
+ this._isNewChangeSummaryUiEnabled = this.flagsService.isEnabled(
+ KnownExperimentId.NEW_CHANGE_SUMMARY_UI
+ );
+ }
+
@computed('ccsOnly')
get _addLabel() {
return this.ccsOnly ? 'Add CC' : 'Add reviewer';
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
index dd18d03..ccdcf8d 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
@@ -28,6 +28,16 @@
.container {
display: block;
}
+ .addReviewer iron-icon {
+ color: inherit;
+ --iron-icon-height: 18px;
+ --iron-icon-width: 18px;
+ }
+ gr-button.addReviewer.new-change-summary-true {
+ --padding: 1px 4px;
+ vertical-align: top;
+ top: 1px;
+ }
gr-button {
--gr-button: {
padding: 0px 0px;
@@ -51,6 +61,16 @@
>
</gr-account-chip>
</template>
+ <template is="dom-if" if="[[_isNewChangeSummaryUiEnabled]]">
+ <gr-button
+ link=""
+ id="addReviewer"
+ class="addReviewer new-change-summary-true"
+ on-click="_handleAddTap"
+ title="[[_addLabel]]"
+ ><iron-icon icon="gr-icons:edit"></iron-icon
+ ></gr-button>
+ </template>
</div>
<gr-button
class="hiddenReviewers"
@@ -59,14 +79,16 @@
on-click="_handleViewAll"
>and [[_hiddenReviewerCount]] more</gr-button
>
- <div class="controlsContainer" hidden$="[[!mutable]]">
- <gr-button
- link=""
- id="addReviewer"
- class="addReviewer"
- on-click="_handleAddTap"
- >[[_addLabel]]</gr-button
- >
- </div>
+ <template is="dom-if" if="[[!_isNewChangeSummaryUiEnabled]]">
+ <div class="controlsContainer" hidden$="[[!mutable]]">
+ <gr-button
+ link=""
+ id="addReviewer"
+ class="addReviewer"
+ on-click="_handleAddTap"
+ >[[_addLabel]]</gr-button
+ >
+ </div>
+ </template>
</div>
`;
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.js b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.js
index d29abfc..89332c2 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.js
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.js
@@ -36,6 +36,7 @@
});
test('controls hidden on immutable element', () => {
+ flush();
element.mutable = false;
assert.isTrue(element.shadowRoot
.querySelector('.controlsContainer').hasAttribute('hidden'));
@@ -48,6 +49,7 @@
element.addEventListener('show-reply-dialog', () => {
done();
});
+ flush();
MockInteractions.tap(element.shadowRoot
.querySelector('.addReviewer'));
});
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts
index 9e1a5bf..3b839cb 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts
@@ -89,6 +89,9 @@
@property({type: Number})
readonly _verticalOffset = -30;
+ @property({type: Boolean})
+ showAsEditPencil = false;
+
/** @override */
ready() {
super.ready();
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
index 5e36166..7700689 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
@@ -68,13 +68,32 @@
}
--paper-input-container-focus-color: var(--link-color);
}
+ gr-button iron-icon {
+ color: inherit;
+ --iron-icon-height: 18px;
+ --iron-icon-width: 18px;
+ }
+ gr-button.new-change-summary-true {
+ --padding: 1px 4px;
+ }
</style>
- <label
- class$="[[_computeLabelClass(readOnly, value, placeholder)]]"
- title$="[[_computeLabel(value, placeholder)]]"
- on-click="_showDropdown"
- >[[_computeLabel(value, placeholder)]]</label
- >
+ <template is="dom-if" if="[[!showAsEditPencil]]">
+ <label
+ class$="[[_computeLabelClass(readOnly, value, placeholder)]]"
+ title$="[[_computeLabel(value, placeholder)]]"
+ on-click="_showDropdown"
+ >[[_computeLabel(value, placeholder)]]</label
+ >
+ </template>
+ <template is="dom-if" if="[[showAsEditPencil]]">
+ <gr-button
+ link=""
+ class$="new-change-summary-true [[_computeLabelClass(readOnly, value, placeholder)]]"
+ on-click="_showDropdown"
+ title="[[_computeLabel(value, placeholder)]]"
+ ><iron-icon icon="gr-icons:edit"></iron-icon
+ ></gr-button>
+ </template>
<iron-dropdown
id="dropdown"
vertical-align="auto"
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.js b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.js
index d8f085e..2bdc570 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.js
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_test.js
@@ -45,6 +45,7 @@
setup(async () => {
element = basicFixture.instantiate();
elementNoPlaceholder = noPlaceholderFixture.instantiate();
+ flush();
label = element.shadowRoot.querySelector('label');
await flush();
@@ -178,6 +179,7 @@
setup(() => {
element = readOnlyFixture.instantiate();
+ flush();
label = element.shadowRoot
.querySelector('label');
});
