2f0e79e639
- 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>
61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import {htmlEscape} from 'escape-goat';
|
|
import {svg} from '../svg.js';
|
|
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);
|
|
}
|