Files
gerrit/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
Kasper Nilsson c64632cb3f Add actions to file controls
Adds a 'MORE' menu to the file list, next to the edit button. As it
exists right now, some of the actions that exist on a file may be
invalid (e.g. allowing "delete" on a file that is already deleted) --
using these actions will result in a server error, but are otherwise a
no-op.

TODO:
- Add tooltip prop to GrEditConstants.Actions
- Disable some actions for some files, based on status

Bug: Issue 4437
Change-Id: I313906ddff03121eb50472433390c15859c059aa
2017-10-23 20:28:51 +00:00

409 lines
13 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="../../../behaviors/async-foreach-behavior/async-foreach-behavior.html">
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
<link rel="import" href="../../../behaviors/gr-patch-set-behavior/gr-patch-set-behavior.html">
<link rel="import" href="../../../styles/shared-styles.html">
<link rel="import" href="../../core/gr-navigation/gr-navigation.html">
<link rel="import" href="../../core/gr-reporting/gr-reporting.html">
<link rel="import" href="../../diff/gr-comment-api/gr-comment-api.html">
<link rel="import" href="../../diff/gr-diff/gr-diff.html">
<link rel="import" href="../../diff/gr-diff-cursor/gr-diff-cursor.html">
<link rel="import" href="../../edit/gr-edit-file-controls/gr-edit-file-controls.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-cursor-manager/gr-cursor-manager.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="../../shared/gr-select/gr-select.html">
<link rel="import" href="../../shared/gr-tooltip-content/gr-tooltip-content.html">
<link rel="import" href="../gr-file-list-constants.html">
<dom-module id="gr-file-list">
<template>
<style include="shared-styles">
:host {
display: block;
}
.row {
align-items: center;
border-top: 1px solid #ddd;
display: flex;
min-height: 2.25em;
padding: .2em var(--default-horizontal-margin);
}
:host(.loading) .row {
opacity: .5;
};
:host(.editLoaded) .hideOnEdit {
display: none;
}
.showOnEdit {
display: none;
}
:host(.editLoaded) .showOnEdit {
display: initial;
}
.reviewed,
.status {
align-items: center;
display: inline-flex;
}
.reviewed,
.status {
display: inline-block;
text-align: center;
width: 1.5em;
}
.file-row:hover {
background-color: #f5fafd;
}
.row.selected {
background-color: #ebf5fb;
}
.path {
cursor: pointer;
flex: 1;
padding-left: .35em;
text-decoration: none;
white-space: nowrap;
}
.path:hover :first-child {
text-decoration: underline;
}
.path,
.path div {
overflow: hidden;
text-overflow: ellipsis;
}
.oldPath {
color: #999;
}
.comments,
.stats {
text-align: right;
}
.comments {
min-width: 10em;
}
.stats {
min-width: 7em;
}
.invisible {
visibility: hidden;
}
.row:not(.header) .stats,
.total-stats {
font-family: var(--monospace-font-family);
}
.added {
color: #388E3C;
}
.removed {
color: #D32F2F;
}
.drafts {
color: #C62828;
font-family: var(--font-family-bold);
}
.show-hide {
width: 1em;
}
.fileListButton {
margin: .5em;
}
.totalChanges {
justify-content: flex-end;
text-align: right;
}
.warning {
color: #666;
}
input.show-hide {
display: none;
}
label.show-hide {
color: var(--color-link);
cursor: pointer;
display: block;
font-size: .8em;
min-width: 2em;
}
gr-diff {
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
display: block;
margin: .25em 0 1em;
overflow-x: auto;
}
.truncatedFileName {
display: none;
}
.expanded .fullFileName {
white-space: normal;
word-wrap: break-word;
}
.mobile {
display: none;
}
.reviewed {
margin-left: 2em;
width: 15em;
}
.reviewed label {
color: #2A66D9;
opacity: 0;
justify-content: flex-end;
width: 100%;
}
.reviewed label:hover {
cursor: pointer;
opacity: 100;
}
.row:hover .reviewed label,
.row:focus .reviewed label {
opacity: 100;
}
.reviewed input {
display: none;
}
.reviewedLabel {
color: rgba(0, 0, 0, .54);
margin-right: 1em;
opacity: 0;
}
.reviewedLabel.isReviewed {
display: initial;
opacity: 100;
}
.editFileControls {
margin-left: 1em;
width: 10em;
}
@media screen and (max-width: 50em) {
.desktop {
display: none;
}
.mobile {
display: block;
}
.row.selected {
background-color: transparent;
}
.stats {
display: none;
}
.reviewed,
.status {
justify-content: flex-start;
}
.comments {
min-width: initial;
}
.expanded .fullFileName,
.truncatedFileName {
display: block;
}
.expanded .truncatedFileName,
.fullFileName {
display: none;
}
}
</style>
<div
id="container"
on-tap="_handleFileListTap">
<template is="dom-repeat"
items="[[_shownFiles]]"
id="files"
as="file"
initial-count="[[fileListIncrement]]"
target-framerate="1">
<div class="file-row row" data-path$="[[file.__path]]" tabindex="-1">
<div class="show-hide" hidden$="[[_userPrefs.expand_inline_diffs]]">
<label class="show-hide" data-path$="[[file.__path]]"
data-expand=true>
<input type="checkbox" class="show-hide"
checked$="[[_isFileExpanded(file.__path, _expandedFilePaths.*)]]"
data-path$="[[file.__path]]" data-expand=true>
[[_computeShowHideText(file.__path, _expandedFilePaths.*)]]
</label>
</div>
<div class$="[[_computeClass('status', file.__path)]]"
tabindex="0"
aria-label$="[[_computeFileStatusLabel(file.status)]]">
[[_computeFileStatus(file.status)]]
</div>
<span
data-url="[[_computeDiffURL(change, patchRange.patchNum, patchRange.basePatchNum, file.__path)]]"
class$="[[_computePathClass(file.__path, _expandedFilePaths.*)]]">
<a href$="[[_computeDiffURL(change, patchRange.patchNum, patchRange.basePatchNum, file.__path)]]">
<span title$="[[computeDisplayPath(file.__path)]]"
class="fullFileName">
[[computeDisplayPath(file.__path)]]
</span>
<span title$="[[computeDisplayPath(file.__path)]]"
class="truncatedFileName">
[[computeTruncatedPath(file.__path)]]
</span>
</a>
<div class="oldPath" hidden$="[[!file.old_path]]" hidden
title$="[[file.old_path]]">
[[file.old_path]]
</div>
</span>
<div class="comments desktop">
<span class="drafts">
[[_computeDraftsString(drafts, patchRange.patchNum, file.__path)]]
</span>
[[_computeCommentsString(comments, patchRange.patchNum, file.__path)]]
[[_computeUnresolvedString(comments, drafts, patchRange.patchNum, file.__path)]]
</div>
<div class="comments mobile">
<span class="drafts">
[[_computeDraftsStringMobile(drafts, patchRange.patchNum,
file.__path)]]
</span>
[[_computeCommentsStringMobile(comments, patchRange.patchNum,
file.__path)]]
</div>
<div class$="[[_computeClass('stats', file.__path)]]">
<span
class="added"
tabindex="0"
aria-label$="[[file.lines_inserted]] lines added"
hidden$=[[file.binary]]>
+[[file.lines_inserted]]
</span>
<span
class="removed"
tabindex="0"
aria-label$="[[file.lines_deleted]] lines removed"
hidden$=[[file.binary]]>
-[[file.lines_deleted]]
</span>
<span class$="[[_computeBinaryClass(file.size_delta)]]"
hidden$=[[!file.binary]]>
[[_formatBytes(file.size_delta)]]
[[_formatPercentage(file.size, file.size_delta)]]
</span>
</div>
<div class="reviewed hideOnEdit" hidden$="[[!_loggedIn]]" hidden>
<span class$="reviewedLabel [[_computeReviewedClass(file.isReviewed)]]">Reviewed</span>
<label>
<input class="reviewed" type="checkbox" checked="[[file.isReviewed]]">
<span class="markReviewed" title="Mark as reviewed (shortcut: r)">[[_computeReviewedText(file.isReviewed)]]</span>
</label>
</div>
<div class="editFileControls showOnEdit">
<gr-edit-file-controls
class$="[[_computeClass('', file.__path)]]"
file-path="[[file.__path]]"></gr-edit-file-controls>
</div>
</div>
<template is="dom-if"
if="[[_isFileExpanded(file.__path, _expandedFilePaths.*)]]">
<gr-diff
no-auto-render
display-line="[[_displayLine]]"
inline-index=[[index]]
hidden="[[!_isFileExpanded(file.__path, _expandedFilePaths.*)]]"
change-num="[[changeNum]]"
patch-range="[[patchRange]]"
path="[[file.__path]]"
prefs="[[diffPrefs]]"
project-name="[[change.project]]"
project-config="[[projectConfig]]"
on-line-selected="_onLineSelected"
no-render-on-prefs-change
view-mode="[[diffViewMode]]"></gr-diff>
</template>
</template>
</div>
<div
class="row totalChanges"
hidden$="[[_hideChangeTotals]]">
<div class="total-stats">
<span
class="added"
tabindex="0"
aria-label$="[[_patchChange.inserted]] lines added">
+[[_patchChange.inserted]]
</span>
<span
class="removed"
tabindex="0"
aria-label$="[[_patchChange.deleted]] lines removed">
-[[_patchChange.deleted]]
</span>
</div>
<!-- Empty div here exists to keep spacing in sync with file rows. -->
<div class="reviewed hideOnEdit" hidden$="[[!_loggedIn]]" hidden></div>
<div class="editFileControls showOnEdit"></div>
</div>
<div
class="row totalChanges"
hidden$="[[_hideBinaryChangeTotals]]">
<div class="total-stats">
<span class="added" aria-label="Total lines added">
[[_formatBytes(_patchChange.size_delta_inserted)]]
[[_formatPercentage(_patchChange.total_size,
_patchChange.size_delta_inserted)]]
</span>
<span class="removed" aria-label="Total lines removed">
[[_formatBytes(_patchChange.size_delta_deleted)]]
[[_formatPercentage(_patchChange.total_size,
_patchChange.size_delta_deleted)]]
</span>
</div>
</div>
<gr-button
class="fileListButton"
id="incrementButton"
hidden$="[[_computeFileListButtonHidden(numFilesShown, _files)]]"
link on-tap="_incrementNumFilesShown">
[[_computeIncrementText(numFilesShown, _files)]]
</gr-button>
<gr-tooltip-content
has-tooltip="[[_computeWarnShowAll(_files)]]"
show-icon="[[_computeWarnShowAll(_files)]]"
title$="[[_computeShowAllWarning(_files)]]">
<gr-button
class="fileListButton"
id="showAllButton"
hidden$="[[_computeFileListButtonHidden(numFilesShown, _files)]]"
link on-tap="_showAllFiles">
[[_computeShowAllText(_files)]]
</gr-button><!--
--></gr-tooltip-content>
<gr-diff-preferences
id="diffPreferences"
prefs="{{diffPrefs}}"
local-prefs="{{_localPrefs}}"></gr-diff-preferences>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
<gr-storage id="storage"></gr-storage>
<gr-diff-cursor id="diffCursor"></gr-diff-cursor>
<gr-cursor-manager
id="fileCursor"
scroll-behavior="keep-visible"
focus-on-move
cursor-target-class="selected"></gr-cursor-manager>
<gr-reporting id="reporting"></gr-reporting>
<gr-comment-api id="commentAPI"></gr-comment-api>
</template>
<script src="gr-file-list.js"></script>
</dom-module>