151 lines
4.9 KiB
HTML
151 lines
4.9 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="../../shared/gr-account-link/gr-account-link.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-linked-text/gr-linked-text.html">
|
|
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
|
|
|
|
<link rel="import" href="../gr-comment-list/gr-comment-list.html">
|
|
|
|
<dom-module id="gr-message">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
border-top: 1px solid #ddd;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
:host(:not([expanded])) {
|
|
cursor: pointer;
|
|
}
|
|
gr-avatar {
|
|
position: absolute;
|
|
left: var(--default-horizontal-margin);
|
|
}
|
|
.collapsed .contentContainer {
|
|
color: #777;
|
|
white-space: nowrap;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.showAvatar.expanded .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);
|
|
}
|
|
.showAvatar.collapsed .contentContainer,
|
|
.hideAvatar.collapsed .contentContainer {
|
|
margin-right: calc(var(--default-horizontal-margin) + 2.25em);
|
|
}
|
|
.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-weight: bold;
|
|
}
|
|
.content {
|
|
font-family: var(--monospace-font-family);
|
|
}
|
|
.message {
|
|
max-width: 80ch;
|
|
}
|
|
.collapsed .name,
|
|
.collapsed .content,
|
|
.collapsed .message,
|
|
gr-account-chip {
|
|
display: inline;
|
|
}
|
|
.collapsed gr-comment-list,
|
|
.collapsed .replyContainer {
|
|
display: none;
|
|
}
|
|
.collapsed .name {
|
|
color: var(--default-text-color);
|
|
}
|
|
.expanded .name {
|
|
cursor: pointer;
|
|
}
|
|
.date {
|
|
color: #666;
|
|
position: absolute;
|
|
right: var(--default-horizontal-margin);
|
|
top: 10px;
|
|
}
|
|
.replyContainer {
|
|
padding: .5em 0 1em;
|
|
}
|
|
</style>
|
|
<div class$="[[_computeClass(expanded, showAvatar)]]">
|
|
<gr-avatar account="[[author]]" image-size="100"></gr-avatar>
|
|
<div class="contentContainer">
|
|
<div class="name" on-tap="_handleNameTap">[[author.name]]</div>
|
|
<template is="dom-if" if="[[message.message]]">
|
|
<div class="content">
|
|
<gr-linked-text
|
|
class="message"
|
|
pre="[[expanded]]"
|
|
content="[[message.message]]"
|
|
disabled="[[!expanded]]"
|
|
config="[[projectConfig.commentlinks]]"></gr-linked-text>
|
|
<gr-comment-list
|
|
comments="[[comments]]"
|
|
change-num="[[changeNum]]"
|
|
patch-num="[[message._revision_number]]"
|
|
project-config="[[projectConfig]]"></gr-comment-list>
|
|
</div>
|
|
<a class="date" href$="[[_computeMessageHash(message)]]" on-tap="_handleLinkTap">
|
|
<gr-date-formatter date-str="[[message.date]]"></gr-date-formatter>
|
|
</a>
|
|
</template>
|
|
<template is="dom-if" if="[[message.reviewer]]">
|
|
set reviewer status for
|
|
<gr-account-chip account="[[message.reviewer]]">
|
|
</gr-account-chip>
|
|
to [[message.state]].
|
|
<gr-date-formatter class="date" date-str="[[message.updated]]">
|
|
</gr-date-formatter>
|
|
</template>
|
|
</div>
|
|
<div class="replyContainer" hidden$="[[!showReplyButton]]" hidden>
|
|
<gr-button small on-tap="_handleReplyTap">Reply</gr-button>
|
|
</div>
|
|
</div>
|
|
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
|
</template>
|
|
<script src="gr-message.js"></script>
|
|
</dom-module>
|