From cfb40482952595ae5ea7157bcdd5c6c26b70ee3a Mon Sep 17 00:00:00 2001
From: gempir <gempir.dev@gmail.com>
Date: Sat, 11 Feb 2023 16:07:53 +0100
Subject: [PATCH 1/5] fix click handler for collapsing folders and prevent
 accidental selection

---
 web_src/js/components/DiffFileTreeItem.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 4089e5141043a..bdc2c09c4006b 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -63,7 +63,7 @@ export default {
       if (itemIsFile) {
         return;
       }
-      this.$set(this, 'collapsed', !this.collapsed);
+      this.collapsed = !this.collapsed;
     },
     getIconForDiffType(pType) {
       const diffTypes = {
@@ -122,6 +122,8 @@ span.svg-icon.octicon-diff-renamed {
 div.directory {
   display: grid;
   grid-template-columns: 18px 20px auto;
+  user-select: none;
+  cursor: pointer;
 }
 
 div.directory:hover {

From a73b8cf9f35c34ec69b378454cac699c9c70634b Mon Sep 17 00:00:00 2001
From: gempir <gempir.dev@gmail.com>
Date: Sat, 11 Feb 2023 16:22:09 +0100
Subject: [PATCH 2/5] color diff detail stats

---
 web_src/less/_repository.less | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5d30d0d81ae7b..c1ba762b09c37 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1614,6 +1614,18 @@
       margin-right: .25rem;
     }
 
+    .diff-detail-stats strong:nth-of-type(1) {
+      color: var(--color-yellow)
+    }
+
+    .diff-detail-stats strong:nth-of-type(2) {
+      color: var(--color-green)
+    }
+
+    .diff-detail-stats strong:nth-of-type(3) {
+      color: var(--color-red)
+    }
+
     .diff-detail-stats {
       @media (max-width: 480px) {
         font-size: 0;

From 32d16dcc44658303e7223041e6be6790d91efa83 Mon Sep 17 00:00:00 2001
From: gempir <gempir.dev@gmail.com>
Date: Sat, 11 Feb 2023 16:36:23 +0100
Subject: [PATCH 3/5] add colors to file names

---
 web_src/js/components/DiffFileTreeItem.vue | 32 +++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index bdc2c09c4006b..93ae0ce8bf399 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -10,7 +10,7 @@
       />
       <a
         v-if="item.isFile"
-        class="file ellipsis"
+        class="file ellipsis" :class="[getFileClassForDiffType(item.file.Type)]"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -75,6 +75,16 @@ export default {
       };
       return diffTypes[pType];
     },
+    getFileClassForDiffType(pType) {
+      const diffTypes = {
+        1: 'file-diff-added',
+        2: 'file-diff-modified',
+        3: 'file-diff-removed',
+        4: 'file-diff-renamed',
+        5: 'file-diff-copied',
+      };
+      return diffTypes[pType];
+    }
   },
 };
 </script>
@@ -119,6 +129,26 @@ span.svg-icon.octicon-diff-renamed {
   border-radius: 4px;
 }
 
+.file.file-diff-added {
+  color: var(--color-green);
+}
+
+.file.file-diff-modified {
+  color: var(--color-yellow);
+}
+
+.file.file-diff-removed {
+  color: var(--color-red);
+}
+
+.file.file-diff-renamed {
+  color: var(--color-yellow);
+}
+
+.file.file-diff-copied {
+  color: var(--color-yellow);
+}
+
 div.directory {
   display: grid;
   grid-template-columns: 18px 20px auto;

From b6b0ce9dd491431468d69a164002ef6aa1fad7dc Mon Sep 17 00:00:00 2001
From: gempir <gempir.dev@gmail.com>
Date: Sat, 11 Feb 2023 17:34:32 +0100
Subject: [PATCH 4/5] less colorful

---
 web_src/js/components/DiffFileTreeItem.vue | 37 ++++------------------
 web_src/less/_repository.less              |  6 ++--
 2 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 93ae0ce8bf399..69cc87ed6bd9b 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -10,7 +10,7 @@
       />
       <a
         v-if="item.isFile"
-        class="file ellipsis" :class="[getFileClassForDiffType(item.file.Type)]"
+        class="file ellipsis"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -75,16 +75,6 @@ export default {
       };
       return diffTypes[pType];
     },
-    getFileClassForDiffType(pType) {
-      const diffTypes = {
-        1: 'file-diff-added',
-        2: 'file-diff-modified',
-        3: 'file-diff-removed',
-        4: 'file-diff-renamed',
-        5: 'file-diff-copied',
-      };
-      return diffTypes[pType];
-    }
   },
 };
 </script>
@@ -93,10 +83,15 @@ export default {
 span.svg-icon.status {
   float: right;
 }
+
 span.svg-icon.file {
   color: var(--color-secondary-dark-7);
 }
 
+a.file {
+  color: var(--color-text);
+}
+
 span.svg-icon.directory {
   color: var(--color-primary);
 }
@@ -129,26 +124,6 @@ span.svg-icon.octicon-diff-renamed {
   border-radius: 4px;
 }
 
-.file.file-diff-added {
-  color: var(--color-green);
-}
-
-.file.file-diff-modified {
-  color: var(--color-yellow);
-}
-
-.file.file-diff-removed {
-  color: var(--color-red);
-}
-
-.file.file-diff-renamed {
-  color: var(--color-yellow);
-}
-
-.file.file-diff-copied {
-  color: var(--color-yellow);
-}
-
 div.directory {
   display: grid;
   grid-template-columns: 18px 20px auto;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index c1ba762b09c37..64b0d05eef28c 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1615,15 +1615,15 @@
     }
 
     .diff-detail-stats strong:nth-of-type(1) {
-      color: var(--color-yellow)
+      color: var(--color-yellow);
     }
 
     .diff-detail-stats strong:nth-of-type(2) {
-      color: var(--color-green)
+      color: var(--color-green);
     }
 
     .diff-detail-stats strong:nth-of-type(3) {
-      color: var(--color-red)
+      color: var(--color-red);
     }
 
     .diff-detail-stats {

From df1cdccee30eed47c6fd03d3dc547ea0a7c94739 Mon Sep 17 00:00:00 2001
From: gempir <gempir.dev@gmail.com>
Date: Sat, 11 Feb 2023 19:50:14 +0100
Subject: [PATCH 5/5] style with muted instead and add a comment

---
 web_src/js/components/DiffFileTreeItem.vue | 6 +-----
 web_src/less/_repository.less              | 2 ++
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 69cc87ed6bd9b..40d56b22627c6 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -10,7 +10,7 @@
       />
       <a
         v-if="item.isFile"
-        class="file ellipsis"
+        class="file ellipsis muted"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -88,10 +88,6 @@ span.svg-icon.file {
   color: var(--color-secondary-dark-7);
 }
 
-a.file {
-  color: var(--color-text);
-}
-
 span.svg-icon.directory {
   color: var(--color-primary);
 }
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 64b0d05eef28c..39362722de535 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1614,6 +1614,8 @@
       margin-right: .25rem;
     }
 
+    // Because the translations contain the <strong> we need to style with nth-of-type
+
     .diff-detail-stats strong:nth-of-type(1) {
       color: var(--color-yellow);
     }