Add unified/side-by-side toggle to diff view

This commit is contained in:
Chris Wanstrath 2026-03-06 08:25:07 -08:00
parent 188cd15291
commit a808d2efbc

View File

@ -23,6 +23,12 @@
<div class="header"> <div class="header">
<h1><code>{{BRANCH}}</code></h1> <h1><code>{{BRANCH}}</code></h1>
{{PROMPT_SECTION}} {{PROMPT_SECTION}}
<div style="margin: 12px 0;">
<label style="cursor:pointer; user-select:none; font-size:14px; color:#8b949e;">
<input type="checkbox" id="unified-toggle" style="cursor:pointer; vertical-align:middle; margin-right:6px;">
Unified
</label>
</div>
<div class="meta"> <div class="meta">
{{LOG_SECTION}} {{LOG_SECTION}}
{{STAT_SECTION}} {{STAT_SECTION}}
@ -34,16 +40,25 @@
<script> <script>
const diffString = {{DIFF_JSON}}; const diffString = {{DIFF_JSON}};
const targetElement = document.getElementById("diff"); const targetElement = document.getElementById("diff");
const configuration = { const toggle = document.getElementById("unified-toggle");
drawFileList: true,
matching: "lines", function renderDiff(outputFormat) {
outputFormat: "side-by-side", const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, {
highlight: true, drawFileList: true,
colorScheme: "dark", matching: "lines",
}; outputFormat,
const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration); highlight: true,
diff2htmlUi.draw(); colorScheme: "dark",
diff2htmlUi.highlightCode(); });
diff2htmlUi.draw();
diff2htmlUi.highlightCode();
}
renderDiff("side-by-side");
toggle.addEventListener("change", function () {
renderDiff(this.checked ? "line-by-line" : "side-by-side");
});
</script> </script>
</body> </body>
</html> </html>