| <!-- | |
| @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="../../core/gr-reporting/gr-reporting.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: var(--view-background-color); | |
| 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: var(--deemphasized-text-color); | |
| } | |
| .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: var(--deemphasized-text-color); | |
| 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-style: italic; | |
| min-width: 50%; | |
| padding: 0 .1em; | |
| text-align: center; | |
| width: 100%; | |
| word-wrap: break-word; | |
| } | |
| .reviewed { | |
| vertical-align: -.1em; | |
| } | |
| .mobileNavLink { | |
| color: var(--primary-text-color); | |
| font-size: 1.5rem; | |
| font-family: var(--font-family-bold); | |
| text-decoration: none; | |
| } | |
| .mobileNavLink:not([href]) { | |
| color: var(--deemphasized-text-color); | |
| } | |
| .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)]]"> | |
| <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> | |
| <gr-reporting id="reporting"></gr-reporting> | |
| </template> | |
| <script src="gr-diff-view.js"></script> | |
| </dom-module> |