Fixes https://github.com/go-gitea/gitea/issues/24353 In some case like async success/error, it is useful to show toasts in UI.tags/v1.21.0-rc0
@@ -25,10 +25,11 @@ env: | |||
es2022: true | |||
node: true | |||
globals: | |||
__webpack_public_path__: true | |||
overrides: | |||
- files: ["web_src/**/*"] | |||
globals: | |||
__webpack_public_path__: true | |||
process: false # https://github.com/webpack/webpack/issues/15833 | |||
- files: ["web_src/**/*", "docs/**/*"] | |||
env: | |||
browser: true |
@@ -41,6 +41,7 @@ | |||
"swagger-ui-dist": "5.0.0", | |||
"throttle-debounce": "5.0.0", | |||
"tippy.js": "6.3.7", | |||
"toastify-js": "1.12.0", | |||
"tributejs": "5.1.3", | |||
"uint8-to-base64": "0.2.0", | |||
"vue": "3.3.4", | |||
@@ -10122,6 +10123,11 @@ | |||
"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": { | |||
"version": "1.0.1", | |||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", |
@@ -40,6 +40,7 @@ | |||
"swagger-ui-dist": "5.0.0", | |||
"throttle-debounce": "5.0.0", | |||
"tippy.js": "6.3.7", | |||
"toastify-js": "1.12.0", | |||
"tributejs": "5.1.3", | |||
"uint8-to-base64": "0.2.0", | |||
"vue": "3.3.4", |
@@ -1,4 +1,5 @@ | |||
{{template "base/head" .}} | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> | |||
<div class="page-content devtest ui container"> | |||
<div> | |||
<h1>Button</h1> | |||
@@ -14,11 +15,6 @@ | |||
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label> | |||
</div> | |||
<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"> | |||
<li class="sample-group"> | |||
<h2>General purpose:</h2> | |||
@@ -242,17 +238,20 @@ | |||
</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> | |||
<h1>ComboMarkdownEditor</h1> | |||
<div>ps: no JS code attached, so just a layout</div> | |||
{{template "shared/combomarkdowneditor" .}} | |||
</div> | |||
<style> | |||
h1, h2 { | |||
margin: 0; | |||
padding: 10px 0; | |||
} | |||
</style> | |||
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script> | |||
</div> | |||
{{template "base/footer" .}} |
@@ -8,6 +8,7 @@ | |||
@import "./modules/card.css"; | |||
@import "./modules/comment.css"; | |||
@import "./modules/navbar.css"; | |||
@import "./modules/toast.css"; | |||
@import "./shared/issuelist.css"; | |||
@import "./shared/milestone.css"; |
@@ -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; | |||
} | |||
} |
@@ -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 {createTippy} from '../modules/tippy.js'; | |||
import {confirmModal} from './comp/ConfirmModal.js'; | |||
import {showErrorToast} from '../modules/toast.js'; | |||
const {appUrl, appSubUrl, csrfToken, i18n} = window.config; | |||
@@ -439,7 +440,7 @@ export function initGlobalButtons() { | |||
return; | |||
} | |||
// should never happen, otherwise there is a bug in code | |||
alert('Nothing to hide'); | |||
showErrorToast('Nothing to hide'); | |||
}); | |||
initGlobalShowModal(); |
@@ -8,6 +8,7 @@ import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js'; | |||
import {renderPreviewPanelContent} from '../repo-editor.js'; | |||
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js'; | |||
import {initTextExpander} from './TextExpander.js'; | |||
import {showErrorToast} from '../../modules/toast.js'; | |||
let elementIdCounter = 0; | |||
@@ -26,7 +27,7 @@ export function validateTextareaNonEmpty($textarea) { | |||
$form[0]?.reportValidity(); | |||
} else { | |||
// 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; | |||
} |
@@ -1,5 +1,6 @@ | |||
import $ from 'jquery'; | |||
import {svg} from '../svg.js'; | |||
import {showErrorToast} from '../modules/toast.js'; | |||
const {appSubUrl, csrfToken} = window.config; | |||
let i18nTextEdited; | |||
@@ -39,12 +40,12 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH | |||
if (resp.ok) { | |||
$dialog.modal('hide'); | |||
} else { | |||
alert(resp.message); | |||
showErrorToast(resp.message); | |||
} | |||
}); | |||
} | |||
} else { // required by eslint | |||
window.alert(`unknown option item: ${optionItem}`); | |||
showErrorToast(`unknown option item: ${optionItem}`); | |||
} | |||
}, | |||
onHide() { |
@@ -4,6 +4,7 @@ import {toggleElem} from '../utils/dom.js'; | |||
import {htmlEscape} from 'escape-goat'; | |||
import {Sortable} from 'sortablejs'; | |||
import {confirmModal} from './comp/ConfirmModal.js'; | |||
import {showErrorToast} from '../modules/toast.js'; | |||
function initRepoIssueListCheckboxes() { | |||
const $issueSelectAll = $('.issue-checkbox-all'); | |||
@@ -75,7 +76,7 @@ function initRepoIssueListCheckboxes() { | |||
).then(() => { | |||
window.location.reload(); | |||
}).catch((reason) => { | |||
window.alert(reason.responseJSON.error); | |||
showErrorToast(reason.responseJSON.error); | |||
}); | |||
}); | |||
} |
@@ -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); | |||
} |
@@ -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(); | |||
}); |
@@ -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': [ | |||
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, | |||
}, | |||
devtool: false, |