diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a3ff1096..6047da8b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -21,7 +21,6 @@ "material-icons": "^1.13.10", "moment": "^2.29.4", "normalize.css": "^8.0.1", - "noty": "^3.2.0-beta", "pinia": "^2.1.6", "pretty-bytes": "^6.1.1", "qrcode.vue": "^3.4.1", @@ -31,7 +30,8 @@ "vue-i18n": "^9.2.2", "vue-lazyload": "^3.0.0", "vue-router": "^4.2.4", - "vue-simple-progress": "^1.1.1" + "vue-simple-progress": "^1.1.1", + "vue-toastification": "^2.0.0-rc.5" }, "devDependencies": { "@intlify/unplugin-vue-i18n": "^0.12.3", @@ -3681,15 +3681,6 @@ "url": "https://github.com/sponsors/mysticatea" } }, - "node_modules/eslint-utils/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/eslint-visitor-keys": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", @@ -3799,108 +3790,6 @@ "node": ">=8" } }, - "node_modules/eslint/node_modules/locate-path": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", - "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", - "dev": true, - "dependencies": { - "p-locate": "^5.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/eslint/node_modules/p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "dev": true, - "dependencies": { - "yocto-queue": "^0.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/eslint/node_modules/p-locate": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", - "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", - "dev": true, - "dependencies": { - "p-limit": "^3.0.2" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/eslint/node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/espree": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", @@ -3930,6 +3819,19 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true, + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/esquery": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz", @@ -5000,12 +4902,6 @@ "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" }, - "node_modules/noty": { - "version": "3.2.0-beta-deprecated", - "resolved": "https://registry.npmjs.org/noty/-/noty-3.2.0-beta-deprecated.tgz", - "integrity": "sha512-ntRbHuQ9SnnnVFZm/oq5L1DBCaHQUvsU24AwZH3PGjAWx2YqR/IhOadMk11vmJovYiQo00oqTj6Hp+D6PGtmLA==", - "deprecated": "no longer supported" - }, "node_modules/npm-run-path": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", @@ -6398,6 +6294,14 @@ "resolved": "https://registry.npmjs.org/vue-simple-progress/-/vue-simple-progress-1.1.1.tgz", "integrity": "sha512-ltLWYBA5eVQHWyt1NwZeGeK0VQC69JVh1oqUdro0po7r8Hc8SEMEyEfuwyCO4s27h5I3jbD99BKKkyPSQZgoZA==" }, + "node_modules/vue-toastification": { + "version": "2.0.0-rc.5", + "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz", + "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==", + "peerDependencies": { + "vue": "^3.0.2" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 8b80f7f6..9d2b7095 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,7 +27,6 @@ "material-icons": "^1.13.10", "moment": "^2.29.4", "normalize.css": "^8.0.1", - "noty": "^3.2.0-beta", "pinia": "^2.1.6", "pretty-bytes": "^6.1.1", "qrcode.vue": "^3.4.1", @@ -37,7 +36,8 @@ "vue-i18n": "^9.2.2", "vue-lazyload": "^3.0.0", "vue-router": "^4.2.4", - "vue-simple-progress": "^1.1.1" + "vue-simple-progress": "^1.1.1", + "vue-toastification": "^2.0.0-rc.5" }, "devDependencies": { "@intlify/unplugin-vue-i18n": "^0.12.3", diff --git a/frontend/src/components/ErrorToast.vue b/frontend/src/components/ErrorToast.vue new file mode 100644 index 00000000..348df52b --- /dev/null +++ b/frontend/src/components/ErrorToast.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css index 00442507..0a81f4ae 100644 --- a/frontend/src/css/styles.css +++ b/frontend/src/css/styles.css @@ -1,4 +1,5 @@ @import "normalize.css/normalize.css"; +@import "vue-toastification/dist/index.css"; @import "noty/lib/noty.css"; @import "noty/lib/themes/mint.css"; @import "./_variables.css"; diff --git a/frontend/src/main.js b/frontend/src/main.js index cc019092..0ff5ebc6 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,13 +1,13 @@ import { disableExternal } from "@/utils/constants"; -import { createApp, configureCompat } from "vue"; +import { createApp } from "vue"; import Noty from "noty"; import VueLazyload from "vue-lazyload"; +import Toast, { useToast } from "vue-toastification"; import createPinia from "@/stores"; import router from "@/router"; import i18n from "@/i18n"; import App from "@/App.vue"; - -configureCompat({ RENDER_FUNCTION: false }); +import ErrorToast from "@/components/ErrorToast.vue"; import dayjs from "dayjs"; import localizedFormat from "dayjs/plugin/localizedFormat"; @@ -23,6 +23,11 @@ const pinia = createPinia(router); const app = createApp(App); app.use(VueLazyload); +app.use(Toast, { + transition: "Vue-Toastification__bounce", + maxToasts: 10, + newestOnTop: true, +}); app.use(i18n); app.use(pinia); @@ -43,53 +48,41 @@ app.directive("focus", { }, }); -const notyDefault = { - type: "info", - layout: "bottomCenter", - timeout: 1000, - progressBar: true, +const toastConfig = { + position: "bottom-center", + timeout: 4000, + closeOnClick: true, + pauseOnFocusLoss: true, + pauseOnHover: true, + draggable: true, + draggablePercent: 0.6, + showCloseButtonOnHover: false, + hideProgressBar: false, + closeButton: "button", + icon: true, + // TODO: add RTL support + // rtl: false, }; -// app.provide("$noty", (opts) => { -// new Noty(Object.assign({}, notyDefault, opts)).show(); -// }); - app.provide("$showSuccess", (message) => { - new Noty( - Object.assign({}, notyDefault, { - text: message, - type: "success", - }) - ).show(); + const $toast = useToast(); + $toast.success(message, { ...toastConfig }); }); app.provide("$showError", (error, displayReport = true) => { - let btns = [ - Noty.button(i18n.global.t("buttons.close"), "", function () { - n.close(); - }), - ]; - - if (!disableExternal && displayReport) { - btns.unshift( - Noty.button(i18n.global.t("buttons.reportIssue"), "", function () { - window.open( - "https://github.com/filebrowser/filebrowser/issues/new/choose" - ); - }) - ); - } - - let n = new Noty( - Object.assign({}, notyDefault, { - text: error.message || error, - type: "error", - timeout: null, - buttons: btns, - }) + const $toast = useToast(); + $toast.error( + { + component: ErrorToast, + props: { + message: error.message || error, + isReport: !disableExternal && displayReport, + // TODO: i couldnt use $t inside the component + reportText: i18n.global.t("buttons.reportIssue"), + }, + }, + { ...toastConfig, timeout: 0 } ); - - n.show(); }); router.isReady().then(() => app.mount("#app"));