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:
parent
e865de1e9d
commit
f95622cddc
@ -21,7 +21,7 @@
|
|||||||
<button name="btn">submit get</button>
|
<button name="btn">submit get</button>
|
||||||
</form>
|
</form>
|
||||||
<form method="post" action="fetch-action-test?k=1" class="form-fetch-action">
|
<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><label><input name="check" type="checkbox"> check</label></div>
|
||||||
<div><button name="btn">submit post</button></div>
|
<div><button name="btn">submit post</button></div>
|
||||||
</form>
|
</form>
|
||||||
|
@ -85,32 +85,34 @@
|
|||||||
{{ctx.AvatarUtils.Avatar .SignedUser 40}}
|
{{ctx.AvatarUtils.Avatar .SignedUser 40}}
|
||||||
</a>
|
</a>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<form class="ui segment form form-fetch-action" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
|
<div class="ui segment">
|
||||||
{{template "repo/issue/comment_tab" .}}
|
<form class="ui form form-fetch-action" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
|
||||||
{{.CsrfTokenHtml}}
|
{{template "repo/issue/comment_tab" .}}
|
||||||
<div class="field footer">
|
{{.CsrfTokenHtml}}
|
||||||
<div class="text right">
|
<div class="field footer">
|
||||||
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
|
<div class="text right">
|
||||||
{{if .Issue.IsClosed}}
|
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
|
||||||
<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">
|
{{if .Issue.IsClosed}}
|
||||||
{{ctx.Locale.Tr "repo.issues.reopen_issue"}}
|
<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">
|
||||||
</button>
|
{{ctx.Locale.Tr "repo.issues.reopen_issue"}}
|
||||||
{{else}}
|
</button>
|
||||||
{{$closeTranslationKey := "repo.issues.close"}}
|
{{else}}
|
||||||
{{if .Issue.IsPull}}
|
{{$closeTranslationKey := "repo.issues.close"}}
|
||||||
{{$closeTranslationKey = "repo.pulls.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}}
|
{{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}}
|
||||||
{{end}}
|
<button class="ui primary button">
|
||||||
<button class="ui primary button">
|
{{ctx.Locale.Tr "repo.issues.create_comment"}}
|
||||||
{{ctx.Locale.Tr "repo.issues.create_comment"}}
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{else if .Repository.IsArchived}}
|
{{else if .Repository.IsArchived}}
|
||||||
|
@ -45,7 +45,7 @@ Template Attributes:
|
|||||||
</div>
|
</div>
|
||||||
</markdown-toolbar>
|
</markdown-toolbar>
|
||||||
<text-expander keys=": @" suffix="">
|
<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>
|
</text-expander>
|
||||||
<script>
|
<script>
|
||||||
if (localStorage?.getItem('markdown-editor-monospace') === 'true') {
|
if (localStorage?.getItem('markdown-editor-monospace') === 'true') {
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="field {{if .Err_Content}}error{{end}}">
|
<div class="field {{if .Err_Content}}error{{end}}">
|
||||||
<label for="ssh-key-content">{{ctx.Locale.Tr "settings.key_content"}}</label>
|
<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>
|
</div>
|
||||||
<input name="type" type="hidden" value="ssh">
|
<input name="type" type="hidden" value="ssh">
|
||||||
<button class="ui primary button">
|
<button class="ui primary button">
|
||||||
@ -84,7 +84,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="signature">{{ctx.Locale.Tr "settings.ssh_token_signature"}}</label>
|
<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>
|
</div>
|
||||||
<input name="type" type="hidden" value="verify_ssh">
|
<input name="type" type="hidden" value="verify_ssh">
|
||||||
<button class="ui primary button">
|
<button class="ui primary button">
|
||||||
|
@ -1080,8 +1080,8 @@ td .commit-summary {
|
|||||||
clear: none;
|
clear: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository .comment.form .content .form::before,
|
.repository .comment.form .content .segment::before,
|
||||||
.repository .comment.form .content .form::after {
|
.repository .comment.form .content .segment::after {
|
||||||
right: 100%;
|
right: 100%;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
@ -1092,13 +1092,13 @@ td .commit-summary {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository .comment.form .content .form::before {
|
.repository .comment.form .content .segment::before {
|
||||||
border-right-color: var(--color-secondary);
|
border-right-color: var(--color-secondary);
|
||||||
border-width: 9px;
|
border-width: 9px;
|
||||||
margin-top: -9px;
|
margin-top: -9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repository .comment.form .content .form::after {
|
.repository .comment.form .content .segment::after {
|
||||||
border-right-color: var(--color-box-body);
|
border-right-color: var(--color-box-body);
|
||||||
border-width: 8px;
|
border-width: 8px;
|
||||||
margin-top: -8px;
|
margin-top: -8px;
|
||||||
|
@ -46,10 +46,11 @@ export function initFootLanguageMenu() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function initGlobalEnterQuickSubmit() {
|
export function initGlobalEnterQuickSubmit() {
|
||||||
$(document).on('keydown', '.js-quick-submit', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
if (((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter')) {
|
const isQuickSubmitEnter = ((e.ctrlKey && !e.altKey) || e.metaKey) && (e.key === 'Enter');
|
||||||
|
if (isQuickSubmitEnter && e.target.matches('textarea')) {
|
||||||
|
e.preventDefault();
|
||||||
handleGlobalEnterQuickSubmit(e.target);
|
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)
|
// 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
|
// 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}));
|
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}));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user