f8b026d227
One notable thing that I intentionally did was name the event coming from the dropdown more simply. This makes it easier to add a handler within the html like `on-send` instead of `on-gr-reply-dropdown-send`. After a bit of thought I think we should simplify all event names for this purpose. Feature: Issue 3649 Change-Id: I2460db54b5d85243988c22f572c00043c5597210
311 lines
9.0 KiB
HTML
311 lines
9.0 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-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 {
|
|
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;
|
|
}
|
|
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;
|
|
white-space: pre-wrap;
|
|
}
|
|
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>
|
|
<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>
|
|
<gr-reply-dropdown id="replyDropdown"
|
|
change-num="[[changeNum]]"
|
|
patch-num="[[_computePatchNum(change.current_revision)]]"
|
|
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">[[_computeCurrentRevisionMessage(change)]]</section>
|
|
<gr-file-list change-num="[[changeNum]]"
|
|
patch-num="[[_computePatchNum(change.current_revision)]]"
|
|
revision="[[change.current_revision]]"
|
|
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',
|
|
},
|
|
changeNum: Number,
|
|
|
|
_loggedIn: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
_loading: Boolean,
|
|
_headerContainerEl: Object,
|
|
_headerEl: Object,
|
|
},
|
|
|
|
keyBindings: {
|
|
'a u': '_handleKey',
|
|
},
|
|
|
|
ready: function() {
|
|
app.accountReady.then(function() {
|
|
this._loggedIn = app.loggedIn;
|
|
}.bind(this));
|
|
},
|
|
|
|
attached: function() {
|
|
window.addEventListener('scroll',
|
|
this._handleBodyScroll.bind(this));
|
|
},
|
|
|
|
_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;
|
|
}
|
|
|
|
var el = this._headerEl || this.$$('.header');
|
|
el.classList.toggle('pinned', window.scrollY >= top);
|
|
},
|
|
|
|
_handleReplySent: function(e) {
|
|
this._reload();
|
|
},
|
|
|
|
_paramsChanged: function(value) {
|
|
this.changeNum = value.changeNum;
|
|
if (!this.changeNum) {
|
|
this.change = null;
|
|
this.comments = null;
|
|
return;
|
|
}
|
|
this._reload();
|
|
},
|
|
|
|
_computeChangePath: function(changeNum) {
|
|
return '/c/' + changeNum;
|
|
},
|
|
|
|
_computeDetailPath: function(changeNum) {
|
|
return '/changes/' + changeNum + '/detail';
|
|
},
|
|
|
|
_computeCommitInfoPath: function(changeNum, commitHash) {
|
|
return '/changes/' + changeNum + '/revisions/' + commitHash + '/commit';
|
|
},
|
|
|
|
_computeCommentsPath: function(changeNum) {
|
|
return '/changes/' + changeNum + '/comments';
|
|
},
|
|
|
|
_computePatchNum: function(revision) {
|
|
return this.change && this.change.revisions[revision]._number;
|
|
},
|
|
|
|
_computeDetailQueryParams: function() {
|
|
var options = Changes.listChangesOptionsToHex(
|
|
Changes.ListChangesOption.CURRENT_REVISION,
|
|
Changes.ListChangesOption.CURRENT_COMMIT,
|
|
Changes.ListChangesOption.CHANGE_ACTIONS
|
|
);
|
|
return { O: options };
|
|
},
|
|
|
|
_computeCurrentRevisionMessage: function(change) {
|
|
return change &&
|
|
change.revisions[change.current_revision].commit.message;
|
|
},
|
|
|
|
_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;
|
|
});
|
|
},
|
|
|
|
_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() {
|
|
this.$.detailXHR.generateRequest();
|
|
this.$.commentsXHR.generateRequest();
|
|
},
|
|
|
|
});
|
|
})();
|
|
</script>
|
|
</dom-module>
|