appview/pages/pulls: allow collapsing submission comments #1007

+1 -1

appview/pages/templates/repo/pulls/fragments/pullNewComment.html

··· 12 12 > 13 13 <textarea 14 14 name="body" 15 15 - class="w-full p-2 rounded border border-gray-200" 15 15 + class="w-full p-2 rounded border" 16 16 rows=8 17 17 placeholder="Add to the discussion..."></textarea 18 18 >

+53 -30

appview/pages/templates/repo/pulls/pull.html

··· 139 139 <div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-40"></div> 140 140 <!-- right panel - bottom sheet on mobile, side panel on desktop --> 141 141 <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"> 142 142 - <details open id="bottomSheet" class="rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none"> 142 142 + <details open id="bottomSheet" class="rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none group/panel"> 143 143 <summary class=" 144 144 flex gap-4 items-center justify-between 145 145 rounded-t-2xl md:rounded-t cursor-pointer list-none p-4 md:h-12 ··· 148 148 md:bg-white md:dark:bg-gray-800 149 149 drop-shadow-sm 150 150 border-t md:border-x md:border-t-0 border-gray-200 dark:border-gray-700"> 151 151 - <h2 class="">Submissions</h2> 151 151 + <h2 class="">Comments</h2> 152 152 {{ template "subsPanelSummary" $ }} 153 153 </summary> 154 154 <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"> ··· 164 164 {{ $latest := $pull.LastRoundNumber }} 165 165 <div class="flex items-center gap-2 text-sm"> 166 166 <span class="md:hidden inline"> 167 167 - <span class="inline group-open:hidden">{{ i "chevron-up" "size-4" }}</span> 168 168 - <span class="hidden group-open:inline">{{ i "chevron-down" "size-4" }}</span> 167 167 + <span class="inline group-open/panel:hidden">{{ i "chevron-up" "size-4" }}</span> 168 168 + <span class="hidden group-open/panel:inline">{{ i "chevron-down" "size-4" }}</span> 169 169 </span> 170 170 </div> 171 171 {{ end }} ··· 222 222 {{ $idx := index . 1 }} 223 223 {{ $lastIdx := index . 2 }} 224 224 {{ $root := index . 3 }} 225 225 - <div class="{{ if eq $item.RoundNumber 0 }}rounded-b border-t-0{{ else }}rounded{{ end }} border border-gray-200 dark:border-gray-700 w-full shadow-sm bg-gray-50 dark:bg-gray-800/50"> 225 225 + <div class="{{ if eq $item.RoundNumber 0 }}rounded-b border-t-0{{ else }}rounded{{ end }} border border-gray-200 dark:border-gray-700 w-full shadow-sm bg-gray-50 dark:bg-gray-900"> 226 226 {{ template "submissionHeader" $ }} 227 227 {{ template "submissionComments" $ }} 228 228 - 229 229 - {{ if eq $lastIdx $item.RoundNumber }} 230 230 - {{ block "mergeStatus" $root }} {{ end }} 231 231 - {{ block "resubmitStatus" $root }} {{ end }} 232 232 - {{ end }} 233 233 - 234 234 - {{ if $root.LoggedInUser }} 235 235 - {{ template "repo/pulls/fragments/pullActions" 236 236 - (dict 237 237 - "LoggedInUser" $root.LoggedInUser 238 238 - "Pull" $root.Pull 239 239 - "RepoInfo" $root.RepoInfo 240 240 - "RoundNumber" $item.RoundNumber 241 241 - "MergeCheck" $root.MergeCheck 242 242 - "ResubmitCheck" $root.ResubmitCheck 243 243 - "BranchDeleteStatus" $root.BranchDeleteStatus 244 244 - "Stack" $root.Stack) }} 245 245 - {{ end }} 246 228 </div> 247 229 {{ end }} 248 230 ··· 510 492 511 493 {{ define "submissionComments" }} 512 494 {{ $item := index . 0 }} 513 513 - <div class="relative ml-10 border-l-2 border-gray-200 dark:border-gray-700"> 514 514 - {{ range $item.Comments }} 515 515 - {{ template "submissionComment" . }} 516 516 - {{ end }} 517 517 - </div> 495 495 + {{ $idx := index . 1 }} 496 496 + {{ $lastIdx := index . 2 }} 497 497 + {{ $root := index . 3 }} 498 498 + {{ $c := len $item.Comments }} 499 499 + <details class="relative ml-10 group/comments" open> 500 500 + <summary class="cursor-pointer list-none"> 501 501 + <div class="hidden group-open/comments:block absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center group/border z-4"> 502 502 + <div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-0.5 group-open/comments:bg-gray-200 dark:group-open/comments:bg-gray-700 group-hover/border:bg-gray-400 dark:group-hover/border:bg-gray-500 transition-colors"> </div> 503 503 + </div> 504 504 + <div class="group-open/comments:hidden block relative group/summary py-4"> 505 505 + <div class="absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center z-4"> 506 506 + <div class="absolute left-1/2 -translate-x-1/2 h-1/3 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700 group-hover/summary:bg-gray-400 dark:group-hover/summary:bg-gray-500 transition-colors"></div> 507 507 + </div> 508 508 + <span class="text-gray-500 dark:text-gray-400 text-sm group-hover/summary:text-gray-600 dark:group-hover/summary:text-gray-300 transition-colors flex items-center gap-2 -ml-2 relative"> 509 509 + {{ i "circle-plus" "size-4 z-5" }} 510 510 + expand {{ $c }} comment{{ if ne $c 1 }}s{{ end }} 511 511 + </span> 512 512 + </div> 513 513 + </summary> 514 514 + <div> 515 515 + {{ range $item.Comments }} 516 516 + {{ template "submissionComment" . }} 517 517 + {{ end }} 518 518 + </div> 519 519 + 520 520 + <div class="relative -ml-10"> 521 521 + {{ if eq $lastIdx $item.RoundNumber }} 522 522 + {{ block "mergeStatus" $root }} {{ end }} 523 523 + {{ block "resubmitStatus" $root }} {{ end }} 524 524 + {{ end }} 525 525 + </div> 526 526 + <div class="relative -ml-10 bg-gray-50 dark:bg-gray-900"> 527 527 + {{ if $root.LoggedInUser }} 528 528 + {{ template "repo/pulls/fragments/pullActions" 529 529 + (dict 530 530 + "LoggedInUser" $root.LoggedInUser 531 531 + "Pull" $root.Pull 532 532 + "RepoInfo" $root.RepoInfo 533 533 + "RoundNumber" $item.RoundNumber 534 534 + "MergeCheck" $root.MergeCheck 535 535 + "ResubmitCheck" $root.ResubmitCheck 536 536 + "BranchDeleteStatus" $root.BranchDeleteStatus 537 537 + "Stack" $root.Stack) }} 538 538 + {{ end }} 539 539 + </div> 540 540 + </details> 518 541 {{ end }} 519 542 520 543 {{ define "submissionComment" }} 521 544 <div id="comment-{{.ID}}" class="flex gap-2 -ml-4 py-4 w-full mx-auto"> 522 545 <!-- left column: profile picture --> 523 523 - <div class="flex-shrink-0"> 546 546 + <div class="flex-shrink-0 h-fit relative"> 524 547 <img 525 548 src="{{ tinyAvatar .OwnerDid }}" 526 549 alt="" 527 527 - class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900" 550 550 + class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-5" 528 551 /> 529 552 </div> 530 553 <!-- right column: name and body in two rows -->

+1 -1

input.css

··· 96 96 @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400; 97 97 } 98 98 textarea { 99 99 - @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400; 99 99 + @apply border border-gray-400 block rounded bg-gray-50 focus:outline-none focus:ring-1 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400; 100 100 } 101 101 details summary::-webkit-details-marker { 102 102 display: none;