c828098853
With this change, all CSS border declarations that specify some shade of gray are modified to use the one unified --border-color declaration in app-theme.html. Further followup with UX is required to ensure that the shade of gray chosen is the correct one -- for now, the most-used one is used. Change-Id: I2134ebf4a459ba040e01856c11389780307d8648
352 lines
12 KiB
HTML
352 lines
12 KiB
HTML
<!--
|
|
@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/gr-patch-set-behavior/gr-patch-set-behavior.html">
|
|
<link rel="import" href="../../../behaviors/gr-path-list-behavior/gr-path-list-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="../../../styles/shared-styles.html">
|
|
<link rel="import" href="../../core/gr-navigation/gr-navigation.html">
|
|
<link rel="import" href="../../shared/gr-button/gr-button.html">
|
|
<link rel="import" href="../../shared/gr-count-string-formatter/gr-count-string-formatter.html">
|
|
<link rel="import" href="../../shared/gr-dropdown-list/gr-dropdown-list.html">
|
|
<link rel="import" href="../../shared/gr-fixed-panel/gr-fixed-panel.html">
|
|
<link rel="import" href="../../shared/gr-icons/gr-icons.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/revision-info/revision-info.html">
|
|
<link rel="import" href="../gr-comment-api/gr-comment-api.html">
|
|
<link rel="import" href="../gr-diff-cursor/gr-diff-cursor.html">
|
|
<link rel="import" href="../gr-diff-mode-selector/gr-diff-mode-selector.html">
|
|
<link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
|
|
<link rel="import" href="../gr-diff/gr-diff.html">
|
|
<link rel="import" href="../gr-patch-range-select/gr-patch-range-select.html">
|
|
|
|
<dom-module id="gr-diff-view">
|
|
<template>
|
|
<style include="shared-styles">
|
|
:host {
|
|
background-color: var(--view-background-color);
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
gr-patch-range-select {
|
|
display: block;
|
|
}
|
|
gr-diff {
|
|
border: none;
|
|
--diff-container-styles: {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
}
|
|
gr-fixed-panel {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid var(--border-color);
|
|
z-index: 1;
|
|
}
|
|
header,
|
|
.subHeader {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
header {
|
|
padding: .75em var(--default-horizontal-margin);
|
|
}
|
|
.patchRangeLeft {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.navLink:not([href]),
|
|
.downloadLink:not([href]) {
|
|
color: #999;
|
|
}
|
|
.navLinks {
|
|
align-items: center;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
}
|
|
.navLink {
|
|
padding: 0 .25em;
|
|
}
|
|
.reviewed {
|
|
display: inline-block;
|
|
margin: 0 .25em;
|
|
vertical-align: .15em;
|
|
}
|
|
.jumpToFileContainer {
|
|
display: inline-block;
|
|
}
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
gr-button {
|
|
padding: .3em 0;
|
|
text-decoration: none;
|
|
}
|
|
.loading {
|
|
color: #777;
|
|
font-size: 2rem;
|
|
height: 100%;
|
|
padding: 1em var(--default-horizontal-margin);
|
|
text-align: center;
|
|
}
|
|
.subHeader {
|
|
flex-wrap: wrap;
|
|
margin: 0 var(--default-horizontal-margin) .75em;
|
|
}
|
|
.subHeader > div {
|
|
margin-top: .25em;
|
|
}
|
|
.prefsButton {
|
|
text-align: right;
|
|
}
|
|
.noOverflow {
|
|
display: block;
|
|
overflow: auto;
|
|
}
|
|
.editMode .hideOnEdit {
|
|
display: none;
|
|
}
|
|
.blameLoader,
|
|
.fileNum {
|
|
display: none;
|
|
}
|
|
.blameLoader.show,
|
|
.fileNum.show ,
|
|
.download,
|
|
.preferences,
|
|
.rightControls {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.diffModeSelector {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.diffModeSelector span {
|
|
margin-right: .2rem;
|
|
}
|
|
.diffModeSelector.hide,
|
|
.separator.hide {
|
|
display: none;
|
|
}
|
|
gr-dropdown-list {
|
|
--trigger-style: {
|
|
text-transform: none;
|
|
}
|
|
}
|
|
@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: var(--font-size-small);
|
|
font-style: italic;
|
|
min-width: 50%;
|
|
padding: 0 .1em;
|
|
text-align: center;
|
|
width: 100%;
|
|
word-wrap: break-word;
|
|
}
|
|
.reviewed {
|
|
vertical-align: -.1em;
|
|
}
|
|
.mobileNavLink {
|
|
color: #000;
|
|
font-size: 1.5rem;
|
|
font-family: var(--font-family-bold);
|
|
text-decoration: none;
|
|
}
|
|
.mobileNavLink:not([href]) {
|
|
color: #bbb;
|
|
}
|
|
.jumpToFileContainer {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
gr-dropdown-list {
|
|
width: 100%;
|
|
--gr-select-style: {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
--native-select-style: {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<gr-fixed-panel
|
|
class$="[[_computeContainerClass(_editMode)]]"
|
|
floating-disabled="[[_panelFloatingDisabled]]"
|
|
keep-on-scroll
|
|
ready-for-measure="[[!_loading]]">
|
|
<header>
|
|
<h3>
|
|
<a href$="[[_computeChangePath(_change, _patchRange.*, _change.revisions)]]">
|
|
[[_changeNum]]</a><span>:</span>
|
|
<span>[[_change.subject]]</span>
|
|
<span class="dash">—</span>
|
|
<input id="reviewed"
|
|
class="reviewed hideOnEdit"
|
|
type="checkbox"
|
|
on-change="_handleReviewedChange"
|
|
hidden$="[[!_loggedIn]]" hidden>
|
|
<div class="jumpToFileContainer">
|
|
<gr-dropdown-list
|
|
id="dropdown"
|
|
value="[[_path]]"
|
|
on-value-change="_handleFileChange"
|
|
items="[[_formattedFiles]]"
|
|
initial-count="75">
|
|
</gr-dropdown-list>
|
|
</div>
|
|
</h3>
|
|
<div class="navLinks desktop">
|
|
<span class$="fileNum [[_computeFileNumClass(_fileNum, _formattedFiles)]]">
|
|
File [[_fileNum]] of [[_formattedFiles.length]]
|
|
<span class="separator"></span>
|
|
</span>
|
|
<a class="navLink"
|
|
href$="[[_computeNavLinkURL(_change, _path, _fileList, -1, 1)]]">
|
|
Prev</a>
|
|
<span class="separator"></span>
|
|
<a class="navLink"
|
|
href$="[[_computeChangePath(_change, _patchRange.*, _change.revisions)]]">
|
|
Up</a>
|
|
<span class="separator"></span>
|
|
<a class="navLink"
|
|
href$="[[_computeNavLinkURL(_change, _path, _fileList, 1, 1)]]">
|
|
Next</a>
|
|
</div>
|
|
</header>
|
|
<div class="subHeader">
|
|
<div class="patchRangeLeft">
|
|
<gr-patch-range-select
|
|
id="rangeSelect"
|
|
change-num="[[_changeNum]]"
|
|
change-comments="[[_changeComments]]"
|
|
patch-num="[[_patchRange.patchNum]]"
|
|
base-patch-num="[[_patchRange.basePatchNum]]"
|
|
files-weblinks="[[_filesWeblinks]]"
|
|
available-patches="[[_allPatchSets]]"
|
|
revisions="[[_change.revisions]]"
|
|
revision-info="[[_revisionInfo]]"
|
|
on-patch-range-change="_handlePatchChange">
|
|
</gr-patch-range-select>
|
|
<span class="download desktop">
|
|
<span class="separator"></span>
|
|
<a
|
|
class="downloadLink"
|
|
download
|
|
href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
|
|
Download
|
|
</a>
|
|
</span>
|
|
</div>
|
|
<div class="rightControls">
|
|
<span class$="blameLoader [[_computeBlameLoaderClass(_isImageDiff, _isBlameSupported)]]">
|
|
<gr-button
|
|
link
|
|
disabled="[[_isBlameLoading]]"
|
|
on-tap="_toggleBlame">[[_computeBlameToggleLabel(_isBlameLoaded, _isBlameLoading)]]</gr-button>
|
|
<span class="separator"></span>
|
|
</span>
|
|
<div class$="diffModeSelector [[_computeModeSelectHideClass(_isImageDiff)]]">
|
|
<span>Diff view:</span>
|
|
<gr-diff-mode-selector
|
|
id="modeSelect"
|
|
save-on-change="[[_loggedIn]]"
|
|
mode="{{changeViewState.diffMode}}"></gr-diff-mode-selector>
|
|
</div>
|
|
<span id="diffPrefsContainer"
|
|
hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]" hidden>
|
|
<span class="preferences desktop">
|
|
<gr-button
|
|
link
|
|
class="prefsButton"
|
|
has-tooltip
|
|
title="Diff preferences"
|
|
on-tap="_handlePrefsTap"><iron-icon icon="gr-icons:settings"></iron-icon></gr-button>
|
|
</span>
|
|
</span>
|
|
<gr-endpoint-decorator name="annotation-toggler">
|
|
<span hidden id="annotation-span">
|
|
<label for="annotation-checkbox" id="annotation-label"></label>
|
|
<input is="iron-input" type="checkbox" id="annotation-checkbox" disabled>
|
|
</span>
|
|
</gr-endpoint-decorator>
|
|
</div>
|
|
</div>
|
|
<div class="fileNav mobile">
|
|
<a class="mobileNavLink"
|
|
href$="[[_computeNavLinkURL(_change, _path, _fileList, -1, 1)]]">
|
|
<</a>
|
|
<div class="fullFileName mobile">[[computeDisplayPath(_path)]]
|
|
</div>
|
|
<a class="mobileNavLink"
|
|
href$="[[_computeNavLinkURL(_change, _path, _fileList, 1, 1)]]">
|
|
></a>
|
|
</div>
|
|
</gr-fixed-panel>
|
|
<div class="loading" hidden$="[[!_loading]]">Loading...</div>
|
|
<gr-diff
|
|
id="diff"
|
|
hidden
|
|
hidden$="[[_loading]]"
|
|
class$="[[_computeDiffClass(_panelFloatingDisabled)]]"
|
|
is-image-diff="{{_isImageDiff}}"
|
|
files-weblinks="{{_filesWeblinks}}"
|
|
change-num="[[_changeNum]]"
|
|
commit-range="[[_commitRange]]"
|
|
patch-range="[[_patchRange]]"
|
|
path="[[_path]]"
|
|
prefs="[[_prefs]]"
|
|
project-config="[[_projectConfig]]"
|
|
project-name="[[_change.project]]"
|
|
view-mode="[[_diffMode]]"
|
|
is-blame-loaded="{{_isBlameLoaded}}"
|
|
on-line-selected="_onLineSelected">
|
|
</gr-diff>
|
|
<gr-diff-preferences
|
|
id="diffPreferences"
|
|
prefs="{{_prefs}}"
|
|
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="cursor"></gr-diff-cursor>
|
|
<gr-comment-api id="commentAPI"></gr-comment-api>
|
|
</template>
|
|
<script src="gr-diff-view.js"></script>
|
|
</dom-module>
|