Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make issue meta dropdown support Enter, confirm before reloading #23014

Merged
merged 9 commits into from
Feb 24, 2023
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/add_reaction.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="header">{{.ctx.locale.Tr "repo.pick_reaction"}}</div>
<div class="divider"></div>
{{range $value := AllowedReactions}}
<div class="item reaction tooltip" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
<a class="item reaction tooltip" data-content="{{$value}}">{{ReactionToEmoji $value}}</a>
{{end}}
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions templates/repo/issue/view_content/context_menu.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@
{{else}}
{{$referenceUrl = Printf "%s/files#%s" .ctx.Issue.Link .item.HashTag}}
{{end}}
<div class="item context" data-clipboard-text-type="url" data-clipboard-text="{{AppSubUrl}}{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.copy_link"}}</div>
<div class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.HashTag}}-raw">{{.ctx.locale.Tr "repo.issues.context.quote_reply"}}</div>
<a class="item context" data-clipboard-text-type="url" data-clipboard-text="{{AppSubUrl}}{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.copy_link"}}</a>
<a class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.HashTag}}-raw">{{.ctx.locale.Tr "repo.issues.context.quote_reply"}}</a>
{{if not .ctx.UnitIssuesGlobalDisabled}}
<div class="item context reference-issue" data-target="{{.item.HashTag}}-raw" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-poster-username="{{.item.Poster.Name}}" data-reference="{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.reference_issue"}}</div>
<a class="item context reference-issue" data-target="{{.item.HashTag}}-raw" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-poster-username="{{.item.Poster.Name}}" data-reference="{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.reference_issue"}}</a>
{{end}}
{{if or .ctx.Permission.IsAdmin .IsCommentPoster .ctx.HasIssuesOrPullsWritePermission}}
<div class="divider"></div>
<div class="item context edit-content">{{.ctx.locale.Tr "repo.issues.context.edit"}}</div>
<a class="item context edit-content">{{.ctx.locale.Tr "repo.issues.context.edit"}}</a>
{{if .delete}}
<div class="item context delete-comment" data-comment-id={{.item.HashTag}} data-url="{{.ctx.RepoLink}}/comments/{{.item.ID}}/delete" data-locale="{{.ctx.locale.Tr "repo.issues.delete_comment_confirm"}}">{{.ctx.locale.Tr "repo.issues.context.delete"}}</div>
<a class="item context delete-comment" data-comment-id={{.item.HashTag}} data-url="{{.ctx.RepoLink}}/comments/{{.item.ID}}/delete" data-locale="{{.ctx.locale.Tr "repo.issues.delete_comment_confirm"}}">{{.ctx.locale.Tr "repo.issues.context.delete"}}</a>
{{end}}
{{end}}
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/sidebar.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}">
</div>
{{end}}
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_labels"}}</div>
<a class="no-select item" href="#">{{.locale.Tr "repo.issues.new.clear_labels"}}</a>
{{if or .Labels .OrgLabels}}
{{$previousExclusiveScope := "_no_scope"}}
{{range .Labels}}
Expand Down
3 changes: 2 additions & 1 deletion web_src/js/features/aria.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,8 @@ function attachOneDropdownAria($dropdown) {
$dropdown.on('keydown', (e) => {
// here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler
if (e.key === 'Enter') {
const $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value'));
let $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value'));
if (!$item) $item = $menu.find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item
// if the selected item is clickable, then trigger the click event. in the future there could be a special CSS class for it.
if ($item && $item.is('a')) $item[0].click();
}
Expand Down
49 changes: 37 additions & 12 deletions web_src/js/features/repo-legacy.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,26 @@ import {hideElem, showElem} from '../utils/dom.js';

const {csrfToken} = window.config;

// if there are draft comments (more than 20 chars), confirm before reloading, to avoid losing comments
function reloadConfirmDraftComment() {
const commentTextareas = [
document.querySelector('.edit-content-zone:not(.gt-hidden) textarea'),
document.querySelector('.edit_area'),
];
for (const textarea of commentTextareas) {
// Most users won't feel too sad if they lose a comment with 10 or 20 chars, they can re-type these in seconds.
// But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy.
if (textarea && textarea.value.trim().length > 20) {
lunny marked this conversation as resolved.
Show resolved Hide resolved
textarea.parentElement.scrollIntoView();
if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) {
return;
}
break;
}
}
window.location.reload();
Copy link
Member

@silverwind silverwind Mar 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm of the opinion that it's better to just save unsubmitted data into sessionStorage or localStorage and subsequently restore it on page load, but hooking onbeforeunload would also have been an improvement over this method because it works even when the user presses F5 for example.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but hooking onbeforeunload would also have been an improvement over

Before SimpleMDE/EasyMDE, there is a global $.areYourSure confirm (using onbeforeunload) for comment textarea. Everything was just "fine".

However, $.areYourSure doesn't work well with SimpleMDE/EasyMDE editor, so the situation became what you see now.

Copy link
Member

@silverwind silverwind Mar 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should remove this jquery-are-you-sure module and implement it on our own to be more flexible. It also has a license issue.

Ideally I would this to also not use window.confirm, but a actual styled confirmation dialog (maybe not fomantic).

}

export function initRepoCommentForm() {
const $commentForm = $('.comment.form');
if ($commentForm.length === 0) {
Expand Down Expand Up @@ -86,22 +106,27 @@ export function initRepoCommentForm() {
let hasUpdateAction = $listMenu.data('action') === 'update';
const items = {};

$(`.${selector}`).dropdown('setting', 'onHide', () => {
hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var
if (hasUpdateAction) {
// TODO: Add batch functionality and make this 1 network request.
(async function() {
for (const [elementId, item] of Object.entries(items)) {
$(`.${selector}`).dropdown({
'action': 'nothing', // do not hide the menu if user presses Enter
wxiaoguang marked this conversation as resolved.
Show resolved Hide resolved
fullTextSearch: 'exact',
async onHide() {
hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var
if (hasUpdateAction) {
// TODO: Add batch functionality and make this 1 network request.
const itemEntries = Object.entries(items);
for (const [elementId, item] of itemEntries) {
await updateIssuesMeta(
item['update-url'],
item.action,
item['issue-id'],
elementId,
);
}
window.location.reload();
})();
}
if (itemEntries.length) {
reloadConfirmDraftComment();
}
}
},
});

$listMenu.find('.item:not(.no-select)').on('click', function (e) {
Expand Down Expand Up @@ -196,7 +221,7 @@ export function initRepoCommentForm() {
'clear',
$listMenu.data('issue-id'),
'',
).then(() => window.location.reload());
).then(reloadConfirmDraftComment);
}

$(this).parent().find('.item').each(function () {
Expand Down Expand Up @@ -239,7 +264,7 @@ export function initRepoCommentForm() {
'',
$menu.data('issue-id'),
$(this).data('id'),
).then(() => window.location.reload());
).then(reloadConfirmDraftComment);
}

let icon = '';
Expand Down Expand Up @@ -272,7 +297,7 @@ export function initRepoCommentForm() {
'',
$menu.data('issue-id'),
$(this).data('id'),
).then(() => window.location.reload());
).then(reloadConfirmDraftComment);
}

$list.find('.selected').html('');
Expand Down