7a45400e24
Previously, gr-diff-preferences was the contents that was displayed in an overlay contained in the gr-diff-view. There were a handful of functions that crossed between the two-- the diff preferences element would fire events that needed to be handled by the diff view. Because the gr-diff-preferences element will be added to the change view as well, the overlay has been moved to be part of the diff preferences element. This way, the element can handle all of the actions taken by the panel, and all the parent element needs to do is call the open function. A separate change will come with the addition of diff preferences in the change view. Bug: Issue 5426 Change-Id: Id7396147e73354122ea3825bde2c324b5daa1d26
311 lines
10 KiB
HTML
311 lines
10 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="../../../behaviors/base-url-behavior/base-url-behavior.html">
|
|
<link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
|
|
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
|
|
<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
|
|
<link rel="import" href="../../../bower_components/iron-dropdown/iron-dropdown.html">
|
|
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
|
<link rel="import" href="../../shared/gr-button/gr-button.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="../gr-diff/gr-diff.html">
|
|
<link rel="import" href="../gr-diff-cursor/gr-diff-cursor.html">
|
|
<link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
|
|
<link rel="import" href="../gr-patch-range-select/gr-patch-range-select.html">
|
|
|
|
<dom-module id="gr-diff-view">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
background-color: var(--view-background-color);
|
|
display: block;
|
|
}
|
|
header,
|
|
.subHeader {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
header {
|
|
padding: .75em var(--default-horizontal-margin);
|
|
}
|
|
.patchRangeLeft {
|
|
display: flex;
|
|
}
|
|
.navLink:not([href]),
|
|
.downloadLink:not([href]) {
|
|
color: #999;
|
|
}
|
|
.navLinks {
|
|
white-space: nowrap;
|
|
}
|
|
.reviewed {
|
|
display: inline-block;
|
|
margin: 0 .25em;
|
|
vertical-align: .15em;
|
|
}
|
|
.jumpToFileContainer {
|
|
display: inline-block;
|
|
}
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
.downArrow {
|
|
display: inline-block;
|
|
font-size: .6em;
|
|
vertical-align: middle;
|
|
}
|
|
.dropdown-trigger {
|
|
color: #00e;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
iron-dropdown {
|
|
position: absolute;
|
|
}
|
|
.dropdown-content {
|
|
background-color: #fff;
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
|
|
}
|
|
.dropdown-content a {
|
|
cursor: pointer;
|
|
display: block;
|
|
font-weight: normal;
|
|
padding: .3em .5em;
|
|
}
|
|
.dropdown-content a:before {
|
|
color: #ccc;
|
|
content: attr(data-key-nav);
|
|
display: inline-block;
|
|
margin-right: .5em;
|
|
width: .3em;
|
|
}
|
|
.dropdown-content a:hover {
|
|
background-color: #00e;
|
|
color: #fff;
|
|
}
|
|
.dropdown-content a[selected] {
|
|
color: #000;
|
|
font-weight: bold;
|
|
pointer-events: none;
|
|
text-decoration: none;
|
|
}
|
|
.dropdown-content a[selected]:hover {
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
gr-button {
|
|
font: inherit;
|
|
padding: .3em 0;
|
|
text-decoration: none;
|
|
}
|
|
.loading {
|
|
padding: 0 var(--default-horizontal-margin) 1em;
|
|
color: #666;
|
|
}
|
|
.subHeader {
|
|
flex-wrap: wrap;
|
|
margin: 0 var(--default-horizontal-margin) .75em;
|
|
}
|
|
.subHeader > div {
|
|
margin-top: .25em;
|
|
}
|
|
.prefsButton {
|
|
text-align: right;
|
|
}
|
|
.separator {
|
|
margin: 0 .25em;
|
|
}
|
|
@media screen and (max-width: 50em) {
|
|
header {
|
|
padding: .5em var(--default-horizontal-margin);
|
|
}
|
|
.dash {
|
|
display: none;
|
|
}
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
.fileNav {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
margin: 0 .25em;
|
|
}
|
|
.fullFileName {
|
|
display: block;
|
|
font-size: .9em;
|
|
font-style: italic;
|
|
min-width: 50%;
|
|
padding: 0 .1em;
|
|
text-align: center;
|
|
width: 100%;
|
|
word-wrap: break-word;
|
|
}
|
|
.reviewed {
|
|
vertical-align: -.1em;
|
|
}
|
|
.mobileJumpToFileContainer {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.mobileJumpToFileContainer select {
|
|
width: 100%;
|
|
}
|
|
.mobileNavLink {
|
|
color: #000;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
}
|
|
.mobileNavLink:not([href]) {
|
|
color: #bbb;
|
|
}
|
|
}
|
|
</style>
|
|
<header>
|
|
<h3>
|
|
<a href$="[[_computeChangePath(_changeNum, _patchRange.*, _change.revisions)]]">
|
|
[[_changeNum]]</a><span>:</span>
|
|
<span>[[_change.subject]]</span>
|
|
<span class="dash">—</span>
|
|
<input id="reviewed"
|
|
class="reviewed"
|
|
type="checkbox"
|
|
on-change="_handleReviewedChange"
|
|
hidden$="[[!_loggedIn]]" hidden>
|
|
<div class="jumpToFileContainer desktop">
|
|
<gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
|
|
<span>[[_computeFileDisplayName(_path)]]</span>
|
|
<span class="downArrow">▼</span>
|
|
</gr-button>
|
|
<!-- *-align="" to disable iron-dropdown's element positioning. -->
|
|
<iron-dropdown id="dropdown"
|
|
allow-outside-scroll
|
|
vertical-align=""
|
|
horizontal-align="">
|
|
<div class="dropdown-content">
|
|
<template
|
|
is="dom-repeat"
|
|
items="[[_fileList]]"
|
|
as="path"
|
|
initial-count="75">
|
|
<a href$="[[_computeDiffURL(_changeNum, _patchRange.*, path)]]"
|
|
selected$="[[_computeFileSelected(path, _path)]]"
|
|
data-key-nav$="[[_computeKeyNav(path, _path, _fileList)]]"
|
|
on-tap="_handleFileTap">[[_computeFileDisplayName(path)]]</a>
|
|
</template>
|
|
</div>
|
|
</iron-dropdown>
|
|
</div>
|
|
<div class="mobileJumpToFileContainer mobile">
|
|
<select on-change="_handleMobileSelectChange">
|
|
<template is="dom-repeat" items="[[_fileList]]" as="path">
|
|
<option
|
|
value$="[[path]]"
|
|
selected$="[[_computeFileSelected(path, _path)]]">
|
|
[[_computeTruncatedFileDisplayName(path)]]
|
|
</option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
</h3>
|
|
<div class="navLinks desktop">
|
|
<a class="navLink"
|
|
href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]">Prev</a>
|
|
/
|
|
<a class="navLink"
|
|
href$="[[_computeUpURL(_changeNum, _patchRange, _change, _change.revisions)]]">Up</a>
|
|
/
|
|
<a class="navLink"
|
|
href$="[[_computeNavLinkURL(_path, _fileList, 1, 1)]]">Next</a>
|
|
</div>
|
|
</header>
|
|
<div class="loading" hidden$="[[!_loading]]">Loading...</div>
|
|
<div hidden$="[[_loading]]" hidden>
|
|
<div class="subHeader">
|
|
<div class="patchRangeLeft">
|
|
<gr-patch-range-select
|
|
path="[[_path]]"
|
|
change-num="[[_changeNum]]"
|
|
patch-range="[[_patchRange]]"
|
|
files-weblinks="[[_filesWeblinks]]"
|
|
available-patches="[[_computeAvailablePatches(_change.revisions)]]"
|
|
revisions="[[_change.revisions]]">
|
|
</gr-patch-range-select>
|
|
<span class="download desktop">
|
|
<span class="separator">/</span>
|
|
<a class="downloadLink"
|
|
href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
|
|
Download
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<select
|
|
id="modeSelect"
|
|
is="gr-select"
|
|
bind-value="{{changeViewState.diffMode}}"
|
|
hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">
|
|
<option value="SIDE_BY_SIDE">Side By Side</option>
|
|
<option value="UNIFIED_DIFF">Unified</option>
|
|
</select>
|
|
<span hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]">
|
|
<span class="preferences desktop">
|
|
<span
|
|
hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
|
|
<gr-button link
|
|
class="prefsButton"
|
|
on-tap="_handlePrefsTap">Preferences</gr-button>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<gr-diff-preferences
|
|
id="diffPreferences"
|
|
prefs="{{_prefs}}"
|
|
local-prefs="{{_localPrefs}}"></gr-diff-preferences>
|
|
<div class="fileNav mobile">
|
|
<a class="mobileNavLink"
|
|
href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]"><</a>
|
|
<div class="fullFileName mobile">[[_computeFileDisplayName(_path)]]
|
|
</div>
|
|
<a class="mobileNavLink"
|
|
href$="[[_computeNavLinkURL(_path, _fileList, 1, 1)]]">></a>
|
|
</div>
|
|
<gr-diff
|
|
id="diff"
|
|
project="[[_change.project]]"
|
|
commit="[[_change.current_revision]]"
|
|
is-image-diff="{{_isImageDiff}}"
|
|
files-weblinks="{{_filesWeblinks}}"
|
|
change-num="[[_changeNum]]"
|
|
patch-range="[[_patchRange]]"
|
|
path="[[_path]]"
|
|
prefs="[[_prefs]]"
|
|
project-config="[[_projectConfig]]"
|
|
view-mode="[[_diffMode]]"
|
|
on-line-selected="_onLineSelected">
|
|
</gr-diff>
|
|
</div>
|
|
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
|
<gr-storage id="storage"></gr-storage>
|
|
<gr-diff-cursor id="cursor"></gr-diff-cursor>
|
|
</template>
|
|
<script src="gr-diff-view.js"></script>
|
|
</dom-module>
|