| <!-- |
| 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="gr-account-link.html"> |
| <link rel="import" href="gr-ajax.html"> |
| <link rel="import" href="gr-change-actions.html"> |
| <link rel="import" href="gr-change-star.html"> |
| <link rel="import" href="gr-date-formatter.html"> |
| <link rel="import" href="gr-file-list.html"> |
| <link rel="import" href="gr-linked-text.html"> |
| <link rel="import" href="gr-messages-list.html"> |
| <link rel="import" href="gr-reply-dropdown.html"> |
| <link rel="import" href="gr-reviewer-list.html"> |
| |
| <dom-module id="gr-change-view"> |
| <template> |
| <style> |
| .container { |
| margin: 1em var(--default-horizontal-margin); |
| } |
| .container:not(.loading) { |
| background-color: var(--view-background-color); |
| } |
| .container.loading { |
| color: #666; |
| } |
| .headerContainer { |
| height: 4.1em; |
| } |
| .header { |
| align-items: center; |
| background-color: var(--view-background-color); |
| display: flex; |
| padding: 1em var(--default-horizontal-margin); |
| z-index: 1000; |
| } |
| .header.pinned { |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
| position: fixed; |
| top: 0; |
| transition: box-shadow 250ms linear; |
| width: calc(100% - (2 * var(--default-horizontal-margin))); |
| } |
| .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; |
| } |
| .patchSelectLabel { |
| margin-left: var(--default-horizontal-margin); |
| } |
| .header select { |
| margin-left: .5em; |
| } |
| .header gr-reply-dropdown { |
| margin-left: var(--default-horizontal-margin); |
| } |
| .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 { |
| margin-top: 0; |
| padding-top: 0; |
| } |
| table { |
| border-collapse: collapse; |
| } |
| td { |
| padding: 2px 5px; |
| vertical-align: top; |
| } |
| gr-reviewer-list { |
| min-width: 25em; |
| } |
| .changeInfo-label { |
| font-weight: bold; |
| text-align: right; |
| } |
| .labelValue:not(:first-of-type) { |
| margin-top: .25em; |
| } |
| .labelValue .approved, |
| .labelValue .notApproved { |
| display: inline-block; |
| padding: .1em .3em; |
| border-radius: 3px; |
| } |
| .approved { |
| background-color: #d4ffd4; |
| } |
| .notApproved { |
| background-color: #ffd4d4; |
| } |
| gr-change-actions { |
| margin-top: 1em; |
| } |
| .summary { |
| border-top: 1px solid #ddd; |
| border-bottom: 1px solid #ddd; |
| font-family: var(--monospace-font-family); |
| overflow-x: auto; |
| } |
| gr-file-list { |
| padding: 0 var(--default-horizontal-margin) 10px; |
| } |
| </style> |
| <gr-ajax id="detailXHR" |
| url="[[_computeDetailPath(_changeNum)]]" |
| params="[[_computeDetailQueryParams()]]" |
| last-response="{{_change}}" |
| loading="{{_loading}}"></gr-ajax> |
| <gr-ajax id="commentsXHR" |
| url="[[_computeCommentsPath(_changeNum)]]" |
| last-response="{{_comments}}"></gr-ajax> |
| <gr-ajax id="commitInfoXHR" |
| url="[[_computeCommitInfoPath(_changeNum, _patchNum)]]" |
| last-response="{{_commitInfo}}"></gr-ajax> |
| <!-- TODO(andybons): Cache the project config. --> |
| <gr-ajax id="configXHR" |
| auto |
| url="[[_computeProjectConfigPath(_change.project)]]" |
| last-response="{{_projectConfig}}"></gr-ajax> |
| <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$="[[_computeChangePath(_change._number)]]">[[_change._number]]</a><span>:</span> |
| <span>[[_change.subject]]</span> |
| <span class="changeStatus">[[_computeChangeStatus(_change.status)]]</span> |
| </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, _patchNum)]]"> |
| <span>[[patchNumber]]</span> |
| / |
| <span>[[_computeLatestPatchNum(_change)]]</span> |
| </option> |
| </template> |
| </select> |
| <gr-reply-dropdown id="replyDropdown" |
| change-num="[[_changeNum]]" |
| patch-num="[[_patchNum]]" |
| labels="[[_change.labels]]" |
| permitted-labels="[[_change.permitted_labels]]" |
| on-send="_handleReplySent" |
| hidden$="[[!_loggedIn]]">Reply</gr-reply-dropdown> |
| </div> |
| </div> |
| <section class="changeInfo"> |
| <table> |
| <tr> |
| <td class="changeInfo-label">Owner</td> |
| <td> |
| <gr-account-link account="[[_change.owner]]" |
| show-email></gr-account-link> |
| </td> |
| </tr> |
| <tr> |
| <td class="changeInfo-label">Reviewers</td> |
| <td> |
| <gr-reviewer-list |
| change="[[_change]]" |
| mutable="[[_loggedIn]]" |
| suggest-from="[[serverConfig.suggest.from]]"></gr-reviewer-list> |
| </td> |
| </tr> |
| <tr> |
| <td class="changeInfo-label">Project</td> |
| <td>[[_change.project]]</td> |
| </tr> |
| <tr> |
| <td class="changeInfo-label">Branch</td> |
| <td>[[_change.branch]]</td> |
| </tr> |
| <tr> |
| <td class="changeInfo-label">Topic</td> |
| <td>[[_change.topic]]</td> |
| </tr> |
| <tr> |
| <td class="changeInfo-label">Strategy</td> |
| <td></td> |
| </tr> |
| <tr> |
| <td class="changeInfo-label">Updated</td> |
| <td> |
| <gr-date-formatter |
| date-str="[[_change.updated]]"></gr-date-formatter> |
| </td> |
| </tr> |
| <template is="dom-repeat" |
| items="[[_computeLabelNames(_change.labels)]]" as="labelName"> |
| <tr> |
| <td class="changeInfo-label">[[labelName]]</td> |
| <td> |
| <template is="dom-repeat" |
| items="[[_computeLabelValues(labelName, _change.labels)]]" |
| as="label"> |
| <div class="labelValue"> |
| <span class$="[[label.className]]"> |
| <span>[[label.value]]</span> |
| <gr-account-link account="[[label.account]]" |
| show-email></gr-account-link> |
| </span> |
| </div> |
| </template> |
| </td> |
| </tr> |
| </template> |
| </table> |
| <gr-change-actions id="actions" |
| actions="[[_change.actions]]" |
| change-num="[[_changeNum]]" |
| patch-num="[[_patchNum]]" |
| on-reload-change="_reload"></gr-change-actions> |
| </section> |
| <section class="summary"> |
| <gr-linked-text pre |
| content="[[_commitInfo.message]]" |
| config="[[_projectConfig.commentlinks]]"></gr-linked-text> |
| </section> |
| <gr-file-list id="fileList" |
| change-num="[[_changeNum]]" |
| patch-num="[[_patchNum]]" |
| comments="[[_comments]]" |
| selected-index="{{viewState.selectedFileIndex}}"></gr-file-list> |
| <gr-messages-list id="messageList" |
| change-num="[[_changeNum]]" |
| messages="[[_change.messages]]" |
| comments="[[_comments]]" |
| project-config="[[_projectConfig]]" |
| show-reply-buttons="[[_loggedIn]]" |
| on-reply="_handleMessageReply"></gr-messages-list> |
| </div> |
| </template> |
| <script> |
| (function() { |
| 'use strict'; |
| |
| Polymer({ |
| is: 'gr-change-view', |
| |
| /** |
| * Fired when the title of the page should change. |
| * |
| * @event title-change |
| */ |
| |
| properties: { |
| /** |
| * URL params passed from the router. |
| */ |
| params: { |
| type: Object, |
| observer: '_paramsChanged', |
| }, |
| viewState: { |
| type: Object, |
| notify: true, |
| value: function() { return {}; }, |
| }, |
| serverConfig: Object, |
| keyEventTarget: { |
| type: Object, |
| value: function() { return document.body; }, |
| }, |
| |
| _comments: Object, |
| _change: { |
| type: Object, |
| observer: '_changeChanged', |
| }, |
| _commitInfo: Object, |
| _changeNum: String, |
| _patchNum: String, |
| _allPatchSets: { |
| type: Array, |
| computed: '_computeAllPatchSets(_change)', |
| }, |
| _loggedIn: { |
| type: Boolean, |
| value: false, |
| }, |
| _loading: Boolean, |
| _headerContainerEl: Object, |
| _headerEl: Object, |
| _projectConfig: Object, |
| _boundScrollHandler: { |
| type: Function, |
| value: function() { return this._handleBodyScroll.bind(this); }, |
| }, |
| }, |
| |
| behaviors: [ |
| Gerrit.KeyboardShortcutBehavior, |
| Gerrit.RESTClientBehavior, |
| ], |
| |
| ready: function() { |
| app.accountReady.then(function() { |
| this._loggedIn = app.loggedIn; |
| }.bind(this)); |
| this._headerEl = this.$$('.header'); |
| }, |
| |
| attached: function() { |
| window.addEventListener('scroll', this._boundScrollHandler); |
| }, |
| |
| detached: function() { |
| window.removeEventListener('scroll', this._boundScrollHandler); |
| }, |
| |
| _handleBodyScroll: function(e) { |
| var containerEl = this._headerContainerEl || |
| this.$$('.headerContainer'); |
| |
| // Calculate where the header is relative to the window. |
| var top = containerEl.offsetTop; |
| for (var offsetParent = containerEl.offsetParent; |
| offsetParent; |
| offsetParent = offsetParent.offsetParent) { |
| top += offsetParent.offsetTop; |
| } |
| // The element may not be displayed yet, in which case do nothing. |
| if (top == 0) { return; } |
| |
| this._headerEl.classList.toggle('pinned', window.scrollY >= top); |
| }, |
| |
| _resetHeaderEl: function() { |
| var el = this._headerEl || this.$$('.header'); |
| this._headerEl = el; |
| el.classList.remove('pinned'); |
| }, |
| |
| _handlePatchChange: function(e) { |
| var patchNum = e.target.value; |
| var currentPatchNum = |
| this._change.revisions[this._change.current_revision]._number; |
| if (patchNum == currentPatchNum) { |
| page.show(this._computeChangePath(this._changeNum)); |
| return; |
| } |
| page.show(this._computeChangePath(this._changeNum) + '/' + patchNum); |
| }, |
| |
| _handleMessageReply: function(e) { |
| var msg = e.detail.message.message; |
| var quoteStr = msg.split('\n').map( |
| function(line) { return '> ' + line; }).join('\n') + '\n\n'; |
| this.$.replyDropdown.draft += quoteStr; |
| this.$.replyDropdown.open(); |
| }, |
| |
| _handleReplySent: function(e) { |
| this._reload(); |
| }, |
| |
| _paramsChanged: function(value) { |
| if (value.view != this.tagName.toLowerCase()) { return; } |
| |
| this._changeNum = value.changeNum; |
| this._patchNum = value.patchNum; |
| if (this.viewState.changeNum != this._changeNum || |
| this.viewState.patchNum != this._patchNum) { |
| this.set('viewState.selectedFileIndex', 0); |
| this.set('viewState.changeNum', this._changeNum); |
| this.set('viewState.patchNum', this._patchNum); |
| } |
| if (!this._changeNum) { |
| return; |
| } |
| this._reload().then(function() { |
| this.$.messageList.topMargin = this._headerEl.offsetHeight; |
| |
| // Allow the message list to render before scrolling. |
| this.async(function() { |
| var msgPrefix = '#message-'; |
| var hash = window.location.hash; |
| if (hash.indexOf(msgPrefix) == 0) { |
| this.$.messageList.scrollToMessage(hash.substr(msgPrefix.length)); |
| } |
| }.bind(this), 1); |
| |
| app.accountReady.then(function() { |
| if (!this._loggedIn) { return; } |
| |
| if (this.viewState.showReplyDropdown) { |
| this.$.replyDropdown.open(); |
| this.set('viewState.showReplyDropdown', false); |
| } |
| }.bind(this)); |
| }.bind(this)); |
| }, |
| |
| _changeChanged: function(change) { |
| if (!change) { return; } |
| this._patchNum = this._patchNum || |
| change.revisions[change.current_revision]._number; |
| |
| var title = change.subject + ' (' + change.change_id.substr(0, 9) + ')'; |
| this.fire('title-change', {title: title}); |
| }, |
| |
| _computeChangePath: function(changeNum) { |
| return '/c/' + changeNum; |
| }, |
| |
| _computeChangeStatus: function(status) { |
| if (status == this.ChangeStatus.NEW) { |
| return ''; |
| } |
| return '(' + status.toLowerCase() + ')'; |
| }, |
| |
| _computeDetailPath: function(changeNum) { |
| return '/changes/' + changeNum + '/detail'; |
| }, |
| |
| _computeCommitInfoPath: function(changeNum, patchNum) { |
| return this.changeBaseURL(changeNum, patchNum) + '/commit?links'; |
| }, |
| |
| _computeCommentsPath: function(changeNum) { |
| return '/changes/' + changeNum + '/comments'; |
| }, |
| |
| _computeProjectConfigPath: function(project) { |
| return '/projects/' + encodeURIComponent(project) + '/config'; |
| }, |
| |
| _computeDetailQueryParams: function() { |
| var options = this.listChangesOptionsToHex( |
| this.ListChangesOption.ALL_REVISIONS, |
| this.ListChangesOption.CHANGE_ACTIONS |
| ); |
| return {O: options}; |
| }, |
| |
| _computeLatestPatchNum: function(change) { |
| return change.revisions[change.current_revision]._number; |
| }, |
| |
| _computeAllPatchSets: function(change) { |
| var patchNums = []; |
| for (var rev in change.revisions) { |
| patchNums.push(change.revisions[rev]._number); |
| } |
| return patchNums.sort(); |
| }, |
| |
| _computePatchIndexIsSelected: function(index, patchNum) { |
| return this._allPatchSets[index] == patchNum; |
| }, |
| |
| _computeLabelNames: function(labels) { |
| return Object.keys(labels).sort(); |
| }, |
| |
| _computeLabelValues: function(labelName, labels) { |
| var result = []; |
| var t = labels[labelName]; |
| if (!t) { return result; } |
| var approvals = t.all || []; |
| approvals.forEach(function(label) { |
| if (label.value && label.value != labels[labelName].default_value) { |
| var labelClassName; |
| var labelValPrefix = ''; |
| if (label.value > 0) { |
| labelValPrefix = '+'; |
| labelClassName = 'approved'; |
| } else if (label.value < 0) { |
| labelClassName = 'notApproved'; |
| } |
| result.push({ |
| value: labelValPrefix + label.value, |
| className: labelClassName, |
| account: label, |
| }); |
| } |
| }); |
| return result; |
| }, |
| |
| _handleKey: function(e) { |
| if (this.shouldSupressKeyboardShortcut(e)) { return; } |
| |
| switch (e.keyCode) { |
| case 65: // 'a' |
| e.preventDefault(); |
| this.$.replyDropdown.open(); |
| break; |
| case 85: // 'u' |
| e.preventDefault(); |
| page.show('/'); |
| break; |
| } |
| }, |
| |
| _reload: function() { |
| var detailCompletes = this.$.detailXHR.generateRequest().completes; |
| this.$.commentsXHR.generateRequest(); |
| var reloadPatchNumDependentResources = function() { |
| return Promise.all([ |
| this.$.commitInfoXHR.generateRequest().completes, |
| this.$.actions.reload(), |
| this.$.fileList.reload(), |
| ]); |
| }.bind(this); |
| |
| this._resetHeaderEl(); |
| |
| if (this._patchNum) { |
| return reloadPatchNumDependentResources(); |
| } else { |
| // The patch number is reliant on the change detail request. |
| return detailCompletes.then(reloadPatchNumDependentResources); |
| } |
| }, |
| |
| }); |
| })(); |
| </script> |
| </dom-module> |
