Improve usability of the options
This commit is contained in:
Rodrigo Fernandes
parent
259d3ef972
commit
aab1891829
6 changed files with 60 additions and 33 deletions
|
|
@ -544,13 +544,30 @@ a:hover, a:focus {
|
|||
|
||||
.diff-url-input {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
flex-grow: 1;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.diff-url-btn {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
float: right;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.options-label-value {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.diff-url-options-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.diff-url-options-container label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.diff-url-options-container label select,
|
||||
.diff-url-options-container label input {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,39 +100,39 @@
|
|||
or any other git or unified compatible diff and we will render a pretty html representation of it
|
||||
with code syntax highlight and line similarity matching for better code reviews.
|
||||
</p>
|
||||
<h3>Options:</h3>
|
||||
<h2>Options:</h2>
|
||||
<div class="diff-url-options-container">
|
||||
<h5>Output:</h5>
|
||||
<label>Format
|
||||
<select id="diff-url-options-output-format" name="outputFormat">
|
||||
<label title="Output format of the HTML, either line by line or side by side">Output Format
|
||||
<select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
|
||||
<option value="line-by-line" selected>Line by Line</option>
|
||||
<option value="side-by-side">Side by Side</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Show Files
|
||||
<input id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
|
||||
<label title="Show the file list summary before the diff">File Summary
|
||||
<input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
|
||||
</label>
|
||||
<h5>Matching:</h5>
|
||||
<label>Type
|
||||
<select id="diff-url-options-matching" name="matching">
|
||||
<label title="Level of matching for the comparison algorithm">Matching Type
|
||||
<select class="options-label-value" id="diff-url-options-matching" name="matching">
|
||||
<option value="lines">Lines</option>
|
||||
<option value="words" selected>Words</option>
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Words Threshold
|
||||
<input id="diff-url-options-match-words-threshold" type="number" name="matchWordsThreshold" value="0.25" step="0.05"
|
||||
<label title="Similarity threshold for the matching algorithm">Words Threshold
|
||||
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
|
||||
name="matchWordsThreshold" value="0.25" step="0.05"
|
||||
min="0" max="1"/>
|
||||
</label>
|
||||
<label>Maximum Comparisons
|
||||
<input id="diff-url-options-matching-max-comparisons" type="number" name="matchingMaxComparisons" value="2500"
|
||||
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max Comparisons
|
||||
<input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
|
||||
name="matchingMaxComparisons" value="2500"
|
||||
step="100" min="0"/>
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
<div class="diff-url-wrapper">
|
||||
<a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
|
||||
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
|
||||
<a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
|
||||
</div>
|
||||
<br>
|
||||
<div id="url-diff-container" style="margin: 0 auto;">
|
||||
|
|
|
|||
|
|
@ -464,6 +464,10 @@ $(document).ready(function () {
|
|||
e.preventDefault();
|
||||
fastDraw();
|
||||
});
|
||||
|
||||
$url.on("paste", function(e) {
|
||||
fastDraw();
|
||||
});
|
||||
}
|
||||
|
||||
function prepareUrl(url) {
|
||||
|
|
@ -550,7 +554,8 @@ $(document).ready(function () {
|
|||
showFiles: showFiles,
|
||||
matching: matching,
|
||||
matchWordsThreshold: wordThreshold,
|
||||
matchingMaxComparisons: matchingMaxComparisons
|
||||
matchingMaxComparisons: matchingMaxComparisons,
|
||||
synchronisedScroll: true
|
||||
});
|
||||
diff2htmlUi.fileListCloseable(container, false);
|
||||
diff2htmlUi.highlightCode(container);
|
||||
|
|
|
|||
2
docs/url.min.js
vendored
2
docs/url.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -68,6 +68,10 @@ $(document).ready(function () {
|
|||
e.preventDefault();
|
||||
fastDraw();
|
||||
});
|
||||
|
||||
$url.on("paste", function(e) {
|
||||
fastDraw();
|
||||
});
|
||||
}
|
||||
|
||||
function prepareUrl(url) {
|
||||
|
|
@ -154,7 +158,8 @@ $(document).ready(function () {
|
|||
showFiles: showFiles,
|
||||
matching: matching,
|
||||
matchWordsThreshold: wordThreshold,
|
||||
matchingMaxComparisons: matchingMaxComparisons
|
||||
matchingMaxComparisons: matchingMaxComparisons,
|
||||
synchronisedScroll: true
|
||||
});
|
||||
diff2htmlUi.fileListCloseable(container, false);
|
||||
diff2htmlUi.highlightCode(container);
|
||||
|
|
|
|||
|
|
@ -4,39 +4,39 @@
|
|||
or any other git or unified compatible diff and we will render a pretty html representation of it
|
||||
with code syntax highlight and line similarity matching for better code reviews.
|
||||
</p>
|
||||
<h3>Options:</h3>
|
||||
<h2>Options:</h2>
|
||||
<div class="diff-url-options-container">
|
||||
<h5>Output:</h5>
|
||||
<label>Format
|
||||
<select id="diff-url-options-output-format" name="outputFormat">
|
||||
<label title="Output format of the HTML, either line by line or side by side">Output Format
|
||||
<select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
|
||||
<option value="line-by-line" selected>Line by Line</option>
|
||||
<option value="side-by-side">Side by Side</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Show Files
|
||||
<input id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
|
||||
<label title="Show the file list summary before the diff">File Summary
|
||||
<input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
|
||||
</label>
|
||||
<h5>Matching:</h5>
|
||||
<label>Type
|
||||
<select id="diff-url-options-matching" name="matching">
|
||||
<label title="Level of matching for the comparison algorithm">Matching Type
|
||||
<select class="options-label-value" id="diff-url-options-matching" name="matching">
|
||||
<option value="lines">Lines</option>
|
||||
<option value="words" selected>Words</option>
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Words Threshold
|
||||
<input id="diff-url-options-match-words-threshold" type="number" name="matchWordsThreshold" value="0.25" step="0.05"
|
||||
<label title="Similarity threshold for the matching algorithm">Words Threshold
|
||||
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
|
||||
name="matchWordsThreshold" value="0.25" step="0.05"
|
||||
min="0" max="1"/>
|
||||
</label>
|
||||
<label>Maximum Comparisons
|
||||
<input id="diff-url-options-matching-max-comparisons" type="number" name="matchingMaxComparisons" value="2500"
|
||||
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max Comparisons
|
||||
<input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
|
||||
name="matchingMaxComparisons" value="2500"
|
||||
step="100" min="0"/>
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
<div class="diff-url-wrapper">
|
||||
<a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
|
||||
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
|
||||
<a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
|
||||
</div>
|
||||
<br>
|
||||
<div id="url-diff-container" style="margin: 0 auto;">
|
||||
|
|
|
|||
Loading…
Reference in a new issue