| <!-- |
| @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="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html"> |
| <link rel="import" href="/bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html"> |
| <link rel="import" href="../../../behaviors/fire-behavior/fire-behavior.html"> |
| <link rel="import" href="../../../styles/shared-styles.html"> |
| <link rel="import" href="../../core/gr-reporting/gr-reporting.html"> |
| <link rel="import" href="../../plugins/gr-endpoint-decorator/gr-endpoint-decorator.html"> |
| <link rel="import" href="../../plugins/gr-endpoint-param/gr-endpoint-param.html"> |
| <link rel="import" href="../../shared/gr-button/gr-button.html"> |
| <link rel="import" href="../../shared/gr-dialog/gr-dialog.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-icons/gr-icons.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="../../shared/gr-storage/gr-storage.html"> |
| <link rel="import" href="../../shared/gr-textarea/gr-textarea.html"> |
| <link rel="import" href="../../shared/gr-tooltip-content/gr-tooltip-content.html"> |
| <link rel="import" href="../gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog.html"> |
| <script src="../../../scripts/rootElement.js"></script> |
| |
| <dom-module id="gr-comment"> |
| <template> |
| <style include="shared-styles"> |
| :host { |
| display: block; |
| font-family: var(--font-family); |
| padding: var(--spacing-m); |
| --iron-autogrow-textarea: { |
| box-sizing: border-box; |
| padding: 2px; |
| }; |
| } |
| :host([disabled]) { |
| pointer-events: none; |
| } |
| :host([disabled]) .actions, |
| :host([disabled]) .robotActions, |
| :host([disabled]) .date { |
| opacity: .5; |
| } |
| :host([discarding]) { |
| display: none; |
| } |
| .header { |
| align-items: baseline; |
| cursor: pointer; |
| display: flex; |
| margin: calc(0px - var(--spacing-m)) calc(0px - var(--spacing-m)) 0 calc(0px - var(--spacing-m)); |
| padding: var(--spacing-m); |
| } |
| .container.collapsed .header { |
| margin-bottom: calc(0 - var(--spacing-m)); |
| } |
| .headerMiddle { |
| color: var(--deemphasized-text-color); |
| flex: 1; |
| overflow: hidden; |
| } |
| .draftLabel, |
| .draftTooltip { |
| color: var(--deemphasized-text-color); |
| display: none; |
| } |
| .date { |
| justify-content: flex-end; |
| margin-left: 5px; |
| min-width: 4.5em; |
| text-align: right; |
| white-space: nowrap; |
| } |
| span.date { |
| color: var(--deemphasized-text-color); |
| } |
| span.date:hover { |
| text-decoration: underline; |
| } |
| .actions { |
| display: flex; |
| justify-content: flex-end; |
| padding-top: 0; |
| } |
| .action { |
| margin-left: var(--spacing-l); |
| } |
| .robotActions { |
| display: flex; |
| justify-content: flex-start; |
| padding-top: var(--spacing-m); |
| border-top: 1px solid var(--border-color); |
| } |
| .robotActions .action { |
| /* Keep button text lined up with output text */ |
| margin-left: -4px; |
| margin-right: var(--spacing-l); |
| } |
| .rightActions { |
| display: flex; |
| justify-content: flex-end; |
| } |
| .rightActions gr-button { |
| --gr-button: { |
| height: 20px; |
| padding: 0 var(--spacing-s); |
| color: var(--default-button-text-color); |
| } |
| } |
| .editMessage { |
| display: none; |
| margin: var(--spacing-m) 0; |
| width: 100%; |
| } |
| .container:not(.draft) .actions .hideOnPublished { |
| display: none; |
| } |
| .draft .reply, |
| .draft .quote, |
| .draft .ack, |
| .draft .done { |
| display: none; |
| } |
| .draft .draftLabel, |
| .draft .draftTooltip { |
| display: inline; |
| } |
| .draft:not(.editing) .save, |
| .draft:not(.editing) .cancel { |
| display: none; |
| } |
| .editing .message, |
| .editing .reply, |
| .editing .quote, |
| .editing .ack, |
| .editing .done, |
| .editing .edit, |
| .editing .discard, |
| .editing .unresolved { |
| display: none; |
| } |
| .editing .editMessage { |
| display: block; |
| } |
| .show-hide { |
| margin-left: var(--spacing-s); |
| } |
| .robotId { |
| color: var(--deemphasized-text-color); |
| margin-bottom: var(--spacing-m); |
| margin-top: -.4em; |
| } |
| .robotIcon { |
| margin-right: var(--spacing-xs); |
| /* because of the antenna of the robot, it looks off center even when it |
| is centered. artificially adjust margin to account for this. */ |
| margin-top: -4px; |
| } |
| .runIdInformation { |
| margin: var(--spacing-m) 0; |
| } |
| .robotRun { |
| margin-left: var(--spacing-m); |
| } |
| .robotRunLink { |
| margin-left: var(--spacing-m); |
| } |
| input.show-hide { |
| display: none; |
| } |
| label.show-hide { |
| cursor: pointer; |
| display: block; |
| } |
| label.show-hide iron-icon { |
| vertical-align: top; |
| } |
| #container .collapsedContent { |
| display: none; |
| } |
| #container.collapsed { |
| padding-bottom: 3px; |
| } |
| #container.collapsed .collapsedContent { |
| display: block; |
| overflow: hidden; |
| padding-left: 5px; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| #container.collapsed .actions, |
| #container.collapsed gr-formatted-text, |
| #container.collapsed gr-textarea { |
| display: none; |
| } |
| .resolve, |
| .unresolved { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| margin: 0; |
| } |
| .resolve label { |
| color: var(--comment-text-color); |
| } |
| gr-dialog .main { |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| } |
| #deleteBtn { |
| display: none; |
| --gr-button: { |
| color: var(--deemphasized-text-color); |
| padding: 0; |
| } |
| } |
| #deleteBtn.showDeleteButtons { |
| display: block; |
| } |
| |
| /** Disable select for the caret and actions */ |
| .actions, |
| .show-hide { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| </style> |
| <div id="container" class="container"> |
| <div class="header" id="header" on-click="_handleToggleCollapsed"> |
| <div class="headerLeft"> |
| <span class="authorName">[[comment.author.name]]</span> |
| <span class="draftLabel">DRAFT</span> |
| <gr-tooltip-content class="draftTooltip" |
| has-tooltip |
| title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'A' key." |
| max-width="20em" |
| show-icon></gr-tooltip-content> |
| </div> |
| <div class="headerMiddle"> |
| <span class="collapsedContent">[[comment.message]]</span> |
| </div> |
| <gr-button |
| id="deleteBtn" |
| link |
| secondary |
| class$="action delete [[_computeDeleteButtonClass(_isAdmin, draft)]]" |
| on-click="_handleCommentDelete"> |
| (Delete) |
| </gr-button> |
| <span class="date" on-click="_handleAnchorClick"> |
| <gr-date-formatter |
| has-tooltip |
| date-str="[[comment.updated]]"></gr-date-formatter> |
| </span> |
| <div class="show-hide"> |
| <label class="show-hide"> |
| <input type="checkbox" class="show-hide" |
| checked$="[[collapsed]]" |
| on-change="_handleToggleCollapsed"> |
| <iron-icon |
| id="icon" |
| icon="[[_computeShowHideIcon(collapsed)]]"> |
| </iron-icon> |
| </label> |
| </div> |
| </div> |
| <div class="body"> |
| <template is="dom-if" if="[[comment.robot_id]]"> |
| <div class="robotId" hidden$="[[collapsed]]"> |
| <iron-icon class="robotIcon" icon="gr-icons:robot"></iron-icon> |
| [[comment.robot_id]] |
| </div> |
| </template> |
| <template is="dom-if" if="[[editing]]"> |
| <gr-textarea |
| id="editTextarea" |
| class="editMessage" |
| autocomplete="on" |
| code |
| disabled="{{disabled}}" |
| rows="4" |
| text="{{_messageText}}"></gr-textarea> |
| </template> |
| <!--The message class is needed to ensure selectability from |
| gr-diff-selection.--> |
| <gr-formatted-text class="message" |
| content="[[comment.message]]" |
| no-trailing-margin="[[!comment.__draft]]" |
| collapsed="[[collapsed]]" |
| config="[[projectConfig.commentlinks]]"></gr-formatted-text> |
| <div hidden$="[[!comment.robot_run_id]]" class="message"> |
| <div class="runIdInformation" hidden$="[[collapsed]]"> |
| Run ID: |
| <template is="dom-if" if="[[comment.url]]"> |
| <a class="robotRunLink" href$="[[comment.url]]"> |
| <span class="robotRun link">[[comment.robot_run_id]]</span> |
| </a> |
| </template> |
| <template is="dom-if" if="[[!comment.url]]"> |
| <span class="robotRun text">[[comment.robot_run_id]]</span> |
| </template> |
| </div> |
| </div> |
| <div class="actions humanActions" hidden$="[[!_showHumanActions]]"> |
| <div class="action resolve hideOnPublished"> |
| <label> |
| <input type="checkbox" |
| id="resolvedCheckbox" |
| checked="[[resolved]]" |
| on-change="_handleToggleResolved"> |
| Resolved |
| </label> |
| </div> |
| <div class="rightActions"> |
| <gr-button |
| link |
| secondary |
| class="action cancel hideOnPublished" |
| on-click="_handleCancel">Cancel</gr-button> |
| <gr-button |
| link |
| secondary |
| class="action discard hideOnPublished" |
| on-click="_handleDiscard">Discard</gr-button> |
| <gr-button |
| link |
| secondary |
| class="action edit hideOnPublished" |
| on-click="_handleEdit">Edit</gr-button> |
| <gr-button |
| link |
| secondary |
| disabled$="[[_computeSaveDisabled(_messageText, comment, resolved)]]" |
| class="action save hideOnPublished" |
| on-click="_handleSave">Save</gr-button> |
| </div> |
| </div> |
| <div class="robotActions" hidden$="[[!_showRobotActions]]"> |
| <template is="dom-if" if="[[isRobotComment]]"> |
| <gr-button |
| link |
| secondary |
| class="action fix" |
| on-click="_handleFix" |
| disabled="[[robotButtonDisabled]]"> |
| Please Fix |
| </gr-button> |
| <gr-endpoint-decorator name="robot-comment-controls"> |
| <gr-endpoint-param name="comment" value="[[comment]]"> |
| </gr-endpoint-param> |
| </gr-endpoint-decorator> |
| </template> |
| </div> |
| </div> |
| </div> |
| <template is="dom-if" if="[[_enableOverlay]]"> |
| <gr-overlay id="confirmDeleteOverlay" with-backdrop> |
| <gr-confirm-delete-comment-dialog id="confirmDeleteComment" |
| on-confirm="_handleConfirmDeleteComment" |
| on-cancel="_handleCancelDeleteComment"> |
| </gr-confirm-delete-comment-dialog> |
| </gr-overlay> |
| <gr-overlay id="confirmDiscardOverlay" with-backdrop> |
| <gr-dialog |
| id="confirmDiscardDialog" |
| confirm-label="Discard" |
| confirm-on-enter |
| on-confirm="_handleConfirmDiscard" |
| on-cancel="_closeConfirmDiscardOverlay"> |
| <div class="header" slot="header"> |
| Discard comment |
| </div> |
| <div class="main" slot="main"> |
| Are you sure you want to discard this draft comment? |
| </div> |
| </gr-dialog> |
| </gr-overlay> |
| </template> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| <gr-storage id="storage"></gr-storage> |
| <gr-reporting id="reporting"></gr-reporting> |
| </template> |
| <script src="gr-comment.js"></script> |
| </dom-module> |
