mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-29 10:57:44 +09:00 
			
		
		
		
	Fix issue comment form and quick-submit (#30623)
1. Rewrite initGlobalEnterQuickSubmit (by the way, remove jQuery) 2. Fix issue comment form layout
This commit is contained in:
		| @@ -21,7 +21,7 @@ | ||||
| 				<button name="btn">submit get</button> | ||||
| 			</form> | ||||
| 			<form method="post" action="fetch-action-test?k=1" class="form-fetch-action"> | ||||
| 				<div><textarea name="text" rows="3" class="js-quick-submit"></textarea></div> | ||||
| 				<div><textarea name="text" rows="3"></textarea></div> | ||||
| 				<div><label><input name="check" type="checkbox"> check</label></div> | ||||
| 				<div><button name="btn">submit post</button></div> | ||||
| 			</form> | ||||
|   | ||||
| @@ -85,32 +85,34 @@ | ||||
| 						{{ctx.AvatarUtils.Avatar .SignedUser 40}} | ||||
| 					</a> | ||||
| 					<div class="content"> | ||||
| 						<form class="ui segment form form-fetch-action" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post"> | ||||
| 							{{template "repo/issue/comment_tab" .}} | ||||
| 							{{.CsrfTokenHtml}} | ||||
| 							<div class="field footer"> | ||||
| 								<div class="text right"> | ||||
| 									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}} | ||||
| 										{{if .Issue.IsClosed}} | ||||
| 											<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen"> | ||||
| 												{{ctx.Locale.Tr "repo.issues.reopen_issue"}} | ||||
| 											</button> | ||||
| 										{{else}} | ||||
| 											{{$closeTranslationKey := "repo.issues.close"}} | ||||
| 											{{if .Issue.IsPull}} | ||||
| 												{{$closeTranslationKey = "repo.pulls.close"}} | ||||
| 						<div class="ui segment"> | ||||
| 							<form class="ui form form-fetch-action" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post"> | ||||
| 								{{template "repo/issue/comment_tab" .}} | ||||
| 								{{.CsrfTokenHtml}} | ||||
| 								<div class="field footer"> | ||||
| 									<div class="text right"> | ||||
| 										{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}} | ||||
| 											{{if .Issue.IsClosed}} | ||||
| 												<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen"> | ||||
| 													{{ctx.Locale.Tr "repo.issues.reopen_issue"}} | ||||
| 												</button> | ||||
| 											{{else}} | ||||
| 												{{$closeTranslationKey := "repo.issues.close"}} | ||||
| 												{{if .Issue.IsPull}} | ||||
| 													{{$closeTranslationKey = "repo.pulls.close"}} | ||||
| 												{{end}} | ||||
| 												<button id="status-button" class="ui red basic button" data-status="{{ctx.Locale.Tr $closeTranslationKey}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.close_comment_issue"}}" name="status" value="close"> | ||||
| 													{{ctx.Locale.Tr $closeTranslationKey}} | ||||
| 												</button> | ||||
| 											{{end}} | ||||
| 											<button id="status-button" class="ui red basic button" data-status="{{ctx.Locale.Tr $closeTranslationKey}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.close_comment_issue"}}" name="status" value="close"> | ||||
| 												{{ctx.Locale.Tr $closeTranslationKey}} | ||||
| 											</button> | ||||
| 										{{end}} | ||||
| 									{{end}} | ||||
| 									<button class="ui primary button"> | ||||
| 										{{ctx.Locale.Tr "repo.issues.create_comment"}} | ||||
| 									</button> | ||||
| 										<button class="ui primary button"> | ||||
| 											{{ctx.Locale.Tr "repo.issues.create_comment"}} | ||||
| 										</button> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 						</form> | ||||
| 							</form> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</div> | ||||
| 				{{else if .Repository.IsArchived}} | ||||
|   | ||||
| @@ -45,7 +45,7 @@ Template Attributes: | ||||
| 			</div> | ||||
| 		</markdown-toolbar> | ||||
| 		<text-expander keys=": @" suffix=""> | ||||
| 			<textarea class="markdown-text-editor js-quick-submit"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea> | ||||
| 			<textarea class="markdown-text-editor"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea> | ||||
| 		</text-expander> | ||||
| 		<script> | ||||
| 			if (localStorage?.getItem('markdown-editor-monospace') === 'true') { | ||||
|   | ||||
| @@ -16,7 +16,7 @@ | ||||
| 			</div> | ||||
| 			<div class="field {{if .Err_Content}}error{{end}}"> | ||||
| 				<label for="ssh-key-content">{{ctx.Locale.Tr "settings.key_content"}}</label> | ||||
| 				<textarea id="ssh-key-content" name="content" class="js-quick-submit" placeholder="{{ctx.Locale.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea> | ||||
| 				<textarea id="ssh-key-content" name="content" placeholder="{{ctx.Locale.Tr "settings.key_content_ssh_placeholder"}}" required>{{.content}}</textarea> | ||||
| 			</div> | ||||
| 			<input name="type" type="hidden" value="ssh"> | ||||
| 			<button class="ui primary button"> | ||||
| @@ -84,7 +84,7 @@ | ||||
| 						</div> | ||||
| 						<div class="field"> | ||||
| 							<label for="signature">{{ctx.Locale.Tr "settings.ssh_token_signature"}}</label> | ||||
| 							<textarea id="ssh-key-signature" name="signature" class="js-quick-submit" placeholder="{{ctx.Locale.Tr "settings.key_signature_ssh_placeholder"}}" required>{{$.signature}}</textarea> | ||||
| 							<textarea id="ssh-key-signature" name="signature" placeholder="{{ctx.Locale.Tr "settings.key_signature_ssh_placeholder"}}" required>{{$.signature}}</textarea> | ||||
| 						</div> | ||||
| 						<input name="type" type="hidden" value="verify_ssh"> | ||||
| 						<button class="ui primary button"> | ||||
|   | ||||
| @@ -1080,8 +1080,8 @@ td .commit-summary { | ||||
|   clear: none; | ||||
| } | ||||
|  | ||||
| .repository .comment.form .content .form::before, | ||||
| .repository .comment.form .content .form::after { | ||||
| .repository .comment.form .content .segment::before, | ||||
| .repository .comment.form .content .segment::after { | ||||
|   right: 100%; | ||||
|   top: 20px; | ||||
|   border: solid transparent; | ||||
| @@ -1092,13 +1092,13 @@ td .commit-summary { | ||||
|   pointer-events: none; | ||||
| } | ||||
|  | ||||
| .repository .comment.form .content .form::before { | ||||
| .repository .comment.form .content .segment::before { | ||||
|   border-right-color: var(--color-secondary); | ||||
|   border-width: 9px; | ||||
|   margin-top: -9px; | ||||
| } | ||||
|  | ||||
| .repository .comment.form .content .form::after { | ||||
| .repository .comment.form .content .segment::after { | ||||
|   border-right-color: var(--color-box-body); | ||||
|   border-width: 8px; | ||||
|   margin-top: -8px; | ||||
|   | ||||
| @@ -46,10 +46,11 @@ export function initFootLanguageMenu() { | ||||
| } | ||||
|  | ||||
| export function initGlobalEnterQuickSubmit() { | ||||
|   $(document).on('keydown', '.js-quick-submit', (e) => { | ||||
|     if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter')) { | ||||
|   document.addEventListener('keydown', (e) => { | ||||
|     const isQuickSubmitEnter = ((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter'); | ||||
|     if (isQuickSubmitEnter && e.target.matches('textarea')) { | ||||
|       e.preventDefault(); | ||||
|       handleGlobalEnterQuickSubmit(e.target); | ||||
|       return false; | ||||
|     } | ||||
|   }); | ||||
| } | ||||
|   | ||||
| @@ -9,9 +9,5 @@ export function handleGlobalEnterQuickSubmit(target) { | ||||
|     // here use the event to trigger the submit event (instead of calling `submit()` method directly) | ||||
|     // otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog | ||||
|     form.dispatchEvent(new SubmitEvent('submit', {bubbles: true, cancelable: true})); | ||||
|   } else { | ||||
|     // if no form, then the editor is for an AJAX request, dispatch an event to the target, let the target's event handler to do the AJAX request. | ||||
|     // the 'ce-' prefix means this is a CustomEvent | ||||
|     target.dispatchEvent(new CustomEvent('ce-quick-submit', {bubbles: true})); | ||||
|   } | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user