mirror of
https://github.com/go-gitea/gitea
synced 2024-09-12 01:16:57 +02:00
Add toasts to UI (#25449)
Fixes https://github.com/go-gitea/gitea/issues/24353 In some case like async success/error, it is useful to show toasts in UI.
This commit is contained in:
parent
72c60f94c1
commit
c71e8abbc3
@ -25,10 +25,11 @@ env:
|
|||||||
es2022: true
|
es2022: true
|
||||||
node: true
|
node: true
|
||||||
|
|
||||||
|
overrides:
|
||||||
|
- files: ["web_src/**/*"]
|
||||||
globals:
|
globals:
|
||||||
__webpack_public_path__: true
|
__webpack_public_path__: true
|
||||||
|
process: false # https://github.com/webpack/webpack/issues/15833
|
||||||
overrides:
|
|
||||||
- files: ["web_src/**/*", "docs/**/*"]
|
- files: ["web_src/**/*", "docs/**/*"]
|
||||||
env:
|
env:
|
||||||
browser: true
|
browser: true
|
||||||
|
6
package-lock.json
generated
6
package-lock.json
generated
@ -41,6 +41,7 @@
|
|||||||
"swagger-ui-dist": "5.0.0",
|
"swagger-ui-dist": "5.0.0",
|
||||||
"throttle-debounce": "5.0.0",
|
"throttle-debounce": "5.0.0",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7",
|
||||||
|
"toastify-js": "1.12.0",
|
||||||
"tributejs": "5.1.3",
|
"tributejs": "5.1.3",
|
||||||
"uint8-to-base64": "0.2.0",
|
"uint8-to-base64": "0.2.0",
|
||||||
"vue": "3.3.4",
|
"vue": "3.3.4",
|
||||||
@ -10122,6 +10123,11 @@
|
|||||||
"node": ">=8.0"
|
"node": ">=8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/toastify-js": {
|
||||||
|
"version": "1.12.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
|
||||||
|
"integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
|
||||||
|
},
|
||||||
"node_modules/toidentifier": {
|
"node_modules/toidentifier": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||||
|
@ -40,6 +40,7 @@
|
|||||||
"swagger-ui-dist": "5.0.0",
|
"swagger-ui-dist": "5.0.0",
|
||||||
"throttle-debounce": "5.0.0",
|
"throttle-debounce": "5.0.0",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7",
|
||||||
|
"toastify-js": "1.12.0",
|
||||||
"tributejs": "5.1.3",
|
"tributejs": "5.1.3",
|
||||||
"uint8-to-base64": "0.2.0",
|
"uint8-to-base64": "0.2.0",
|
||||||
"vue": "3.3.4",
|
"vue": "3.3.4",
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
{{template "base/head" .}}
|
{{template "base/head" .}}
|
||||||
|
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||||
<div class="page-content devtest ui container">
|
<div class="page-content devtest ui container">
|
||||||
<div>
|
<div>
|
||||||
<h1>Button</h1>
|
<h1>Button</h1>
|
||||||
@ -14,11 +15,6 @@
|
|||||||
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
|
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
|
||||||
</div>
|
</div>
|
||||||
<div id="devtest-button-samples">
|
<div id="devtest-button-samples">
|
||||||
<style>
|
|
||||||
.button-sample-groups { margin: 0; padding: 0; }
|
|
||||||
.button-sample-groups .sample-group { list-style: none; margin: 0; padding: 0; }
|
|
||||||
.button-sample-groups .sample-group .ui.button { margin-bottom: 5px; }
|
|
||||||
</style>
|
|
||||||
<ul class="button-sample-groups">
|
<ul class="button-sample-groups">
|
||||||
<li class="sample-group">
|
<li class="sample-group">
|
||||||
<h2>General purpose:</h2>
|
<h2>General purpose:</h2>
|
||||||
@ -242,17 +238,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1>Toast</h1>
|
||||||
|
<div>
|
||||||
|
<button class="ui button" id="info-toast">Show Info Toast</button>
|
||||||
|
<button class="ui button" id="warning-toast">Show Warning Toast</button>
|
||||||
|
<button class="ui button" id="error-toast">Show Error Toast</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h1>ComboMarkdownEditor</h1>
|
<h1>ComboMarkdownEditor</h1>
|
||||||
<div>ps: no JS code attached, so just a layout</div>
|
<div>ps: no JS code attached, so just a layout</div>
|
||||||
{{template "shared/combomarkdowneditor" .}}
|
{{template "shared/combomarkdowneditor" .}}
|
||||||
</div>
|
</div>
|
||||||
|
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
|
||||||
<style>
|
|
||||||
h1, h2 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</div>
|
</div>
|
||||||
{{template "base/footer" .}}
|
{{template "base/footer" .}}
|
||||||
|
@ -8,6 +8,7 @@
|
|||||||
@import "./modules/card.css";
|
@import "./modules/card.css";
|
||||||
@import "./modules/comment.css";
|
@import "./modules/comment.css";
|
||||||
@import "./modules/navbar.css";
|
@import "./modules/navbar.css";
|
||||||
|
@import "./modules/toast.css";
|
||||||
|
|
||||||
@import "./shared/issuelist.css";
|
@import "./shared/issuelist.css";
|
||||||
@import "./shared/milestone.css";
|
@import "./shared/milestone.css";
|
||||||
|
78
web_src/css/modules/toast.css
Normal file
78
web_src/css/modules/toast.css
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
.toastify {
|
||||||
|
color: var(--color-white);
|
||||||
|
position: fixed;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all .2s ease;
|
||||||
|
z-index: 500;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 8px 24px var(--color-shadow);
|
||||||
|
display: flex;
|
||||||
|
max-width: 50vw;
|
||||||
|
min-width: 300px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastify.on {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-body {
|
||||||
|
flex: 1;
|
||||||
|
padding: 5px 0;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-close,
|
||||||
|
.toast-icon {
|
||||||
|
color: currentcolor;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
display: inline-block;
|
||||||
|
display: flex;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-close:hover {
|
||||||
|
background: var(--color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-close:active {
|
||||||
|
background: var(--color-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastify-right {
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastify-left {
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastify-top {
|
||||||
|
top: -150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastify-bottom {
|
||||||
|
bottom: -150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastify-center {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 360px) {
|
||||||
|
.toastify-right, .toastify-left {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
max-width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
16
web_src/css/standalone/devtest.css
Normal file
16
web_src/css/standalone/devtest.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.button-sample-groups {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-sample-groups .sample-group {
|
||||||
|
list-style: none; margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-sample-groups .sample-group .ui.button {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
@ -9,6 +9,7 @@ import {hideElem, showElem, toggleElem} from '../utils/dom.js';
|
|||||||
import {htmlEscape} from 'escape-goat';
|
import {htmlEscape} from 'escape-goat';
|
||||||
import {createTippy} from '../modules/tippy.js';
|
import {createTippy} from '../modules/tippy.js';
|
||||||
import {confirmModal} from './comp/ConfirmModal.js';
|
import {confirmModal} from './comp/ConfirmModal.js';
|
||||||
|
import {showErrorToast} from '../modules/toast.js';
|
||||||
|
|
||||||
const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
|
const {appUrl, appSubUrl, csrfToken, i18n} = window.config;
|
||||||
|
|
||||||
@ -439,7 +440,7 @@ export function initGlobalButtons() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// should never happen, otherwise there is a bug in code
|
// should never happen, otherwise there is a bug in code
|
||||||
alert('Nothing to hide');
|
showErrorToast('Nothing to hide');
|
||||||
});
|
});
|
||||||
|
|
||||||
initGlobalShowModal();
|
initGlobalShowModal();
|
||||||
|
@ -8,6 +8,7 @@ import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
|
|||||||
import {renderPreviewPanelContent} from '../repo-editor.js';
|
import {renderPreviewPanelContent} from '../repo-editor.js';
|
||||||
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
|
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
|
||||||
import {initTextExpander} from './TextExpander.js';
|
import {initTextExpander} from './TextExpander.js';
|
||||||
|
import {showErrorToast} from '../../modules/toast.js';
|
||||||
|
|
||||||
let elementIdCounter = 0;
|
let elementIdCounter = 0;
|
||||||
|
|
||||||
@ -26,7 +27,7 @@ export function validateTextareaNonEmpty($textarea) {
|
|||||||
$form[0]?.reportValidity();
|
$form[0]?.reportValidity();
|
||||||
} else {
|
} else {
|
||||||
// The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
|
// The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
|
||||||
alert('Require non-empty content');
|
showErrorToast('Require non-empty content');
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import {svg} from '../svg.js';
|
import {svg} from '../svg.js';
|
||||||
|
import {showErrorToast} from '../modules/toast.js';
|
||||||
|
|
||||||
const {appSubUrl, csrfToken} = window.config;
|
const {appSubUrl, csrfToken} = window.config;
|
||||||
let i18nTextEdited;
|
let i18nTextEdited;
|
||||||
@ -39,12 +40,12 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
|
|||||||
if (resp.ok) {
|
if (resp.ok) {
|
||||||
$dialog.modal('hide');
|
$dialog.modal('hide');
|
||||||
} else {
|
} else {
|
||||||
alert(resp.message);
|
showErrorToast(resp.message);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else { // required by eslint
|
} else { // required by eslint
|
||||||
window.alert(`unknown option item: ${optionItem}`);
|
showErrorToast(`unknown option item: ${optionItem}`);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onHide() {
|
onHide() {
|
||||||
|
@ -4,6 +4,7 @@ import {toggleElem} from '../utils/dom.js';
|
|||||||
import {htmlEscape} from 'escape-goat';
|
import {htmlEscape} from 'escape-goat';
|
||||||
import {Sortable} from 'sortablejs';
|
import {Sortable} from 'sortablejs';
|
||||||
import {confirmModal} from './comp/ConfirmModal.js';
|
import {confirmModal} from './comp/ConfirmModal.js';
|
||||||
|
import {showErrorToast} from '../modules/toast.js';
|
||||||
|
|
||||||
function initRepoIssueListCheckboxes() {
|
function initRepoIssueListCheckboxes() {
|
||||||
const $issueSelectAll = $('.issue-checkbox-all');
|
const $issueSelectAll = $('.issue-checkbox-all');
|
||||||
@ -75,7 +76,7 @@ function initRepoIssueListCheckboxes() {
|
|||||||
).then(() => {
|
).then(() => {
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
}).catch((reason) => {
|
}).catch((reason) => {
|
||||||
window.alert(reason.responseJSON.error);
|
showErrorToast(reason.responseJSON.error);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
60
web_src/js/modules/toast.js
Normal file
60
web_src/js/modules/toast.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import {htmlEscape} from 'escape-goat';
|
||||||
|
import {svg} from '../svg.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 {default: Toastify} = await import(/* webpackChunkName: 'toastify' */'toastify-js');
|
||||||
|
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);
|
||||||
|
}
|
17
web_src/js/modules/toast.test.js
Normal file
17
web_src/js/modules/toast.test.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import {test, expect} from 'vitest';
|
||||||
|
import {showInfoToast, showErrorToast, showWarningToast} from './toast.js';
|
||||||
|
|
||||||
|
test('showInfoToast', async () => {
|
||||||
|
await showInfoToast('success π', {duration: -1});
|
||||||
|
expect(document.querySelector('.toastify')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('showWarningToast', async () => {
|
||||||
|
await showWarningToast('warning π', {duration: -1});
|
||||||
|
expect(document.querySelector('.toastify')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('showErrorToast', async () => {
|
||||||
|
await showErrorToast('error π', {duration: -1});
|
||||||
|
expect(document.querySelector('.toastify')).toBeTruthy();
|
||||||
|
});
|
11
web_src/js/standalone/devtest.js
Normal file
11
web_src/js/standalone/devtest.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js';
|
||||||
|
|
||||||
|
document.getElementById('info-toast').addEventListener('click', () => {
|
||||||
|
showInfoToast('success π');
|
||||||
|
});
|
||||||
|
document.getElementById('warning-toast').addEventListener('click', () => {
|
||||||
|
showWarningToast('warning π');
|
||||||
|
});
|
||||||
|
document.getElementById('error-toast').addEventListener('click', () => {
|
||||||
|
showErrorToast('error π');
|
||||||
|
});
|
@ -73,6 +73,12 @@ export default {
|
|||||||
'eventsource.sharedworker': [
|
'eventsource.sharedworker': [
|
||||||
fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.js', import.meta.url)),
|
fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.js', import.meta.url)),
|
||||||
],
|
],
|
||||||
|
...(!isProduction && {
|
||||||
|
devtest: [
|
||||||
|
fileURLToPath(new URL('web_src/js/standalone/devtest.js', import.meta.url)),
|
||||||
|
fileURLToPath(new URL('web_src/css/standalone/devtest.css', import.meta.url)),
|
||||||
|
],
|
||||||
|
}),
|
||||||
...themes,
|
...themes,
|
||||||
},
|
},
|
||||||
devtool: false,
|
devtool: false,
|
||||||
|
Loadingβ¦
Reference in New Issue
Block a user