opendev/gerrit
Code Issues Proposed changes
a671085c3c
gerrit/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
Viktar Donich a28dee069f Weblinks API for embedded scenario using Gerrit.Nav interface 
Gerrit.Nav.setup() now takes a weblinks generator function as a third
parameter. Here's the function signature:

``` js
Gerrit.Nav.setup(navigate, generateUrl, generateWeblinks)
```

Weblinks generator function takes single payload parameter with
`type` property that determines which part of the UI is the consumer of
the weblinks. `type` property can be one of `file`, `change`, or
`patchset`.

For `file` type, payload will also contain string properties:
`repo`, `commit`, `file`.

For `pachset` type, payload will also contain string properties:
`repo`, `commit`.

For `change` type, payload will also contain string properties:
`repo`, `commit`.

If server provides weblinks, those will be passed as `options.weblinks`
property on the main payload object.

Change-Id: I0d9de3a295435304e2b6aad551112440075cf098
2017-12-08 20:20:10 -08:00

302 lines
9.4 KiB
HTML
Raw Blame History

<!--
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="../../../styles/shared-styles.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../gr-diff-builder/gr-diff-builder.html">
<link rel="import" href="../gr-diff-comment-thread/gr-diff-comment-thread.html">
<link rel="import" href="../gr-diff-highlight/gr-diff-highlight.html">
<link rel="import" href="../gr-diff-selection/gr-diff-selection.html">
<link rel="import" href="../gr-syntax-themes/gr-theme-default.html">
<script src="../../../scripts/hiddenscroll.js"></script>
<dom-module id="gr-diff">
<template>
<style include="shared-styles">
:host {
--light-remove-highlight-color: #fee;
--dark-remove-highlight-color: rgba(255, 0, 0, 0.15);
--light-add-highlight-color: #efe;
--dark-add-highlight-color: rgba(0, 255, 0, 0.15);
--light-rebased-remove-highlight-color: #fff6ea;
--dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
--light-rebased-add-highlight-color: #edfffa;
--dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
}
:host(.no-left) .sideBySide ::content .left,
:host(.no-left) .sideBySide ::content .left + td,
:host(.no-left) .sideBySide ::content .right:not([data-value]),
:host(.no-left) .sideBySide ::content .right:not([data-value]) + td {
display: none;
}
.diffContainer {
display: flex;
font: 12px var(--monospace-font-family);
@apply --diff-container-styles;
}
.diffContainer.hiddenscroll {
padding-bottom: .8em;
}
table {
border-collapse: collapse;
border-right: 1px solid #ddd;
table-layout: fixed;
}
.lineNum {
background-color: #eee;
}
.image-diff .gr-diff {
text-align: center;
}
.image-diff img {
max-width: 50em;
outline: 1px solid #ccc;
}
.image-diff label,
.binary-diff label {
font-family: var(--font-family);
font-style: italic;
}
.diff-row {
outline: none;
}
.diff-row.target-row.target-side-left .lineNum.left,
.diff-row.target-row.target-side-right .lineNum.right,
.diff-row.target-row.unified .lineNum {
background-color: #BBDEFB;
}
.diff-row.target-row.target-side-left .lineNum.left:before,
.diff-row.target-row.target-side-right .lineNum.right:before,
.diff-row.target-row.unified .lineNum:before {
color: #000;
}
.blank,
.content {
background-color: #fff;
}
.full-width {
width: 100%;
}
.full-width .contentText {
white-space: pre-wrap;
word-wrap: break-word;
}
.lineNum,
.content {
/* Set font size based the user's diff preference. */
font-size: var(--font-size, 12px);
vertical-align: top;
white-space: pre;
}
.contextLineNum:before,
.lineNum:before {
box-sizing: border-box;
display: inline-block;
color: #666;
content: attr(data-value);
padding: 0 .5em;
text-align: right;
width: 100%;
}
.canComment .lineNum[data-value] {
cursor: pointer;
}
.canComment .lineNum[data-value="FILE"]:before {
content: 'File';
}
.content {
overflow: hidden;
/* Set max and min width since setting width on table cells still
allows them to shrink. */
max-width: var(--content-width, 80ch);
min-width: var(--content-width, 80ch);
width: var(--content-width, 80ch);
}
.content.add .intraline,
.delta.total .content.add {
background-color: var(--dark-add-highlight-color);
}
.content.add {
background-color: var(--light-add-highlight-color);
}
.content.remove .intraline,
.delta.total .content.remove {
background-color: var(--dark-remove-highlight-color);
}
.content.remove {
background-color: var(--light-remove-highlight-color);
}
.dueToRebase .content.add .intraline,
.delta.total.dueToRebase .content.add {
background-color: var(--dark-rebased-add-highlight-color);
}
.dueToRebase .content.add {
background-color: var(--light-rebased-add-highlight-color);
}
.dueToRebase .content.remove .intraline,
.delta.total.dueToRebase .content.remove {
background-color: var(--dark-rebased-remove-highlight-color);
}
.dueToRebase .content.remove {
background-color: var(--light-rebased-remove-highlight-color);
}
.content .contentText:after {
/* Newline, to ensure all lines are one line-height tall. */
content: '\A';
}
.contextControl {
background-color: #fef;
color: #849;
}
.contextControl gr-button {
display: inline-block;
font-family: var(--monospace-font-family);
text-decoration: none;
}
.contextControl td:not(.lineNum) {
text-align: center;
}
.displayLine .diff-row.target-row td {
box-shadow: inset 0 -1px #bbb;
}
.br:after {
/* Line feed */
content: '\A';
}
.tab {
display: inline-block;
}
.tab-indicator:before {
color: #C62828;
/* >> character */
content: '\00BB';
}
.trailing-whitespace {
border-radius: .4em;
background-color: #FF9AD2;
}
#diffHeader {
background-color: #F9F9F9;
color: #2A00FF;
font-family: var(--monospace-font-family);
font-size: var(--font-size, 12px);
padding: 0.5em 0 0.5em 4em;
}
#sizeWarning {
display: none;
margin: 1em auto;
max-width: 60em;
text-align: center;
}
#sizeWarning gr-button {
margin: 1em;
}
#sizeWarning.warn {
display: block;
}
.target-row td.blame {
background: #eee;
}
col.blame {
display: none;
}
td.blame {
display: none;
font-family: var(--font-family);
font-size: var(--font-size, 12px);
padding: 0 .5em;
white-space: pre;
}
:host(.showBlame) col.blame {
display: table-column;
}
:host(.showBlame) td.blame {
display: table-cell;
}
td.blame > span {
opacity: 0.6;
}
td.blame > span.startOfRange {
opacity: 1;
}
td.blame .sha {
font-family: var(--monospace-font-family);
}
.full-width td.blame {
overflow: hidden;
width: 200px;
}
</style>
<style include="gr-theme-default"></style>
<div id="diffHeader" hidden$="[[_computeDiffHeaderHidden(_diffHeaderItems)]]">
<template
is="dom-repeat"
items="[[_diffHeaderItems]]">
<div>[[item]]</div>
</template>
</div>
<div class$="[[_computeContainerClass(_loggedIn, viewMode, displayLine)]]"
on-tap="_handleTap">
<gr-diff-selection diff="[[_diff]]">
<gr-diff-highlight
id="highlights"
logged-in="[[_loggedIn]]"
comments="{{comments}}">
<gr-diff-builder
id="diffBuilder"
comments="[[comments]]"
project-name="[[projectName]]"
diff="[[_diff]]"
diff-path="[[path]]"
change-num="[[changeNum]]"
patch-num="[[patchRange.patchNum]]"
view-mode="[[viewMode]]"
line-wrapping="[[lineWrapping]]"
is-image-diff="[[isImageDiff]]"
base-image="[[_baseImage]]"
revision-image="[[_revisionImage]]"
parent-index="[[_parentIndex]]">
<table
id="diffTable"
class$="[[_diffTableClass]]"
role="presentation"></table>
</gr-diff-builder>
</gr-diff-highlight>
</gr-diff-selection>
</div>
<div id="sizeWarning" class$="[[_computeWarningClass(_showWarning)]]">
<p>
Prevented render because "Whole file" is enabled and this diff is very
large (about [[_diffLength(_diff)]] lines).
</p>
<gr-button on-tap="_handleLimitedBypass">
Render with limited context
</gr-button>
<gr-button on-tap="_handleFullBypass">
Render anyway (may be slow)
</gr-button>
</div>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template>
<script src="gr-diff-line.js"></script>
<script src="gr-diff-group.js"></script>
<script src="gr-diff.js"></script>
</dom-module>
View Git Blame Copy Permalink