| <!-- |
| Copyright (C) 2015 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. |
| --> |
| |
| <link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html"> |
| <link rel="import" href="../../../bower_components/polymer/polymer.html"> |
| <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html"> |
| <link rel="import" href="../../../bower_components/iron-selector/iron-selector.html"> |
| <link rel="import" href="../../shared/gr-account-chip/gr-account-chip.html"> |
| <link rel="import" href="../../shared/gr-button/gr-button.html"> |
| <link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html"> |
| <link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html"> |
| <link rel="import" href="../../shared/gr-overlay/gr-overlay.html"> |
| <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html"> |
| <link rel="import" href="../../shared/gr-storage/gr-storage.html"> |
| <link rel="import" href="../gr-account-list/gr-account-list.html"> |
| |
| <dom-module id="gr-reply-dialog"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| max-height: 90vh; |
| } |
| :host([disabled]) { |
| pointer-events: none; |
| } |
| :host([disabled]) .container { |
| opacity: .5; |
| } |
| .container { |
| display: flex; |
| flex-direction: column; |
| max-height: 90vh; |
| } |
| section { |
| border-top: 1px solid #ddd; |
| padding: .5em .75em; |
| width: 100%; |
| } |
| .peopleContainer, |
| .labelsContainer, |
| .actionsContainer { |
| flex-shrink: 0; |
| } |
| .peopleContainer { |
| display: table; |
| } |
| .peopleList { |
| display: flex; |
| padding-top: .1em; |
| } |
| .peopleListLabel { |
| color: #666; |
| min-width: 7em; |
| padding-right: .5em; |
| } |
| gr-account-list { |
| display: flex; |
| flex-wrap: wrap; |
| flex: 1; |
| } |
| #reviewerConfirmationOverlay { |
| padding: 1em; |
| text-align: center; |
| } |
| .reviewerConfirmationButtons { |
| margin-top: 1em; |
| } |
| .groupName { |
| font-weight: bold; |
| } |
| .groupSize { |
| font-style: italic; |
| } |
| .textareaContainer { |
| display: flex; |
| flex: 1; |
| min-height: 6em; |
| position: relative; |
| } |
| iron-autogrow-textarea { |
| padding: 0; |
| font-family: var(--monospace-font-family); |
| } |
| .previewContainer gr-formatted-text { |
| background: #f6f6f6; |
| max-height: 20vh; |
| overflow-y: scroll; |
| padding: 1em; |
| } |
| .message { |
| border: none; |
| width: 100%; |
| } |
| .labelContainer:not(:first-of-type) { |
| margin-top: .5em; |
| } |
| .labelName { |
| display: inline-block; |
| margin-right: .5em; |
| min-width: 7em; |
| text-align: right; |
| white-space: nowrap; |
| width: 25%; |
| } |
| .labelMessage { |
| color: #666; |
| } |
| iron-selector { |
| display: inline-flex; |
| } |
| iron-selector > gr-button { |
| margin-right: .25em; |
| min-width: 3.5em; |
| } |
| iron-selector > gr-button:first-of-type { |
| border-top-left-radius: 2px; |
| border-bottom-left-radius: 2px; |
| } |
| iron-selector > gr-button:last-of-type { |
| border-top-right-radius: 2px; |
| border-bottom-right-radius: 2px; |
| } |
| iron-selector > gr-button.iron-selected { |
| background-color: #ddd; |
| } |
| .draftsContainer { |
| flex: 1; |
| overflow-y: auto; |
| } |
| .draftsContainer h3 { |
| margin-top: .25em; |
| } |
| .actionsContainer { |
| display: flex; |
| justify-content: space-between; |
| } |
| .action:link, |
| .action:visited { |
| color: #00e; |
| } |
| @media screen and (max-width: 50em) { |
| :host { |
| max-height: none; |
| } |
| .container { |
| max-height: none; |
| } |
| } |
| </style> |
| <div class="container"> |
| <section class="peopleContainer"> |
| <div class="peopleList"> |
| <div class="peopleListLabel">Owner</div> |
| <gr-account-chip account="[[_owner]]"> |
| <gr-account-chip> |
| </div> |
| </section> |
| <section class="peopleContainer"> |
| <div class="peopleList"> |
| <div class="peopleListLabel">Reviewers</div> |
| <gr-account-list |
| id="reviewers" |
| accounts="{{_reviewers}}" |
| removable-values="[[change.removable_reviewers]]" |
| change="[[change]]" |
| filter="[[filterReviewerSuggestion]]" |
| pending-confirmation="{{_reviewerPendingConfirmation}}" |
| placeholder="Add reviewer..."> |
| </gr-account-list> |
| </div> |
| <template is="dom-if" if="[[serverConfig.note_db_enabled]]"> |
| <div class="peopleList"> |
| <div class="peopleListLabel">CC</div> |
| <gr-account-list |
| id="ccs" |
| accounts="{{_ccs}}" |
| change="[[change]]" |
| filter="[[filterReviewerSuggestion]]" |
| pending-confirmation="{{_ccPendingConfirmation}}" |
| placeholder="Add CC..."> |
| </gr-account-list> |
| </div> |
| </template> |
| <gr-overlay |
| id="reviewerConfirmationOverlay" |
| on-iron-overlay-canceled="_cancelPendingReviewer" |
| with-backdrop> |
| <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-tap="_confirmPendingReviewer">Yes</gr-button> |
| <gr-button on-tap="_cancelPendingReviewer">No</gr-button> |
| </div> |
| </gr-overlay> |
| </section> |
| <section class="textareaContainer"> |
| <iron-autogrow-textarea |
| id="textarea" |
| class="message" |
| autocomplete="on" |
| placeholder="Say something nice..." |
| disabled="{{disabled}}" |
| rows="4" |
| max-rows="15" |
| bind-value="{{draft}}" |
| on-bind-value-changed="_handleHeightChanged"> |
| </iron-autogrow-textarea> |
| </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"> |
| <template is="dom-repeat" items="[[_labels]]" as="label"> |
| <div class="labelContainer"> |
| <span class="labelName">[[label.name]]</span> |
| <iron-selector data-label$="[[label.name]]" |
| selected="[[_computeIndexOfLabelValue(change.labels, permittedLabels, label)]]" |
| hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]"> |
| <template is="dom-repeat" |
| items="[[_computePermittedLabelValues(permittedLabels, label.name)]]" |
| as="value"> |
| <gr-button has-tooltip data-value$="[[value]]" |
| title$="[[_computeLabelValueTitle(change.labels, label.name, value)]]">[[value]]</gr-button> |
| </template> |
| </iron-selector> |
| <span class="labelMessage" |
| hidden$="[[_computeAnyPermittedLabelValues(permittedLabels, label.name)]]"> |
| You don't have permission to edit this label. |
| </span> |
| </div> |
| </template> |
| </section> |
| <section class="draftsContainer" hidden$="[[_computeHideDraftList(diffDrafts)]]"> |
| <h3>[[_computeDraftsTitle(diffDrafts)]]</h3> |
| <gr-comment-list |
| comments="[[diffDrafts]]" |
| change-num="[[change._number]]" |
| project-config="[[projectConfig]]" |
| patch-num="[[patchNum]]"></gr-comment-list> |
| </section> |
| <section class="actionsContainer"> |
| <gr-button primary class="action send" on-tap="_sendTapHandler">Send</gr-button> |
| <gr-button |
| id="cancelButton" |
| class="action cancel" |
| on-tap="_cancelTapHandler">Cancel</gr-button> |
| </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> |
| </template> |
| <script src="gr-reply-dialog.js"></script> |
| </dom-module> |
