Changes to diff view for mobile
- Hide download link and file web links from patchsets. - Add a full file path. - Change next/prev buttons to be arrows on either side of full path - Change subheader to flex/wrap so that the display mode wraps to the next line instead of the second patch set item. Bug: Issue 5114 Change-Id: Iefb8afe9d7e2417f8aa2070e52073708c052fa4f
This commit is contained in:
parent
b148a81817
commit
a2ea634774
@ -59,7 +59,7 @@ limitations under the License.
|
|||||||
.jumpToFileContainer {
|
.jumpToFileContainer {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.mobileJumpToFileContainer {
|
.mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.downArrow {
|
.downArrow {
|
||||||
@ -113,27 +113,46 @@ limitations under the License.
|
|||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
.subHeader {
|
.subHeader {
|
||||||
|
flex-wrap: wrap;
|
||||||
margin: 0 var(--default-horizontal-margin) .75em;
|
margin: 0 var(--default-horizontal-margin) .75em;
|
||||||
}
|
}
|
||||||
|
.subHeader > div {
|
||||||
|
margin-top: .25em;
|
||||||
|
}
|
||||||
.prefsButton {
|
.prefsButton {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
#modeSelect {
|
|
||||||
margin-left: .5em;
|
|
||||||
}
|
|
||||||
.separator {
|
.separator {
|
||||||
margin: 0 .25em;
|
margin: 0 .25em;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 50em) {
|
@media screen and (max-width: 50em) {
|
||||||
|
header {
|
||||||
|
padding: .5em var(--default-horizontal-margin);
|
||||||
|
}
|
||||||
.dash {
|
.dash {
|
||||||
display: none;
|
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 {
|
.reviewed {
|
||||||
vertical-align: -.1em;
|
vertical-align: -.1em;
|
||||||
}
|
}
|
||||||
.jumpToFileContainer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.mobileJumpToFileContainer {
|
.mobileJumpToFileContainer {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -141,6 +160,15 @@ limitations under the License.
|
|||||||
.mobileJumpToFileContainer select {
|
.mobileJumpToFileContainer select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.mobileNavLink {
|
||||||
|
color: #000;
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.mobileNavLink:not([href]) {
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<header>
|
<header>
|
||||||
@ -154,7 +182,7 @@ limitations under the License.
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
on-change="_handleReviewedChange"
|
on-change="_handleReviewedChange"
|
||||||
hidden$="[[!_loggedIn]]" hidden>
|
hidden$="[[!_loggedIn]]" hidden>
|
||||||
<div class="jumpToFileContainer">
|
<div class="jumpToFileContainer desktop">
|
||||||
<gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
|
<gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
|
||||||
<span>[[_computeFileDisplayName(_path)]]</span>
|
<span>[[_computeFileDisplayName(_path)]]</span>
|
||||||
<span class="downArrow">▼</span>
|
<span class="downArrow">▼</span>
|
||||||
@ -177,7 +205,7 @@ limitations under the License.
|
|||||||
</div>
|
</div>
|
||||||
</iron-dropdown>
|
</iron-dropdown>
|
||||||
</div>
|
</div>
|
||||||
<div class="mobileJumpToFileContainer">
|
<div class="mobileJumpToFileContainer mobile">
|
||||||
<select on-change="_handleMobileSelectChange">
|
<select on-change="_handleMobileSelectChange">
|
||||||
<template is="dom-repeat" items="[[_fileList]]" as="path">
|
<template is="dom-repeat" items="[[_fileList]]" as="path">
|
||||||
<option
|
<option
|
||||||
@ -189,7 +217,7 @@ limitations under the License.
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</h3>
|
</h3>
|
||||||
<div>
|
<div class="navLinks desktop">
|
||||||
<a class="navLink"
|
<a class="navLink"
|
||||||
href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]">Prev</a>
|
href$="[[_computeNavLinkURL(_path, _fileList, -1, 1)]]">Prev</a>
|
||||||
/
|
/
|
||||||
@ -209,11 +237,13 @@ limitations under the License.
|
|||||||
available-patches="[[_computeAvailablePatches(_change.revisions)]]"
|
available-patches="[[_computeAvailablePatches(_change.revisions)]]"
|
||||||
revisions="[[_change.revisions]]">
|
revisions="[[_change.revisions]]">
|
||||||
</gr-patch-range-select>
|
</gr-patch-range-select>
|
||||||
|
<span class="download desktop">
|
||||||
<span class="separator">/</span>
|
<span class="separator">/</span>
|
||||||
<a class="downloadLink"
|
<a class="downloadLink"
|
||||||
href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
|
href$="[[_computeDownloadLink(_changeNum, _patchRange, _path)]]">
|
||||||
Download
|
Download
|
||||||
</a>
|
</a>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<select
|
<select
|
||||||
@ -225,12 +255,14 @@ limitations under the License.
|
|||||||
<option value="UNIFIED_DIFF">Unified</option>
|
<option value="UNIFIED_DIFF">Unified</option>
|
||||||
</select>
|
</select>
|
||||||
<span hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]">
|
<span hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]">
|
||||||
|
<span class="preferences desktop">
|
||||||
<span
|
<span
|
||||||
hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
|
hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">/</span>
|
||||||
<gr-button link
|
<gr-button link
|
||||||
class="prefsButton"
|
class="prefsButton"
|
||||||
on-tap="_handlePrefsTap">Preferences</gr-button>
|
on-tap="_handlePrefsTap">Preferences</gr-button>
|
||||||
</span>
|
</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<gr-overlay id="prefsOverlay" with-backdrop>
|
<gr-overlay id="prefsOverlay" with-backdrop>
|
||||||
@ -241,6 +273,14 @@ limitations under the License.
|
|||||||
on-save="_handlePrefsSave"
|
on-save="_handlePrefsSave"
|
||||||
on-cancel="_handlePrefsCancel"></gr-diff-preferences>
|
on-cancel="_handlePrefsCancel"></gr-diff-preferences>
|
||||||
</gr-overlay>
|
</gr-overlay>
|
||||||
|
<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
|
<gr-diff
|
||||||
id="diff"
|
id="diff"
|
||||||
project="[[_change.project]]"
|
project="[[_change.project]]"
|
||||||
|
@ -28,7 +28,15 @@ limitations under the License.
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
max-width: 8em;
|
max-width: 15em;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 50em) {
|
||||||
|
.filesWeblinks {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
max-width: 5.25em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Patch set:
|
Patch set:
|
||||||
@ -45,7 +53,7 @@ limitations under the License.
|
|||||||
</template>
|
</template>
|
||||||
</select>
|
</select>
|
||||||
</span>
|
</span>
|
||||||
<span is="dom-if" if="[[filesWeblinks.meta_a]]">
|
<span is="dom-if" if="[[filesWeblinks.meta_a]]" class="filesWeblinks">
|
||||||
<template is="dom-repeat" items="[[filesWeblinks.meta_a]]" as="weblink">
|
<template is="dom-repeat" items="[[filesWeblinks.meta_a]]" as="weblink">
|
||||||
<a target="_blank"
|
<a target="_blank"
|
||||||
href$="[[weblink.url]]">[[weblink.name]]</a>
|
href$="[[weblink.url]]">[[weblink.name]]</a>
|
||||||
@ -63,7 +71,7 @@ limitations under the License.
|
|||||||
</option>
|
</option>
|
||||||
</template>
|
</template>
|
||||||
</select>
|
</select>
|
||||||
<span is="dom-if" if="[[filesWeblinks.meta_b]]">
|
<span is="dom-if" if="[[filesWeblinks.meta_b]]" class="filesWeblinks">
|
||||||
<template is="dom-repeat" items="[[filesWeblinks.meta_b]]" as="weblink">
|
<template is="dom-repeat" items="[[filesWeblinks.meta_b]]" as="weblink">
|
||||||
<a target="_blank"
|
<a target="_blank"
|
||||||
href$="[[weblink.url]]">[[weblink.name]]</a>
|
href$="[[weblink.url]]">[[weblink.name]]</a>
|
||||||
|
@ -28,4 +28,9 @@ limitations under the License.
|
|||||||
transition: none;
|
transition: none;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 50em) {
|
||||||
|
:root {
|
||||||
|
--default-horizontal-margin: .7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user