ayanova/src/App.vue

@@ -156,7 +156,7 @@ export default {
   mounted() {
     this.$root.$gzconfirm = this.$refs.gzconfirm.open;
     this.$root.$gznotify = this.$refs.gznotify.addNotification;
-    
+
     //weird bastardization thing
     //basically I want to access $gz in vue components where I can't access Window
     //this smells bad but it works

ayanova/src/api/gzdialog.js

@@ -2,6 +2,14 @@
 
 /* Xeslint-disable */
 var VM_LOCAL = null;
+
+//Calculate a reasonable time to show the alert based on the size of the message and some sane bounds
+//https://ux.stackexchange.com/a/85898
+function CalculateDelay(msg) {
+  //Min 2 seconds max 8 seconds
+  return Math.min(Math.max(msg.length * 50, 3000), 8000);
+}
+
 /////////////////////////////////
 // Dialog, toast, notification
 // utils and handlers
@@ -17,16 +25,32 @@ export default {
 
     ///////////
     //ERROR
-    window.$gz.eventBus.$on("notify-error", function handleNotifyWarn(msg) {
+    window.$gz.eventBus.$on("notify-error", function handleNotifyWarn(
+      msg,
+      helpUrl
+    ) {
       window.$gz.store.commit("logItem", "notify-error: " + msg);
-      vm.$root.$gznotify({ message: msg, type: "error", timeout: 5000 });
+      vm.$root.$gznotify({
+        message: msg,
+        type: "error",
+        timeout: CalculateDelay(msg),
+        helpUrl: helpUrl
+      });
     });
 
     ///////////
     //WARNING
-    window.$gz.eventBus.$on("notify-warning", function handleNotifyWarn(msg) {
+    window.$gz.eventBus.$on("notify-warning", function handleNotifyWarn(
+      msg,
+      helpUrl
+    ) {
       window.$gz.store.commit("logItem", "notify-warning: " + msg);
-      vm.$root.$gznotify({ message: msg, type: "warning", timeout: 4000 });
+      vm.$root.$gznotify({
+        message: msg,
+        type: "warning",
+        timeout: CalculateDelay(msg),
+        helpUrl: helpUrl
+      });
     });
 
     ///////////
@@ -39,15 +63,23 @@ export default {
       vm.$root.$gznotify({
         message: msg,
         type: "info",
-        timeout: 3000,
+        timeout: CalculateDelay(msg),
         helpUrl: helpUrl
       });
     });
 
     ///////////
     //SUCCESS
-    window.$gz.eventBus.$on("notify-success", function handleNotifyWarn(msg) {
+    window.$gz.eventBus.$on("notify-success", function handleNotifyWarn(
-      vm.$root.$gznotify({ message: msg, type: "success", timeout: 2000 });
+      msg,
+      helpUrl
+    ) {
+      vm.$root.$gznotify({
+        message: msg,
+        type: "success",
+        timeout: CalculateDelay(msg),
+        helpUrl: helpUrl
+      });
     });
 
     VM_LOCAL = vm;

ayanova/src/api/initialize.js

@@ -156,6 +156,16 @@ export default function initialize() {
                   );
                 }
 
+                // window.$gz.eventBus.$emit("notify-success", "Success");
+                // window.$gz.eventBus.$emit(
+                //   "notify-warning",
+                //   "This is a very long warning, it has a lot of text and goes on and on and on.  Hard to understand why anyone would do it this way but whatever right?@!"
+                // );
+                // window.$gz.eventBus.$emit(
+                //   "notify-error",
+                //   "This is a medium error"
+                // );
+
                 //Store offset in locale data
                 //TODO: also need the other locale settings such as number and date formats etc to be added at server
                 window.$gz.store.commit("setLocale", {

ayanova/src/components/gznotify.vue

@@ -1,12 +1,14 @@
 <template>
-  <v-snackbar dismissable :value="isVisible" :color="currentNotification.type">
+  <!-- <v-scale-transition> -->
-    <v-alert :type="currentNotification.type" transition="scale-transition">
+  <v-snackbar :value="isVisible" :color="currentNotification.type">
+    <v-alert :type="currentNotification.type" mode="out-in">
       {{ currentNotification.message }}
     </v-alert>
     <v-btn text v-if="currentNotification.helpUrl" @click="helpClick()">
       {{ this.$root.$gz.locale.get("More") }}
     </v-btn>
   </v-snackbar>
+  <!-- </v-scale-transition> -->
 </template>
 
 <script>
@@ -54,6 +56,13 @@ export default {
         //If don't use nextTick then don't get all visible when multiple in sequence
         this.$nextTick(() => {
           this.isVisible = true;
+          // eslint-disable-next-line no-console
+          console.log(
+            this.currentNotification.timeout +
+              " (" +
+              this.currentNotification.message +
+              ")"
+          );
         });
 
         //Show it for the designated time before moving on to the next