feature: Add selected state style

mrfyda · mrfyda · commit 242fc5ae7b29 · 2021-01-23T22:32:50.000Z
diff --git 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
@@ -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 => {
