Monorepo for Tangled tangled.org

appview: pages/templates/repo: make issues more consistent with pulls

- improve issue page icons and icon states
- make issue comments more like pull comments
- padding and spacing consistency across the board

Changed files
+29 -18
appview
pages
templates
fragments
repo
issues
+1 -1
appview/pages/templates/fragments/pullActions.html
··· 79 hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/reopen" 80 hx-swap="none" 81 class="btn p-2 flex items-center gap-2"> 82 - {{ i "circle-dot" "w-4 h-4" }} 83 <span>reopen</span> 84 </button> 85 {{ end }}
··· 79 hx-post="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/reopen" 80 hx-swap="none" 81 class="btn p-2 flex items-center gap-2"> 82 + {{ i "refresh-ccw-dot" "w-4 h-4" }} 83 <span>reopen</span> 84 </button> 85 {{ end }}
+28 -17
appview/pages/templates/repo/issues/issue.html
··· 44 {{ end }} 45 46 {{ define "repoAfter" }} 47 - {{ if gt (len .Comments) 0 }} 48 - <section id="comments" class="my-4 space-y-2 relative"> 49 {{ range $index, $comment := .Comments }} 50 <div 51 id="comment-{{ .CommentId }}" ··· 57 </div> 58 {{ end }} 59 </section> 60 - {{ end }} 61 62 {{ block "newComment" . }} {{ end }} 63 64 {{ end }} 65 66 {{ define "newComment" }} 67 {{ if .LoggedInUser }} 68 - 69 <form 70 id="comment-form" 71 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment" 72 hx-on::after-request="if(event.detail.successful) this.reset()" 73 > 74 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full md:w-3/5"> 75 - <div class="absolute left-8 -top-4 w-px h-4 bg-gray-300 dark:bg-gray-600"></div> 76 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400"> 77 {{ didOrHandle .LoggedInUser.Did .LoggedInUser.Handle }} 78 </div> ··· 84 onkeyup="updateCommentForm()" 85 ></textarea> 86 <div id="issue-comment"></div> 87 - 88 <div id="issue-action" class="error"></div> 89 </div> 90 ··· 100 {{ i "message-square-plus" "w-4 h-4" }} 101 comment 102 </button> 103 - 104 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }} 105 {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }} 106 {{ if and (or $isIssueAuthor $isRepoCollaborator) (eq .State "open") }} ··· 119 hx-trigger="click from:#close-button" 120 hx-disabled-elt="#close-with-comment" 121 hx-target="#issue-comment" 122 - hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : null}"> 123 </div> 124 <div 125 id="close-issue" 126 hx-disabled-elt="#close-issue" 127 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close" 128 - hx-trigger="click from:#close-button, revealed from:#close-with-comment" 129 hx-target="#issue-action" 130 - hx-swap="none"> 131 </div> 132 {{ else if and (or $isIssueAuthor $isRepoCollaborator) (eq .State "closed") }} 133 <button 134 type="button" ··· 136 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen" 137 hx-swap="none" 138 > 139 - {{ i "circle-dot" "w-4 h-4" }} 140 reopen 141 </button> 142 {{ end }} 143 - 144 <script> 145 function updateCommentForm() { 146 const textarea = document.getElementById('comment-textarea'); 147 const commentButton = document.getElementById('comment-button'); 148 const closeButton = document.getElementById('close-button'); 149 - 150 if (textarea.value.trim() !== '') { 151 commentButton.removeAttribute('disabled'); 152 } else { 153 commentButton.setAttribute('disabled', ''); 154 } 155 - 156 if (closeButton) { 157 if (textarea.value.trim() !== '') { 158 closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close with comment'; ··· 161 } 162 } 163 } 164 - 165 document.addEventListener('DOMContentLoaded', function() { 166 updateCommentForm(); 167 }); ··· 169 </div> 170 </form> 171 {{ else }} 172 - <div class="bg-white dark:bg-gray-800 dark:text-gray-400 rounded drop-shadow-sm px-6 py-4 mt-8"> 173 - <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div> 174 <a href="/login" class="underline">login</a> to join the discussion 175 </div> 176 {{ end }}
··· 44 {{ end }} 45 46 {{ define "repoAfter" }} 47 + <section id="comments" class="my-2 mt-2 space-y-2 relative"> 48 {{ range $index, $comment := .Comments }} 49 <div 50 id="comment-{{ .CommentId }}" ··· 56 </div> 57 {{ end }} 58 </section> 59 60 {{ block "newComment" . }} {{ end }} 61 62 {{ end }} 63 64 {{ define "newComment" }} 65 + {{ if gt (len .Comments) 0 }} 66 + <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div> 67 + {{ end }} 68 {{ if .LoggedInUser }} 69 <form 70 id="comment-form" 71 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment" 72 hx-on::after-request="if(event.detail.successful) this.reset()" 73 > 74 <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full md:w-3/5"> 75 <div class="text-sm pb-2 text-gray-500 dark:text-gray-400"> 76 {{ didOrHandle .LoggedInUser.Did .LoggedInUser.Handle }} 77 </div> ··· 83 onkeyup="updateCommentForm()" 84 ></textarea> 85 <div id="issue-comment"></div> 86 <div id="issue-action" class="error"></div> 87 </div> 88 ··· 98 {{ i "message-square-plus" "w-4 h-4" }} 99 comment 100 </button> 101 + 102 {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }} 103 {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }} 104 {{ if and (or $isIssueAuthor $isRepoCollaborator) (eq .State "open") }} ··· 117 hx-trigger="click from:#close-button" 118 hx-disabled-elt="#close-with-comment" 119 hx-target="#issue-comment" 120 + hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}" 121 + hx-swap="none" 122 + > 123 </div> 124 <div 125 id="close-issue" 126 hx-disabled-elt="#close-issue" 127 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close" 128 + hx-trigger="click from:#close-button" 129 hx-target="#issue-action" 130 + hx-swap="none" 131 + > 132 </div> 133 + <script> 134 + document.addEventListener('htmx:configRequest', function(evt) { 135 + if (evt.target.id === 'close-with-comment') { 136 + const commentText = document.getElementById('comment-textarea').value.trim(); 137 + if (commentText === '') { 138 + evt.detail.parameters = {}; 139 + evt.preventDefault(); 140 + } 141 + } 142 + }); 143 + </script> 144 {{ else if and (or $isIssueAuthor $isRepoCollaborator) (eq .State "closed") }} 145 <button 146 type="button" ··· 148 hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen" 149 hx-swap="none" 150 > 151 + {{ i "refresh-ccw-dot" "w-4 h-4" }} 152 reopen 153 </button> 154 {{ end }} 155 + 156 <script> 157 function updateCommentForm() { 158 const textarea = document.getElementById('comment-textarea'); 159 const commentButton = document.getElementById('comment-button'); 160 const closeButton = document.getElementById('close-button'); 161 + 162 if (textarea.value.trim() !== '') { 163 commentButton.removeAttribute('disabled'); 164 } else { 165 commentButton.setAttribute('disabled', ''); 166 } 167 + 168 if (closeButton) { 169 if (textarea.value.trim() !== '') { 170 closeButton.innerHTML = '{{ i "ban" "w-4 h-4" }} close with comment'; ··· 173 } 174 } 175 } 176 + 177 document.addEventListener('DOMContentLoaded', function() { 178 updateCommentForm(); 179 }); ··· 181 </div> 182 </form> 183 {{ else }} 184 + <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-fit"> 185 <a href="/login" class="underline">login</a> to join the discussion 186 </div> 187 {{ end }}