b159a7f5cc
- Create a shared style module that is included in every custom element - Add the shared style module to each existing element Change-Id: I1ee382955afe4ff630548a6640e7c4d03688849d
558 lines
20 KiB
HTML
558 lines
20 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="../../../behaviors/base-url-behavior/base-url-behavior.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/polymer/polymer.html">
|
|
<link rel="import" href="../../diff/gr-diff-preferences/gr-diff-preferences.html">
|
|
<link rel="import" href="../../shared/gr-account-link/gr-account-link.html">
|
|
<link rel="import" href="../../shared/gr-select/gr-select.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-date-formatter/gr-date-formatter.html">
|
|
<link rel="import" href="../../shared/gr-editable-content/gr-editable-content.html">
|
|
<link rel="import" href="../../shared/gr-editable-label/gr-editable-label.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="../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/gr-file-list.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="../../../styles/shared-styles.html">
|
|
|
|
<dom-module id="gr-change-view">
|
|
<template>
|
|
<style include="shared-styles">
|
|
.container:not(.loading) {
|
|
background-color: var(--view-background-color);
|
|
}
|
|
.container.loading {
|
|
color: #666;
|
|
padding: 1em var(--default-horizontal-margin);
|
|
}
|
|
.header {
|
|
align-items: center;
|
|
background-color: var(--view-background-color);
|
|
display: flex;
|
|
padding: .65em var(--default-horizontal-margin);
|
|
z-index: 99; /* Less than gr-overlay's backdrop */
|
|
}
|
|
.header .download {
|
|
margin-right: 1em;
|
|
}
|
|
.header.pinned {
|
|
border-bottom-color: transparent;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
position: fixed;
|
|
top: 0;
|
|
transition: box-shadow 250ms linear;
|
|
width: 100%;
|
|
}
|
|
.header.wip {
|
|
background-color: #fcfad6;
|
|
border-bottom: 1px solid #ddd;
|
|
margin-bottom: .5em;
|
|
}
|
|
.header-title {
|
|
flex: 1;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
.prefsButton {
|
|
float: right;
|
|
}
|
|
gr-change-star {
|
|
margin-right: .25em;
|
|
vertical-align: -.425em;
|
|
}
|
|
gr-reply-dialog {
|
|
width: 50em;
|
|
}
|
|
.changeStatus {
|
|
text-transform: capitalize;
|
|
}
|
|
/* Strong specificity here is needed due to
|
|
https://github.com/Polymer/polymer/issues/2531 */
|
|
.container section.changeInfo {
|
|
display: flex;
|
|
padding: 0 var(--default-horizontal-margin);
|
|
}
|
|
.changeId {
|
|
color: #666;
|
|
font-family: var(--font-family);
|
|
margin-top: 1em;
|
|
}
|
|
.changeInfo-column:not(:last-of-type) {
|
|
margin-right: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
.changeMetadata {
|
|
font-size: .95em;
|
|
}
|
|
/* 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 {
|
|
overflow: auto;
|
|
word-break: break-all;
|
|
}
|
|
#commitMessageEditor {
|
|
min-width: 72ch;
|
|
}
|
|
.editCommitMessage {
|
|
margin-top: 1em;
|
|
}
|
|
.commitActions {
|
|
border-bottom: 1px solid #ddd;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: .5em;
|
|
padding-bottom: .5em;
|
|
}
|
|
.reply {
|
|
margin-right: .5em;
|
|
}
|
|
.mainChangeInfo {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
#commitAndRelated {
|
|
align-content: flex-start;
|
|
display: flex;
|
|
flex: 1;
|
|
overflow-x: hidden;
|
|
}
|
|
.collapseToggleButton {
|
|
text-decoration: none;
|
|
}
|
|
.relatedChanges {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
}
|
|
.patchInfo {
|
|
border: 1px solid #ddd;
|
|
margin: 1em var(--default-horizontal-margin);
|
|
}
|
|
.patchInfo--oldPatchSet .patchInfo-header {
|
|
background-color: #fff9c4;
|
|
}
|
|
.patchInfo--oldPatchSet .latestPatchContainer {
|
|
display: initial;
|
|
}
|
|
.patchInfo-header,
|
|
gr-file-list {
|
|
padding: .5em calc(var(--default-horizontal-margin) / 2);
|
|
}
|
|
.patchInfo-header {
|
|
background-color: #f6f6f6;
|
|
border-bottom: 1px solid #ebebeb;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.latestPatchContainer {
|
|
display: none;
|
|
}
|
|
.patchSetSelect {
|
|
max-width: 8em;
|
|
}
|
|
gr-editable-label.descriptionLabel {
|
|
max-width: 100%;
|
|
}
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
.warning {
|
|
color: #d14836;
|
|
}
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid #ddd;
|
|
height: 0;
|
|
margin-bottom: 1em;
|
|
}
|
|
#diffPrefsContainer {
|
|
margin: auto 0 auto auto;
|
|
}
|
|
.patchInfo-header-wrapper {
|
|
width: 100%;
|
|
}
|
|
#commitMessage.collapsed {
|
|
max-height: 36em;
|
|
overflow: hidden;
|
|
}
|
|
#relatedChanges {
|
|
font-size: .9em;
|
|
}
|
|
#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;
|
|
}
|
|
.collapseToggleContainer {
|
|
display: flex;
|
|
}
|
|
.collapseToggleContainer gr-button {
|
|
display: block;
|
|
}
|
|
#relatedChangesToggle {
|
|
margin-left: 1em;
|
|
padding-top: var(--related-change-btn-top-padding, 0);
|
|
}
|
|
@media screen and (min-width: 80em) {
|
|
.commitMessage {
|
|
max-width: var(--commit-message-max-width, 100ch);
|
|
}
|
|
}
|
|
/* NOTE: If you update this breakpoint, also update the
|
|
BREAKPOINT_RELATED_MED in the JS */
|
|
@media screen and (max-width: 60em) {
|
|
#commitAndRelated {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
/* 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;
|
|
padding: .5em var(--default-horizontal-margin);
|
|
}
|
|
gr-change-star {
|
|
vertical-align: middle;
|
|
}
|
|
.header-title {
|
|
font-size: 1.1em;
|
|
}
|
|
gr-reply-dialog {
|
|
min-width: initial;
|
|
width: 100vw;
|
|
}
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
.reply {
|
|
display: block;
|
|
margin-right: 0;
|
|
margin-bottom: .5em;
|
|
}
|
|
.changeInfo-column:not(:last-of-type) {
|
|
margin-right: 0;
|
|
padding-right: 0;
|
|
}
|
|
.changeInfo,
|
|
#commitAndRelated {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.relatedChanges,
|
|
.changeMetadata {
|
|
font-size: 1em;
|
|
}
|
|
.changeMetadata {
|
|
border-right: none;
|
|
margin-bottom: 1em;
|
|
margin-top: .25em;
|
|
max-width: none;
|
|
}
|
|
.commitActions {
|
|
flex-direction: column;
|
|
}
|
|
.commitMessage {
|
|
flex: initial;
|
|
margin-right: 0;
|
|
}
|
|
.scrollable {
|
|
@apply(--layout-scroll);
|
|
}
|
|
}
|
|
</style>
|
|
<div class="container loading" hidden$="[[!_loading]]">Loading...</div>
|
|
<div class="container" hidden$="{{_loading}}">
|
|
<div class$="[[_computeHeaderClass(_change)]]">
|
|
<span class="header-title">
|
|
<gr-change-star
|
|
id="changeStar"
|
|
change="{{_change}}" hidden$="[[!_loggedIn]]"></gr-change-star>
|
|
<a
|
|
aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
|
|
href$="[[_computeChangePermalink(_change._number)]]">[[_change._number]]</a><!--
|
|
--><template is="dom-if" if="[[_changeStatus]]"><!--
|
|
--> (<!--
|
|
--><span
|
|
aria-label$="Change status: [[_changeStatus]]"
|
|
tabindex="0">[[_changeStatus]]</span><!--
|
|
--><template
|
|
is="dom-if"
|
|
if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
|
|
as
|
|
<gr-commit-info
|
|
change="[[_change]]"
|
|
commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
|
|
server-config="[[serverConfig]]"></gr-commit-info><!--
|
|
--></template><!--
|
|
-->)<!--
|
|
--></template><!--
|
|
--><span hidden$="[[!_change.work_in_progress]]"> (Work in progress)</span><!--
|
|
--><span>[[_privateChanges(_change)]]</span><!--
|
|
-->: [[_change.subject]]
|
|
</span>
|
|
</div>
|
|
<section class="changeInfo">
|
|
<div class="changeInfo-column changeMetadata">
|
|
<gr-change-metadata
|
|
change="{{_change}}"
|
|
commit-info="[[_commitInfo]]"
|
|
server-config="[[serverConfig]]"
|
|
mutable="[[_loggedIn]]"
|
|
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 class="commitActions" hidden$="[[!_loggedIn]]">
|
|
<gr-button
|
|
class="reply"
|
|
secondary
|
|
disabled="[[_replyDisabled]]"
|
|
on-tap="_handleReplyTap">[[_replyButtonLabel]]</gr-button>
|
|
<gr-change-actions id="actions"
|
|
change="[[_change]]"
|
|
has-parent="[[hasParent]]"
|
|
actions="[[_change.actions]]"
|
|
revision-actions="[[_currentRevisionActions]]"
|
|
change-num="[[_changeNum]]"
|
|
change-status="[[_change.status]]"
|
|
commit-num="[[_commitInfo.commit]]"
|
|
patch-num="[[computeLatestPatchNum(_allPatchSets)]]"
|
|
commit-message="[[_latestCommitMessage]]"
|
|
on-reload-change="_handleReloadChange"
|
|
on-download-tap="_handleDownloadTap"></gr-change-actions>
|
|
</div>
|
|
<hr class="mobile">
|
|
<div id="commitAndRelated">
|
|
<div class="commitContainer">
|
|
<div
|
|
id="commitMessage"
|
|
class$="commitMessage [[_computeCommitClass(_commitCollapsed, _latestCommitMessage)]]">
|
|
<gr-editable-content id="commitMessageEditor"
|
|
editing="[[_editingCommitMessage]]"
|
|
content="{{_latestCommitMessage}}"
|
|
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, _relatedChangesLoading)]]"
|
|
change="[[_change]]"
|
|
has-parent="{{hasParent}}"
|
|
loading="{{_relatedChangesLoading}}"
|
|
on-update="_updateRelatedChangeMaxHeight"
|
|
patch-num="[[computeLatestPatchNum(_allPatchSets)]]">
|
|
</gr-related-changes-list>
|
|
<div
|
|
id="relatedChangesToggle"
|
|
class="collapseToggleContainer"
|
|
hidden$="[[_computeRelatedChangesToggleHidden(_relatedChangesLoading)]]">
|
|
<gr-button
|
|
link
|
|
id="relatedChangesToggleButton"
|
|
class="collapseToggleButton"
|
|
on-tap="_toggleRelatedChangesCollapsed">
|
|
[[_computeCollapseText(_relatedChangesCollapsed)]]
|
|
</gr-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class$="patchInfo [[_computePatchInfoClass(_patchRange.patchNum,
|
|
_allPatchSets)]]">
|
|
<div class="patchInfo-header">
|
|
<div class="patchInfo-header-wrapper">
|
|
<label class="patchSelectLabel" for="patchSetSelect">
|
|
Patch set
|
|
</label>
|
|
<select
|
|
is="gr-select"
|
|
id="patchSetSelect"
|
|
bind-value="{{_selectedPatchSet}}"
|
|
class="patchSetSelect"
|
|
on-change="_handlePatchChange">
|
|
<template is="dom-repeat" items="[[_allPatchSets]]"
|
|
as="patchNum">
|
|
<option value$="[[patchNum.num]]"
|
|
disabled$="[[_computePatchSetDisabled(patchNum.num, _patchRange.basePatchNum)]]">
|
|
[[patchNum.num]]
|
|
/
|
|
[[computeLatestPatchNum(_allPatchSets)]]
|
|
[[_computePatchSetCommentsString(_comments, patchNum.num)]]
|
|
[[_computePatchSetDescription(_change, patchNum.num)]]
|
|
</option>
|
|
</template>
|
|
</select>
|
|
/
|
|
<gr-commit-info
|
|
change="[[_change]]"
|
|
server-config="[[serverConfig]]"
|
|
commit-info="[[_commitInfo]]"></gr-commit-info>
|
|
<span class="latestPatchContainer">
|
|
/
|
|
<a href$="[[getBaseUrl()]]/c/[[_change._number]]">Go to latest patch set</a>
|
|
</span>
|
|
<span class="downloadContainer desktop">
|
|
/
|
|
<gr-button link
|
|
class="download"
|
|
on-tap="_handleDownloadTap">Download</gr-button>
|
|
</span>
|
|
<span class="descriptionContainer">
|
|
/
|
|
<gr-editable-label
|
|
id="descriptionLabel"
|
|
class="descriptionLabel"
|
|
value="[[_computePatchSetDescription(_change, _selectedPatchSet)]]"
|
|
placeholder="[[_computeDescriptionPlaceholder(_descriptionReadOnly)]]"
|
|
read-only="[[_descriptionReadOnly]]"
|
|
on-changed="_handleDescriptionChanged"></gr-editable-label>
|
|
</span>
|
|
<span id="diffPrefsContainer"
|
|
hidden$="[[_computePrefsButtonHidden(_diffPrefs, _loggedIn)]]"
|
|
hidden>
|
|
<gr-button link
|
|
class="prefsButton desktop"
|
|
on-tap="_handlePrefsTap">Diff Preferences</gr-button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<gr-file-list id="fileList"
|
|
diff-prefs="{{_diffPrefs}}"
|
|
change="[[_change]]"
|
|
change-num="[[_changeNum]]"
|
|
patch-range="{{_patchRange}}"
|
|
comments="[[_comments]]"
|
|
drafts="[[_diffDrafts]]"
|
|
revisions="[[_change.revisions]]"
|
|
project-config="[[_projectConfig]]"
|
|
selected-index="{{viewState.selectedFileIndex}}"
|
|
diff-view-mode="{{viewState.diffMode}}"
|
|
num-files-shown="{{_numFilesShown}}"
|
|
file-list-increment="{{_numFilesShown}}"></gr-file-list>
|
|
</section>
|
|
<gr-messages-list id="messageList"
|
|
change-num="[[_changeNum]]"
|
|
messages="[[_change.messages]]"
|
|
reviewer-updates="[[_change.reviewer_updates]]"
|
|
comments="[[_comments]]"
|
|
project-config="[[_projectConfig]]"
|
|
show-reply-buttons="[[_loggedIn]]"
|
|
on-reply="_handleMessageReply"></gr-messages-list>
|
|
</div>
|
|
<gr-overlay id="downloadOverlay" with-backdrop>
|
|
<gr-download-dialog
|
|
id="downloadDialog"
|
|
change="[[_change]]"
|
|
logged-in="[[_loggedIn]]"
|
|
patch-num="[[_patchRange.patchNum]]"
|
|
config="[[serverConfig.download]]"
|
|
on-close="_handleDownloadDialogClose"></gr-download-dialog>
|
|
</gr-overlay>
|
|
<gr-overlay id="replyOverlay"
|
|
class="scrollable"
|
|
no-cancel-on-outside-click
|
|
no-cancel-on-esc-key
|
|
on-iron-overlay-opened="_handleReplyOverlayOpen"
|
|
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"
|
|
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>
|
|
</template>
|
|
<script src="gr-change-view.js"></script>
|
|
</dom-module>
|