| <!-- | |
| @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="../../../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-confirm-dialog/gr-confirm-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-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]) .actions, | |
| :host([disabled]) .robotActions, | |
| :host([disabled]) .date { | |
| opacity: .5; | |
| } | |
| :host([discarding]) { | |
| display: none; | |
| } | |
| .header { | |
| align-items: baseline; | |
| cursor: pointer; | |
| display: flex; | |
| font-family: 'Open Sans', sans-serif; | |
| margin: -.7em -.7em 0 -.7em; | |
| padding: .7em; | |
| } | |
| .container.collapsed .header { | |
| margin-bottom: -.7em; | |
| } | |
| .headerMiddle { | |
| color: var(--deemphasized-text-color); | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .authorName, | |
| .draftLabel, | |
| .draftTooltip { | |
| font-family: var(--font-family-bold); | |
| } | |
| .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; | |
| } | |
| a.date:link, | |
| a.date:visited { | |
| color: var(--deemphasized-text-color); | |
| } | |
| .actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| padding-top: 0; | |
| } | |
| .action { | |
| margin-left: 1em; | |
| } | |
| .robotActions { | |
| display: flex; | |
| justify-content: flex-start; | |
| padding-top: 0; | |
| } | |
| .robotActions .action { | |
| /* Keep button text lined up with output text */ | |
| margin-left: -.3rem; | |
| margin-right: 1em; | |
| } | |
| .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 { | |
| 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: .4em; | |
| } | |
| .robotId { | |
| color: var(--deemphasized-text-color); | |
| margin-bottom: .8em; | |
| margin-top: -.4em; | |
| } | |
| .robotIcon { | |
| margin-right: .2em; | |
| /* 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: -.3em; | |
| } | |
| .runIdInformation { | |
| margin: .7em 0; | |
| } | |
| .robotRun { | |
| margin-left: .5em; | |
| } | |
| .robotRunLink { | |
| margin-left: .5em; | |
| } | |
| input.show-hide { | |
| display: none; | |
| } | |
| label.show-hide { | |
| color: var(--comment-text-color); | |
| cursor: pointer; | |
| display: block; | |
| font-size: .8rem; | |
| 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: var(--comment-text-color); | |
| } | |
| gr-confirm-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; | |
| } | |
| </style> | |
| <div id="container" | |
| class="container" | |
| on-mouseenter="_handleMouseEnter" | |
| on-mouseleave="_handleMouseLeave"> | |
| <div class="header" id="header" on-tap="_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 | |
| secondary | |
| 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> | |
| <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" | |
| monospace | |
| 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-tap="_handleCancel">Cancel</gr-button> | |
| <gr-button | |
| link | |
| secondary | |
| class="action discard hideOnPublished" | |
| on-tap="_handleDiscard">Discard</gr-button> | |
| <gr-button | |
| link | |
| secondary | |
| class="action edit hideOnPublished" | |
| on-tap="_handleEdit">Edit</gr-button> | |
| <gr-button | |
| link | |
| secondary | |
| disabled$="[[_computeSaveDisabled(_messageText, comment, resolved)]]" | |
| class="action save hideOnPublished" | |
| on-tap="_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-tap="_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-confirm-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-confirm-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-diff-comment.js"></script> | |
| </dom-module> |