Viktar Donich e2d1c6307f Revert "Layout fixes (mostly for Safari)"
This reverts commit 37ef1672f9133b605c5e14f8fbcc241d4c40eb50.

Reason for revert: Got a better idea for app layout, will send follow-up change.

Change-Id: I7bfddcef416d44c7af88d74da6b39c2a93565d32
2016-10-24 20:52:59 +00:00

257 lines
8.3 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: flex;
flex-direction: column;
height: 100%;
}
.titleHeader,
.patchRangeHeader {
align-items: center;
display: flex;
justify-content: space-between;
}
.titleHeader {
padding: .75em var(--default-horizontal-margin);
}
.patchRangeHeader {
margin: 0 var(--default-horizontal-margin) .75em;
}
#diff {
flex: 1;
overflow: auto;
}
.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;
}
.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>
<div class="titleHeader">
<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">&#9660;</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>
</div>
<div class="loading" hidden$="[[!_loading]]">Loading...</div>
<div class="patchRangeHeader" hidden hidden$="[[_loading]]">
<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>
<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>
</div>
</header>
<gr-diff
id="diff"
hidden
hidden$="[[_loading]]"
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>
<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>