1141b4eef0
Due to known bugs[1] use the keyCode instead. [1] https://github.com/PolymerElements/iron-a11y-keys-behavior/issues/27 Change-Id: I61d80d6df5a241968651818324ca266304c9be69
478 lines
15 KiB
HTML
478 lines
15 KiB
HTML
<!--
|
|
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="gr-account-link.html">
|
|
<link rel="import" href="gr-ajax.html">
|
|
<link rel="import" href="gr-change-actions.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 0;
|
|
}
|
|
.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;
|
|
max-width: var(--max-constrained-width);
|
|
padding: 1em var(--default-horizontal-margin);
|
|
width: 100%;
|
|
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;
|
|
}
|
|
.header-title {
|
|
flex: 1;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.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">
|
|
<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"
|
|
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]]"></gr-file-list>
|
|
<gr-messages-list
|
|
change-num="[[_changeNum]]"
|
|
messages="[[_change.messages]]"
|
|
comments="[[_comments]]"></gr-messages-list>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
Polymer({
|
|
is: 'gr-change-view',
|
|
|
|
properties: {
|
|
/**
|
|
* URL params passed from the router.
|
|
*/
|
|
params: {
|
|
type: Object,
|
|
observer: '_paramsChanged',
|
|
},
|
|
serverConfig: Object,
|
|
|
|
_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,
|
|
_scrollHandler: Function,
|
|
_boundKeyHandler: {
|
|
type: Function,
|
|
value: function() { return this._handleKey.bind(this); },
|
|
}
|
|
},
|
|
|
|
ready: function() {
|
|
app.accountReady.then(function() {
|
|
this._loggedIn = app.loggedIn;
|
|
}.bind(this));
|
|
this._scrollHandler = this._handleBodyScroll.bind(this);
|
|
},
|
|
|
|
attached: function() {
|
|
window.addEventListener('scroll', this._scrollHandler);
|
|
document.body.addEventListener('keydown', this._boundKeyHandler);
|
|
},
|
|
|
|
detached: function() {
|
|
window.removeEventListener('scroll', this._scrollHandler);
|
|
document.body.removeEventListener('keydown', this._boundKeyHandler);
|
|
},
|
|
|
|
_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; }
|
|
|
|
var el = this._headerEl || this.$$('.header');
|
|
this._headerEl = el;
|
|
el.classList.toggle('pinned', window.scrollY >= top);
|
|
},
|
|
|
|
_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);
|
|
},
|
|
|
|
_handleReplySent: function(e) {
|
|
this._reload();
|
|
},
|
|
|
|
_paramsChanged: function(value) {
|
|
this._changeNum = value.changeNum;
|
|
this._patchNum = value.patchNum;
|
|
if (!this._changeNum) {
|
|
return;
|
|
}
|
|
this._reload();
|
|
},
|
|
|
|
_changeChanged: function(change) {
|
|
if (!change) { return; }
|
|
this._patchNum = this._patchNum ||
|
|
change.revisions[change.current_revision]._number;
|
|
},
|
|
|
|
_computeChangePath: function(changeNum) {
|
|
return '/c/' + changeNum;
|
|
},
|
|
|
|
_computeChangeStatus: function(status) {
|
|
if (status == Changes.Status.NEW) {
|
|
return '';
|
|
}
|
|
return '(' + status.toLowerCase() + ')';
|
|
},
|
|
|
|
_computeDetailPath: function(changeNum) {
|
|
return '/changes/' + changeNum + '/detail';
|
|
},
|
|
|
|
_computeCommitInfoPath: function(changeNum, patchNum) {
|
|
return Changes.baseURL(changeNum, patchNum) + '/commit?links';
|
|
},
|
|
|
|
_computeCommentsPath: function(changeNum) {
|
|
return '/changes/' + changeNum + '/comments';
|
|
},
|
|
|
|
_computeProjectConfigPath: function(project) {
|
|
return '/projects/' + encodeURIComponent(project) + '/config';
|
|
},
|
|
|
|
_computeDetailQueryParams: function() {
|
|
var options = Changes.listChangesOptionsToHex(
|
|
Changes.ListChangesOption.ALL_REVISIONS,
|
|
Changes.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 approvals = labels[labelName].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 (util.shouldSupressKeyboardShortcut(e)) { return; }
|
|
e.preventDefault();
|
|
switch(e.keyCode) {
|
|
case 65: // 'a'
|
|
this.$.replyDropdown.open();
|
|
break;
|
|
case 85: // 'u'
|
|
page.show('/');
|
|
break;
|
|
}
|
|
},
|
|
|
|
_reload: function() {
|
|
var detailCompletes = this.$.detailXHR.generateRequest().completes;
|
|
this.$.commentsXHR.generateRequest();
|
|
var reloadPatchNumDependentResources = function() {
|
|
this.$.commitInfoXHR.generateRequest();
|
|
this.$.actions.reload();
|
|
this.$.fileList.reload();
|
|
}.bind(this);
|
|
|
|
if (this._patchNum) {
|
|
reloadPatchNumDependentResources();
|
|
} else {
|
|
// The patch number is reliant on the change detail request.
|
|
detailCompletes.then(reloadPatchNumDependentResources);
|
|
}
|
|
},
|
|
|
|
});
|
|
})();
|
|
</script>
|
|
</dom-module>
|