zan.dev
appview: simplify diff/interdiff fragments
Signed-off-by: oppiliappan <me@oppi.li>
oppi.li
+29
-83
appview/pages/templates/repo/fragments/diff.html
+29
-83
appview/pages/templates/repo/fragments/diff.html
···
13
13
<div class="flex flex-col gap-4">
14
14
{{ range $idx, $hunk := $diff }}
15
15
{{ with $hunk }}
16
-
<section class="border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
17
-
<div id="file-{{ .Name.New }}">
18
-
<div id="diff-file">
19
-
<details open>
20
-
<summary class="list-none cursor-pointer sticky top-0">
21
-
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
22
-
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
23
-
<div class="flex gap-1 items-center">
24
-
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
25
-
{{ if .IsNew }}
26
-
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span>
27
-
{{ else if .IsDelete }}
28
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">DELETED</span>
29
-
{{ else if .IsCopy }}
30
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">COPIED</span>
31
-
{{ else if .IsRename }}
32
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">RENAMED</span>
33
-
{{ else }}
34
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">MODIFIED</span>
35
-
{{ end }}
36
-
37
-
{{ template "repo/fragments/diffStatPill" .Stats }}
38
-
</div>
39
-
40
-
<div class="flex gap-2 items-center overflow-x-auto">
41
-
{{ if .IsDelete }}
42
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
43
-
{{ .Name.Old }}
44
-
</a>
45
-
{{ else if (or .IsCopy .IsRename) }}
46
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
47
-
{{ .Name.Old }}
48
-
</a>
49
-
{{ i "arrow-right" "w-4 h-4" }}
50
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
51
-
{{ .Name.New }}
52
-
</a>
53
-
{{ else }}
54
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
55
-
{{ .Name.New }}
56
-
</a>
57
-
{{ end }}
58
-
</div>
59
-
</div>
60
-
61
-
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
62
-
<div id="right-side-items" class="p-2 flex items-center">
63
-
<a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
64
-
{{ if gt $idx 0 }}
65
-
{{ $prev := index $diff (sub $idx 1) }}
66
-
<a title="previous file" href="#file-{{ $prev.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a>
67
-
{{ end }}
68
-
69
-
{{ if lt $idx $last }}
70
-
{{ $next := index $diff (add $idx 1) }}
71
-
<a title="next file" href="#file-{{ $next.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a>
72
-
{{ end }}
73
-
</div>
74
-
75
-
</div>
76
-
</summary>
16
+
<details open id="file-{{ .Name.New }}" class="group border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm" tabindex="{{ add $idx 1 }}">
17
+
<summary class="list-none cursor-pointer sticky top-0">
18
+
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
19
+
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
20
+
<span class="group-open:hidden inline">{{ i "chevron-right" "w-4 h-4" }}</span>
21
+
<span class="hidden group-open:inline">{{ i "chevron-down" "w-4 h-4" }}</span>
22
+
{{ template "repo/fragments/diffStatPill" .Stats }}
77
23
78
-
<div class="transition-all duration-700 ease-in-out">
79
-
{{ if .IsDelete }}
80
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
81
-
This file has been deleted.
82
-
</p>
83
-
{{ else if .IsCopy }}
84
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
85
-
This file has been copied.
86
-
</p>
87
-
{{ else if .IsBinary }}
88
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
89
-
This is a binary file and will not be displayed.
90
-
</p>
91
-
{{ else }}
92
-
{{ if $isSplit }}
93
-
{{- template "repo/fragments/splitDiff" .Split -}}
24
+
<div class="flex gap-2 items-center overflow-x-auto">
25
+
{{ if .IsDelete }}
26
+
{{ .Name.Old }}
27
+
{{ else if (or .IsCopy .IsRename) }}
28
+
{{ .Name.Old }} {{ i "arrow-right" "w-4 h-4" }} {{ .Name.New }}
94
29
{{ else }}
95
-
{{- template "repo/fragments/unifiedDiff" . -}}
30
+
{{ .Name.New }}
96
31
{{ end }}
97
-
{{- end -}}
32
+
</div>
98
33
</div>
34
+
</div>
35
+
</summary>
99
36
100
-
</details>
101
-
37
+
<div class="transition-all duration-700 ease-in-out">
38
+
{{ if .IsBinary }}
39
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
40
+
This is a binary file and will not be displayed.
41
+
</p>
42
+
{{ else }}
43
+
{{ if $isSplit }}
44
+
{{- template "repo/fragments/splitDiff" .Split -}}
45
+
{{ else }}
46
+
{{- template "repo/fragments/unifiedDiff" . -}}
47
+
{{ end }}
48
+
{{- end -}}
102
49
</div>
103
-
</div>
104
-
</section>
50
+
</details>
105
51
{{ end }}
106
52
{{ end }}
107
53
</div>
+44
-69
appview/pages/templates/repo/fragments/interdiff.html
+44
-69
appview/pages/templates/repo/fragments/interdiff.html
···
10
10
<div class="flex flex-col gap-4">
11
11
{{ range $idx, $hunk := $diff }}
12
12
{{ with $hunk }}
13
-
<section class="border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
14
-
<div id="file-{{ .Name }}">
15
-
<div id="diff-file">
16
-
<details {{ if not (.Status.IsOnlyInOne) }}open{{end}}>
17
-
<summary class="list-none cursor-pointer sticky top-0">
18
-
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
19
-
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
20
-
<div class="flex gap-1 items-center" style="direction: ltr;">
21
-
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
22
-
{{ if .Status.IsOk }}
23
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span>
24
-
{{ else if .Status.IsUnchanged }}
25
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span>
26
-
{{ else if .Status.IsOnlyInOne }}
27
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span>
28
-
{{ else if .Status.IsOnlyInTwo }}
29
-
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span>
30
-
{{ else if .Status.IsRebased }}
31
-
<span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span>
32
-
{{ else }}
33
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span>
34
-
{{ end }}
35
-
</div>
36
-
37
-
<div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;">
38
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" href="">
39
-
{{ .Name }}
40
-
</a>
41
-
</div>
42
-
</div>
43
-
44
-
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
45
-
<div id="right-side-items" class="p-2 flex items-center">
46
-
<a title="top of file" href="#file-{{ .Name }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
47
-
{{ if gt $idx 0 }}
48
-
{{ $prev := index $diff (sub $idx 1) }}
49
-
<a title="previous file" href="#file-{{ $prev.Name }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a>
50
-
{{ end }}
51
-
52
-
{{ if lt $idx $last }}
53
-
{{ $next := index $diff (add $idx 1) }}
54
-
<a title="next file" href="#file-{{ $next.Name }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a>
55
-
{{ end }}
56
-
</div>
57
-
13
+
<details {{ if not (.Status.IsOnlyInOne) }}open{{end}} id="file-{{ .Name }}" class="border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
14
+
<summary class="list-none cursor-pointer sticky top-0">
15
+
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
16
+
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
17
+
<div class="flex gap-1 items-center" style="direction: ltr;">
18
+
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
19
+
{{ if .Status.IsOk }}
20
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span>
21
+
{{ else if .Status.IsUnchanged }}
22
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span>
23
+
{{ else if .Status.IsOnlyInOne }}
24
+
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span>
25
+
{{ else if .Status.IsOnlyInTwo }}
26
+
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span>
27
+
{{ else if .Status.IsRebased }}
28
+
<span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span>
29
+
{{ else }}
30
+
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span>
31
+
{{ end }}
58
32
</div>
59
-
</summary>
60
33
61
-
<div class="transition-all duration-700 ease-in-out">
62
-
{{ if .Status.IsUnchanged }}
63
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
64
-
This file has not been changed.
65
-
</p>
66
-
{{ else if .Status.IsRebased }}
67
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
68
-
This patch was likely rebased, as context lines do not match.
69
-
</p>
70
-
{{ else if .Status.IsError }}
71
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
72
-
Failed to calculate interdiff for this file.
73
-
</p>
74
-
{{ else }}
75
-
{{ if $isSplit }}
76
-
{{- template "repo/fragments/splitDiff" .Split -}}
77
-
{{ else }}
78
-
{{- template "repo/fragments/unifiedDiff" . -}}
79
-
{{ end }}
80
-
{{- end -}}
34
+
<div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;">{{ .Name }}</div>
81
35
</div>
82
36
83
-
</details>
37
+
</div>
38
+
</summary>
84
39
40
+
<div class="transition-all duration-700 ease-in-out">
41
+
{{ if .Status.IsUnchanged }}
42
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
43
+
This file has not been changed.
44
+
</p>
45
+
{{ else if .Status.IsRebased }}
46
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
47
+
This patch was likely rebased, as context lines do not match.
48
+
</p>
49
+
{{ else if .Status.IsError }}
50
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
51
+
Failed to calculate interdiff for this file.
52
+
</p>
53
+
{{ else }}
54
+
{{ if $isSplit }}
55
+
{{- template "repo/fragments/splitDiff" .Split -}}
56
+
{{ else }}
57
+
{{- template "repo/fragments/unifiedDiff" . -}}
58
+
{{ end }}
59
+
{{- end -}}
85
60
</div>
86
-
</div>
87
-
</section>
61
+
62
+
</details>
88
63
{{ end }}
89
64
{{ end }}
90
65
</div>