Monorepo for Tangled
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

appview/pages: use new loading-button pattern in issue comments

Signed-off-by: oppiliappan <me@oppi.li>

+20 -35
+3 -2
appview/pages/templates/repo/issues/fragments/issueCommentHeader.html
··· 40 40 hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment/{{ .Comment.Id }}/edit" 41 41 hx-swap="outerHTML" 42 42 hx-target="#comment-body-{{.Comment.Id}}"> 43 - {{ i "pencil" "size-3" }} 43 + {{ i "pencil" "size-3 inline group-[.htmx-request]:hidden" }} 44 + {{ i "loader-circle" "size-3 animate-spin hidden group-[.htmx-request]:inline" }} 44 45 </a> 45 46 {{ end }} 46 47 ··· 52 53 hx-swap="outerHTML" 53 54 hx-target="#comment-body-{{.Comment.Id}}" 54 55 > 55 - {{ i "trash-2" "size-3" }} 56 + {{ i "trash-2" "size-3 inline group-[.htmx-request]:hidden" }} 56 57 {{ i "loader-circle" "size-3 animate-spin hidden group-[.htmx-request]:inline" }} 57 58 </a> 58 59 {{ end }}
+17 -33
appview/pages/templates/repo/issues/fragments/newComment.html
··· 4 4 id="comment-form" 5 5 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment" 6 6 hx-trigger="submit, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:#comment-textarea" 7 - hx-indicator="#comment-button" 8 7 hx-disabled-elt="#comment-form button" 9 8 hx-on::after-request="if(event.detail.successful) this.reset()" 9 + class="group/form" 10 10 > 11 11 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full"> 12 12 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400"> ··· 28 28 <button 29 29 id="comment-button" 30 30 type="submit" 31 - class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline group" 31 + class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline" 32 32 disabled 33 33 > 34 - {{ i "message-square-plus" "w-4 h-4" }} 34 + {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]/form:hidden" }} 35 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/form:inline" }} 35 36 comment 36 - {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 37 37 </button> 38 38 39 39 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }} ··· 43 43 <button 44 44 id="close-button" 45 45 type="button" 46 - class="btn flex items-center gap-2" 47 - hx-indicator="#close-spinner" 46 + class="btn flex items-center gap-2 group/close" 48 47 hx-trigger="click" 49 48 > 50 - {{ i "ban" "w-4 h-4" }} 51 - close 52 - <span id="close-spinner" class="group"> 53 - {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 54 - </span> 49 + {{ i "ban" "w-4 h-4 inline group-[.htmx-request]/close:hidden" }} 50 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/close:inline" }} 51 + <span id="close-button-text">close</span> 55 52 </button> 56 53 <div 57 54 id="close-with-comment" ··· 59 56 hx-trigger="click from:#close-button" 60 57 hx-disabled-elt="#close-with-comment" 61 58 hx-target="#issue-comment" 62 - hx-indicator="#close-spinner" 63 59 hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}" 64 60 hx-swap="none" 61 + hx-indicator="#close-button" 65 62 > 66 63 </div> 67 64 <div ··· 70 67 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close" 71 68 hx-trigger="click from:#close-button" 72 69 hx-target="#issue-action" 73 - hx-indicator="#close-spinner" 74 70 hx-swap="none" 71 + hx-indicator="#close-button" 75 72 > 76 73 </div> 77 74 <script> ··· 88 85 {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }} 89 86 <button 90 87 type="button" 91 - class="btn flex items-center gap-2" 88 + class="btn flex items-center gap-2 group" 92 89 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen" 93 - hx-indicator="#reopen-spinner" 94 90 hx-swap="none" 95 91 > 96 - {{ i "refresh-ccw-dot" "w-4 h-4" }} 92 + {{ i "refresh-ccw-dot" "w-4 h-4 inline group-[.htmx-request]:hidden" }} 93 + {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 97 94 reopen 98 - <span id="reopen-spinner" class="group"> 99 - {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 100 - </span> 101 95 </button> 102 96 {{ end }} 103 97 ··· 110 104 function updateCommentForm() { 111 105 const textarea = document.getElementById('comment-textarea'); 112 106 const commentButton = document.getElementById('comment-button'); 113 - const closeButton = document.getElementById('close-button'); 107 + const closeButtonText = document.getElementById('close-button-text'); 114 108 115 109 if (textarea.value.trim() !== '') { 116 110 commentButton.removeAttribute('disabled'); ··· 118 112 commentButton.setAttribute('disabled', ''); 119 113 } 120 114 121 - if (closeButton) { 115 + if (closeButtonText) { 122 116 if (textarea.value.trim() !== '') { 123 - closeButton.innerHTML = ` 124 - {{ i "ban" "w-4 h-4" }} 125 - <span>close with comment</span> 126 - <span id="close-spinner" class="group"> 127 - {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 128 - </span>`; 117 + closeButtonText.innerHTML = `close with comment`; 129 118 } else { 130 - closeButton.innerHTML = ` 131 - {{ i "ban" "w-4 h-4" }} 132 - <span>close</span> 133 - <span id="close-spinner" class="group"> 134 - {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 135 - </span>`; 119 + closeButtonText.innerHTML = `close`; 136 120 } 137 121 } 138 122 }