diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css index e351511..99ae1e2 100644 --- a/src/ui/css/diff2html.css +++ b/src/ui/css/diff2html.css @@ -5,6 +5,10 @@ * */ +.d2h-d-none { + display: none; +} + .d2h-wrapper { text-align: left; } @@ -79,6 +83,10 @@ padding: 4px 8px; } +.d2h-file-collapse.d2h-selected { + background-color: #c8e1ff; +} + .d2h-file-collapse-input { margin: 0 4px 0 0; } diff --git a/src/ui/js/diff2html-ui-base.ts b/src/ui/js/diff2html-ui-base.ts index b3f7730..20bdd6c 100644 --- a/src/ui/js/diff2html-ui-base.ts +++ b/src/ui/js/diff2html-ui-base.ts @@ -118,8 +118,10 @@ export class Diff2HtmlUI { .closest('.d2h-file-wrapper') ?.querySelector(selector); - if (fileContents !== null && fileContents !== undefined) - fileContents.style.display = fileContents.style.display === 'none' ? '' : 'none'; + if (fileContents !== null && fileContents !== undefined) { + fileContentToggleBtn.classList.toggle('d2h-selected'); + fileContents.classList.toggle('d2h-d-none'); + } }; const toggleHandler: (e: Event) => void = e => {