forgejo/web_src/js/modules/toast.js

61 lines
1.6 KiB
JavaScript
Raw Normal View History

import {htmlEscape} from 'escape-goat';
import {svg} from '../svg.js';
Use frontend fetch for branch dropdown component (#25719) - Send request to get branch/tag list, use loading icon when waiting for response. - Only fetch when the first time branch/tag list shows. - For backend, removed assignment to `ctx.Data["Branches"]` and `ctx.Data["Tags"]` from `context/repo.go` and passed these data wherever needed. - Changed some `v-if` to `v-show` and used native `svg` as mentioned in https://github.com/go-gitea/gitea/pull/25719#issuecomment-1631712757 to improve perfomance when there are a lot of branches. - Places Used the dropdown component: Repo Home Page <img width="1429" alt="Screen Shot 2023-07-06 at 12 17 51" src="https://github.com/go-gitea/gitea/assets/17645053/6accc7b6-8d37-4e88-ae1a-bd2b3b927ea0"> Commits Page <img width="1431" alt="Screen Shot 2023-07-06 at 12 18 34" src="https://github.com/go-gitea/gitea/assets/17645053/2d0bf306-d1e2-45a8-a784-bc424879f537"> Specific commit -> operations -> cherry-pick <img width="758" alt="Screen Shot 2023-07-06 at 12 23 28" src="https://github.com/go-gitea/gitea/assets/17645053/1e557948-3881-4e45-a625-8ef36d45ae2d"> Release Page <img width="1433" alt="Screen Shot 2023-07-06 at 12 25 05" src="https://github.com/go-gitea/gitea/assets/17645053/3ec82af1-15a4-4162-a50b-04a9502161bb"> - Demo https://github.com/go-gitea/gitea/assets/17645053/d45d266b-3eb0-465a-82f9-57f78dc5f9f3 - Note: UI of dropdown menu could be improved in another PR as it should apply to more dropdown menus. Fix #14180 --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-07-21 13:20:04 +02:00
import Toastify from 'toastify-js';
const levels = {
info: {
icon: 'octicon-check',
background: 'var(--color-green)',
duration: 2500,
},
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
},
};
// See https://github.com/apvarun/toastify-js#api for options
async function showToast(message, level, {gravity, position, duration, ...other} = {}) {
if (!message) return;
const {icon, background, duration: levelDuration} = levels[level ?? 'info'];
const toast = Toastify({
text: `
<div class='toast-icon'>${svg(icon)}</div>
<div class='toast-body'>${htmlEscape(message)}</div>
<button class='toast-close'>${svg('octicon-x')}</button>
`,
escapeMarkup: false,
gravity: gravity ?? 'top',
position: position ?? 'center',
duration: duration ?? levelDuration,
style: {background},
...other,
});
toast.showToast();
toast.toastElement.querySelector('.toast-close').addEventListener('click', () => {
toast.removeElement(toast.toastElement);
});
}
export async function showInfoToast(message, opts) {
return await showToast(message, 'info', opts);
}
export async function showWarningToast(message, opts) {
return await showToast(message, 'warning', opts);
}
export async function showErrorToast(message, opts) {
return await showToast(message, 'error', opts);
}