mvdan.cc / tangled-core
forked from tangled.org/core
Monorepo for Tangled
fork atom

appview/pages: improve diff template and show current {inter,}diff round

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>

anirudh.fi a5afd603 0c233644

verified
+46 -12
+37 -3
appview/pages/templates/repo/fragments/diff.html
··· 4 4 #filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; } 5 5 #filesToggle:not(:checked) ~ div label[for="filesToggle"] .hide-text { display: none; } 6 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; } 7 + #filesToggle:not(:checked) ~ div div#files { width: 0; display: none; margin-right: 0; } 8 8 </style> 9 9 10 10 {{ template "diffTopbar" . }} ··· 14 14 {{ define "diffTopbar" }} 15 15 {{ $diff := index . 0 }} 16 16 {{ $opts := index . 1 }} 17 + {{ $root := "" }} 18 + {{ if gt (len .) 2 }} 19 + {{ $root = index . 2 }} 20 + {{ end }} 17 21 18 22 {{ block "filesCheckbox" $ }} {{ end }} 19 23 {{ block "subsCheckbox" $ }} {{ end }} 20 24 21 25 <!-- 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"> 26 + <div class="sticky top-0 z-30 flex items-center gap-2 col-span-full h-12 p-2 {{ if $root }}mt-4{{ end }}"> 23 27 <!-- left panel toggle --> 24 28 {{ template "filesToggle" . }} 25 29 ··· 28 32 {{ $count := len $diff.ChangedFiles }} 29 33 {{ template "repo/fragments/diffStatPill" $stat }} 30 34 {{ $count }} changed file{{ if ne $count 1 }}s{{ end }} 35 + 36 + {{ if $root }} 37 + {{ if $root.IsInterdiff }} 38 + <!-- interdiff indicator --> 39 + <div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2"> 40 + <span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Interdiff</span> 41 + <a 42 + href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ sub $root.ActiveRound 1 }}" 43 + class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600" 44 + > 45 + #{{ sub $root.ActiveRound 1 }} 46 + </a> 47 + <span class="text-gray-400 text-xs">→</span> 48 + <a 49 + href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $root.ActiveRound }}" 50 + class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600" 51 + > 52 + #{{ $root.ActiveRound }} 53 + </a> 54 + </div> 55 + {{ else if ne $root.ActiveRound nil }} 56 + <!-- diff round indicator --> 57 + <div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2"> 58 + <span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Diff</span> 59 + <span class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs border border-gray-300 dark:border-gray-600"> 60 + <span class="hidden md:inline">round </span>#{{ $root.ActiveRound }} 61 + </span> 62 + </div> 63 + {{ end }} 64 + {{ end }} 31 65 32 66 <!-- spacer --> 33 67 <div class="flex-grow"></div> ··· 137 171 {{ end }} 138 172 139 173 {{ define "collapseToggle" }} 140 - <label 174 + <label 141 175 title="Expand/Collapse diffs" 142 176 for="collapseToggle" 143 177 class="btn font-normal normal-case p-2"
+9 -9
appview/pages/templates/repo/pulls/pull.html
··· 91 91 <div class="flex col-span-full"> 92 92 <!-- left panel --> 93 93 <div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12"> 94 - <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"> 94 + <section class="overflow-x-auto text-sm px-6 py-2 border-b border-x border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded-b rounded-t-none bg-white dark:bg-gray-800 drop-shadow-sm"> 95 95 {{ template "repo/fragments/fileTree" $diff.FileTree }} 96 96 </section> 97 97 </div> ··· 118 118 </div> 119 119 <!-- right panel - bottom sheet on mobile, side panel on desktop --> 120 120 <div id="subs" class="fixed bottom-0 left-0 right-0 z-50 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden"> 121 - <details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t-sm drop-shadow-lg md:drop-shadow-none"> 121 + <details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none"> 122 122 <summary class=" 123 123 flex gap-4 items-center justify-between 124 - rounded-t-2xl md:rounded-t-sm cursor-pointer list-none p-4 md:h-12 124 + rounded-t-2xl md:rounded-t cursor-pointer list-none p-4 md:h-12 125 125 text-white md:text-black md:dark:text-white 126 126 bg-green-600 dark:bg-green-600 127 127 md:bg-white md:dark:bg-gray-800 128 128 drop-shadow-sm 129 - md:border-b md:border-x border-gray-200 dark:border-gray-700"> 130 - <h2 class="">Review Panel </h2> 129 + border-t md:border-x md:border-t-0 border-gray-200 dark:border-gray-700"> 130 + <h2 class="">Submissions</h2> 131 131 {{ template "subsPanelSummary" $ }} 132 132 </summary> 133 133 <div class="max-h-[85vh] md:max-h-[calc(100vh-3rem-3rem)] w-full flex flex-col-reverse gap-4 overflow-y-auto bg-slate-100 dark:bg-gray-900 md:bg-transparent"> ··· 151 151 </span> 152 152 {{ else }} 153 153 <span> 154 - viewing round 154 + viewing round 155 155 <span class="font-mono">#{{ $root.ActiveRound }}</span> 156 156 </span> 157 157 {{ if ne $root.ActiveRound $latest }} ··· 176 176 {{ define "subsToggle" }} 177 177 <style> 178 178 /* Mobile: full width */ 179 - #subsToggle:checked ~ div div#subs { 179 + #subsToggle:checked ~ div div#subs { 180 180 width: 100%; 181 181 margin-left: 0; 182 182 } ··· 186 186 187 187 /* Desktop: 25vw with left margin */ 188 188 @media (min-width: 768px) { 189 - #subsToggle:checked ~ div div#subs { 189 + #subsToggle:checked ~ div div#subs { 190 190 width: 25vw; 191 191 margin-left: 1rem; 192 192 } ··· 229 229 230 230 {{ if $root.LoggedInUser }} 231 231 {{ template "repo/pulls/fragments/pullActions" 232 - (dict 232 + (dict 233 233 "LoggedInUser" $root.LoggedInUser 234 234 "Pull" $root.Pull 235 235 "RepoInfo" $root.RepoInfo