| <!-- |
| @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="../../../behaviors/fire-behavior/fire-behavior.html"> |
| <link rel="import" href="../../shared/gr-account-label/gr-account-label.html"> |
| <link rel="import" href="../../shared/gr-account-chip/gr-account-chip.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"> |
| /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */ |
| </style> |
| <style include="shared-styles"> |
| :host { |
| border-bottom: 1px solid var(--border-color); |
| display: block; |
| position: relative; |
| cursor: pointer; |
| overflow-y: hidden; |
| } |
| :host(.expanded) { |
| cursor: auto; |
| } |
| :host > div { |
| padding: 0 var(--spacing-l); |
| } |
| gr-avatar { |
| position: absolute; |
| left: var(--spacing-l); |
| } |
| .collapsed .contentContainer { |
| align-items: baseline; |
| color: var(--deemphasized-text-color); |
| display: flex; |
| white-space: nowrap; |
| } |
| .contentContainer { |
| margin-left: calc(var(--spacing-l) + 2.5em); |
| padding: var(--spacing-m) 0; |
| } |
| .showAvatar.collapsed .contentContainer { |
| margin-left: calc(var(--spacing-l) + 1.75em); |
| } |
| .hideAvatar.collapsed .contentContainer, |
| .hideAvatar.expanded .contentContainer { |
| margin-left: 0; |
| } |
| .showAvatar.collapsed .contentContainer, |
| .hideAvatar.collapsed .contentContainer, |
| .hideAvatar.expanded .contentContainer { |
| padding: var(--spacing-m) 0; |
| } |
| .collapsed gr-avatar { |
| top: var(--spacing-m); |
| height: var(--line-height-normal); |
| width: var(--line-height-normal); |
| } |
| .expanded gr-avatar { |
| top: var(--spacing-l); |
| height: var(--line-height-h1); |
| width: var(--line-height-h1); |
| } |
| .name { |
| font-weight: var(--font-weight-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: var(--spacing-xs); |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .collapsed .dateContainer { |
| position: static; |
| } |
| .collapsed .author { |
| overflow: hidden; |
| color: var(--primary-text-color); |
| margin-right: var(--spacing-s); |
| } |
| .expanded .author { |
| cursor: pointer; |
| margin-bottom: var(--spacing-s); |
| } |
| .dateContainer { |
| position: absolute; |
| right: var(--spacing-l); |
| top: 10px; |
| } |
| span.date { |
| color: var(--deemphasized-text-color); |
| } |
| span.date:hover { |
| text-decoration: underline; |
| } |
| .dateContainer iron-icon { |
| cursor: pointer; |
| vertical-align: top; |
| } |
| .replyContainer { |
| padding: var(--spacing-m) 0 0 0; |
| } |
| .score { |
| border: 1px solid rgba(0,0,0,.12); |
| border-radius: var(--border-radius); |
| color: var(--primary-text-color); |
| display: inline-block; |
| margin: -1px 0; |
| padding: 0 var(--spacing-xxs); |
| } |
| .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-weight: var(--font-weight-bold); |
| }; |
| } |
| </style> |
| <div class$="[[_computeClass(_expanded, showAvatar, message)]]"> |
| <gr-avatar account="[[author]]" image-size="100"></gr-avatar> |
| <div class="contentContainer"> |
| <div class="author" on-click="_handleAuthorClick"> |
| <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-click="_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]]"> |
| <span class="date" on-click="_handleAnchorClick"> |
| <gr-date-formatter |
| has-tooltip |
| show-date-and-time |
| date-str="[[message.date]]"></gr-date-formatter> |
| </span> |
| </template> |
| <iron-icon |
| id="expandToggle" |
| on-click="_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> |
