this repo has no description
tangled.org
1{{ define "repo/fragments/diff" }}
2 <style>
3 #filesToggle:checked ~ div label[for="filesToggle"] .show-text { display: none; }
4 #filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; }
5 #filesToggle:not(:checked) ~ div label[for="filesToggle"] .hide-text { display: none; }
6 #filesToggle:checked ~ div div#files { width: fit-content; max-width: 15vw; margin-right: 1rem; }
7 #filesToggle:not(:checked) ~ div div#files { width: 0; display: hidden; margin-right: 0; }
8 </style>
9
10 {{ template "diffTopbar" . }}
11 {{ block "diffLayout" . }} {{ end }}
12{{ end }}
13
14{{ define "diffTopbar" }}
15 {{ $diff := index . 0 }}
16 {{ $opts := index . 1 }}
17
18 {{ block "filesCheckbox" $ }} {{ end }}
19 {{ block "subsCheckbox" $ }} {{ end }}
20
21 <!-- top bar -->
22 <div class="sticky top-0 z-30 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2">
23 <!-- left panel toggle -->
24 {{ template "filesToggle" . }}
25
26 <!-- stats -->
27 {{ $stat := $diff.Stats }}
28 {{ $count := len $diff.ChangedFiles }}
29 {{ template "repo/fragments/diffStatPill" $stat }}
30 {{ $count }} changed file{{ if ne $count 1 }}s{{ end }}
31
32 <!-- spacer -->
33 <div class="flex-grow"></div>
34
35 <!-- collapse diffs -->
36 {{ template "collapseToggle" }}
37
38 <!-- diff options -->
39 {{ template "repo/fragments/diffOpts" $opts }}
40
41 <!-- right panel toggle -->
42 {{ block "subsToggle" $ }} {{ end }}
43 </div>
44
45{{ end }}
46
47{{ define "diffLayout" }}
48 {{ $diff := index . 0 }}
49 {{ $opts := index . 1 }}
50
51 <div class="flex col-span-full flex-grow">
52 <!-- left panel -->
53 <div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12">
54 <section class="overflow-x-auto text-sm px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded bg-white dark:bg-gray-800 drop-shadow-sm">
55 {{ template "repo/fragments/fileTree" $diff.FileTree }}
56 </section>
57 </div>
58
59 <!-- main content -->
60 <div class="flex-1 min-w-0 sticky top-12 pb-12">
61 {{ template "diffFiles" (list $diff $opts) }}
62 </div>
63
64 </div>
65{{ end }}
66
67{{ define "diffFiles" }}
68 {{ $diff := index . 0 }}
69 {{ $opts := index . 1 }}
70 {{ $files := $diff.ChangedFiles }}
71 {{ $isSplit := $opts.Split }}
72 <div class="flex flex-col gap-4">
73 {{ if eq (len $files) 0 }}
74 <div class="text-center text-gray-500 dark:text-gray-400 py-8">
75 <p>No differences found between the selected revisions.</p>
76 </div>
77 {{ else }}
78 {{ range $idx, $file := $files }}
79 {{ template "diffFile" (list $idx $file $isSplit) }}
80 {{ end }}
81 {{ end }}
82 </div>
83{{ end }}
84
85{{ define "diffFile" }}
86 {{ $idx := index . 0 }}
87 {{ $file := index . 1 }}
88 {{ $isSplit := index . 2 }}
89 {{ with $file }}
90 <details open id="file-{{ .Id }}" 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 }}">
91 <summary class="list-none cursor-pointer sticky top-12 group-open:border-b border-gray-200 dark:border-gray-700">
92 <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
93 <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
94 <span class="group-open:hidden inline">{{ i "chevron-right" "w-4 h-4" }}</span>
95 <span class="hidden group-open:inline">{{ i "chevron-down" "w-4 h-4" }}</span>
96 {{ template "repo/fragments/diffStatPill" .Stats }}
97
98 <div class="flex gap-2 items-center overflow-x-auto">
99 {{ $n := .Names }}
100 {{ if and $n.New $n.Old (ne $n.New $n.Old)}}
101 {{ $n.Old }} {{ i "arrow-right" "w-4 h-4" }} {{ $n.New }}
102 {{ else if $n.New }}
103 {{ $n.New }}
104 {{ else }}
105 {{ $n.Old }}
106 {{ end }}
107 </div>
108 </div>
109 </div>
110 </summary>
111
112 <div class="transition-all duration-700 ease-in-out">
113 {{ $reason := .CanRender }}
114 {{ if $reason }}
115 <p class="text-center text-gray-400 dark:text-gray-500 p-4">{{ $reason }}</p>
116 {{ else }}
117 {{ if $isSplit }}
118 {{- template "repo/fragments/splitDiff" .Split -}}
119 {{ else }}
120 {{- template "repo/fragments/unifiedDiff" . -}}
121 {{ end }}
122 {{- end -}}
123 </div>
124 </details>
125 {{ end }}
126{{ end }}
127
128{{ define "filesCheckbox" }}
129 <input type="checkbox" id="filesToggle" class="peer/files hidden" checked/>
130{{ end }}
131
132{{ define "filesToggle" }}
133 <label title="Toggle filetree panel" for="filesToggle" class="hidden md:inline-flex items-center justify-center rounded cursor-pointer text-normal font-normal normalcase">
134 <span class="show-text">{{ i "panel-left-open" "size-4" }}</span>
135 <span class="hide-text">{{ i "panel-left-close" "size-4" }}</span>
136 </label>
137{{ end }}
138
139{{ define "collapseToggle" }}
140 <label
141 title="Expand/Collapse diffs"
142 for="collapseToggle"
143 class="btn font-normal normal-case p-2"
144 >
145 <input type="checkbox" id="collapseToggle" class="peer/collapse hidden" checked/>
146 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
147 {{ i "fold-vertical" "w-4 h-4" }}
148 <span class="hidden md:inline">expand all</span>
149 </span>
150 <span class="peer-checked/collapse:inline-flex hidden flex items-center gap-2">
151 {{ i "unfold-vertical" "w-4 h-4" }}
152 <span class="hidden md:inline">collapse all</span>
153 </span>
154 </label>
155 <script>
156 document.addEventListener('DOMContentLoaded', function() {
157 const checkbox = document.getElementById('collapseToggle');
158 const details = document.querySelectorAll('details[id^="file-"]');
159
160 checkbox.addEventListener('change', function() {
161 details.forEach(detail => {
162 detail.open = checkbox.checked;
163 });
164 });
165
166 details.forEach(detail => {
167 detail.addEventListener('toggle', function() {
168 const allOpen = Array.from(details).every(d => d.open);
169 const allClosed = Array.from(details).every(d => !d.open);
170
171 if (allOpen) {
172 checkbox.checked = true;
173 } else if (allClosed) {
174 checkbox.checked = false;
175 }
176 });
177 });
178 });
179 </script>
180{{ end }}