alice.pds.demo.boltless.dev
This repository has no description
1{{ define "repo/pulls/fragments/composediff" }}
2<style>
3 #composeFilesToggle:checked ~ * label[for="composeFilesToggle"] .show-text { display: none; }
4 #composeFilesToggle:checked ~ * label[for="composeFilesToggle"] .hide-text { display: inline; }
5 #composeFilesToggle:not(:checked) ~ * label[for="composeFilesToggle"] .hide-text { display: none; }
6 #composeFilesToggle:checked ~ * div#composeFiles { width: fit-content; max-width: 15vw; }
7 #composeFilesToggle:not(:checked) ~ * div#composeFiles { width: 0; display: none; margin-right: 0; }
8</style>
9<div id="diff-area">
10 <input type="checkbox" id="composeFilesToggle" class="peer/collapse hidden"/>
11 <div class="bg-slate-100 dark:bg-gray-700/50 flex items-center gap-2 h-12 p-2 rounded-t-md border border-b-0 border-gray-200 dark:border-gray-700">
12 <label title="Toggle filetree panel" for="composeFilesToggle" class="hidden md:inline-flex btn-flat">
13 <span class="peer-checked:hidden">{{ i "panel-left-open" "size-4" }}</span>
14 <span class="peer-checked:inline hidden">{{ i "panel-left-close" "size-4" }}</span>
15 </label>
16
17 {{ template "repo/fragments/diffStatPill" .Stats }}
18 {{ $count := .Stats.FilesChanged }}
19 <span class="text-xs text-gray-600 dark:text-gray-300 hidden md:inline-flex">{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}</span>
20
21 <div class="flex-grow"></div>
22
23 <label title="Expand/Collapse diffs" class="btn font-normal normal-case">
24 <input type="checkbox" id="diff-collapse-toggle" class="peer/collapse hidden"/>
25 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
26 {{ i "unfold-vertical" "size-4" }}
27 <span class="hidden md:inline">Expand all</span>
28 </span>
29 <span class="peer-checked/collapse:inline-flex hidden items-center gap-2">
30 {{ i "fold-vertical" "size-4" }}
31 <span class="hidden md:inline">Collapse all</span>
32 </span>
33 </label>
34
35 <!-- diff settings -->
36 {{ template "repo/pulls/fragments/diffSettings"
37 (dict "DiffUrl" (printf "%s?baseRepo=%s&base=%s&headRepo=%s&head=%s" .DiffUrl .BaseRepo .DiffBase .HeadRepo .DiffHead)
38 "Unified" .Unified) }}
39
40 </div>
41 <div class="flex border border-gray-200 dark:border-gray-700 rounded-b-md">
42 <div id="composeFiles" class="hidden md:block overflow-hidden p-1 max-h-full overflow-y-auto border-r border-gray-200 dark:border-gray-700">
43 {{ template "repo/fragments/fileTree" .FileTree }}
44 </div>
45 <div id="diff-list" class="flex-1 min-w-0 p-2 space-y-3">
46 {{ range .Files }}
47 {{ template "repo/pulls/fragments/diffFile" . }}
48 {{ end }}
49 </div>
50 </div>
51</div>
52<script>
53 (() => {
54 const checkbox = document.getElementById('diff-collapse-toggle');
55 const diffList = document.getElementById('diff-list');
56
57 checkbox.addEventListener('change', () => {
58 console.debug("checked", checkbox.checked);
59 diffList.querySelectorAll('details[id^="file-"]').forEach(detail => {
60 detail.open = checkbox.checked;
61 });
62 });
63
64 if (window.__collapseToggleHandler) {
65 diffList.removeEventListener('toggle', window.__collapseToggleHandler, true);
66 }
67
68 const handler = (e) => {
69 if (!e.target.matches('details[id^="file-"]')) return;
70 const details = document.querySelectorAll('details[id^="file-"]');
71 const allOpen = Array.from(details).every(d => d.open);
72 const allClosed = Array.from(details).every(d => !d.open);
73
74 if (allOpen) checkbox.checked = true;
75 else if (allClosed) checkbox.checked = false;
76 };
77
78 console.log("diffList", diffList);
79
80 window.__collapseToggleHandler = handler;
81 diffList.addEventListener('toggle', handler, true);
82 })();
83</script>
84{{ end }}