-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
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
Batch delete issue and improve tippy opts #25253
Changes from 2 commits
58015ba
cb30446
2768846
868d059
b1ddb8c
1f4463a
3d825d1
8960441
d00df2c
c45e233
627d58b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import $ from 'jquery'; | ||
import {svg} from '../../svg.js'; | ||
import {htmlEscape} from 'escape-goat'; | ||
|
||
export async function confirmModal(opts = {content: '', buttonColor: 'green'}) { | ||
return new Promise((resolve) => { | ||
const i18n = window.config.i18n; | ||
const $modal = $(` | ||
<div class="ui g-modal-confirm modal"> | ||
<div class="content">${htmlEscape(opts.content)}</div> | ||
<div class="actions"> | ||
<button class="ui basic cancel button">${svg('octicon-x')} ${i18n.modal_cancel}</button> | ||
wxiaoguang marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<button class="ui ${opts.buttonColor || 'green'} ok button">${svg('octicon-check')} ${i18n.modal_confirm}</button> | ||
wxiaoguang marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</div> | ||
</div> | ||
`); | ||
|
||
$modal.appendTo(document.body); | ||
$modal.modal({ | ||
onApprove() { | ||
resolve(true); | ||
}, | ||
onHidden() { | ||
$modal.remove(); | ||
resolve(false); | ||
}, | ||
}).modal('show'); | ||
}); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,11 +3,7 @@ import tippy from 'tippy.js'; | |
const visibleInstances = new Set(); | ||
|
||
export function createTippy(target, opts = {}) { | ||
const {role, content, onHide: optsOnHide, onDestroy: optsOnDestroy, onShow: optOnShow} = opts; | ||
delete opts.onHide; | ||
delete opts.onDestroy; | ||
delete opts.onShow; | ||
|
||
const {onHide, onShow, onDestroy, ...other} = opts; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Would also destructure There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can even shorten it by placing the destructure in the function definition: export function createTippy(target, {onHide, onShow, onDestroy, role, content, ...other} = {}) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
IMO the code would be more complex for using "role" later. Could you try to improve it by your idea? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Well, personally I dislike such syntax. But if you prefer, no block from my side. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Definitely prefer that, it's most readable to me. Don't have time right now, but I can do a few modifications later. |
||
const instance = tippy(target, { | ||
appendTo: document.body, | ||
animation: false, | ||
|
@@ -18,11 +14,11 @@ export function createTippy(target, opts = {}) { | |
maxWidth: 500, // increase over default 350px | ||
onHide: (instance) => { | ||
visibleInstances.delete(instance); | ||
return optsOnHide?.(instance); | ||
return onHide?.(instance); | ||
}, | ||
onDestroy: (instance) => { | ||
visibleInstances.delete(instance); | ||
return optsOnDestroy?.(instance); | ||
return onDestroy?.(instance); | ||
}, | ||
onShow: (instance) => { | ||
// hide other tooltip instances so only one tooltip shows at a time | ||
|
@@ -32,19 +28,19 @@ export function createTippy(target, opts = {}) { | |
} | ||
} | ||
visibleInstances.add(instance); | ||
return optOnShow?.(instance); | ||
return onShow?.(instance); | ||
}, | ||
arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`, | ||
role: 'menu', // HTML role attribute, only tooltips should use "tooltip" | ||
theme: role || 'menu', // CSS theme, we support either "tooltip" or "menu" | ||
...opts, | ||
theme: other.role || 'menu', // CSS theme, we support either "tooltip" or "menu" | ||
...other, | ||
}); | ||
|
||
// for popups where content refers to a DOM element, we use the 'tippy-target' class | ||
// to initially hide the content, now we can remove it as the content has been removed | ||
// from the DOM by tippy | ||
if (content instanceof Element) { | ||
content.classList.remove('tippy-target'); | ||
if (other.content instanceof Element) { | ||
other.content.classList.remove('tippy-target'); | ||
} | ||
|
||
return instance; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would prefer something more generic:
delete_all_confirm = Delete all items?
And likely move it to top-level translation.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done in 8960441
But I still do not think it is a generic string.
And the "generic" problem is: without careful maintenance, it will become more and more messy. For example, why
rerun_all = Re-run all jobs
appears in the global scope? It isn't generic indeed.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If a translation could reasonably appear in more than 1 scope, it should be global, but I guess the one you posted is likely to be single-use.
Overall, I think we should just get rid of scopes altogether in the translation, removing all duplicates in the process. Those scope have no benefit except encourage duplication.