10000 feature: Hide viewed files by mrfyda · Pull Request #358 · rtfpessoa/diff2html · GitHub
[go: up one dir, main page]
Skip to content

feature: Hide viewed files #358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 24, 2021
Merged

feature: Hide viewed files #358

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
316803d
feature: Hide viewed files
mrfyda Jan 23, 2021
8ee76bf
clean: Refactor function to toggle file contents
mrfyda Jan 23, 2021
49bf898
clean: Refactor font style
mrfyda Jan 23, 2021
242fc5a
feature: Add selected state style
mrfyda Jan 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feature: Hide viewed files
  • Loading branch information
@mrfyda
mrfyda committed Jan 23, 2021
commit 316803df774f29a943748e982315a089e9c1a82b
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
992 changes: 514 additions & 478 deletions src/__tests__/diff2html-tests.ts
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions src/__tests__/line-by-line-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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\\">
Expand Down Expand Up @@ -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\\">
Expand Down Expand Up @@ -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\\">
Expand Down Expand Up @@ -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\\">
Expand Down Expand Up @@ -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\\">
Expand Down Expand Up @@ -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\\">
Expand Down
258 changes: 133 additions & 125 deletions src/__tests__/side-by-side-printer-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,81 +78,81 @@ describe('SideBySideRenderer', () => {
const fileHtml = sideBySideRenderer.generateFileHtml(file);

expect(fileHtml).toMatchInlineSnapshot(`
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-cntx\\">
19
</td>
<td class=\\"d2h-cntx\\">
<div class=\\"d2h-code-side-line d2h-cntx\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">context</span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
20
</td>
<td class=\\"d2h-del d2h-change\\">
<div class=\\"d2h-code-side-line d2h-del d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">

</td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\"><br></span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\"></div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-cntx\\">
19
</td>
<td class=\\"d2h-cntx\\">
<div class=\\"d2h-code-side-line d2h-cntx\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">context</span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
20
</td>
<td class=\\"d2h-ins d2h-change\\">
<div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-ins\\">
21
</td>
<td class=\\"d2h-ins\\">
<div class=\\"d2h-code-side-line d2h-ins\\">
<span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\">another added</span>
</div>
</td>
</tr>",
}
`);
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\">@@ -19,7 +19,7 @@</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-cntx\\">
19
</td>
<td class=\\"d2h-cntx\\">
<div class=\\"d2h-code-side-line d2h-cntx\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">context</span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-del d2h-change\\">
20
</td>
<td class=\\"d2h-del d2h-change\\">
<div class=\\"d2h-code-side-line d2h-del d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\"><del>removed</del></span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
</td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\"><br></span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-info\\"></td>
<td class=\\"d2h-info\\">
<div class=\\"d2h-code-side-line d2h-info\\"></div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-cntx\\">
19
</td>
<td class=\\"d2h-cntx\\">
<div class=\\"d2h-code-side-line d2h-cntx\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\">context</span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-ins d2h-change\\">
20
</td>
<td class=\\"d2h-ins d2h-change\\">
<div class=\\"d2h-code-side-line d2h-ins d2h-change\\">
<span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\"><ins>added</ins></span>
</div>
</td>
</tr><tr>
<td class=\\"d2h-code-side-linenumber d2h-ins\\">
21
</td>
<td class=\\"d2h-ins\\">
<div class=\\"d2h-code-side-line d2h-ins\\">
<span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\">another added</span>
</div>
</td>
</tr>",
}
`);
});
});

Expand All @@ -168,31 +168,31 @@ Object {
});

expect(fileHtml).toMatchInlineSnapshot(`
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">

</td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\"><br></span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-ins\\">
30
</td>
<td class=\\"d2h-ins\\">
<div class=\\"d2h-code-side-line d2h-ins\\">
<span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\">test</span>
</div>
</td>
</tr>",
}
`);
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
</td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\"><br></span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-ins\\">
30
</td>
<td class=\\"d2h-ins\\">
<div class=\\"d2h-code-side-line d2h-ins\\">
<span class=\\"d2h-code-line-prefix\\">+</span>
<span class=\\"d2h-code-line-ctn\\">test</span>
</div>
</td>
</tr>",
}
`);
});
it('should work for deletions', () => {
const hoganUtils = new HoganJsUtils({});
Expand All @@ -208,31 +208,31 @@ Object {
);

expect(fileHtml).toMatchInlineSnapshot(`
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-del\\">
30
</td>
<td class=\\"d2h-del\\">
<div class=\\"d2h-code-side-line d2h-del\\">
<span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\">test</span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">

</td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\"><br></span>
</div>
</td>
</tr>",
}
`);
Object {
"left": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-del\\">
30
</td>
<td class=\\"d2h-del\\">
<div class=\\"d2h-code-side-line d2h-del\\">
<span class=\\"d2h-code-line-prefix\\">-</span>
<span class=\\"d2h-code-line-ctn\\">test</span>
</div>
</td>
</tr>",
"right": "<tr>
<td class=\\"d2h-code-side-linenumber d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
</td>
<td class=\\"d2h-cntx d2h-emptyplaceholder\\">
<div class=\\"d2h-code-side-line d2h-code-side-emptyplaceholder d2h-cntx d2h-emptyplaceholder\\">
<span class=\\"d2h-code-line-prefix\\">&nbsp;</span>
<span class=\\"d2h-code-line-ctn\\"><br></span>
</div>
</td>
</tr>",
}
`);
});
});

Expand Down Expand Up @@ -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\\">
Expand Down Expand Up @@ -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\\">
Expand Down
4 changes: 4 additions & 0 deletions src/templates/generic-file-path.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading
0