From c7dc1c3f5ab18f4174629b6e01d950caf9eb4e5e Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 19:42:29 +0200 Subject: [PATCH 01/28] Add toasts to UI --- package-lock.json | 6 ++ package.json | 1 + templates/devtest/gitea-ui.tmpl | 16 ++++ web_src/css/index.css | 1 + web_src/css/modules/toast.css | 92 +++++++++++++++++++++++ web_src/js/features/repo-issue-content.js | 3 +- web_src/js/features/repo-issue-list.js | 3 +- web_src/js/modules/toast.js | 59 +++++++++++++++ web_src/js/modules/toast.test.js | 12 +++ 9 files changed, 191 insertions(+), 2 deletions(-) create mode 100644 web_src/css/modules/toast.css create mode 100644 web_src/js/modules/toast.js create mode 100644 web_src/js/modules/toast.test.js diff --git a/package-lock.json b/package-lock.json index 43846cf4a0597..53a3c57d983bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index dd2eff71956c4..cb48af8138557 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 0da443aade128..23197a58da498 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -228,6 +228,22 @@ +
+

Toast

+
+ + +
+ +
+

ComboMarkdownEditor

ps: no JS code attached, so just a layout
diff --git a/web_src/css/index.css b/web_src/css/index.css index 21ae4c1b1f0d5..f923fff2b365d 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -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"; diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css new file mode 100644 index 0000000000000..c021eb4024bba --- /dev/null +++ b/web_src/css/modules/toast.css @@ -0,0 +1,92 @@ +.toastify { + color: var(--color-white); + position: fixed; + opacity: 0; + transition: all .25s ease; + z-index: 400; + border-radius: 4px; + box-shadow: 0 8px 24px var(--color-shadow); + display: flex; + margin: 20px 0 0; + max-width: 50vw; + min-width: 300px; + pointer-events: all; + padding: 4px; +} + +.toastify.on { + opacity: 1; +} + +.toast-body { + flex: 1; + padding: 6px 5px 5px; +} + +.toast-title { + font-size: 19px; + margin-bottom: 4px; +} + +.toast-message { + font-size: 16px; +} + +.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-rounded { + border-radius: 25px; +} + +.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; + } +} diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index d66f6ad4a4dbb..36af47e493424 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {svg} from '../svg.js'; +import {showError} from "../modules/toast.js"; const {appSubUrl, csrfToken} = window.config; let i18nTextEdited; @@ -44,7 +45,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH }); } } else { // required by eslint - window.alert(`unknown option item: ${optionItem}`); + showError(`unknown option item: ${optionItem}`); } }, onHide() { diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index 4d61de0ce59b4..2a3651de264b1 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -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 {showError} 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); + showError(reason.responseJSON.error); }); }); } diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js new file mode 100644 index 0000000000000..599cb1b2426d4 --- /dev/null +++ b/web_src/js/modules/toast.js @@ -0,0 +1,59 @@ +import {htmlEscape} from 'escape-goat'; +import {svg} from '../svg.js'; + +const levels = { + info: { + icon: 'octicon-check', + background: 'var(--color-green)', + dur: 3000, + }, + error: { + icon: 'gitea-exclamation', + background: 'var(--color-red)', + dur: -1, // needs to be clicked away + }, +}; + +// 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, dur} = levels[level ?? 'info']; + + const toast = Toastify({ + text: ` +
${svg(icon)}
+
+
${htmlEscape(message)}
+
+ + `, + escapeMarkup: false, + gravity: gravity ?? 'top', + position: position ?? 'center', + duration: duration ?? dur, + style: {background}, + ...other, + }); + + toast.showToast(); + + toast.toastElement.querySelector('.toast-close').addEventListener('click', () => { + toast.removeElement(toast.toastElement); + }); +} + +export async function showInfo(message, opts) { + return await showToast(message, 'info', opts); +} + +export async function showError(message, opts) { + return await showToast(message, 'error', opts); +} + +// export for devtest page in development +if (process.env.NODE_ENV === 'development') { + window.showInfo = showInfo; + window.showError = showError; +} diff --git a/web_src/js/modules/toast.test.js b/web_src/js/modules/toast.test.js new file mode 100644 index 0000000000000..6c35451a8f987 --- /dev/null +++ b/web_src/js/modules/toast.test.js @@ -0,0 +1,12 @@ +import {test, expect} from 'vitest'; +import {showInfo, showError} from './toast.js'; + +test('showInfo', async () => { + await showInfo('success :)', {duration: -1}); + expect(document.querySelector('.toastify')).toBeTruthy(); +}); + +test('showError', async () => { + await showError('error :(', {duration: -1}); + expect(document.querySelector('.toastify')).toBeTruthy(); +}); From 763c067de0b31e5ee345d93006a31b6c3bbe6c48 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 19:52:07 +0200 Subject: [PATCH 02/28] replace all calls to window.alert --- web_src/js/features/common-global.js | 3 ++- web_src/js/features/comp/ComboMarkdownEditor.js | 3 ++- web_src/js/features/repo-issue-content.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index e5fd7c29fce6e..f7fac33acbeb1 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -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 {showError} 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'); + showError('Nothing to hide'); }); initGlobalShowModal(); diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 103e71daae473..7a72c6895fc6c 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -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 {showError} 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'); + showError('Require non-empty content'); } return false; } diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 36af47e493424..080588e17ac43 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -40,7 +40,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH if (resp.ok) { $dialog.modal('hide'); } else { - alert(resp.message); + showError(resp.message); } }); } From 1dab68162f4de1150aa6c2ae50d25c88d5aac1ac Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 19:55:50 +0200 Subject: [PATCH 03/28] fix lint --- .eslintrc.yaml | 1 + web_src/js/features/repo-issue-content.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.yaml b/.eslintrc.yaml index ea85ab12981f1..0333f7c87e74b 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -27,6 +27,7 @@ env: globals: __webpack_public_path__: true + process: false # use import.meta once https://github.com/webpack/webpack/issues/15833 is fixed overrides: - files: ["web_src/**/*", "docs/**/*"] diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 080588e17ac43..e5c9acf34c661 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -1,6 +1,6 @@ import $ from 'jquery'; import {svg} from '../svg.js'; -import {showError} from "../modules/toast.js"; +import {showError} from '../modules/toast.js'; const {appSubUrl, csrfToken} = window.config; let i18nTextEdited; From 85c7ecf4355d300f8e2a2a59d04ca530012f886a Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 19:58:07 +0200 Subject: [PATCH 04/28] better eslint fix --- .eslintrc.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.eslintrc.yaml b/.eslintrc.yaml index 0333f7c87e74b..db99f96fa9fc4 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -25,11 +25,11 @@ env: es2022: true node: true -globals: - __webpack_public_path__: true - process: false # use import.meta once https://github.com/webpack/webpack/issues/15833 is fixed - overrides: + - files: ["web_src/**/*"] + globals: + __webpack_public_path__: true + process: false # use import.meta after https://github.com/webpack/webpack/issues/15833 - files: ["web_src/**/*", "docs/**/*"] env: browser: true From 35976d498956f3af201a73160502aa5b3b0fd955 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 20:09:58 +0200 Subject: [PATCH 05/28] css cleanup --- web_src/css/modules/toast.css | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index c021eb4024bba..314c9cdcdccbe 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -12,6 +12,7 @@ min-width: 300px; pointer-events: all; padding: 4px; + font-size: 14px; } .toastify.on { @@ -23,15 +24,6 @@ padding: 6px 5px 5px; } -.toast-title { - font-size: 19px; - margin-bottom: 4px; -} - -.toast-message { - font-size: 16px; -} - .toast-close, .toast-icon { color: currentcolor; @@ -70,10 +62,6 @@ bottom: -150px; } -.toastify-rounded { - border-radius: 25px; -} - .toastify-center { margin-left: auto; margin-right: auto; From ad0a677ae5cede8eb72501f778a720fe51aa1d2d Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 20:13:41 +0200 Subject: [PATCH 06/28] reduce success duration --- web_src/js/modules/toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 599cb1b2426d4..63f64f3dc8014 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -5,7 +5,7 @@ const levels = { info: { icon: 'octicon-check', background: 'var(--color-green)', - dur: 3000, + dur: 2500, }, error: { icon: 'gitea-exclamation', From dd4b811de39dc7ca88ee0833667c879bbe107b78 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 20:14:36 +0200 Subject: [PATCH 07/28] reduce even more --- web_src/js/modules/toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 63f64f3dc8014..767fb6f8a93b9 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -5,7 +5,7 @@ const levels = { info: { icon: 'octicon-check', background: 'var(--color-green)', - dur: 2500, + dur: 2000, }, error: { icon: 'gitea-exclamation', From b050eff2f300537b666829b68d0379e6184263f7 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 20:29:43 +0200 Subject: [PATCH 08/28] fine-tune padding --- web_src/css/modules/toast.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 314c9cdcdccbe..c3678a33c1d5d 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -21,7 +21,7 @@ .toast-body { flex: 1; - padding: 6px 5px 5px; + padding: 5px 0; } .toast-close, From cdb1781be744458c3fe7f4bf351c38ad9cc7d6c8 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 22:14:23 +0200 Subject: [PATCH 09/28] remove wrapper div --- web_src/js/modules/toast.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 767fb6f8a93b9..b98c1572063d5 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -24,9 +24,7 @@ async function showToast(message, level, {gravity, position, duration, ...other} const toast = Toastify({ text: `
${svg(icon)}
-
-
${htmlEscape(message)}
-
+
${htmlEscape(message)}
`, escapeMarkup: false, From 28dab7571360b859172d809d67c473667a455e8d Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 22:18:05 +0200 Subject: [PATCH 10/28] refactor duration --- web_src/js/modules/toast.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index b98c1572063d5..9655416f835a9 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -5,12 +5,12 @@ const levels = { info: { icon: 'octicon-check', background: 'var(--color-green)', - dur: 2000, + duration: 2000, }, error: { icon: 'gitea-exclamation', background: 'var(--color-red)', - dur: -1, // needs to be clicked away + duration: -1, // needs to be clicked away }, }; @@ -19,7 +19,8 @@ async function showToast(message, level, {gravity, position, duration, ...other} if (!message) return; const {default: Toastify} = await import(/* webpackChunkName: 'toastify' */'toastify-js'); - const {icon, background, dur} = levels[level ?? 'info']; + const {icon, background, duration: levelDuration} = levels[level ?? 'info']; + const toast = Toastify({ text: ` @@ -30,7 +31,7 @@ async function showToast(message, level, {gravity, position, duration, ...other} escapeMarkup: false, gravity: gravity ?? 'top', position: position ?? 'center', - duration: duration ?? dur, + duration: duration ?? levelDuration, style: {background}, ...other, }); From f153397de3f4511a1df441852ea7889e5407333a Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 22:43:12 +0200 Subject: [PATCH 11/28] use more unique window exports --- templates/devtest/gitea-ui.tmpl | 4 ++-- web_src/js/modules/toast.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 23197a58da498..5c45d54d8fcab 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -236,10 +236,10 @@
diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 9655416f835a9..33e564282e4c1 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -53,6 +53,6 @@ export async function showError(message, opts) { // export for devtest page in development if (process.env.NODE_ENV === 'development') { - window.showInfo = showInfo; - window.showError = showError; + window.giteaShowInfo = showInfo; + window.giteaShowError = showError; } From 1b8e9d8d328d842a42356de431a93cb835e4a8b5 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 23:06:22 +0200 Subject: [PATCH 12/28] add warning toast --- templates/devtest/gitea-ui.tmpl | 8 ++++++-- web_src/js/modules/toast.js | 10 ++++++++++ web_src/js/modules/toast.test.js | 11 ++++++++--- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 5c45d54d8fcab..ae568a4c346cd 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -232,14 +232,18 @@

Toast

+
diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 33e564282e4c1..a15c4914b405f 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -7,6 +7,11 @@ const levels = { background: 'var(--color-green)', duration: 2000, }, + warning: { + icon: 'gitea-exclamation', + background: 'var(--color-orange)', + duration: -1, // needs to be clicked away + }, error: { icon: 'gitea-exclamation', background: 'var(--color-red)', @@ -47,6 +52,10 @@ export async function showInfo(message, opts) { return await showToast(message, 'info', opts); } +export async function showWarning(message, opts) { + return await showToast(message, 'warning', opts); +} + export async function showError(message, opts) { return await showToast(message, 'error', opts); } @@ -54,5 +63,6 @@ export async function showError(message, opts) { // export for devtest page in development if (process.env.NODE_ENV === 'development') { window.giteaShowInfo = showInfo; + window.giteaShowWarning = showWarning; window.giteaShowError = showError; } diff --git a/web_src/js/modules/toast.test.js b/web_src/js/modules/toast.test.js index 6c35451a8f987..9c6d938be19cc 100644 --- a/web_src/js/modules/toast.test.js +++ b/web_src/js/modules/toast.test.js @@ -1,12 +1,17 @@ import {test, expect} from 'vitest'; -import {showInfo, showError} from './toast.js'; +import {showInfo, showError, showWarning} from './toast.js'; test('showInfo', async () => { - await showInfo('success :)', {duration: -1}); + await showInfo('success 😀', {duration: -1}); + expect(document.querySelector('.toastify')).toBeTruthy(); +}); + +test('showWarning', async () => { + await showWarning('success 😐', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); test('showError', async () => { - await showError('error :(', {duration: -1}); + await showError('error 🙁', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); From b2e54a7b1b0b34d3f312fed9076f09adb9a30853 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 22 Jun 2023 23:11:53 +0200 Subject: [PATCH 13/28] cleanup whitespace --- web_src/js/modules/toast.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index a15c4914b405f..07f16e4400eea 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -26,7 +26,6 @@ async function showToast(message, level, {gravity, position, duration, ...other} const {default: Toastify} = await import(/* webpackChunkName: 'toastify' */'toastify-js'); const {icon, background, duration: levelDuration} = levels[level ?? 'info']; - const toast = Toastify({ text: `
${svg(icon)}
From 0ac7963031a5de4d2106e3ecda32dba0a13de181 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Jun 2023 00:11:53 +0200 Subject: [PATCH 14/28] Update .eslintrc.yaml --- .eslintrc.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.yaml b/.eslintrc.yaml index db99f96fa9fc4..71d8dc38148db 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -29,7 +29,7 @@ overrides: - files: ["web_src/**/*"] globals: __webpack_public_path__: true - process: false # use import.meta after https://github.com/webpack/webpack/issues/15833 + process: false # https://github.com/webpack/webpack/issues/15833 - files: ["web_src/**/*", "docs/**/*"] env: browser: true From 16731bd71087e40c100e72cd2caff3dcda0bdb04 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Jun 2023 09:47:53 +0200 Subject: [PATCH 15/28] Update web_src/css/modules/toast.css --- web_src/css/modules/toast.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index c3678a33c1d5d..6828168710d75 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -3,7 +3,7 @@ position: fixed; opacity: 0; transition: all .25s ease; - z-index: 400; + z-index: 500; border-radius: 4px; box-shadow: 0 8px 24px var(--color-shadow); display: flex; From 89b7942ce5aff07da9d4d74d41e9417a068f285f Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Jun 2023 09:48:31 +0200 Subject: [PATCH 16/28] Update web_src/js/modules/toast.js --- web_src/js/modules/toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 07f16e4400eea..d75736cfb8c21 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -10,7 +10,7 @@ const levels = { warning: { icon: 'gitea-exclamation', background: 'var(--color-orange)', - duration: -1, // needs to be clicked away + duration: -1, // requires dismissal }, error: { icon: 'gitea-exclamation', From 58f3f134edebaa97c39af5d94bbd03ba666105af Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Jun 2023 09:48:51 +0200 Subject: [PATCH 17/28] Update web_src/js/modules/toast.js --- web_src/js/modules/toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index d75736cfb8c21..b9b3ad84e174e 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -15,7 +15,7 @@ const levels = { error: { icon: 'gitea-exclamation', background: 'var(--color-red)', - duration: -1, // needs to be clicked away + duration: -1, // requires dismissal }, }; From c5f8deaf6a3df466cbffc205018344e3d7261065 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Jun 2023 09:49:11 +0200 Subject: [PATCH 18/28] Update web_src/js/modules/toast.js --- web_src/js/modules/toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index b9b3ad84e174e..394da82e9d05e 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -10,7 +10,7 @@ const levels = { warning: { icon: 'gitea-exclamation', background: 'var(--color-orange)', - duration: -1, // requires dismissal + duration: -1, // requires dismissal to hide }, error: { icon: 'gitea-exclamation', From f5e1c720a5f5d6af3947f24ed72ae68e51d6f01c Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Jun 2023 09:49:30 +0200 Subject: [PATCH 19/28] Update web_src/js/modules/toast.js --- web_src/js/modules/toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 394da82e9d05e..2e68fdfc74061 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -15,7 +15,7 @@ const levels = { error: { icon: 'gitea-exclamation', background: 'var(--color-red)', - duration: -1, // requires dismissal + duration: -1, // requires dismissal to hide }, }; From 8c7d7692ca9ff8ee5b613a042f8b9094a5b9b2d2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 23 Jun 2023 09:50:47 +0200 Subject: [PATCH 20/28] Update web_src/js/modules/toast.test.js --- web_src/js/modules/toast.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.test.js b/web_src/js/modules/toast.test.js index 9c6d938be19cc..8e7e1d24019df 100644 --- a/web_src/js/modules/toast.test.js +++ b/web_src/js/modules/toast.test.js @@ -7,7 +7,7 @@ test('showInfo', async () => { }); test('showWarning', async () => { - await showWarning('success 😐', {duration: -1}); + await showWarning('warning 😐', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); From 34bc1567d0f31fa7f9b200f213aeeb45e6b275e0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 26 Jun 2023 20:03:15 +0200 Subject: [PATCH 21/28] add 'Toast' suffix to function names --- templates/devtest/gitea-ui.tmpl | 6 +++--- web_src/js/features/common-global.js | 4 ++-- web_src/js/features/comp/ComboMarkdownEditor.js | 4 ++-- web_src/js/features/repo-issue-content.js | 6 +++--- web_src/js/features/repo-issue-list.js | 4 ++-- web_src/js/modules/toast.js | 12 ++++++------ web_src/js/modules/toast.test.js | 14 +++++++------- 7 files changed, 25 insertions(+), 25 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index d6d6663747aaa..0c08ae6d880e5 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -251,13 +251,13 @@ diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index f7fac33acbeb1..a99b29141d3f8 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -9,7 +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 {showError} from '../modules/toast.js'; +import {showErrorToast} from '../modules/toast.js'; const {appUrl, appSubUrl, csrfToken, i18n} = window.config; @@ -440,7 +440,7 @@ export function initGlobalButtons() { return; } // should never happen, otherwise there is a bug in code - showError('Nothing to hide'); + showErrorToast('Nothing to hide'); }); initGlobalShowModal(); diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 7a72c6895fc6c..3d696be75b86d 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -8,7 +8,7 @@ import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js'; import {renderPreviewPanelContent} from '../repo-editor.js'; import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js'; import {initTextExpander} from './TextExpander.js'; -import {showError} from '../../modules/toast.js'; +import {showErrorToast} from '../../modules/toast.js'; let elementIdCounter = 0; @@ -27,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. - showError('Require non-empty content'); + showErrorToast('Require non-empty content'); } return false; } diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index e5c9acf34c661..fc916aea1920a 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -1,6 +1,6 @@ import $ from 'jquery'; import {svg} from '../svg.js'; -import {showError} from '../modules/toast.js'; +import {showErrorToast} from '../modules/toast.js'; const {appSubUrl, csrfToken} = window.config; let i18nTextEdited; @@ -40,12 +40,12 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH if (resp.ok) { $dialog.modal('hide'); } else { - showError(resp.message); + showErrorToast(resp.message); } }); } } else { // required by eslint - showError(`unknown option item: ${optionItem}`); + showErrorToast(`unknown option item: ${optionItem}`); } }, onHide() { diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index 2a3651de264b1..5402f958f2a47 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -4,7 +4,7 @@ import {toggleElem} from '../utils/dom.js'; import {htmlEscape} from 'escape-goat'; import {Sortable} from 'sortablejs'; import {confirmModal} from './comp/ConfirmModal.js'; -import {showError} from '../modules/toast.js'; +import {showErrorToast} from '../modules/toast.js'; function initRepoIssueListCheckboxes() { const $issueSelectAll = $('.issue-checkbox-all'); @@ -76,7 +76,7 @@ function initRepoIssueListCheckboxes() { ).then(() => { window.location.reload(); }).catch((reason) => { - showError(reason.responseJSON.error); + showErrorToast(reason.responseJSON.error); }); }); } diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 2e68fdfc74061..42683ddc729ca 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -47,21 +47,21 @@ async function showToast(message, level, {gravity, position, duration, ...other} }); } -export async function showInfo(message, opts) { +export async function showInfoToast(message, opts) { return await showToast(message, 'info', opts); } -export async function showWarning(message, opts) { +export async function showWarningToast(message, opts) { return await showToast(message, 'warning', opts); } -export async function showError(message, opts) { +export async function showErrorToast(message, opts) { return await showToast(message, 'error', opts); } // export for devtest page in development if (process.env.NODE_ENV === 'development') { - window.giteaShowInfo = showInfo; - window.giteaShowWarning = showWarning; - window.giteaShowError = showError; + window.giteaShowInfoToast = showInfoToast; + window.giteaShowWarningToast = showWarningToast; + window.giteaShowErrorToast = showErrorToast; } diff --git a/web_src/js/modules/toast.test.js b/web_src/js/modules/toast.test.js index 8e7e1d24019df..b691aaebb634a 100644 --- a/web_src/js/modules/toast.test.js +++ b/web_src/js/modules/toast.test.js @@ -1,17 +1,17 @@ import {test, expect} from 'vitest'; -import {showInfo, showError, showWarning} from './toast.js'; +import {showInfoToast, showErrorToast, showWarningToast} from './toast.js'; -test('showInfo', async () => { - await showInfo('success 😀', {duration: -1}); +test('showInfoToast', async () => { + await showInfoToast('success 😀', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); -test('showWarning', async () => { - await showWarning('warning 😐', {duration: -1}); +test('showWarningToast', async () => { + await showWarningToast('warning 😐', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); -test('showError', async () => { - await showError('error 🙁', {duration: -1}); +test('showErrorToast', async () => { + await showErrorToast('error 🙁', {duration: -1}); expect(document.querySelector('.toastify')).toBeTruthy(); }); From d255eac1a382ddb267b42db89a61946026349b5c Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 26 Jun 2023 20:13:30 +0200 Subject: [PATCH 22/28] add devtest webpack chunk --- templates/devtest/gitea-ui.tmpl | 25 ++----------------------- web_src/css/standalone/devtest.css | 16 ++++++++++++++++ web_src/js/modules/toast.js | 7 ------- web_src/js/standalone/devtest.js | 11 +++++++++++ webpack.config.js | 6 ++++++ 5 files changed, 35 insertions(+), 30 deletions(-) create mode 100644 web_src/css/standalone/devtest.css create mode 100644 web_src/js/standalone/devtest.js diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 0c08ae6d880e5..8b31957f2e0c4 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -1,4 +1,5 @@ {{template "base/head" .}} +

Button

@@ -14,11 +15,6 @@
-

  • General purpose:

    @@ -249,17 +245,6 @@
-
@@ -267,12 +252,6 @@
ps: no JS code attached, so just a layout
{{template "shared/combomarkdowneditor" .}}
- - + {{template "base/footer" .}} diff --git a/web_src/css/standalone/devtest.css b/web_src/css/standalone/devtest.css new file mode 100644 index 0000000000000..a7b00e1e56181 --- /dev/null +++ b/web_src/css/standalone/devtest.css @@ -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; +} diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 42683ddc729ca..38048621019e1 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -58,10 +58,3 @@ export async function showWarningToast(message, opts) { export async function showErrorToast(message, opts) { return await showToast(message, 'error', opts); } - -// export for devtest page in development -if (process.env.NODE_ENV === 'development') { - window.giteaShowInfoToast = showInfoToast; - window.giteaShowWarningToast = showWarningToast; - window.giteaShowErrorToast = showErrorToast; -} diff --git a/web_src/js/standalone/devtest.js b/web_src/js/standalone/devtest.js new file mode 100644 index 0000000000000..d0ca511c0f36a --- /dev/null +++ b/web_src/js/standalone/devtest.js @@ -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 🙁'); +}); diff --git a/webpack.config.js b/webpack.config.js index fb442521e99a6..6070dae24794a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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, From 5ffe59010a588faec7e81ab3889b16d1842829c9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 26 Jun 2023 22:25:01 +0200 Subject: [PATCH 23/28] fix text overflow in toast --- web_src/css/modules/toast.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 6828168710d75..5052d147f7cb1 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -22,6 +22,7 @@ .toast-body { flex: 1; padding: 5px 0; + overflow-wrap: anywhere; } .toast-close, From 2c06b58f2805a85cd2c695b82d897f6201587776 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 26 Jun 2023 22:29:46 +0200 Subject: [PATCH 24/28] remove margin --- web_src/css/modules/toast.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 5052d147f7cb1..1f4d7ce7f1de9 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -7,7 +7,6 @@ border-radius: 4px; box-shadow: 0 8px 24px var(--color-shadow); display: flex; - margin: 20px 0 0; max-width: 50vw; min-width: 300px; pointer-events: all; From 107cd8b93737bb44f2cacad53fd8bd3631ad2d74 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Jun 2023 01:37:24 +0200 Subject: [PATCH 25/28] speed up animation --- web_src/css/modules/toast.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 1f4d7ce7f1de9..70a53b6e43f05 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -2,7 +2,7 @@ color: var(--color-white); position: fixed; opacity: 0; - transition: all .25s ease; + transition: all .2s ease; z-index: 500; border-radius: 4px; box-shadow: 0 8px 24px var(--color-shadow); From f46bca9de9a93fced671fec53c64b34a3712e35f Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Jun 2023 02:49:26 +0200 Subject: [PATCH 26/28] show info toast longer --- web_src/js/modules/toast.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/toast.js b/web_src/js/modules/toast.js index 38048621019e1..b0d02dc64470e 100644 --- a/web_src/js/modules/toast.js +++ b/web_src/js/modules/toast.js @@ -5,7 +5,7 @@ const levels = { info: { icon: 'octicon-check', background: 'var(--color-green)', - duration: 2000, + duration: 2500, }, warning: { icon: 'gitea-exclamation', From 1f64d565772364b13111cd4c27415ab47d6c97de Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Jun 2023 03:04:47 +0200 Subject: [PATCH 27/28] remove unnecessary font-size --- web_src/css/modules/toast.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 70a53b6e43f05..8f285b6632839 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -11,7 +11,6 @@ min-width: 300px; pointer-events: all; padding: 4px; - font-size: 14px; } .toastify.on { From de6c27942dc2c8fd382af445929d89b4fee9b934 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 27 Jun 2023 03:08:01 +0200 Subject: [PATCH 28/28] remove unnecessary pointer-events --- web_src/css/modules/toast.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 8f285b6632839..c96521f2736b9 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -9,7 +9,6 @@ display: flex; max-width: 50vw; min-width: 300px; - pointer-events: all; padding: 4px; }