6c06e78cf6
Previously, long file names would display outside of the window size, causing a horizontal scroll on mobile browsers. With this change: * In the file list on the change view, the rightControls are adjusted so that they wrap on a new line on smaller/mobile screens. * In the comment list, word-wrapping is used for long file paths displayed above each comment. * In the diff view, instead of displaying full paths in the dropdown, the path is truncated to include an ellipsis, a slash and the file name so that it can be seen both in the dropdown and also the native browser select. Bug: Issue 4722 Change-Id: Icd4644a45db71bc6666c21d62c864d91e9874654
246 lines
8.0 KiB
HTML
246 lines
8.0 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="../../../bower_components/iron-dropdown/iron-dropdown.html">
|
|
<link rel="import" href="../../../behaviors/keyboard-shortcut-behavior.html">
|
|
<link rel="import" href="../../shared/gr-button/gr-button.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-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);
|
|
}
|
|
.navLink:not([href]) {
|
|
color: #999;
|
|
}
|
|
.reviewed {
|
|
display: inline-block;
|
|
margin: 0 .25em;
|
|
vertical-align: .15em;
|
|
}
|
|
.jumpToFileContainer {
|
|
display: inline-block;
|
|
}
|
|
.mobileJumpToFileContainer {
|
|
display: none;
|
|
}
|
|
.downArrow {
|
|
display: inline-block;
|
|
font-size: .6em;
|
|
vertical-align: middle;
|
|
}
|
|
.dropdown-trigger {
|
|
color: #00e;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.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 {
|
|
margin: 0 var(--default-horizontal-margin) .75em;
|
|
}
|
|
.prefsButton {
|
|
text-align: right;
|
|
}
|
|
#modeSelect {
|
|
margin-left: .5em;
|
|
}
|
|
@media screen and (max-width: 50em) {
|
|
.dash {
|
|
display: none;
|
|
}
|
|
.reviewed {
|
|
vertical-align: -.1em;
|
|
}
|
|
.jumpToFileContainer {
|
|
display: none;
|
|
}
|
|
.mobileJumpToFileContainer {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.mobileJumpToFileContainer select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</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">
|
|
<gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
|
|
<span>[[_computeFileDisplayName(_path)]]</span>
|
|
<span class="downArrow">▼</span>
|
|
</gr-button>
|
|
<iron-dropdown id="dropdown" vertical-align="top" vertical-offset="25">
|
|
<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">
|
|
<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>
|
|
<a class="navLink"
|
|
href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]">Prev</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">
|
|
<gr-patch-range-select
|
|
path="[[_path]]"
|
|
change-num="[[_changeNum]]"
|
|
patch-range="[[_patchRange]]"
|
|
files-weblinks="[[_filesWeblinks]]"
|
|
available-patches="[[_computeAvailablePatches(_change.revisions)]]">
|
|
</gr-patch-range-select>
|
|
<div>
|
|
<select
|
|
id="modeSelect"
|
|
is="gr-select"
|
|
bind-value="{{changeViewState.diffMode}}"
|
|
hidden$="[[_computeModeSelectHidden(_isImageDiff)]]"
|
|
on-change="_handleDropdownChange">
|
|
<option value="SIDE_BY_SIDE">Side By Side</option>
|
|
<option value="UNIFIED_DIFF">Unified</option>
|
|
</select>
|
|
<span hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]">
|
|
<span
|
|
hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
|
|
<gr-button link
|
|
class="prefsButton"
|
|
on-tap="_handlePrefsTap">Preferences</gr-button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<gr-overlay id="prefsOverlay" with-backdrop>
|
|
<gr-diff-preferences
|
|
id="diffPreferences"
|
|
prefs="{{_prefs}}"
|
|
local-prefs="{{_localPrefs}}"
|
|
on-save="_handlePrefsSave"
|
|
on-cancel="_handlePrefsCancel"></gr-diff-preferences>
|
|
</gr-overlay>
|
|
<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>
|