| <!-- |
| @license |
| 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/gr-patch-set-behavior/gr-patch-set-behavior.html"> |
| <link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html"> |
| <link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html"> |
| <link rel="import" href="../../../bower_components/paper-tabs/paper-tabs.html"> |
| <link rel="import" href="../../../styles/shared-styles.html"> |
| <link rel="import" href="../../core/gr-navigation/gr-navigation.html"> |
| <link rel="import" href="../../core/gr-reporting/gr-reporting.html"> |
| <link rel="import" href="../../diff/gr-comment-api/gr-comment-api.html"> |
| <link rel="import" href="../../diff/gr-diff-preferences/gr-diff-preferences.html"> |
| <link rel="import" href="../../edit/gr-edit-constants.html"> |
| <link rel="import" href="../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.html"> |
| <link rel="import" href="../../plugins/gr-endpoint-param/gr-endpoint-param.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-change-status/gr-change-status.html"> |
| <link rel="import" href="../../shared/gr-count-string-formatter/gr-count-string-formatter.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="../../shared/gr-tooltip-content/gr-tooltip-content.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-commit-info/gr-commit-info.html"> |
| <link rel="import" href="../gr-download-dialog/gr-download-dialog.html"> |
| <link rel="import" href="../gr-file-list-header/gr-file-list-header.html"> |
| <link rel="import" href="../gr-file-list/gr-file-list.html"> |
| <link rel="import" href="../gr-included-in-dialog/gr-included-in-dialog.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"> |
| <link rel="import" href="../gr-thread-list/gr-thread-list.html"> |
| <link rel="import" href="../gr-upload-help-dialog/gr-upload-help-dialog.html"> |
| |
| <dom-module id="gr-change-view"> |
| <template> |
| <style include="shared-styles"> |
| .container:not(.loading) { |
| background-color: var(--view-background-color); |
| } |
| .container.loading { |
| color: var(--deemphasized-text-color); |
| padding: 1em var(--default-horizontal-margin); |
| } |
| .header { |
| align-items: center; |
| background-color: var(--table-header-background-color); |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| padding: .55em var(--default-horizontal-margin); |
| z-index: 99; /* Less than gr-overlay's backdrop */ |
| } |
| .header.editMode { |
| background-color: var(--edit-mode-background-color); |
| } |
| .header .download { |
| margin-right: 1em; |
| } |
| gr-change-status { |
| display: initial; |
| margin: .1em .1em .1em .4em; |
| } |
| gr-change-status:first-child { |
| margin-left: 0; |
| } |
| .headerTitle { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| font-size: 1.2rem; |
| } |
| .headerTitle .headerSubject { |
| font-weight: var(--font-weight-bold); |
| } |
| #replyBtn { |
| margin-bottom: 1em; |
| } |
| gr-change-star { |
| font-size: var(--font-size-normal); |
| margin-right: .25em; |
| } |
| gr-reply-dialog { |
| width: 60em; |
| } |
| .changeStatus { |
| text-transform: capitalize; |
| } |
| /* Strong specificity here is needed due to |
| https://github.com/Polymer/polymer/issues/2531 */ |
| .container section.changeInfo { |
| display: flex; |
| } |
| .changeId { |
| color: var(--deemphasized-text-color); |
| font-family: var(--font-family); |
| margin-top: 1em; |
| } |
| .changeMetadata { |
| border-right: 1px solid var(--border-color); |
| } |
| /* Prevent plugin text from overflowing. */ |
| #change_plugins { |
| word-break: break-word; |
| } |
| .commitMessage { |
| font-family: var(--monospace-font-family); |
| margin-right: 1em; |
| margin-bottom: 1em; |
| max-width: var(--commit-message-max-width, 72ch);; |
| } |
| .commitMessage gr-linked-text { |
| word-break: break-word; |
| } |
| #commitMessageEditor { |
| min-width: 72ch; |
| } |
| .editCommitMessage { |
| margin-top: 1em; |
| --gr-button: { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| } |
| .changeStatuses, |
| .commitActions, |
| .statusText { |
| align-items: center; |
| display: flex; |
| } |
| .changeStatuses { |
| flex-wrap: wrap; |
| } |
| .mainChangeInfo { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| min-width: 0; |
| } |
| #commitAndRelated { |
| align-content: flex-start; |
| display: flex; |
| flex: 1; |
| overflow-x: hidden; |
| } |
| .relatedChanges { |
| flex: 1 1 auto; |
| overflow: hidden; |
| padding: 1em 0; |
| } |
| .mobile { |
| display: none; |
| } |
| .warning { |
| color: var(--error-text-color); |
| } |
| hr { |
| border: 0; |
| border-top: 1px solid var(--border-color); |
| height: 0; |
| margin-bottom: 1em; |
| } |
| #commitMessage.collapsed { |
| max-height: 36em; |
| overflow: hidden; |
| } |
| #relatedChanges { |
| } |
| #relatedChanges.collapsed { |
| margin-bottom: 1.1em; |
| max-height: var(--relation-chain-max-height, 2em); |
| overflow: hidden; |
| } |
| .commitContainer { |
| display: flex; |
| flex-direction: column; |
| flex-shrink: 0; |
| margin: 1em 0; |
| padding: 0 1em; |
| } |
| .collapseToggleContainer { |
| display: flex; |
| } |
| #relatedChangesToggle { |
| display: none; |
| } |
| #relatedChangesToggle.showToggle { |
| display: flex; |
| } |
| .collapseToggleContainer gr-button { |
| display: block; |
| } |
| #relatedChangesToggle { |
| margin-left: 1em; |
| padding-top: var(--related-change-btn-top-padding, 0); |
| } |
| .showOnEdit { |
| display: none; |
| } |
| .scrollable { |
| overflow: auto; |
| } |
| .text { |
| white-space: pre; |
| } |
| gr-commit-info { |
| display: inline-block; |
| margin-right: -5px; |
| } |
| paper-tabs { |
| background-color: var(--table-header-background-color); |
| border-top: 1px solid var(--border-color); |
| height: 3rem; |
| --paper-tabs-selection-bar-color: var(--link-color); |
| } |
| paper-tab { |
| max-width: 15rem; |
| --paper-tab-ink: var(--link-color); |
| } |
| gr-thread-list, |
| gr-messages-list { |
| display: block; |
| } |
| #includedInOverlay { |
| width: 65em; |
| } |
| #uploadHelpOverlay { |
| width: 50em; |
| } |
| @media screen and (min-width: 80em) { |
| .commitMessage { |
| max-width: var(--commit-message-max-width, 100ch); |
| } |
| } |
| #metadata { |
| --metadata-horizontal-padding: 1em; |
| padding-top: 1em; |
| width: 100%; |
| } |
| /* NOTE: If you update this breakpoint, also update the |
| BREAKPOINT_RELATED_MED in the JS */ |
| @media screen and (max-width: 75em) { |
| .relatedChanges { |
| padding: 0; |
| } |
| #relatedChanges { |
| border-top: 1px solid var(--border-color); |
| padding-top: 1em; |
| } |
| #commitAndRelated { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| } |
| #commitMessageEditor { |
| min-width: 0; |
| } |
| .commitMessage { |
| margin-right: 0; |
| } |
| .mainChangeInfo { |
| padding-right: 0; |
| } |
| } |
| /* NOTE: If you update this breakpoint, also update the |
| BREAKPOINT_RELATED_SMALL in the JS */ |
| @media screen and (max-width: 50em) { |
| .mobile { |
| display: block; |
| } |
| .header { |
| align-items: flex-start; |
| flex-direction: column; |
| flex: 1; |
| padding: .5em var(--default-horizontal-margin); |
| } |
| gr-change-star { |
| vertical-align: middle; |
| } |
| .headerTitle { |
| flex-wrap: wrap; |
| font-size: 1.1rem; |
| } |
| .desktop { |
| display: none; |
| } |
| .reply { |
| display: block; |
| margin-right: 0; |
| /* px because don't have the same font size */ |
| margin-bottom: 6px; |
| } |
| .changeInfo-column:not(:last-of-type) { |
| margin-right: 0; |
| padding-right: 0; |
| } |
| .changeInfo, |
| #commitAndRelated { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| } |
| .commitContainer { |
| margin: 0; |
| padding: 1em; |
| } |
| .relatedChanges, |
| .changeMetadata { |
| font-size: var(--font-size-normal); |
| } |
| .changeMetadata { |
| border-bottom: 1px solid var(--border-color); |
| border-right: none; |
| margin-top: .25em; |
| max-width: none; |
| } |
| #metadata, |
| .mainChangeInfo { |
| padding: 0; |
| } |
| .commitActions { |
| display: block; |
| margin-top: 1em; |
| width: 100%; |
| } |
| .commitMessage { |
| flex: initial; |
| margin: 0; |
| } |
| /* Change actions are the only thing thant need to remain visible due |
| to the fact that they may have the currently visible overlay open. */ |
| #mainContent.overlayOpen .hideOnMobileOverlay { |
| display: none; |
| } |
| gr-reply-dialog { |
| height: 100vh; |
| min-width: initial; |
| width: 100vw; |
| } |
| } |
| </style> |
| <div class="container loading" hidden$="[[!_loading]]">Loading...</div> |
| <div |
| id="mainContent" |
| class="container" |
| hidden$="{{_loading}}"> |
| <div class$="[[_computeHeaderClass(_editMode)]]"> |
| <div class="headerTitle"> |
| <gr-change-star |
| id="changeStar" |
| change="{{_change}}" |
| on-toggle-star="_handleToggleStar" |
| hidden$="[[!_loggedIn]]"></gr-change-star> |
| <div class="changeStatuses"> |
| <template is="dom-repeat" items="[[_changeStatuses]]" as="status"> |
| <gr-change-status |
| max-width="100" |
| status="[[status]]"></gr-change-status> |
| </template> |
| </div> |
| <div class="statusText"> |
| <template |
| is="dom-if" |
| if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]"> |
| <span class="text"> as </span> |
| <gr-commit-info |
| change="[[_change]]" |
| commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]" |
| server-config="[[_serverConfig]]"></gr-commit-info> |
| </template> |
| </div> |
| <span class="separator"></span> |
| <a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]" |
| href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a> |
| <pre>: </pre> |
| <span class="headerSubject">[[_change.subject]]</span> |
| </div><!-- end headerTitle --> |
| <div class="commitActions" hidden$="[[!_loggedIn]]"> |
| <gr-change-actions |
| id="actions" |
| change="[[_change]]" |
| disable-edit="[[disableEdit]]" |
| has-parent="[[hasParent]]" |
| actions="[[_change.actions]]" |
| revision-actions="[[_currentRevisionActions]]" |
| change-num="[[_changeNum]]" |
| change-status="[[_change.status]]" |
| commit-num="[[_commitInfo.commit]]" |
| latest-patch-num="[[computeLatestPatchNum(_allPatchSets)]]" |
| reply-disabled="[[_replyDisabled]]" |
| reply-button-label="[[_replyButtonLabel]]" |
| commit-message="[[_latestCommitMessage]]" |
| edit-patchset-loaded="[[hasEditPatchsetLoaded(_patchRange.*)]]" |
| edit-mode="[[_editMode]]" |
| edit-based-on-current-patch-set="[[hasEditBasedOnCurrentPatchSet(_allPatchSets)]]" |
| private-by-default="[[_projectConfig.private_by_default]]" |
| on-reload-change="_handleReloadChange" |
| on-edit-tap="_handleEditTap" |
| on-stop-edit-tap="_handleStopEditTap" |
| on-download-tap="_handleOpenDownloadDialog"></gr-change-actions> |
| </div><!-- end commit actions --> |
| </div><!-- end header --> |
| <section class="changeInfo"> |
| <div class="changeInfo-column changeMetadata hideOnMobileOverlay"> |
| <gr-change-metadata |
| id="metadata" |
| change="{{_change}}" |
| account="[[_account]]" |
| revision="[[_selectedRevision]]" |
| commit-info="[[_commitInfo]]" |
| server-config="[[_serverConfig]]" |
| parent-is-current="[[_parentIsCurrent]]" |
| on-show-reply-dialog="_handleShowReplyDialog"> |
| </gr-change-metadata> |
| <!-- Plugins insert content into following container. |
| Stop-gap until PolyGerrit plugins interface is ready. |
| This will not work with Shadow DOM. --> |
| <div id="change_plugins"></div> |
| </div> |
| <div id="mainChangeInfo" class="changeInfo-column mainChangeInfo"> |
| <div id="commitAndRelated" class="hideOnMobileOverlay"> |
| <div class="commitContainer"> |
| <div> |
| <gr-button |
| id="replyBtn" |
| class="reply" |
| hidden$="[[!_loggedIn]]" |
| primary |
| disabled="[[_replyDisabled]]" |
| on-tap="_handleReplyTap">[[_replyButtonLabel]]</gr-button> |
| </div> |
| <div |
| id="commitMessage" |
| class$="commitMessage [[_computeCommitClass(_commitCollapsed, _latestCommitMessage)]]"> |
| <gr-editable-content id="commitMessageEditor" |
| editing="[[_editingCommitMessage]]" |
| content="{{_latestCommitMessage}}" |
| storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]" |
| remove-zero-width-space> |
| <gr-linked-text pre |
| content="[[_latestCommitMessage]]" |
| config="[[_projectConfig.commentlinks]]" |
| remove-zero-width-space></gr-linked-text> |
| </gr-editable-content> |
| <gr-button link |
| class="editCommitMessage" |
| on-tap="_handleEditCommitMessage" |
| hidden$="[[_hideEditCommitMessage]]">Edit</gr-button> |
| <div class="changeId" hidden$="[[!_changeIdCommitMessageError]]"> |
| <hr> |
| Change-Id: |
| <span |
| class$="[[_computeChangeIdClass(_changeIdCommitMessageError)]]" |
| title$="[[_computeTitleAttributeWarning(_changeIdCommitMessageError)]]"> |
| [[_change.change_id]] |
| </span> |
| </div> |
| </div> |
| <div |
| id="commitCollapseToggle" |
| class="collapseToggleContainer" |
| hidden$="[[_computeCommitToggleHidden(_latestCommitMessage)]]"> |
| <gr-button |
| link |
| id="commitCollapseToggleButton" |
| class="collapseToggleButton" |
| on-tap="_toggleCommitCollapsed"> |
| [[_computeCollapseText(_commitCollapsed)]] |
| </gr-button> |
| </div> |
| </div> |
| <div class="relatedChanges"> |
| <gr-related-changes-list id="relatedChanges" |
| class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]" |
| change="[[_change]]" |
| mergeable="[[_mergeable]]" |
| has-parent="{{hasParent}}" |
| on-update="_updateRelatedChangeMaxHeight" |
| patch-num="[[computeLatestPatchNum(_allPatchSets)]]" |
| on-new-section-loaded="_computeShowRelatedToggle"> |
| </gr-related-changes-list> |
| <div |
| id="relatedChangesToggle" |
| class="collapseToggleContainer"> |
| <gr-button |
| link |
| id="relatedChangesToggleButton" |
| class="collapseToggleButton" |
| on-tap="_toggleRelatedChangesCollapsed"> |
| [[_computeCollapseText(_relatedChangesCollapsed)]] |
| </gr-button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| <section class="patchInfo"> |
| <gr-file-list-header |
| id="fileListHeader" |
| account="[[_account]]" |
| all-patch-sets="[[_allPatchSets]]" |
| change="[[_change]]" |
| change-num="[[_changeNum]]" |
| change-comments="[[_changeComments]]" |
| commit-info="[[_commitInfo]]" |
| change-url="[[_computeChangeUrl(_change)]]" |
| edit-mode="[[_editMode]]" |
| logged-in="[[_loggedIn]]" |
| server-config="[[_serverConfig]]" |
| shown-file-count="[[_shownFileCount]]" |
| diff-prefs="[[_diffPrefs]]" |
| diff-view-mode="{{viewState.diffMode}}" |
| patch-num="{{_patchRange.patchNum}}" |
| base-patch-num="{{_patchRange.basePatchNum}}" |
| files-expanded="[[_filesExpanded]]" |
| on-open-diff-prefs="_handleOpenDiffPrefs" |
| on-open-download-dialog="_handleOpenDownloadDialog" |
| on-open-upload-help-dialog="_handleOpenUploadHelpDialog" |
| on-open-included-in-dialog="_handleOpenIncludedInDialog" |
| on-expand-diffs="_expandAllDiffs" |
| on-collapse-diffs="_collapseAllDiffs"> |
| </gr-file-list-header> |
| <gr-file-list |
| id="fileList" |
| class="hideOnMobileOverlay" |
| diff-prefs="{{_diffPrefs}}" |
| change="[[_change]]" |
| change-num="[[_changeNum]]" |
| patch-range="{{_patchRange}}" |
| change-comments="[[_changeComments]]" |
| drafts="[[_diffDrafts]]" |
| revisions="[[_change.revisions]]" |
| project-config="[[_projectConfig]]" |
| selected-index="{{viewState.selectedFileIndex}}" |
| diff-view-mode="[[viewState.diffMode]]" |
| edit-mode="[[_editMode]]" |
| num-files-shown="{{_numFilesShown}}" |
| files-expanded="{{_filesExpanded}}" |
| file-list-increment="{{_numFilesShown}}" |
| on-files-shown-changed="_setShownFiles" |
| on-file-action-tap="_handleFileActionTap" |
| on-reload-drafts="_reloadDraftsWithCallback"></gr-file-list> |
| </section> |
| <gr-endpoint-decorator name="change-view-integration"> |
| <gr-endpoint-param name="change" value="[[_change]]"> |
| </gr-endpoint-param> |
| <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> |
| </gr-endpoint-param> |
| </gr-endpoint-decorator> |
| <paper-tabs |
| id="commentTabs" |
| on-selected-changed="_handleTabChange"> |
| <paper-tab class="changeLog">Change Log</paper-tab> |
| <paper-tab |
| class="commentThreads"> |
| <gr-tooltip-content |
| has-tooltip |
| title$="[[_computeTotalCommentCounts(_change.unresolved_comment_count, _changeComments)]]"> |
| <span>Comment Threads</span></gr-tooltip-content> |
| </paper-tab> |
| </paper-tabs> |
| <template is="dom-if" if="[[_showMessagesView]]"> |
| <gr-messages-list |
| class="hideOnMobileOverlay" |
| change-num="[[_changeNum]]" |
| labels="[[_change.labels]]" |
| messages="[[_change.messages]]" |
| reviewer-updates="[[_change.reviewer_updates]]" |
| change-comments="[[_changeComments]]" |
| project-name="[[_change.project]]" |
| show-reply-buttons="[[_loggedIn]]" |
| on-reply="_handleMessageReply"></gr-messages-list> |
| </template> |
| <template is="dom-if" if="[[!_showMessagesView]]"> |
| <gr-thread-list |
| threads="[[_commentThreads]]" |
| change="[[_change]]" |
| change-num="[[_changeNum]]" |
| logged-in="[[_loggedIn]]" |
| on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> |
| </template> |
| </div> |
| <gr-overlay id="downloadOverlay" with-backdrop> |
| <gr-download-dialog |
| id="downloadDialog" |
| change="[[_change]]" |
| patch-num="[[_patchRange.patchNum]]" |
| config="[[_serverConfig.download]]" |
| on-close="_handleDownloadDialogClose"></gr-download-dialog> |
| </gr-overlay> |
| <gr-overlay id="uploadHelpOverlay" with-backdrop> |
| <gr-upload-help-dialog |
| revision="[[_currentRevision]]" |
| target-branch="[[_change.branch]]" |
| on-close="_handleCloseUploadHelpDialog"></gr-upload-help-dialog> |
| </gr-overlay> |
| <gr-overlay id="includedInOverlay" with-backdrop> |
| <gr-included-in-dialog |
| id="includedInDialog" |
| change-num="[[_changeNum]]" |
| on-close="_handleIncludedInDialogClose"></gr-included-in-dialog> |
| </gr-overlay> |
| <gr-overlay id="replyOverlay" |
| class="scrollable" |
| no-cancel-on-outside-click |
| no-cancel-on-esc-key |
| with-backdrop> |
| <gr-reply-dialog id="replyDialog" |
| change="{{_change}}" |
| patch-num="[[computeLatestPatchNum(_allPatchSets)]]" |
| permitted-labels="[[_change.permitted_labels]]" |
| diff-drafts="[[_diffDrafts]]" |
| server-config="[[_serverConfig]]" |
| project-config="[[_projectConfig]]" |
| can-be-started="[[_canStartReview]]" |
| on-send="_handleReplySent" |
| on-cancel="_handleReplyCancel" |
| on-autogrow="_handleReplyAutogrow" |
| on-send-disabled-changed="_resetReplyOverlayFocusStops" |
| hidden$="[[!_loggedIn]]"> |
| </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> |
| <gr-comment-api id="commentAPI"></gr-comment-api> |
| <gr-reporting id="reporting"></gr-reporting> |
| </template> |
| <script src="gr-change-view.js"></script> |
| </dom-module> |
