blob: cd17271026b109a7216e8865cfd659c15743a1c9 [file] [log] [blame]
/**
* @license
* Copyright (C) 2020 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.
*/
import {html} from '@polymer/polymer/lib/utils/html-tag';
export const htmlTemplate = html`
<style include="gr-change-metadata-shared-styles">
/* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
</style>
<style include="shared-styles">
:host {
display: table;
}
gr-change-requirements {
--requirements-horizontal-padding: var(--metadata-horizontal-padding);
}
gr-editable-label {
max-width: 9em;
}
.webLink {
display: block;
}
/* CSS Mixins should be applied last. */
section.assignee {
@apply --change-metadata-assignee;
}
section.strategy {
@apply --change-metadata-strategy;
}
section.topic {
@apply --change-metadata-topic;
}
gr-account-chip[disabled],
gr-linked-chip[disabled] {
opacity: 0;
pointer-events: none;
}
.hashtagChip {
padding-bottom: var(--spacing-s);
}
/* consistent with section .title, .value */
.hashtagChip.new-change-summary-true:not(last-of-type) {
padding-bottom: var(--spacing-s);
}
.hashtagChip.new-change-summary-true:last-of-type {
display: inline;
vertical-align: top;
}
#externalStyle {
display: block;
}
.parentList.merge {
list-style-type: decimal;
padding-left: var(--spacing-l);
}
.parentList gr-commit-info {
display: inline-block;
}
.hideDisplay,
#parentNotCurrentMessage {
display: none;
}
.icon {
margin: -3px 0;
}
.icon.help,
.icon.notTrusted {
color: #ffa62f;
}
.icon.invalid {
color: var(--negative-red-text-color);
}
.icon.trusted {
color: var(--positive-green-text-color);
}
.parentList.notCurrent.nonMerge #parentNotCurrentMessage {
--arrow-color: #ffa62f;
display: inline-block;
}
.separatedSection {
margin-top: var(--spacing-l);
padding: var(--spacing-m) 0;
}
.hashtag gr-linked-chip,
.topic gr-linked-chip {
--linked-chip-text-color: var(--link-color);
}
gr-reviewer-list {
--account-max-length: 100px;
max-width: 285px;
}
.metadata-title {
font-weight: var(--font-weight-bold);
color: var(--deemphasized-text-color);
padding-left: var(--metadata-horizontal-padding);
}
.metadata-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
/* The goal is to achieve alignment of the owner account chip and the
commit message box. Their top border should be on the same line. */
margin-bottom: var(--spacing-s);
}
</style>
<gr-external-style id="externalStyle" name="change-metadata">
<template is="dom-if" if="[[_isNewChangeSummaryUiEnabled]]">
<div class="metadata-header">
<h3 class="metadata-title">Change Info</h3>
<gr-button link="" class="show-all-button" on-click="_onShowAllClick"
>[[_computeShowAllLabelText(_showAllSections)]]
<iron-icon
icon="gr-icons:expand-more"
hidden$="[[_showAllSections]]"
></iron-icon
><iron-icon
icon="gr-icons:expand-less"
hidden$="[[!_showAllSections]]"
></iron-icon>
</gr-button>
</div>
</template>
<template is="dom-if" if="[[_isNewChangeSummaryUiEnabled]]">
<template is="dom-if" if="[[change.submitted]]">
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.SUBMITTED)]]"
>
<span class="title">Submitted</span>
<span class="value">
<gr-date-formatter
has-tooltip=""
date-str="[[change.submitted]]"
show-yesterday=""
></gr-date-formatter>
</span>
</section>
</template>
</template>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.UPDATED)]]"
>
<span class="title">Updated</span>
<span class="value">
<gr-date-formatter
has-tooltip=""
date-str="[[change.updated]]"
show-yesterday=""
></gr-date-formatter>
</span>
</section>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.OWNER)]]"
>
<span class="title">Owner</span>
<span class="value">
<gr-account-chip
account="[[change.owner]]"
change="[[change]]"
highlight-attention
></gr-account-chip>
<template is="dom-if" if="[[_pushCertificateValidation]]">
<gr-tooltip-content
has-tooltip=""
title$="[[_pushCertificateValidation.message]]"
>
<iron-icon
class$="icon [[_pushCertificateValidation.class]]"
icon="[[_pushCertificateValidation.icon]]"
>
</iron-icon>
</gr-tooltip-content>
</template>
</span>
</section>
<section class$="[[_computeShowRoleClass(change, _CHANGE_ROLE.UPLOADER)]]">
<span class="title">Uploader</span>
<span class="value">
<gr-account-chip
account="[[_getNonOwnerRole(change, _CHANGE_ROLE.UPLOADER)]]"
change="[[change]]"
highlight-attention
></gr-account-chip>
</span>
</section>
<section class$="[[_computeShowRoleClass(change, _CHANGE_ROLE.AUTHOR)]]">
<span class="title">Author</span>
<span class="value">
<gr-account-chip
account="[[_getNonOwnerRole(change, _CHANGE_ROLE.AUTHOR)]]"
change="[[change]]"
></gr-account-chip>
</span>
</section>
<section class$="[[_computeShowRoleClass(change, _CHANGE_ROLE.COMMITTER)]]">
<span class="title">Committer</span>
<span class="value">
<gr-account-chip
account="[[_getNonOwnerRole(change, _CHANGE_ROLE.COMMITTER)]]"
change="[[change]]"
></gr-account-chip>
</span>
</section>
<template is="dom-if" if="[[_isAssigneeEnabled(serverConfig)]]">
<section
class$="assignee [[_computeDisplayState(_showAllSections, change, _SECTION.ASSIGNEE)]]"
>
<span class="title">Assignee</span>
<span class="value">
<gr-account-list
id="assigneeValue"
placeholder="Set assignee..."
max-count="1"
skip-suggest-on-empty=""
accounts="{{_assignee}}"
readonly="[[_computeAssigneeReadOnly(_mutable, change)]]"
suggestions-provider="[[_getReviewerSuggestionsProvider(change)]]"
>
</gr-account-list>
</span>
</section>
</template>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REVIEWERS)]]"
>
<span class="title">Reviewers</span>
<span class="value">
<gr-reviewer-list
change="{{change}}"
mutable="[[_mutable]]"
reviewers-only=""
server-config="[[serverConfig]]"
></gr-reviewer-list>
</span>
</section>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.CC)]]"
>
<span class="title">CC</span>
<span class="value">
<gr-reviewer-list
change="{{change}}"
mutable="[[_mutable]]"
ccs-only=""
server-config="[[serverConfig]]"
></gr-reviewer-list>
</span>
</section>
<template
is="dom-if"
if="[[_computeShowRepoBranchTogether(change.project, change.branch)]]"
>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REPO_BRANCH)]]"
>
<span class="title">Repo | Branch</span>
<span class="value">
<a href$="[[_computeProjectUrl(change.project)]]"
>[[change.project]]</a
>
|
<a href$="[[_computeBranchUrl(change.project, change.branch)]]"
>[[change.branch]]</a
>
</span>
</section>
</template>
<template
is="dom-if"
if="[[!_computeShowRepoBranchTogether(change.project, change.branch)]]"
>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REPO_BRANCH)]]"
>
<span class="title">Repo</span>
<span class="value">
<a href$="[[_computeProjectUrl(change.project)]]">
<gr-limited-text
limit="40"
text="[[change.project]]"
></gr-limited-text>
</a>
</span>
</section>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.REPO_BRANCH)]]"
>
<span class="title">Branch</span>
<span class="value">
<a href$="[[_computeBranchUrl(change.project, change.branch)]]">
<gr-limited-text
limit="40"
text="[[change.branch]]"
></gr-limited-text>
</a>
</span>
</section>
</template>
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.PARENT)]]"
>
<span class="title">[[_computeParentsLabel(_currentParents)]]</span>
<span class="value">
<ol
class$="[[_computeParentListClass(_currentParents, parentIsCurrent)]]"
>
<template is="dom-repeat" items="[[_currentParents]]" as="parent">
<li>
<gr-commit-info
change="[[change]]"
commit-info="[[parent]]"
server-config="[[serverConfig]]"
></gr-commit-info>
<gr-tooltip-content
id="parentNotCurrentMessage"
has-tooltip=""
show-icon=""
title$="[[_notCurrentMessage]]"
></gr-tooltip-content>
</li>
</template>
</ol>
</span>
</section>
<section
class$="topic [[_computeDisplayState(_showAllSections, change, _SECTION.TOPIC)]]"
>
<span class="title">Topic</span>
<span class="value">
<template is="dom-if" if="[[_showTopicChip(change.*, _settingTopic)]]">
<gr-linked-chip
text="[[change.topic]]"
limit="40"
href="[[_computeTopicUrl(change.topic)]]"
removable="[[!_topicReadOnly]]"
on-remove="_handleTopicRemoved"
></gr-linked-chip>
</template>
<template is="dom-if" if="[[_showAddTopic(change.*, _settingTopic)]]">
<gr-editable-label
class="topicEditableLabel"
label-text="Add a topic"
value="[[change.topic]]"
max-length="1024"
placeholder="[[_computeTopicPlaceholder(_topicReadOnly)]]"
read-only="[[_topicReadOnly]]"
on-changed="_handleTopicChanged"
show-as-edit-pencil="[[_isNewChangeSummaryUiEnabled]]"
></gr-editable-label>
</template>
</span>
</section>
<template is="dom-if" if="[[_showCherryPickOf(change.*)]]">
<section
class$="[[_computeDisplayState(_showAllSections, change, _SECTION.CHERRY_PICK_OF)]]"
>
<span class="title">Cherry pick of</span>
<span class="value">
<a
href$="[[_computeCherryPickOfUrl(change.cherry_pick_of_change, change.cherry_pick_of_patch_set, change.project)]]"
>
<gr-limited-text
text="[[change.cherry_pick_of_change]],[[change.cherry_pick_of_patch_set]]"
limit="40"
>
</gr-limited-text>
</a>
</span>
</section>
</template>
<section
class$="strategy [[_computeDisplayState(_showAllSections, change, _SECTION.STRATEGY)]]"
hidden$="[[_computeHideStrategy(change)]]"
hidden=""
>
<span class="title">Strategy</span>
<span class="value">[[_computeStrategy(change)]]</span>
</section>
<section
class$="hashtag [[_computeDisplayState(_showAllSections, change, _SECTION.HASHTAGS)]]"
>
<span class="title">Hashtags</span>
<span class="value">
<template is="dom-repeat" items="[[change.hashtags]]">
<gr-linked-chip
class$="hashtagChip new-change-summary-[[_isNewChangeSummaryUiEnabled]]"
text="[[item]]"
href="[[_computeHashtagUrl(item)]]"
removable="[[!_hashtagReadOnly]]"
on-remove="_handleHashtagRemoved"
limit="40"
>
</gr-linked-chip>
</template>
<template is="dom-if" if="[[!_hashtagReadOnly]]">
<gr-editable-label
uppercase=""
label-text="Add a hashtag"
value="{{_newHashtag}}"
placeholder="[[_computeHashtagPlaceholder(_hashtagReadOnly)]]"
read-only="[[_hashtagReadOnly]]"
on-changed="_handleHashtagChanged"
show-as-edit-pencil="[[_isNewChangeSummaryUiEnabled]]"
></gr-editable-label>
</template>
</span>
</section>
<div class="separatedSection">
<template is="dom-if" if="[[!_isNewChangeSummaryUiEnabled]]">
<h3 class="assistive-tech-only">Label Scores</h3>
</template>
<gr-change-requirements
change="{{change}}"
account="[[account]]"
mutable="[[_mutable]]"
></gr-change-requirements>
</div>
<section
id="webLinks"
hidden$="[[!_computeWebLinks(commitInfo, serverConfig)]]"
>
<span class="title">Links</span>
<span class="value">
<template
is="dom-repeat"
items="[[_computeWebLinks(commitInfo, serverConfig)]]"
as="link"
>
<a href="[[link.url]]" class="webLink" rel="noopener" target="_blank">
[[link.name]]
</a>
</template>
</span>
</section>
<gr-endpoint-decorator name="change-metadata-item">
<gr-endpoint-param name="labels" value="[[labels]]"></gr-endpoint-param>
<gr-endpoint-param name="change" value="[[change]]"></gr-endpoint-param>
<gr-endpoint-param
name="revision"
value="[[revision]]"
></gr-endpoint-param>
</gr-endpoint-decorator>
</gr-external-style>
`;