forked from
tangled.org/core
Monorepo for Tangled
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
+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
+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
}