| /** |
| * @license |
| * Copyright (C) 2020 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.js'; |
| |
| export const htmlTemplate = html` |
| <style include="shared-styles"> |
| :host { |
| background-color: var(--dialog-background-color); |
| display: block; |
| max-height: 90vh; |
| } |
| :host([disabled]) { |
| pointer-events: none; |
| } |
| :host([disabled]) .container { |
| opacity: .5; |
| } |
| .container { |
| display: flex; |
| flex-direction: column; |
| max-height: 100%; |
| } |
| section { |
| border-top: 1px solid var(--border-color); |
| flex-shrink: 0; |
| padding: var(--spacing-m) var(--spacing-xl); |
| width: 100%; |
| } |
| section.labelsContainer { |
| /* We want the :hover highlight to extend to the border of the dialog. */ |
| padding: var(--spacing-m) 0; |
| } |
| .actions { |
| background-color: var(--dialog-background-color); |
| bottom: 0; |
| display: flex; |
| justify-content: space-between; |
| position: sticky; |
| /* @see Issue 8602 */ |
| z-index: 1; |
| } |
| .actions .right gr-button { |
| margin-left: var(--spacing-l); |
| } |
| .peopleContainer, |
| .labelsContainer { |
| flex-shrink: 0; |
| } |
| .peopleContainer { |
| border-top: none; |
| display: table; |
| } |
| .peopleList { |
| display: flex; |
| } |
| .peopleListLabel { |
| color: var(--deemphasized-text-color); |
| margin-top: var(--spacing-xs); |
| min-width: 6em; |
| padding-right: var(--spacing-m); |
| } |
| gr-account-list { |
| display: flex; |
| flex-wrap: wrap; |
| flex: 1; |
| } |
| #reviewerConfirmationOverlay { |
| padding: var(--spacing-l); |
| text-align: center; |
| } |
| .reviewerConfirmationButtons { |
| margin-top: var(--spacing-l); |
| } |
| .groupName { |
| font-weight: var(--font-weight-bold); |
| } |
| .groupSize { |
| font-style: italic; |
| } |
| .textareaContainer { |
| min-height: 12em; |
| position: relative; |
| } |
| .textareaContainer, |
| #textarea, |
| gr-endpoint-decorator { |
| display: flex; |
| width: 100%; |
| } |
| gr-endpoint-decorator[name="reply-label-scores"] { |
| display: block; |
| } |
| .previewContainer gr-formatted-text { |
| background: var(--table-header-background-color); |
| padding: var(--spacing-l); |
| } |
| .draftsContainer h3 { |
| margin-top: var(--spacing-xs); |
| } |
| #checkingStatusLabel, |
| #notLatestLabel { |
| margin-left: var(--spacing-l); |
| } |
| #checkingStatusLabel { |
| color: var(--deemphasized-text-color); |
| font-style: italic; |
| } |
| #notLatestLabel, |
| #savingLabel { |
| color: var(--error-text-color); |
| } |
| #savingLabel { |
| display: none; |
| } |
| #savingLabel.saving { |
| display: inline; |
| } |
| #pluginMessage { |
| color: var(--deemphasized-text-color); |
| margin-left: var(--spacing-l); |
| margin-bottom: var(--spacing-m); |
| } |
| #pluginMessage:empty { |
| display: none; |
| } |
| </style> |
| <div class="container" tabindex="-1"> |
| <section class="peopleContainer"> |
| <div class="peopleList"> |
| <div class="peopleListLabel">Reviewers</div> |
| <gr-account-list id="reviewers" accounts="{{_reviewers}}" removable-values="[[change.removable_reviewers]]" filter="[[filterReviewerSuggestion]]" pending-confirmation="{{_reviewerPendingConfirmation}}" placeholder="Add reviewer..." on-account-text-changed="_handleAccountTextEntry" suggestions-provider="[[_getReviewerSuggestionsProvider(change)]]"> |
| </gr-account-list> |
| </div> |
| <div class="peopleList"> |
| <div class="peopleListLabel">CC</div> |
| <gr-account-list id="ccs" accounts="{{_ccs}}" filter="[[filterCCSuggestion]]" pending-confirmation="{{_ccPendingConfirmation}}" allow-any-input="" placeholder="Add CC..." on-account-text-changed="_handleAccountTextEntry" suggestions-provider="[[_getCcSuggestionsProvider(change)]]"> |
| </gr-account-list> |
| </div> |
| <gr-overlay id="reviewerConfirmationOverlay" on-iron-overlay-canceled="_cancelPendingReviewer"> |
| <div class="reviewerConfirmation"> |
| Group |
| <span class="groupName"> |
| [[_pendingConfirmationDetails.group.name]] |
| </span> |
| has |
| <span class="groupSize"> |
| [[_pendingConfirmationDetails.count]] |
| </span> |
| members. |
| <br> |
| Are you sure you want to add them all? |
| </div> |
| <div class="reviewerConfirmationButtons"> |
| <gr-button on-click="_confirmPendingReviewer">Yes</gr-button> |
| <gr-button on-click="_cancelPendingReviewer">No</gr-button> |
| </div> |
| </gr-overlay> |
| </section> |
| <section class="textareaContainer"> |
| <gr-endpoint-decorator name="reply-text"> |
| <gr-textarea id="textarea" class="message" autocomplete="on" placeholder="[[_messagePlaceholder]]" fixed-position-dropdown="" hide-border="true" monospace="true" disabled="{{disabled}}" rows="4" text="{{draft}}" on-bind-value-changed="_handleHeightChanged"> |
| </gr-textarea> |
| </gr-endpoint-decorator> |
| </section> |
| <section class="previewContainer"> |
| <label> |
| <input type="checkbox" checked="{{_previewFormatting::change}}"> |
| Preview formatting |
| </label> |
| <gr-formatted-text content="[[draft]]" hidden\$="[[!_previewFormatting]]" config="[[projectConfig.commentlinks]]"></gr-formatted-text> |
| </section> |
| <section class="labelsContainer"> |
| <gr-endpoint-decorator name="reply-label-scores"> |
| <gr-label-scores id="labelScores" account="[[_account]]" change="[[change]]" on-labels-changed="_handleLabelsChanged" permitted-labels="[[permittedLabels]]"></gr-label-scores> |
| </gr-endpoint-decorator> |
| <div id="pluginMessage">[[_pluginMessage]]</div> |
| </section> |
| <section class="draftsContainer" hidden\$="[[_computeHideDraftList(draftCommentThreads)]]"> |
| <div class="includeComments"> |
| <input type="checkbox" id="includeComments" checked="{{_includeComments::change}}"> |
| <label for="includeComments">Publish [[_computeDraftsTitle(draftCommentThreads)]]</label> |
| </div> |
| <gr-thread-list id="commentList" hidden\$="[[!_includeComments]]" threads="[[draftCommentThreads]]" change="[[change]]" change-num="[[change._number]]" logged-in="true" hide-toggle-buttons="" on-thread-list-modified="_onThreadListModified"> |
| </gr-thread-list> |
| <span id="savingLabel" class\$="[[_computeSavingLabelClass(_savingComments)]]"> |
| Saving comments... |
| </span> |
| </section> |
| <section class="actions"> |
| <div class="left"> |
| <span id="checkingStatusLabel" hidden\$="[[!_isState(knownLatestState, 'checking')]]"> |
| Checking whether patch [[patchNum]] is latest... |
| </span> |
| <span id="notLatestLabel" hidden\$="[[!_isState(knownLatestState, 'not-latest')]]"> |
| [[_computePatchSetWarning(patchNum, _labelsChanged)]] |
| <gr-button link="" on-click="_reload">Reload</gr-button> |
| </span> |
| </div> |
| <div class="right"> |
| <gr-button link="" id="cancelButton" class="action cancel" on-click="_cancelTapHandler">Cancel</gr-button> |
| <template is="dom-if" if="[[canBeStarted]]"> |
| <!-- Use 'Send' here as the change may only about reviewers / ccs |
| and when this button is visible, the next button will always |
| be 'Start review' --> |
| <gr-button link="" disabled="[[_isState(knownLatestState, 'not-latest')]]" class="action save" has-tooltip="" title="[[_saveTooltip]]" on-click="_saveClickHandler">Save</gr-button> |
| </template> |
| <gr-button id="sendButton" primary="" disabled="[[_sendDisabled]]" class="action send" has-tooltip="" title\$="[[_computeSendButtonTooltip(canBeStarted)]]" on-click="_sendTapHandler">[[_sendButtonLabel]]</gr-button> |
| </div> |
| </section> |
| </div> |
| <gr-js-api-interface id="jsAPI"></gr-js-api-interface> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| <gr-storage id="storage"></gr-storage> |
| <gr-reporting id="reporting"></gr-reporting> |
| `; |
