Gitea-John71/Gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-08-12 11:48:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(ui): restyle toasts (#38842)

Browse Source 
Restyle toasts, add success toast to match the alerts.

<img width="500" alt="Screenshot 2026-08-09 at 11 33 44"
src="https://github.com/user-attachments/assets/d36422b8-0030-41dd-8056-b2d10d86280d"
/>

Alternatively we could also tint to match the alerts, but I do prefer
untinted.

<img width="500" alt="Screenshot 2026-08-09 at 11 34 44"
src="https://github.com/user-attachments/assets/73fcfde4-618b-424f-9aa9-4ada5c2904f6"
/>

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
2026-08-09 22:17:28 +02:00
committed by GitHub
parent 85558c28fc
commit 7ac505ff0d
7 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/modules/toast.ts
+12 -8
View File
@@ -12,25 +12,25 @@ export type Toast = ReturnType<typeof StartToastifyInstance>;
type ToastLevels = {
[intent in Intent]: {
icon: SvgName,
background: string,
duration: number,
}
};
const levels: ToastLevels = {
info: {
success: {
icon: 'octicon-check',
background: 'var(--color-green)',
duration: 2500,
},
info: {
icon: 'octicon-info',
duration: 5000,
},
warning: {
icon: 'gitea-exclamation',
background: 'var(--color-orange)',
duration: -1, // requires dismissal to hide
},
error: {
icon: 'gitea-exclamation',
background: 'var(--color-red)',
duration: -1, // requires dismissal to hide
},
};
@@ -43,7 +43,7 @@ type ToastOpts = {
type ToastifyElement = HTMLElement & {_giteaToastifyInstance?: Toast};
/** See https://github.com/apvarun/toastify-js#api for options */
function showToast(message: string, level: Intent, {gravity, position, duration, useHtmlBody, preventDuplicates = true, ...other}: ToastOpts = {}): Toast | null {
function showToast(message: string, level: Intent = 'info', {gravity, position, duration, useHtmlBody, preventDuplicates = true, ...other}: ToastOpts = {}): Toast | null {
const parent = document.querySelector('.ui.dimmer.active') ?? document.body;
const duplicateKey = preventDuplicates ? (typeof preventDuplicates === 'string' ? preventDuplicates : `${level}-${message}`) : '';
@@ -59,7 +59,7 @@ function showToast(message: string, level: Intent, {gravity, position, duration,
}
}
const {icon, background, duration: levelDuration} = levels[level ?? 'info'];
const {icon, duration: levelDuration} = levels[level];
const bodyHtml = useHtmlBody ? message : htmlEscape(message);
const toast = Toastify({
selector: parent,
@@ -69,10 +69,10 @@ function showToast(message: string, level: Intent, {gravity, position, duration,
<button class='btn toast-close'>${svgRaw('octicon-x')}</button>
`,
escapeMarkup: false,
className: `toast-${level}`,
gravity: gravity ?? 'top',
position: position ?? 'center',
duration: duration ?? levelDuration,
style: {background},
...other,
});
@@ -84,6 +84,10 @@ function showToast(message: string, level: Intent, {gravity, position, duration,
return toast;
}
export function showSuccessToast(message: string, opts?: ToastOpts): Toast | null {
return showToast(message, 'success', opts);
}
export function showInfoToast(message: string, opts?: ToastOpts): Toast | null {
return showToast(message, 'info', opts);
}