| <!-- |
| 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="../../../bower_components/polymer/polymer.html"> |
| <link rel="import" href="../../../behaviors/keyboard-shortcut-behavior.html"> |
| <link rel="import" href="../../../behaviors/rest-client-behavior.html"> |
| <link rel="import" href="../../shared/gr-account-link/gr-account-link.html"> |
| <link rel="import" href="../../shared/gr-button/gr-button.html"> |
| <link rel="import" href="../../shared/gr-change-star/gr-change-star.html"> |
| <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html"> |
| <link rel="import" href="../../shared/gr-editable-content/gr-editable-content.html"> |
| <link rel="import" href="../../shared/gr-js-api-interface/gr-js-api-interface.html"> |
| <link rel="import" href="../../shared/gr-linked-text/gr-linked-text.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="../gr-change-actions/gr-change-actions.html"> |
| <link rel="import" href="../gr-change-metadata/gr-change-metadata.html"> |
| <link rel="import" href="../gr-download-dialog/gr-download-dialog.html"> |
| <link rel="import" href="../gr-file-list/gr-file-list.html"> |
| <link rel="import" href="../gr-messages-list/gr-messages-list.html"> |
| <link rel="import" href="../gr-related-changes-list/gr-related-changes-list.html"> |
| <link rel="import" href="../gr-reply-dialog/gr-reply-dialog.html"> |
| |
| <dom-module id="gr-change-view"> |
| <template> |
| <style> |
| .container:not(.loading) { |
| background-color: var(--view-background-color); |
| } |
| .container.loading { |
| color: #666; |
| padding: 1em var(--default-horizontal-margin); |
| } |
| .headerContainer { |
| height: 4.1em; |
| margin-bottom: .5em; |
| } |
| .header { |
| align-items: center; |
| background-color: var(--view-background-color); |
| border-bottom: 1px solid #ddd; |
| display: flex; |
| padding: 1em var(--default-horizontal-margin); |
| z-index: 99; /* Less than gr-overlay's backdrop */ |
| } |
| .header.pinned { |
| border-bottom-color: transparent; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
| position: fixed; |
| top: 0; |
| transition: box-shadow 250ms linear; |
| width: 100%; |
| } |
| .header-title { |
| flex: 1; |
| font-size: 1.2em; |
| font-weight: bold; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| gr-change-star { |
| margin-right: .25em; |
| vertical-align: -.425em; |
| } |
| .download, |
| .patchSelectLabel { |
| margin-left: 1em; |
| } |
| .header select { |
| margin-left: .5em; |
| } |
| .header .reply { |
| margin-left: var(--default-horizontal-margin); |
| } |
| gr-reply-dialog { |
| width: 50em; |
| } |
| .changeStatus { |
| color: #999; |
| text-transform: capitalize; |
| } |
| section { |
| margin: 10px 0; |
| padding: 10px var(--default-horizontal-margin); |
| } |
| /* Strong specificity here is needed due to |
| https://github.com/Polymer/polymer/issues/2531 */ |
| .container section.changeInfo { |
| border-bottom: 1px solid #ddd; |
| display: flex; |
| margin-top: 0; |
| padding-top: 0; |
| } |
| .changeInfo-column:not(:last-of-type) { |
| margin-right: 1em; |
| padding-right: 1em; |
| } |
| .changeMetadata { |
| border-right: 1px solid #ddd; |
| font-size: .9em; |
| } |
| gr-change-actions { |
| margin-top: 1em; |
| } |
| .commitMessage { |
| font-family: var(--monospace-font-family); |
| flex: 0 0 72ch; |
| margin-right: 2em; |
| margin-bottom: 1em; |
| overflow-x: hidden; |
| } |
| .commitMessage h4 { |
| font-family: var(--font-family); |
| font-weight: bold; |
| margin-bottom: .25em; |
| } |
| .commitMessage gr-linked-text { |
| --linked-text-white-space: pre; |
| overflow: auto; |
| } |
| .commitAndRelated { |
| align-content: flex-start; |
| display: flex; |
| flex: 1; |
| overflow-x: hidden; |
| } |
| .relatedChanges { |
| flex: 1 1 auto; |
| font-size: .9em; |
| overflow: hidden; |
| } |
| gr-file-list { |
| margin-bottom: 1em; |
| padding: 0 var(--default-horizontal-margin); |
| } |
| @media screen and (max-width: 50em) { |
| .headerContainer { |
| height: 5.15em; |
| } |
| .header { |
| align-items: flex-start; |
| flex-direction: column; |
| padding: .5em var(--default-horizontal-margin); |
| } |
| gr-change-star { |
| vertical-align: middle; |
| } |
| .header-title { |
| font-size: 1.1em; |
| } |
| .header-actions { |
| align-items: center; |
| display: flex; |
| justify-content: space-between; |
| margin-top: .5em; |
| } |
| gr-reply-dialog { |
| min-width: initial; |
| width: 90vw; |
| } |
| .download { |
| display: none; |
| } |
| .patchSelectLabel { |
| margin-left: 0; |
| margin-right: .5em; |
| } |
| .header select { |
| margin-left: 0; |
| margin-right: .5em; |
| } |
| .header .reply { |
| margin-left: 0; |
| margin-right: .5em; |
| } |
| .changeInfo-column:not(:last-of-type) { |
| margin-right: 0; |
| padding-right: 0; |
| } |
| .changeInfo, |
| .commitAndRelated { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| } |
| .relatedChanges, |
| .changeMetadata { |
| font-size: 1em; |
| } |
| .changeMetadata { |
| border-right: none; |
| margin-bottom: 1em; |
| margin-top: .25em; |
| max-width: none; |
| } |
| .commitMessage { |
| flex: initial; |
| margin-right: 0; |
| } |
| } |
| </style> |
| <div class="container loading" hidden$="{{!_loading}}">Loading...</div> |
| <div class="container" hidden$="{{_loading}}"> |
| <div class="headerContainer"> |
| <div class="header"> |
| <span class="header-title"> |
| <gr-change-star change="{{_change}}" hidden$="[[!_loggedIn]]"></gr-change-star> |
| <a href$="[[_computeChangePermalink(_change._number)]]">[[_change._number]]</a><span>:</span> |
| <span>[[_change.subject]]</span> |
| <span class="changeStatus">[[_computeChangeStatus(_change, _patchRange.patchNum)]]</span> |
| </span> |
| <span class="header-actions"> |
| <gr-button hidden |
| class="reply" |
| primary$="[[_computeReplyButtonHighlighted(_diffDrafts.*)]]" |
| hidden$="[[!_loggedIn]]" |
| on-tap="_handleReplyTap">[[_replyButtonLabel]]</gr-button> |
| <gr-button class="download" on-tap="_handleDownloadTap">Download</gr-button> |
| <span> |
| <label class="patchSelectLabel" for="patchSetSelect">Patch set</label> |
| <select id="patchSetSelect" on-change="_handlePatchChange"> |
| <template is="dom-repeat" items="{{_allPatchSets}}" as="patchNumber"> |
| <option value$="[[patchNumber]]" selected$="[[_computePatchIndexIsSelected(index, _patchRange.patchNum)]]"> |
| <span>[[patchNumber]]</span> |
| / |
| <span>[[_computeLatestPatchNum(_allPatchSets)]]</span> |
| </option> |
| </template> |
| </select> |
| </span> |
| </span> |
| </div> |
| </div> |
| <section class="changeInfo"> |
| <div class="changeInfo-column changeMetadata"> |
| <gr-change-metadata |
| change="{{_change}}" |
| commit-info="[[_commitInfo]]" |
| server-config="[[serverConfig]]" |
| mutable="[[_loggedIn]]" |
| on-show-reply-dialog="_handleShowReplyDialog"> |
| </gr-change-metadata> |
| <gr-change-actions id="actions" |
| change="[[_change]]" |
| actions="[[_change.actions]]" |
| change-num="[[_changeNum]]" |
| patch-num="[[_patchRange.patchNum]]" |
| commit-info="[[_commitInfo]]" |
| on-reload-change="_handleReloadChange"></gr-change-actions> |
| </div> |
| <div class="changeInfo-column commitAndRelated"> |
| <div class="commitMessage"> |
| <h4> |
| Commit message |
| <gr-button link |
| on-tap="_handleEditCommitMessage" |
| hidden$="[[_hideEditCommitMessage]]">Edit</gr-button> |
| </h4> |
| <gr-editable-content id="commitMessageEditor" |
| editing="[[_editingCommitMessage]]" |
| content="{{_commitInfo.message}}"> |
| <gr-linked-text pre |
| content="[[_commitInfo.message]]" |
| config="[[_projectConfig.commentlinks]]"></gr-linked-text> |
| </gr-editable-content> |
| </div> |
| <div class="relatedChanges"> |
| <gr-related-changes-list id="relatedChanges" |
| change="[[_change]]" |
| patch-num="[[_patchRange.patchNum]]"></gr-related-changes-list> |
| </div> |
| </div> |
| </section> |
| <gr-file-list id="fileList" |
| change="[[_change]]" |
| change-num="[[_changeNum]]" |
| patch-range="[[_patchRange]]" |
| comments="[[_comments]]" |
| drafts="[[_diffDrafts]]" |
| revisions="[[_change.revisions]]" |
| projectConfig="[[_projectConfig]]" |
| selected-index="{{viewState.selectedFileIndex}}"></gr-file-list> |
| <gr-messages-list id="messageList" |
| change-num="[[_changeNum]]" |
| messages="[[_change.messages]]" |
| reviewer-updates="[[_change.reviewer_updates]]" |
| comments="[[_comments]]" |
| project-config="[[_projectConfig]]" |
| show-reply-buttons="[[_loggedIn]]" |
| on-reply="_handleMessageReply"></gr-messages-list> |
| </div> |
| <gr-overlay id="downloadOverlay" with-backdrop> |
| <gr-download-dialog |
| change="[[_change]]" |
| logged-in="[[_loggedIn]]" |
| patch-num="[[_patchRange.patchNum]]" |
| config="[[serverConfig.download]]" |
| on-close="_handleDownloadDialogClose"></gr-download-dialog> |
| </gr-overlay> |
| <gr-overlay id="replyOverlay" |
| on-iron-overlay-opened="_handleReplyOverlayOpen" |
| with-backdrop> |
| <gr-reply-dialog id="replyDialog" |
| change="[[_change]]" |
| patch-num="[[_patchRange.patchNum]]" |
| revisions="[[_change.revisions]]" |
| labels="[[_change.labels]]" |
| permitted-labels="[[_change.permitted_labels]]" |
| diff-drafts="[[_diffDrafts]]" |
| server-config="[[serverConfig]]" |
| on-send="_handleReplySent" |
| on-cancel="_handleReplyCancel" |
| on-autogrow="_handleReplyAutogrow" |
| hidden$="[[!_loggedIn]]">Reply</gr-reply-dialog> |
| </gr-overlay> |
| <gr-js-api-interface id="jsAPI"></gr-js-api-interface> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| </template> |
| <script src="gr-change-view.js"></script> |
| </dom-module> |
