From 45070220a6a246d23ac771327eebcabd3323e4a5 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 3 Aug 2020 14:36:01 +0200 Subject: [PATCH] Add error toast --- client/package-lock.json | 44 ++++++++++++------------------- client/package.json | 1 + client/src/main.js | 5 ++-- client/src/mixins/notification.js | 11 ++++++++ client/src/styles/_toast.scss | 6 +++++ client/src/styles/main.scss | 1 + 6 files changed, 39 insertions(+), 29 deletions(-) create mode 100644 client/src/mixins/notification.js create mode 100644 client/src/styles/_toast.scss diff --git a/client/package-lock.json b/client/package-lock.json index 13472b28..7f1d4b01 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2460,7 +2460,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -2492,7 +2492,7 @@ }, "onetime": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "dev": true }, @@ -11673,8 +11673,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -11717,8 +11716,7 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", @@ -11729,8 +11727,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -11847,8 +11844,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -11860,7 +11856,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -11883,14 +11878,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -11909,7 +11902,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -11990,8 +11982,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -12003,7 +11994,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -12089,8 +12079,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -12126,7 +12115,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -12146,7 +12134,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -12190,14 +12177,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -13371,7 +13356,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -19871,6 +19856,11 @@ "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz", "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==" }, + "vue-toast-notification": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-0.4.1.tgz", + "integrity": "sha512-bcp5deqeIeSiDeTOg8zxhTXGx5ZMiPwNYa6eLosVqG1dKxo4VlJGcmDMxplpu9lZq5VX2aT8ros7hj1ev/6GIw==" + }, "vue-vimeo-player": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/vue-vimeo-player/-/vue-vimeo-player-0.0.6.tgz", diff --git a/client/package.json b/client/package.json index fc96bed1..7b48c0f3 100644 --- a/client/package.json +++ b/client/package.json @@ -86,6 +86,7 @@ "vue-scrollto": "^2.11.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.17", + "vue-toast-notification": "^0.4.1", "vue-vimeo-player": "0.0.6", "vuetify": "^1.1.8", "vuex": "^3.0.1", diff --git a/client/src/main.js b/client/src/main.js index 4d0ea417..c8b2221e 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -18,8 +18,8 @@ import clickOutside from '@/directives/click-outside'; import ME_QUERY from '@/graphql/gql/meQuery.gql'; import VueModal from '@/plugins/modal'; import VueRemoveEdges from '@/plugins/edges'; -import VueMatomo from 'vue-matomo' - +import VueMatomo from 'vue-matomo'; +import VueToast from 'vue-toast-notification'; Vue.config.productionTip = false; Vue.use(VueModal); @@ -27,6 +27,7 @@ Vue.use(VueRemoveEdges); Vue.use(VueApollo); Vue.use(VueAxios, axios); Vue.use(VueVimeoPlayer); +Vue.use(VueToast); Vue.use(VueScrollTo, { duration: 500, diff --git a/client/src/mixins/notification.js b/client/src/mixins/notification.js new file mode 100644 index 00000000..5bb925c1 --- /dev/null +++ b/client/src/mixins/notification.js @@ -0,0 +1,11 @@ +export default { + methods: { + error() { + this.$toast.open({ + message: 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später noch einmal.', + type: 'error', + duration: 3000 + }); + } + } +}; diff --git a/client/src/styles/_toast.scss b/client/src/styles/_toast.scss new file mode 100644 index 00000000..b756cdd3 --- /dev/null +++ b/client/src/styles/_toast.scss @@ -0,0 +1,6 @@ +@import 'vue-toast-notification/dist/theme-default.css'; + +.toast .toast-text { + color: $color-white; + font-family: $sans-serif-font-family; +} diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss index 84f3bb6a..00be993e 100644 --- a/client/src/styles/main.scss +++ b/client/src/styles/main.scss @@ -26,3 +26,4 @@ @import "book-subnavigation"; @import "simple-list"; @import "widget-popover"; +@import "toast";