Change diff mode selection to radio button

Kevinjil · Kevinjil · commit 9138d68841fe · 2025-09-15T19:41:47.000Z
Visually, this is more in line with the rest of the design. It also
clears some vertical space which can be used by the monaco editor.
diff --git a/webapp/src/Twig/TwigExtension.php b/webapp/src/Twig/TwigExtension.php
@@ -940,10 +940,6 @@ protected function parseSourceDiff(string $difftext): string
     public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $oldFile): string
     {
         $editor = <<<HTML
-<div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" id="__EDITOR__SBS">
-    <label class="form-check-label" for="__EDITOR__SBS">Use side-by-side diff viewer</label>
-</div>
 <div class="editor" id="__EDITOR__"></div>
 <script>
 $(function() {
@@ -960,12 +956,14 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
         );
 
         const sideBySide = isDiffSideBySide()
-        sideBySideSwitch = $("#__EDITOR__SBS");
-        sideBySideSwitch.prop('checked', sideBySide);
-        sideBySideSwitch.change(function(e) {
-            setDiffSideBySide(e.target.checked);
+        const diffSelect = $("#diffselect-__EDITOR__");
+        diffSelect.find("input[value='side-by-side']").prop('checked', sideBySide);
+        diffSelect.find("input[value='inline']").prop('checked', !sideBySide);
+        diffSelect.find("input[type='radio']").change(function(e) {
+            const sbs = e.target.value === 'side-by-side';
+            setDiffSideBySide(sbs);
             diffEditor.updateOptions({
-                renderSideBySide: e.target.checked,
+                renderSideBySide: sbs,
             });
         });
 
diff --git a/webapp/templates/jury/partials/submission_diff.html.twig b/webapp/templates/jury/partials/submission_diff.html.twig
@@ -43,6 +43,7 @@
     {%- for filePair in oldFileStats.changedfiles %}
         <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="diff-{{ filePair.1.submitfileid }}"
              role="tabpanel">
+            {% set diff_id = "diff" ~  filePair.1.submitfileid %}
             <div class="mb-1">
                 <a class="btn btn-secondary btn-sm"
                    href="{{ path('jury_submission_source', {submission: submission.submitid, fetch: filePair.1.rank}) }}">
@@ -54,8 +55,15 @@
                         <i class="fas fa-pencil-alt"></i> Edit
                     </a>
                 {% endif %}
+                <div id="diffselect-{{ diff_id }}" class="btn-group">
+                    <a href="#" role="button" class="btn btn-secondary btn-sm pe-none" aria-disabled="true"><i class="fas fa-code-branch"></i></a>
+                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-side-by-side" value="side-by-side" autocomplete="off">
+                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-side-by-side">side-by-side</label>
+                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-inline" value="inline" autocomplete="off">
+                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-inline">inline</label>
+                </div>
             </div>
-            {{ showDiff("diff" ~  filePair.1.submitfileid, filePair.0, filePair.1) }}
+            {{ showDiff(diff_id, filePair.0, filePair.1) }}
         </div>
     {%- endfor %}
     {%- for file in oldFileStats.unchangedfiles %}
