| <!-- |
| 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="../../shared/gr-textarea/gr-textarea.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-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-tooltip-content/gr-tooltip-content.html"> |
| <link rel="import" href="../gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog.html"> |
| <link rel="import" href="../../../styles/shared-styles.html"> |
| |
| <script src="../../../scripts/rootElement.js"></script> |
| |
| <dom-module id="gr-diff-comment"> |
| <template> |
| <style include="shared-styles"> |
| :host { |
| display: block; |
| font-family: var(--font-family); |
| padding: .7em .7em; |
| --iron-autogrow-textarea: { |
| box-sizing: border-box; |
| padding: 2px; |
| }; |
| } |
| :host([disabled]) { |
| pointer-events: none; |
| } |
| :host([disabled]) .container { |
| opacity: .5; |
| } |
| :host([is-robot-comment]) { |
| background-color: #cfe8fc; |
| } |
| .header { |
| cursor: pointer; |
| display: flex; |
| font-family: 'Open Sans', sans-serif; |
| margin-bottom: 0.7em; |
| padding-bottom: 0; |
| } |
| .container.collapsed .header { |
| margin: 0; |
| } |
| .headerMiddle { |
| color: #666; |
| flex: 1; |
| overflow: hidden; |
| } |
| .authorName, |
| .draftLabel, |
| .draftTooltip { |
| font-family: var(--font-family-bold); |
| } |
| .draftLabel, |
| .draftTooltip { |
| color: #999; |
| display: none; |
| } |
| .date { |
| justify-content: flex-end; |
| margin-left: 5px; |
| min-width: 4.5em; |
| text-align: right; |
| white-space: nowrap; |
| } |
| a.date:link, |
| a.date:visited { |
| color: #666; |
| } |
| .actions { |
| display: flex; |
| justify-content: flex-end; |
| padding-top: 0; |
| } |
| .action { |
| margin-left: .5em; |
| } |
| .rightActions { |
| display: flex; |
| justify-content: flex-end; |
| } |
| .editMessage { |
| display: none; |
| margin: .5em 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, |
| .draft:not(.editing) .resolve { |
| display: none; |
| } |
| .editing .message, |
| .editing .reply, |
| .editing .quote, |
| .editing .ack, |
| .editing .done, |
| .editing .edit, |
| .editing .unresolved { |
| display: none; |
| } |
| .editing .editMessage { |
| display: block; |
| } |
| .show-hide { |
| margin-left: .4em; |
| } |
| .robotId { |
| color: #808080; |
| margin-bottom: .8em; |
| margin-top: -.4em; |
| } |
| .runIdInformation { |
| margin: 1em 0; |
| } |
| .robotRun { |
| margin-left: .5em; |
| } |
| .robotRunLink { |
| margin-left: .5em; |
| } |
| input.show-hide { |
| display: none; |
| } |
| label.show-hide { |
| color: #000; |
| cursor: pointer; |
| display: block; |
| font-size: .8em; |
| height: 1.1em; |
| margin-top: .1em; |
| } |
| #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: #333; |
| font-size: 12px; |
| } |
| gr-confirm-dialog .main { |
| background-color: #fef; |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| } |
| #deleteBtn { |
| color: #666; |
| display: none; |
| } |
| #deleteBtn.showDeleteButtons { |
| display: block; |
| } |
| </style> |
| <div id="container" |
| class="container" |
| on-mouseenter="_handleMouseEnter" |
| on-mouseleave="_handleMouseLeave"> |
| <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 red 'Reply' 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 |
| class$="action delete [[_computeDeleteButtonClass(_isAdmin, draft)]]" |
| on-tap="_handleCommentDelete"> |
| (Delete) |
| </gr-button> |
| <a class="date" href$="[[_computeLinkToComment(comment)]]" on-tap="_handleLinkTap"> |
| <gr-date-formatter |
| has-tooltip |
| date-str="[[comment.updated]]"></gr-date-formatter> |
| </a> |
| <div class="show-hide"> |
| <label class="show-hide"> |
| <input type="checkbox" class="show-hide" |
| checked$="[[collapsed]]" |
| on-change="_handleToggleCollapsed"> |
| [[_computeShowHideText(collapsed)]] |
| </label> |
| </div> |
| </div> |
| <template is="dom-if" if="[[comment.robot_id]]"> |
| <div class="robotId" hidden$="[[collapsed]]"> |
| [[comment.robot_id]] |
| </div> |
| </template> |
| <gr-textarea |
| id="editTextarea" |
| class="editMessage" |
| autocomplete="on" |
| monospace |
| disabled="{{disabled}}" |
| rows="4" |
| text="{{_messageText}}"></gr-textarea> |
| <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]]"> |
| <div class="runIdInformation" hidden$="[[collapsed]]"> |
| Run ID: |
| <a class="robotRunLink" href$="[[comment.url]]"> |
| <span class="robotRun">[[comment.robot_run_id]]</span> |
| </a> |
| </div> |
| </div> |
| <div class="actions humanActions" hidden$="[[!_showHumanActions]]"> |
| <div class="action resolve hideOnPublished"> |
| <label> |
| <input type="checkbox" |
| checked$="[[resolved]]" |
| on-change="_handleToggleResolved"> |
| Resolved |
| </label> |
| </div> |
| <div class="action unresolved hideOnPublished" hidden$="[[resolved]]"> |
| Unresolved |
| </div> |
| <div class="rightActions"> |
| <gr-button class="action edit hideOnPublished" on-tap="_handleEdit"> |
| Edit</gr-button> |
| <gr-button class="action save hideOnPublished" on-tap="_handleSave" |
| disabled$="[[_computeSaveDisabled(_messageText)]]">Save</gr-button> |
| <gr-button class="action cancel hideOnPublished" |
| on-tap="_handleCancel" hidden>Cancel</gr-button> |
| <gr-button class="action discard hideOnPublished" |
| on-tap="_handleDiscard">Discard</gr-button> |
| </div> |
| </div> |
| <div class="actions robotActions" hidden$="[[!_showRobotActions]]"> |
| <gr-button class="action fix" |
| on-tap="_handleFix" |
| disabled="[[robotButtonDisabled]]"> |
| Please Fix |
| </gr-button> |
| </div> |
| </div> |
| <gr-overlay id="overlay" with-backdrop> |
| <gr-confirm-delete-comment-dialog id="confirmDeleteComment" |
| on-confirm="_handleConfirmDeleteComment" |
| on-cancel="_handleCancelDeleteComment"> |
| </gr-confirm-delete-comment-dialog> |
| </gr-overlay> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| <gr-storage id="storage"></gr-storage> |
| </template> |
| <script src="gr-diff-comment.js"></script> |
| </dom-module> |
