luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve usability of the options

Browse source
This commit is contained in:
Rodrigo Fernandes 2016-10-12 23:17:39 +01:00
parent 259d3ef972
commit aab1891829
6 changed files with 60 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
docs/main.css
View file

@ -544,13 +544,30 @@ a:hover, a:focus {
.diff-url-input { .diff-url-input {
display: inline-block; display: inline-block;
margin-left: 10px; margin-right: 10px;
flex-grow: 1; flex-grow: 1;
height: 31px; height: 31px;
} }
.diff-url-btn { .diff-url-btn {
display: inline-block; display: inline-block;
float: left; float: right;
width: 48px; 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;
}

28
docs/url.html
View file

@ -100,39 +100,39 @@
or any other git or unified compatible diff and we will render a pretty html representation of it 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. with code syntax highlight and line similarity matching for better code reviews.
</p> </p>
<h3>Options:</h3> <h2>Options:</h2>
<div class="diff-url-options-container"> <div class="diff-url-options-container">
<h5>Output:</h5> <label title="Output format of the HTML, either line by line or side by side">Output Format
<label>Format <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
<select id="diff-url-options-output-format" name="outputFormat">
<option value="line-by-line" selected>Line by Line</option> <option value="line-by-line" selected>Line by Line</option>
<option value="side-by-side">Side by Side</option> <option value="side-by-side">Side by Side</option>
</select> </select>
</label> </label>
<label>Show Files <label title="Show the file list summary before the diff">File Summary
<input id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/> <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
</label> </label>
<h5>Matching:</h5> <label title="Level of matching for the comparison algorithm">Matching Type
<label>Type <select class="options-label-value" id="diff-url-options-matching" name="matching">
<select id="diff-url-options-matching" name="matching">
<option value="lines">Lines</option> <option value="lines">Lines</option>
<option value="words" selected>Words</option> <option value="words" selected>Words</option>
<option value="none">None</option> <option value="none">None</option>
</select> </select>
</label> </label>
<label>Words Threshold <label title="Similarity threshold for the matching algorithm">Words Threshold
<input id="diff-url-options-match-words-threshold" type="number" name="matchWordsThreshold" value="0.25" step="0.05" <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"/> min="0" max="1"/>
</label> </label>
<label>Maximum Comparisons <label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max Comparisons
<input id="diff-url-options-matching-max-comparisons" type="number" name="matchingMaxComparisons" value="2500" <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
name="matchingMaxComparisons" value="2500"
step="100" min="0"/> step="100" min="0"/>
</label> </label>
</div> </div>
<br> <br>
<div class="diff-url-wrapper"> <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"/> <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> </div>
<br> <br>
<div id="url-diff-container" style="margin: 0 auto;"> <div id="url-diff-container" style="margin: 0 auto;">

7
docs/url.js
View file

@ -464,6 +464,10 @@ $(document).ready(function () {
e.preventDefault(); e.preventDefault();
fastDraw(); fastDraw();
}); });
$url.on("paste", function(e) {
fastDraw();
});
} }
function prepareUrl(url) { function prepareUrl(url) {
@ -550,7 +554,8 @@ $(document).ready(function () {
showFiles: showFiles, showFiles: showFiles,
matching: matching, matching: matching,
matchWordsThreshold: wordThreshold, matchWordsThreshold: wordThreshold,
matchingMaxComparisons: matchingMaxComparisons matchingMaxComparisons: matchingMaxComparisons,
synchronisedScroll: true
}); });
diff2htmlUi.fileListCloseable(container, false); diff2htmlUi.fileListCloseable(container, false);
diff2htmlUi.highlightCode(container); diff2htmlUi.highlightCode(container);

2
docs/url.min.js vendored
View file

File diff suppressed because one or more lines are too long

7
website/templates/pages/url/url.js
View file

@ -68,6 +68,10 @@ $(document).ready(function () {
e.preventDefault(); e.preventDefault();
fastDraw(); fastDraw();
}); });
$url.on("paste", function(e) {
fastDraw();
});
} }
function prepareUrl(url) { function prepareUrl(url) {
@ -154,7 +158,8 @@ $(document).ready(function () {
showFiles: showFiles, showFiles: showFiles,
matching: matching, matching: matching,
matchWordsThreshold: wordThreshold, matchWordsThreshold: wordThreshold,
matchingMaxComparisons: matchingMaxComparisons matchingMaxComparisons: matchingMaxComparisons,
synchronisedScroll: true
}); });
diff2htmlUi.fileListCloseable(container, false); diff2htmlUi.fileListCloseable(container, false);
diff2htmlUi.highlightCode(container); diff2htmlUi.highlightCode(container);

28
website/templates/pages/url/url.partial.html
View file

@ -4,39 +4,39 @@
or any other git or unified compatible diff and we will render a pretty html representation of it 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. with code syntax highlight and line similarity matching for better code reviews.
</p> </p>
<h3>Options:</h3> <h2>Options:</h2>
<div class="diff-url-options-container"> <div class="diff-url-options-container">
<h5>Output:</h5> <label title="Output format of the HTML, either line by line or side by side">Output Format
<label>Format <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
<select id="diff-url-options-output-format" name="outputFormat">
<option value="line-by-line" selected>Line by Line</option> <option value="line-by-line" selected>Line by Line</option>
<option value="side-by-side">Side by Side</option> <option value="side-by-side">Side by Side</option>
</select> </select>
</label> </label>
<label>Show Files <label title="Show the file list summary before the diff">File Summary
<input id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/> <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
</label> </label>
<h5>Matching:</h5> <label title="Level of matching for the comparison algorithm">Matching Type
<label>Type <select class="options-label-value" id="diff-url-options-matching" name="matching">
<select id="diff-url-options-matching" name="matching">
<option value="lines">Lines</option> <option value="lines">Lines</option>
<option value="words" selected>Words</option> <option value="words" selected>Words</option>
<option value="none">None</option> <option value="none">None</option>
</select> </select>
</label> </label>
<label>Words Threshold <label title="Similarity threshold for the matching algorithm">Words Threshold
<input id="diff-url-options-match-words-threshold" type="number" name="matchWordsThreshold" value="0.25" step="0.05" <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"/> min="0" max="1"/>
</label> </label>
<label>Maximum Comparisons <label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max Comparisons
<input id="diff-url-options-matching-max-comparisons" type="number" name="matchingMaxComparisons" value="2500" <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
name="matchingMaxComparisons" value="2500"
step="100" min="0"/> step="100" min="0"/>
</label> </label>
</div> </div>
<br> <br>
<div class="diff-url-wrapper"> <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"/> <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> </div>
<br> <br>
<div id="url-diff-container" style="margin: 0 auto;"> <div id="url-diff-container" style="margin: 0 auto;">