changeset 1368:d1d8c7bd16a1

switched from vue2-toastr to vue-snotify
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 27 Nov 2018 11:04:21 +0100
parents 5d4bfe4fa13c
children 92bce41c4fa2
files client/package.json client/src/assets/application.sass client/src/components/App.vue client/src/lib/errors.js client/src/main.js client/yarn.lock
diffstat 6 files changed, 29 insertions(+), 28 deletions(-) [+]
line wrap: on
line diff
--- a/client/package.json	Tue Nov 27 10:50:29 2018 +0100
+++ b/client/package.json	Tue Nov 27 11:04:21 2018 +0100
@@ -27,7 +27,6 @@
     "animate.css": "^3.7.0",
     "axios": "^0.18.0",
     "bootstrap": "^4.1.1",
-    "cxlt-vue2-toastr": "^1.1.0",
     "d3": "^5.7.0",
     "debounce": "^1.2.0",
     "font-awesome": "^4.7.0",
@@ -42,6 +41,7 @@
     "vue-color": "^2.6.0",
     "vue-highlightjs": "^1.3.3",
     "vue-router": "^3.0.1",
+    "vue-snotify": "^3.2.1",
     "vuex": "^3.0.1",
     "webpack-cli": "^3.1.2"
   },
--- a/client/src/assets/application.sass	Tue Nov 27 10:50:29 2018 +0100
+++ b/client/src/assets/application.sass	Tue Nov 27 11:04:21 2018 +0100
@@ -12,6 +12,7 @@
  * Thomas Junk <thomas.junk@intevation.de>
  * Markus Kottländer <markus.kottlaender@intevation>
  */
+
 $shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2)
 $border-radius: 0.25rem
 $icon-height: 2rem
--- a/client/src/components/App.vue	Tue Nov 27 10:50:29 2018 +0100
+++ b/client/src/components/App.vue	Tue Nov 27 11:04:21 2018 +0100
@@ -30,6 +30,7 @@
     <div class="d-flex flex-column">
       <router-view/>
     </div>
+    <vue-snotify></vue-snotify>
   </div>
 </template>
 
--- a/client/src/lib/errors.js	Tue Nov 27 10:50:29 2018 +0100
+++ b/client/src/lib/errors.js	Tue Nov 27 11:04:21 2018 +0100
@@ -12,21 +12,23 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 
-/** facade to wrap calls to vue2-toastr */
 import app from "../main";
 
+const displayOptions = {
+  timeout: 2000,
+  showProgressBar: false,
+  closeOnClick: false,
+  pauseOnHover: true,
+  oneAtTime: true,
+  bodyMaxLength: 250
+};
+
 const displayError = ({ title, message }) => {
-  app.$toast.error({
-    title: title,
-    message: message
-  });
+  app.$snotify.error(message, title, displayOptions);
 };
 
 const displayInfo = ({ title, message }) => {
-  app.$toast.info({
-    title: title,
-    message: message
-  });
+  app.$snotify.info(message, title, displayOptions);
 };
 
 export { displayError, displayInfo };
--- a/client/src/main.js	Tue Nov 27 10:50:29 2018 +0100
+++ b/client/src/main.js	Tue Nov 27 11:04:21 2018 +0100
@@ -20,12 +20,12 @@
 import GetTextPlugin from "vue-gettext";
 import translations from "./locale/translations.json";
 import locale2 from "locale2";
-import CxltToastr from "cxlt-vue2-toastr";
+import Snotify, { SnotifyPosition } from "vue-snotify";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import "../node_modules/animate.css/animate.min.css";
 import "../node_modules/ol/ol.css";
-import "../node_modules/cxlt-vue2-toastr/dist/css/cxlt-vue2-toastr.css";
 import "../node_modules/highlight.js/styles/paraiso-dark.css";
+import "../node_modules/vue-snotify/styles/material.css";
 import VTooltip from "v-tooltip";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
@@ -113,16 +113,15 @@
 
 Vue.use(VTooltip);
 
-Vue.use(VueClipboard);
-
-var toastrConfigs = {
-  position: "bottom center",
-  showDuration: 2000,
-  timeOut: 8000,
-  closeButton: true
+const options = {
+  toast: {
+    position: SnotifyPosition.centerBottom
+  }
 };
 
-Vue.use(CxltToastr, toastrConfigs);
+Vue.use(Snotify, options);
+
+Vue.use(VueClipboard);
 
 let browserLanguage = locale2;
 
--- a/client/yarn.lock	Tue Nov 27 10:50:29 2018 +0100
+++ b/client/yarn.lock	Tue Nov 27 11:04:21 2018 +0100
@@ -3119,13 +3119,6 @@
   dependencies:
     array-find-index "^1.0.1"
 
-cxlt-vue2-toastr@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/cxlt-vue2-toastr/-/cxlt-vue2-toastr-1.1.0.tgz#b2cddab6b436f86a9ac3b1d6edcaa7f2cbf5597c"
-  integrity sha1-ss3atrQ2+Gqaw7HW7cqn8sv1WXw=
-  dependencies:
-    vue "^2.2.2"
-
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -10798,6 +10791,11 @@
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
   integrity sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w==
 
+vue-snotify@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/vue-snotify/-/vue-snotify-3.2.1.tgz#1e093838b67ecb4141d6227b6b19175735f4e259"
+  integrity sha512-7kETtCAK3key/mDkz47FY/LuPzDGNwHHrYmS037JuVac2FW/9GTtoCNIrOp+SNbpMHeXFdLIDktkBK0IdPdHew==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@@ -10819,7 +10817,7 @@
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
   integrity sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==
 
-vue@^2.2.2, vue@^2.5.16:
+vue@^2.5.16:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
   integrity sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ==