Skip to content

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

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.

Sign up for GitHub

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

Merged
merged 9 commits into from
Feb 24, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8a4382b
improve
wxiaoguang Feb 20, 2023
649fa2d
Update web_src/js/features/repo-legacy.js
wxiaoguang Feb 20, 2023
8668a88
fix comment actions and menus
wxiaoguang Feb 21, 2023
6d1c734
Merge branch 'main' into improve-label-dropdown
wxiaoguang Feb 22, 2023
1bd96d3
do not reload window when there is no change
wxiaoguang Feb 22, 2023
d263120
reloadConfirmDraftComment
wxiaoguang Feb 22, 2023
ec0919e
Merge branch 'main' into improve-label-dropdown
wxiaoguang Feb 22, 2023
afef2c4
Update repo-legacy.js
wxiaoguang Feb 23, 2023
1f94a46
Merge branch 'main' into improve-label-dropdown
lunny Feb 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/add_reaction.tmpl
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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) {
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 •
edited
Loading

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.

I also proposed so (draft) as one approach.

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 •
edited
Loading

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
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