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

Merge pull request #358 from mrfyda/feature/collapse-viewed

Browse source 
feature: Hide viewed files
This commit is contained in:
Rodrigo Fernandes 2021-01-24 00:57:32 +00:00 committed by GitHub
commit c3d7df3bc5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 728 additions and 604 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -316,6 +316,7 @@ highlightCode(): void
- `highlight`: syntax highlight the code on the diff: `true` or `false`, default is `true`
- `fileListToggle`: allow the file summary list to be toggled: `true` or `false`, default is `true`
- `fileListStartVisible`: choose if the file summary list starts visible: `true` or `false`, default is `false`
- `fileContentToggle`: allow each file contents to be toggled: `true` or `false`, default is `true`
> NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI

36
src/__tests__/diff2html-tests.ts
View file

@ -211,6 +211,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -264,6 +268,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -337,6 +345,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -390,6 +402,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-files-diff\\">
<div class=\\"d2h-file-side-diff\\">
@ -457,6 +473,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-files-diff\\">
<div class=\\"d2h-file-side-diff\\">
@ -544,6 +564,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-files-diff\\">
<div class=\\"d2h-file-side-diff\\">
@ -634,6 +658,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">CHANGELOG.md</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -876,6 +904,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">src/index.html</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -974,6 +1006,10 @@ describe('Diff2Html', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">web/assets/javascripts/application.js</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">

24
src/__tests__/line-by-line-tests.ts
View file

@ -180,6 +180,10 @@ describe('LineByLineRenderer', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">my/file/name.js</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -220,6 +224,10 @@ describe('LineByLineRenderer', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">my/file/name.js</span>
<span class=\\"d2h-tag d2h-added d2h-added-tag\\">ADDED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -260,6 +268,10 @@ describe('LineByLineRenderer', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">my/file/name.js</span>
<span class=\\"d2h-tag d2h-deleted d2h-deleted-tag\\">DELETED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -300,6 +312,10 @@ describe('LineByLineRenderer', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">my/file/{name1.js → name2.js}</span>
<span class=\\"d2h-tag d2h-moved d2h-moved-tag\\">RENAMED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -391,6 +407,10 @@ describe('LineByLineRenderer', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">
@ -461,6 +481,10 @@ describe('LineByLineRenderer', () => {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-file-diff\\">
<div class=\\"d2h-code-wrapper\\">

8
src/__tests__/side-by-side-printer-tests.ts
View file

@ -286,6 +286,10 @@ Object {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-files-diff\\">
<div class=\\"d2h-file-side-diff\\">
@ -367,6 +371,10 @@ Object {
<path d=\\"M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z\\"></path>
</svg> <span class=\\"d2h-file-name\\">sample</span>
<span class=\\"d2h-tag d2h-changed d2h-changed-tag\\">CHANGED</span></span>
<label class=\\"d2h-file-collapse\\">
<input class=\\"d2h-file-collapse-input\\" type=\\"checkbox\\" name=\\"viewed\\" value=\\"viewed\\">
Viewed
</label>
</div>
<div class=\\"d2h-files-diff\\">
<div class=\\"d2h-file-side-diff\\">

4
src/templates/generic-file-path.mustache
View file

@ -3,3 +3,7 @@
<span class="d2h-file-name">{{fileDiffName}}</span>
{{>fileTag}}
</span>
<label class="d2h-file-collapse">
<input class="d2h-file-collapse-input" type="checkbox" name="viewed" value="viewed">
Viewed
</label>

26
src/ui/css/diff2html.css
View file

@ -5,15 +5,21 @@
*
*/
.d2h-d-none {
display: none;
}
.d2h-wrapper {
text-align: left;
}
.d2h-file-header {
display: flex;
height: 35px;
padding: 5px 10px;
border-bottom: 1px solid #d8d8d8;
background-color: #f7f7f7;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.d2h-file-stats {
@ -51,7 +57,6 @@
-ms-flex-align: center;
align-items: center;
width: 100%;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
}
@ -67,6 +72,25 @@
margin-bottom: 1em;
}
.d2h-file-collapse {
justify-content: flex-end;
display: flex;
cursor: pointer;
font-size: 12px;
align-items: center;
border-radius: 3px;
border: 1px solid #ddd;
padding: 4px 8px;
}
.d2h-file-collapse.d2h-selected {
background-color: #c8e1ff;
}
.d2h-file-collapse-input {
margin: 0 4px 0 0;
}
.d2h-diff-table {
width: 100%;
border-collapse: collapse;

27
src/ui/js/diff2html-ui-base.ts
View file

@ -15,6 +15,7 @@ export interface Diff2HtmlUIConfig extends Diff2HtmlConfig {
* Smart selection is now enabled by default with vanilla CSS
*/
smartSelection?: boolean;
fileContentToggle?: boolean;
}
export const defaultDiff2HtmlUIConfig = {
@ -28,6 +29,7 @@ export const defaultDiff2HtmlUIConfig = {
* Smart selection is now enabled by default with vanilla CSS
*/
smartSelection: true,
fileContentToggle: true,
};
export class Diff2HtmlUI {
@ -55,6 +57,7 @@ export class Diff2HtmlUI {
if (this.config.synchronisedScroll) this.synchronisedScroll();
if (this.config.highlight) this.highlightCode();
if (this.config.fileListToggle) this.fileListToggle(this.config.fileListStartVisible);
if (this.config.fileContentToggle) this.fileContentToggle();
}
synchronisedScroll(): void {
@ -108,6 +111,30 @@ export class Diff2HtmlUI {
else hide();
}
fileContentToggle(): void {
this.targetElement.querySelectorAll('.d2h-file-collapse').forEach(fileContentToggleBtn => {
const toggleFileContents: (selector: string) => void = selector => {
const fileContents: HTMLElement | null | undefined = fileContentToggleBtn
.closest('.d2h-file-wrapper')
?.querySelector(selector);
if (fileContents !== null && fileContents !== undefined) {
fileContentToggleBtn.classList.toggle('d2h-selected');
fileContents.classList.toggle('d2h-d-none');
}
};
const toggleHandler: (e: Event) => void = e => {
if (fileContentToggleBtn === e.target) return;
toggleFileContents('.d2h-file-diff');
toggleFileContents('.d2h-files-diff');
};
fileContentToggleBtn.addEventListener('click', e => toggleHandler(e));
});
}
highlightCode(): void {
if (this.hljs === null) {
throw new Error('Missing a `highlight.js` implementation. Please provide one when instantiating Diff2HtmlUI.');