appview/pages: use same reactions template for all UI #946

with the introduction of const function in funcmap, we can make reusable template for all reaction UI.

Signed-off-by: Seongmin Lee git@boltless.me

+60 -67

4 changed files

Diff round #3

expand all

unified split

appview

pages

templates

repo

fragments

reactions.html

reactionsPopUp.html

issues

issue.html

pulls

fragments

pullHeader.html

+50

appview/pages/templates/repo/fragments/reactions.html

··· 1 + {{ define "repo/fragments/reactions" }} 2 + <div class="flex flex-wrap items-center gap-2"> 3 + {{- $reactions := .Reactions -}} 4 + {{- $userReacted := .UserReacted -}} 5 + {{- $threadAt := .ThreadAt -}} 6 + 7 + {{ template "reactionsPopup" }} 8 + {{ range $kind := const.OrderedReactionKinds }} 9 + {{ $reactionData := index $reactions $kind }} 10 + {{ template "repo/fragments/reaction" 11 + (dict 12 + "Kind" $kind 13 + "Count" $reactionData.Count 14 + "IsReacted" (index $userReacted $kind) 15 + "ThreadAt" $threadAt 16 + "Users" $reactionData.Users) }} 17 + {{ end }} 18 + </div> 19 + {{ end }} 20 + 21 + {{ define "reactionsPopup" }} 22 + <details 23 + id="reactionsPopUp" 24 + class="relative inline-block" 25 + > 26 + <summary 27 + class="flex justify-center items-center min-w-8 min-h-8 rounded border border-gray-200 dark:border-gray-700 28 + hover:bg-gray-50 29 + hover:border-gray-300 30 + dark:hover:bg-gray-700 31 + dark:hover:border-gray-600 32 + cursor-pointer list-none" 33 + > 34 + {{ i "smile" "size-4" }} 35 + </summary> 36 + <div 37 + class="absolute flex left-0 z-10 mt-4 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg" 38 + > 39 + {{ range $kind := const.OrderedReactionKinds }} 40 + <button 41 + id="reactBtn-{{ $kind }}" 42 + class="size-12 hover:bg-gray-100 dark:hover:bg-gray-700" 43 + hx-on:click="this.parentElement.parentElement.removeAttribute('open')" 44 + > 45 + {{ $kind }} 46 + </button> 47 + {{ end }} 48 + </div> 49 + </details> 50 + {{ end }}

-30

appview/pages/templates/repo/fragments/reactionsPopUp.html

··· 1 - {{ define "repo/fragments/reactionsPopUp" }} 2 - <details 3 - id="reactionsPopUp" 4 - class="relative inline-block" 5 - > 6 - <summary 7 - class="flex justify-center items-center min-w-8 min-h-8 rounded border border-gray-200 dark:border-gray-700 8 - hover:bg-gray-50 9 - hover:border-gray-300 10 - dark:hover:bg-gray-700 11 - dark:hover:border-gray-600 12 - cursor-pointer list-none" 13 - > 14 - {{ i "smile" "size-4" }} 15 - </summary> 16 - <div 17 - class="absolute flex left-0 z-10 mt-4 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg" 18 - > 19 - {{ range $kind := . }} 20 - <button 21 - id="reactBtn-{{ $kind }}" 22 - class="size-12 hover:bg-gray-100 dark:hover:bg-gray-700" 23 - hx-on:click="this.parentElement.parentElement.removeAttribute('open')" 24 - > 25 - {{ $kind }} 26 - </button> 27 - {{ end }} 28 - </div> 29 - </details> 30 - {{ end }}

+5 -21

appview/pages/templates/repo/issues/issue.html

··· 35 35 {{ if .Issue.Body }} 36 36 <article id="body" class="mt-4 prose dark:prose-invert">{{ .Issue.Body | markdown }}</article> 37 37 {{ end }} 38 - <div class="flex flex-wrap gap-2 items-stretch mt-4"> 39 - {{ template "issueReactions" . }} 38 + <div class="mt-4"> 39 + {{ template "repo/fragments/reactions" 40 + (dict "Reactions" .Reactions 41 + "UserReacted" .UserReacted 42 + "ThreadAt" .Issue.AtUri) }} 40 43 </div> 41 44 </section> 42 45 {{ end }} ··· 107 110 </a> 108 111 {{ end }} 109 112 110 - {{ define "issueReactions" }} 111 - <div class="flex items-center gap-2"> 112 - {{ template "repo/fragments/reactionsPopUp" const.OrderedReactionKinds }} 113 - {{ range $kind := const.OrderedReactionKinds }} 114 - {{ $reactionData := index $.Reactions $kind }} 115 - {{ 116 - template "repo/fragments/reaction" 117 - (dict 118 - "Kind" $kind 119 - "Count" $reactionData.Count 120 - "IsReacted" (index $.UserReacted $kind) 121 - "ThreadAt" $.Issue.AtUri 122 - "Users" $reactionData.Users) 123 - }} 124 - {{ end }} 125 - </div> 126 - {{ end }} 127 - 128 - 129 113 {{ define "repoAfter" }} 130 114 <div class="flex flex-col gap-4 mt-4"> 131 115 {{

+5 -16

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

··· 63 63 </article> 64 64 {{ end }} 65 65 66 - {{ with const.OrderedReactionKinds }} 67 - <div class="flex items-center gap-2 mt-2"> 68 - {{ template "repo/fragments/reactionsPopUp" . }} 69 - {{ range $kind := . }} 70 - {{ $reactionData := index $.Reactions $kind }} 71 - {{ 72 - template "repo/fragments/reaction" 73 - (dict 74 - "Kind" $kind 75 - "Count" $reactionData.Count 76 - "IsReacted" (index $.UserReacted $kind) 77 - "ThreadAt" $.Pull.AtUri 78 - "Users" $reactionData.Users) 79 - }} 80 - {{ end }} 66 + <div class="mt-2"> 67 + {{ template "repo/fragments/reactions" 68 + (dict "Reactions" .Reactions 69 + "UserReacted" .UserReacted 70 + "ThreadAt" .Pull.AtUri) }} 81 71 </div> 82 - {{ end }} 83 72 </section> 84 73 85 74