Add diff preferences panel to SideBySide2
The diff settings are accessible by the "," key. They are shown on a PopupPanel that is similar to KeyHelpPopup and is placed on top of the CodeMirror on the left. Almost all settings are applied immediately after the control widget has been updated with its new value. Because CodeMirror3 only renders partial content, response time is nearly instant. Intraline differences can be hidden and shown by a trivial CSS class being added or removed, making it very efficient for the user to toggle this on or off. If the intraline data has not been loaded from the server it is first loaded in the background, and then the view is rendered again by updating the relevant markers and widgets. Most other properties (tab size, syntax highlighting, whitespace errors) are easily set on the fly by updating CodeMirror with the new option. Lines of context can now be directly entered by the user, or cleared to view the entire file with no skip bars. The panel respects most of the diff preferences. Changing column width is unlikely to be supported, and skipping of uncommented and deleted files will need a rewrite of PatchValidator. Bug: issue 2165 Inspired-by: Doug Kelly <doug.kelly@garmin.com> Change-Id: I06e2305d723bd95b5f5eafcfe3bd1b827c8d3d9f
This commit is contained in:
Shawn Pearce
@@ -0,0 +1,216 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Copyright (C) 2013 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.
|
||||
-->
|
||||
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
|
||||
xmlns:g='urn:import:com.google.gwt.user.client.ui'
|
||||
xmlns:x='urn:import:com.google.gerrit.client.ui'>
|
||||
<ui:style type='com.google.gerrit.client.diff.PreferencesBox.Style'>
|
||||
@external .gwt-TextBox;
|
||||
@external .gwt-ToggleButton .html-face;
|
||||
@external .gwt-ToggleButton-up;
|
||||
@external .gwt-ToggleButton-up-hovering;
|
||||
@external .gwt-ToggleButton-up-disabled;
|
||||
@external .gwt-ToggleButton-down;
|
||||
@external .gwt-ToggleButton-down-hovering;
|
||||
@external .gwt-ToggleButton-down-disabled;
|
||||
|
||||
.dialog {
|
||||
background: #000000 none repeat scroll 0 50%;
|
||||
color: #ffffff;
|
||||
font-family: arial,sans-serif;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-shadow: 1px 1px 7px #000000;
|
||||
min-width: 300px;
|
||||
opacity: 0.90;
|
||||
z-index: 200;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
}
|
||||
|
||||
.dialog .box { margin: 10px; }
|
||||
.box .gwt-TextBox { padding: 0; }
|
||||
.table tr { min-height: 23px; }
|
||||
.table th,
|
||||
.table td {
|
||||
white-space: nowrap;
|
||||
color: #ffffff;
|
||||
}
|
||||
.table th {
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.box a,
|
||||
.box a:visited,
|
||||
.box a:hover {
|
||||
color: #dddd00;
|
||||
}
|
||||
|
||||
.box .gwt-ToggleButton {
|
||||
position: relative;
|
||||
height: 19px;
|
||||
width: 140px;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
text-shadow: none;
|
||||
}
|
||||
.box .gwt-ToggleButton .html-face {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 68px;
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.box .gwt-ToggleButton-up,
|
||||
.box .gwt-ToggleButton-up-hovering,
|
||||
.box .gwt-ToggleButton-up-disabled,
|
||||
.box .gwt-ToggleButton-down,
|
||||
.box .gwt-ToggleButton-down-hovering,
|
||||
.box .gwt-ToggleButton-down-disabled {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.box .gwt-ToggleButton-up .html-face,
|
||||
.box .gwt-ToggleButton-up-hovering .html-face {
|
||||
left: 0;
|
||||
background: #cacaca;
|
||||
border-style: outset;
|
||||
}
|
||||
.box .gwt-ToggleButton-down .html-face,
|
||||
.box .gwt-ToggleButton-down-hovering .html-face {
|
||||
right: 0;
|
||||
background: #bcf;
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.box button {
|
||||
margin: 6px 3px 0 0;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
font-size: 8pt;
|
||||
font-weight: bold;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
background-color: #f5f5f5;
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
|
||||
-webkit-border-radius: 2px;
|
||||
-webkit-box-sizing: content-box;
|
||||
}
|
||||
.box button div {
|
||||
color: #444;
|
||||
height: 10px;
|
||||
min-width: 54px;
|
||||
line-height: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button.apply {
|
||||
background-color: #4d90fe;
|
||||
background-image: -webkit-linear-gradient(top, #4d90fe, #4d90fe);
|
||||
}
|
||||
button.apply div { color: #fff; }
|
||||
|
||||
button.save {
|
||||
margin-left: 10px;
|
||||
color: #d14836;
|
||||
background-color: #d14836;
|
||||
background-image: -webkit-linear-gradient(top, #d14836, #d14836);
|
||||
}
|
||||
button.save div { color: #fff; }
|
||||
</ui:style>
|
||||
|
||||
<g:HTMLPanel styleName='{style.box}'>
|
||||
<table style='width: 100%'>
|
||||
<tr>
|
||||
<td><ui:msg>Diff Preferences</ui:msg></td>
|
||||
<td style='text-align: right'>
|
||||
<g:Anchor ui:field='close' href='javascript:;'><ui:msg>Close</ui:msg></g:Anchor>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr/>
|
||||
<table class='{style.table}'>
|
||||
<tr>
|
||||
<th><ui:msg>Ignore Whitespace</ui:msg></th>
|
||||
<td><g:ListBox ui:field='ignoreWhitespace'/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><ui:msg>Tab Width</ui:msg></th>
|
||||
<td><x:NpIntTextBox ui:field='tabWidth'
|
||||
visibleLength='4'
|
||||
alignment='RIGHT'/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><ui:msg>Lines of Context</ui:msg></th>
|
||||
<td><x:NpIntTextBox ui:field='context'
|
||||
visibleLength='4'
|
||||
alignment='RIGHT'/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><ui:msg>Intraline Difference</ui:msg></th>
|
||||
<td><g:ToggleButton ui:field='intralineDifference'>
|
||||
<g:upFace><ui:msg>Hide</ui:msg></g:upFace>
|
||||
<g:downFace><ui:msg>Show</ui:msg></g:downFace>
|
||||
</g:ToggleButton></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><ui:msg>Syntax Highlighting</ui:msg></th>
|
||||
<td><g:ToggleButton ui:field='syntaxHighlighting'>
|
||||
<g:upFace><ui:msg>Hide</ui:msg></g:upFace>
|
||||
<g:downFace><ui:msg>Show</ui:msg></g:downFace>
|
||||
</g:ToggleButton></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><ui:msg>Whitespace Errors</ui:msg></th>
|
||||
<td><g:ToggleButton ui:field='whitespaceErrors'>
|
||||
<g:upFace><ui:msg>Hide</ui:msg></g:upFace>
|
||||
<g:downFace><ui:msg>Show</ui:msg></g:downFace>
|
||||
</g:ToggleButton></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><ui:msg>Show Tabs</ui:msg></th>
|
||||
<td><g:ToggleButton ui:field='showTabs'>
|
||||
<g:upFace><ui:msg>Hide</ui:msg></g:upFace>
|
||||
<g:downFace><ui:msg>Show</ui:msg></g:downFace>
|
||||
</g:ToggleButton></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><ui:msg>Expand All Comments</ui:msg></th>
|
||||
<td><g:ToggleButton ui:field='expandAllComments'>
|
||||
<g:upFace><ui:msg>Collapse</ui:msg></g:upFace>
|
||||
<g:downFace><ui:msg>Expand</ui:msg></g:downFace>
|
||||
</g:ToggleButton></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<g:Button ui:field='apply' styleName='{style.apply}'>
|
||||
<div><ui:msg>Apply</ui:msg></div>
|
||||
</g:Button>
|
||||
<g:Button ui:field='save' styleName='{style.save}'>
|
||||
<div><ui:msg>Save</ui:msg></div>
|
||||
</g:Button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</g:HTMLPanel>
|
||||
</ui:UiBinder>
|
||||
Reference in New Issue
Block a user