249 lines
8.0 KiB
HTML
249 lines
8.0 KiB
HTML
<!--
|
|
@license
|
|
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-icon/iron-icon.html">
|
|
<link rel="import" href="../../shared/gr-account-label/gr-account-label.html">
|
|
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
|
<link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
|
|
<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
|
|
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
|
<link rel="import" href="../../../styles/shared-styles.html">
|
|
<link rel="import" href="../../../styles/gr-voting-styles.html">
|
|
|
|
<link rel="import" href="../gr-comment-list/gr-comment-list.html">
|
|
|
|
<dom-module id="gr-message">
|
|
<template>
|
|
<style include="gr-voting-styles"></style>
|
|
<style include="shared-styles">
|
|
:host {
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
:host(.expanded) {
|
|
cursor: auto;
|
|
}
|
|
:host > div {
|
|
padding: 0 var(--default-horizontal-margin);
|
|
}
|
|
gr-avatar {
|
|
position: absolute;
|
|
left: var(--default-horizontal-margin);
|
|
}
|
|
.collapsed .contentContainer {
|
|
align-items: baseline;
|
|
color: var(--deemphasized-text-color);
|
|
display: flex;
|
|
white-space: nowrap;
|
|
}
|
|
.contentContainer {
|
|
margin-left: calc(var(--default-horizontal-margin) + 2.5em);
|
|
padding: 10px 0;
|
|
}
|
|
.showAvatar.collapsed .contentContainer {
|
|
margin-left: calc(var(--default-horizontal-margin) + 1.75em);
|
|
}
|
|
.hideAvatar.collapsed .contentContainer,
|
|
.hideAvatar.expanded .contentContainer {
|
|
margin-left: 0;
|
|
}
|
|
.showAvatar.collapsed .contentContainer,
|
|
.hideAvatar.collapsed .contentContainer,
|
|
.hideAvatar.expanded .contentContainer {
|
|
padding: .75em 0;
|
|
}
|
|
.collapsed gr-avatar {
|
|
top: .5em;
|
|
height: 1.75em;
|
|
width: 1.75em;
|
|
}
|
|
.expanded gr-avatar {
|
|
top: 12px;
|
|
height: 2.5em;
|
|
width: 2.5em;
|
|
}
|
|
.name {
|
|
font-family: var(--font-family-bold);
|
|
}
|
|
.message {
|
|
--gr-formatted-text-prose-max-width: 80ch;
|
|
}
|
|
.collapsed .message {
|
|
max-width: none;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.collapsed .author,
|
|
.collapsed .content,
|
|
.collapsed .message,
|
|
.collapsed .updateCategory,
|
|
gr-account-chip {
|
|
display: inline;
|
|
}
|
|
gr-button {
|
|
margin: 0 -4px;
|
|
}
|
|
.collapsed gr-comment-list,
|
|
.collapsed .replyContainer,
|
|
.collapsed .hideOnCollapsed,
|
|
.hideOnOpen {
|
|
display: none;
|
|
}
|
|
.collapsed .hideOnOpen {
|
|
display: block;
|
|
}
|
|
.collapsed .content {
|
|
flex: 1;
|
|
margin-right: .25em;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.collapsed .dateContainer {
|
|
position: static;
|
|
}
|
|
.collapsed .author {
|
|
color: var(--primary-text-color);
|
|
margin-right: .4em;
|
|
}
|
|
.expanded .author {
|
|
cursor: pointer;
|
|
margin-bottom: .4em;
|
|
}
|
|
.dateContainer {
|
|
position: absolute;
|
|
right: var(--default-horizontal-margin);
|
|
top: 10px;
|
|
}
|
|
.date {
|
|
color: var(--deemphasized-text-color);
|
|
}
|
|
.dateContainer iron-icon {
|
|
cursor: pointer;
|
|
}
|
|
.replyContainer {
|
|
padding: .5em 0 0 0;
|
|
}
|
|
.score {
|
|
border: 1px solid rgba(0,0,0,.12);
|
|
border-radius: 3px;
|
|
color: var(--primary-text-color);
|
|
display: inline-block;
|
|
margin: -.1em 0;
|
|
padding: 0 .1em;
|
|
}
|
|
.score.negative {
|
|
background-color: var(--vote-color-disliked);
|
|
}
|
|
.score.negative.min {
|
|
background-color: var(--vote-color-rejected);
|
|
}
|
|
.score.positive {
|
|
background-color: var(--vote-color-recommended);
|
|
}
|
|
.score.positive.max {
|
|
background-color: var(--vote-color-approved);
|
|
}
|
|
gr-account-label {
|
|
--gr-account-label-text-style: {
|
|
font-family: var(--font-family-bold);
|
|
};
|
|
}
|
|
</style>
|
|
<div class$="[[_computeClass(_expanded, showAvatar, message)]]">
|
|
<gr-avatar account="[[author]]" image-size="100"></gr-avatar>
|
|
<div class="contentContainer">
|
|
<div class="author" on-tap="_handleAuthorTap">
|
|
<span hidden$="[[!showOnBehalfOf]]">
|
|
<span class="name">[[message.real_author.name]]</span>
|
|
on behalf of
|
|
</span>
|
|
<gr-account-label
|
|
account="[[author]]"
|
|
hide-avatar></gr-account-label>
|
|
<template is="dom-repeat" items="[[_getScores(message)]]" as="score">
|
|
<span class$="score [[_computeScoreClass(score, labelExtremes)]]">
|
|
[[score.label]] [[score.value]]
|
|
</span>
|
|
</template>
|
|
</div>
|
|
<template is="dom-if" if="[[message.message]]">
|
|
<div class="content">
|
|
<div class="message hideOnOpen">[[message.message]]</div>
|
|
<gr-formatted-text
|
|
no-trailing-margin
|
|
class="message hideOnCollapsed"
|
|
content="[[message.message]]"
|
|
config="[[_projectConfig.commentlinks]]"></gr-formatted-text>
|
|
<div class="replyContainer" hidden$="[[!showReplyButton]]" hidden>
|
|
<gr-button link small on-tap="_handleReplyTap">Reply</gr-button>
|
|
</div>
|
|
<gr-comment-list
|
|
comments="[[comments]]"
|
|
change-num="[[changeNum]]"
|
|
patch-num="[[message._revision_number]]"
|
|
project-name="[[projectName]]"
|
|
project-config="[[_projectConfig]]"></gr-comment-list>
|
|
</div>
|
|
</template>
|
|
<template is="dom-if" if="[[_computeIsReviewerUpdate(message)]]">
|
|
<div class="content">
|
|
<template is="dom-repeat" items="[[message.updates]]" as="update">
|
|
<div class="updateCategory">
|
|
[[update.message]]
|
|
<template
|
|
is="dom-repeat" items="[[update.reviewers]]" as="reviewer">
|
|
<gr-account-chip account="[[reviewer]]">
|
|
</gr-account-chip>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<span class="dateContainer">
|
|
<template is="dom-if" if="[[!message.id]]">
|
|
<span class="date">
|
|
<gr-date-formatter
|
|
has-tooltip
|
|
show-date-and-time
|
|
date-str="[[message.date]]"></gr-date-formatter>
|
|
</span>
|
|
</template>
|
|
<template is="dom-if" if="[[message.id]]">
|
|
<a class="date" href$="[[_computeMessageHash(message)]]" on-tap="_handleLinkTap">
|
|
<gr-date-formatter
|
|
has-tooltip
|
|
show-date-and-time
|
|
date-str="[[message.date]]"></gr-date-formatter>
|
|
</a>
|
|
</template>
|
|
<iron-icon
|
|
id="expandToggle"
|
|
on-tap="_toggleExpanded"
|
|
title="Toggle expanded state"
|
|
icon="[[_computeExpandToggleIcon(_expanded)]]">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
|
</template>
|
|
<script src="gr-message.js"></script>
|
|
</dom-module>
|