4c8549e12f
Because the white-space: pre-wrap was being set on an element far up the DOM tree, a lot of extra whitespace was being rendered as a result. Change-Id: I4238c90179793e8b0b8196b16b00b2649ad0230f
389 lines
12 KiB
HTML
389 lines
12 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="../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
|
<link rel="import" href="gr-ajax.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">
|
|
|
|
<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);
|
|
white-space: nowrap;
|
|
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 h2 {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.patchSelectLabel {
|
|
margin-left: var(--default-horizontal-margin);
|
|
}
|
|
.header select {
|
|
margin-left: .5em;
|
|
}
|
|
.header gr-reply-dropdown {
|
|
margin-left: var(--default-horizontal-margin);
|
|
}
|
|
section {
|
|
margin: 10px 0;
|
|
padding: 10px var(--default-horizontal-margin);
|
|
}
|
|
section:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
td {
|
|
padding: 2px 5px;
|
|
vertical-align: top;
|
|
}
|
|
.changeInfo-label {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
.summary {
|
|
border-top: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
font-family: 'Source Code Pro', Menlo, 'Lucida Console', Monaco, monospace;
|
|
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>
|
|
<div class="container loading" hidden$="{{!_loading}}">Loading...</div>
|
|
<div class="container" hidden$="{{_loading}}">
|
|
<div class="headerContainer">
|
|
<div class="header">
|
|
<h2>
|
|
<a href$="[[_computeChangePath(_change._number)]]">[[_change._number]]</a><span>:</span>
|
|
<span>[[_change.subject]]</span>
|
|
</h2>
|
|
<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>[[_change.owner.name]]</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="changeInfo-label">Reviewers</td>
|
|
<td>
|
|
<template is="dom-repeat"
|
|
items="[[_computeReviewers(_change.labels, _change.owner)]]"
|
|
as="reviewer">
|
|
<div>[[reviewer.name]]</div>
|
|
</template>
|
|
</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>
|
|
</table>
|
|
</section>
|
|
<section class="summary">
|
|
<gr-linked-text pre content="[[_commitInfo.message]]"></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',
|
|
|
|
behaviors: [
|
|
Polymer.IronA11yKeysBehavior
|
|
],
|
|
|
|
properties: {
|
|
keyEventTarget: {
|
|
type: Object,
|
|
value: function() {
|
|
return document.body;
|
|
},
|
|
},
|
|
/**
|
|
* URL params passed from the router.
|
|
*/
|
|
params: {
|
|
type: Object,
|
|
observer: '_paramsChanged',
|
|
},
|
|
|
|
_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,
|
|
_scrollHandler: Function,
|
|
},
|
|
|
|
keyBindings: {
|
|
'a u': '_handleKey',
|
|
},
|
|
|
|
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);
|
|
},
|
|
|
|
detached: function() {
|
|
window.removeEventListener('scroll', this._scrollHandler);
|
|
},
|
|
|
|
_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;
|
|
},
|
|
|
|
_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';
|
|
},
|
|
|
|
_computeDetailQueryParams: function() {
|
|
var options = Changes.listChangesOptionsToHex(
|
|
Changes.ListChangesOption.ALL_REVISIONS,
|
|
Changes.ListChangesOption.CHANGE_ACTIONS
|
|
);
|
|
return { O: options };
|
|
},
|
|
|
|
_computeReviewers: function(labels, owner) {
|
|
var reviewers =
|
|
(labels['Code-Review'] && labels['Code-Review'].all) || [];
|
|
if (reviewers.length == 1) { return reviewers; }
|
|
return reviewers.filter(function(reviewer) {
|
|
return reviewer._account_id != owner._account_id;
|
|
});
|
|
},
|
|
|
|
_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;
|
|
},
|
|
|
|
_handleKey: function(e) {
|
|
if (util.shouldSupressKeyboardShortcut(e)) { return; }
|
|
e.preventDefault();
|
|
switch(e.detail.combo) {
|
|
case 'a':
|
|
this.$.replyDropdown.open();
|
|
break;
|
|
case 'u':
|
|
page.show('/');
|
|
break;
|
|
}
|
|
},
|
|
|
|
_reload: function() {
|
|
var detailCompletes = this.$.detailXHR.generateRequest().completes;
|
|
this.$.commentsXHR.generateRequest();
|
|
var reloadCommitInfoAndFileList = function() {
|
|
this.$.commitInfoXHR.generateRequest();
|
|
this.$.fileList.reload();
|
|
}.bind(this);
|
|
|
|
if (this._patchNum) {
|
|
reloadCommitInfoAndFileList();
|
|
} else {
|
|
// The patch number is reliant on the change detail request.
|
|
detailCompletes.then(reloadCommitInfoAndFileList);
|
|
}
|
|
},
|
|
|
|
});
|
|
})();
|
|
</script>
|
|
</dom-module>
|