lewis.moe
Monorepo for Tangled
appview/pages/pulls: allow collapsing submission comments
works like reddit threads: you click on the vertical line connecting
each comment and it collapses the thread.
Signed-off-by: oppiliappan <me@oppi.li>
authored by
oppiliappan
and committed by
+1
-1
appview/pages/templates/repo/pulls/fragments/pullNewComment.html
+1
-1
appview/pages/templates/repo/pulls/fragments/pullNewComment.html
+53
-30
appview/pages/templates/repo/pulls/pull.html
+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
-
<details open id="bottomSheet" class="rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
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
-
<h2 class="">Submissions</h2>
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
-
<span class="inline group-open:hidden">{{ i "chevron-up" "size-4" }}</span>
168
-
<span class="hidden group-open:inline">{{ i "chevron-down" "size-4" }}</span>
167
+
<span class="inline group-open/panel:hidden">{{ i "chevron-up" "size-4" }}</span>
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
-
<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
+
<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
-
229
-
{{ if eq $lastIdx $item.RoundNumber }}
230
-
{{ block "mergeStatus" $root }} {{ end }}
231
-
{{ block "resubmitStatus" $root }} {{ end }}
232
-
{{ end }}
233
-
234
-
{{ if $root.LoggedInUser }}
235
-
{{ template "repo/pulls/fragments/pullActions"
236
-
(dict
237
-
"LoggedInUser" $root.LoggedInUser
238
-
"Pull" $root.Pull
239
-
"RepoInfo" $root.RepoInfo
240
-
"RoundNumber" $item.RoundNumber
241
-
"MergeCheck" $root.MergeCheck
242
-
"ResubmitCheck" $root.ResubmitCheck
243
-
"BranchDeleteStatus" $root.BranchDeleteStatus
244
-
"Stack" $root.Stack) }}
245
-
{{ end }}
246
228
</div>
247
229
{{ end }}
248
230
···
510
492
511
493
{{ define "submissionComments" }}
512
494
{{ $item := index . 0 }}
513
-
<div class="relative ml-10 border-l-2 border-gray-200 dark:border-gray-700">
514
-
{{ range $item.Comments }}
515
-
{{ template "submissionComment" . }}
516
-
{{ end }}
517
-
</div>
495
+
{{ $idx := index . 1 }}
496
+
{{ $lastIdx := index . 2 }}
497
+
{{ $root := index . 3 }}
498
+
{{ $c := len $item.Comments }}
499
+
<details class="relative ml-10 group/comments" open>
500
+
<summary class="cursor-pointer list-none">
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
+
<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
+
</div>
504
+
<div class="group-open/comments:hidden block relative group/summary py-4">
505
+
<div class="absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center z-4">
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
+
</div>
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
+
{{ i "circle-plus" "size-4 z-5" }}
510
+
expand {{ $c }} comment{{ if ne $c 1 }}s{{ end }}
511
+
</span>
512
+
</div>
513
+
</summary>
514
+
<div>
515
+
{{ range $item.Comments }}
516
+
{{ template "submissionComment" . }}
517
+
{{ end }}
518
+
</div>
519
+
520
+
<div class="relative -ml-10">
521
+
{{ if eq $lastIdx $item.RoundNumber }}
522
+
{{ block "mergeStatus" $root }} {{ end }}
523
+
{{ block "resubmitStatus" $root }} {{ end }}
524
+
{{ end }}
525
+
</div>
526
+
<div class="relative -ml-10 bg-gray-50 dark:bg-gray-900">
527
+
{{ if $root.LoggedInUser }}
528
+
{{ template "repo/pulls/fragments/pullActions"
529
+
(dict
530
+
"LoggedInUser" $root.LoggedInUser
531
+
"Pull" $root.Pull
532
+
"RepoInfo" $root.RepoInfo
533
+
"RoundNumber" $item.RoundNumber
534
+
"MergeCheck" $root.MergeCheck
535
+
"ResubmitCheck" $root.ResubmitCheck
536
+
"BranchDeleteStatus" $root.BranchDeleteStatus
537
+
"Stack" $root.Stack) }}
538
+
{{ end }}
539
+
</div>
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
-
<div class="flex-shrink-0">
546
+
<div class="flex-shrink-0 h-fit relative">
524
547
<img
525
548
src="{{ tinyAvatar .OwnerDid }}"
526
549
alt=""
527
-
class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900"
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
+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
-
@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
+
@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;