Highlight viewed files differently in the PR filetree (#24956)

![image](https://github.com/go-gitea/gitea/assets/1135157/009d8026-15a1-4d18-8548-1c3642978f57)

fixes #24566

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 67d0434e4a9a7ea1b2aacf31019545fb587323d7..1198452f7e567f325703a4bd8b4c40c7bafceb17 100644 (file)
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -49,7 +49,7 @@
                        </div>
                </div>
                <script id="diff-data-script" type="module">
-                       const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}];
+                       const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}},IsViewed:{{$file.IsViewed}}},{{end}}];
                        const diffData = {
                                isIncomplete: {{.Diff.IsIncomplete}},
                                tooManyFilesMessage: "{{$.locale.Tr "repo.diff.too_many_files"}}",

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 916b8cdc736c13f3a6ad711b7d2665d1d0a304e4..67bb677e22a21102a621ea8ba14934fb5b38269a 100644 (file)
--- 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 gt-ellipsis"
+        :class="['file gt-ellipsis', {'viewed': item.file.IsViewed}]"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -148,4 +148,8 @@ a:hover {
   text-decoration: none;
   color: var(--color-text);
 }
+
+a.file.viewed {
+  color: var(--color-text-light-3);
+}
 </style>

diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js
index daa520ea7e7f68c6a201103812ad8c34bd1bd18a..90ea805160781b00a8cef2745eac2a9e44357087 100644 (file)
--- a/web_src/js/features/pull-view-file.js
+++ b/web_src/js/features/pull-view-file.js
@@ -1,3 +1,4 @@
+import {diffTreeStore} from '../modules/stores.js';
 import {setFileFolding} from './file-fold.js';
 
 const {csrfToken, pageData} = window.config;
@@ -53,9 +54,17 @@ export function initViewedCheckboxListenerFor() {
       const hasChangedLabel = form.parentNode.querySelector('.changed-since-last-review');
       hasChangedLabel?.remove();
 
+      const fileName = checkbox.getAttribute('name');
+
+      // check if the file is in our difftreestore and if we find it -> change the IsViewed status
+      const fileInPageData = diffTreeStore().files.find((x) => x.Name === fileName);
+      if (fileInPageData) {
+        fileInPageData.IsViewed = this.checked;
+      }
+
       // Unfortunately, actual forms cause too many problems, hence another approach is needed
       const files = {};
-      files[checkbox.getAttribute('name')] = this.checked;
+      files[fileName] = this.checked;
       const data = {files};
       const headCommitSHA = form.getAttribute('data-headcommit');
       if (headCommitSHA) data.headCommitSHA = headCommitSHA;