Fix Modal Stack - reopening modals (#10493)

* use fallback target.id - only scroll modal content (not the page)

* fix lint

* debug information

* add snackbar onClick callback - use notification instead of modal for joined-challenge

* revert console.log / fix lint

website/client/app.vue

@@ -105,7 +105,7 @@ div
   @import '~client/assets/scss/colors.scss';
 
   /* @TODO: The modal-open class is not being removed. Let's try this for now */
-  .modal, .modal-open {
+  .modal {
     overflow-y: scroll !important;
   }
 
@@ -499,8 +499,16 @@ export default {
       });
 
       this.$root.$on('bv::modal::hidden', (bvEvent) => {
-        const modalId = bvEvent.target && bvEvent.target.id;
-        if (!modalId) return;
+        let modalId = bvEvent.target && bvEvent.target.id;
+
+        // sometimes the target isn't passed to the hidden event, fallback is the vueTarget
+        if (!modalId) {
+          modalId = bvEvent.vueTarget && bvEvent.vueTarget.id;
+        }
+
+        if (!modalId) {
+          return;
+        }
 
         const modalStack = this.$store.state.modalStack;
 
@@ -517,6 +525,7 @@ export default {
 
         // Get previous modal
         const modalBefore = modalOnTop ? modalOnTop.prev : undefined;
+
         if (modalBefore) this.$root.$emit('bv::show::modal', modalBefore, {fromRoot: true});
       });
     },

website/client/components/notifications.vue

@@ -485,7 +485,9 @@ export default {
             break;
           case 'CHALLENGE_JOINED_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'joined-challenge');
+            this.text(`${this.$t('achievement')}: ${this.$t('joinedChallenge')}`, () => {
+              this.$root.$emit('bv::show::modal', 'joined-challenge');
+            }, false);
             break;
           case 'INVITED_FRIEND_ACHIEVEMENT':
             this.playSound('Achievement_Unlocked');

website/client/components/snackbars/notification.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 transition(name="fade")
-  .notification.callout.animated(:class="classes", v-if='show', @click='show = false')
+  .notification.callout.animated(:class="classes", v-if='show', @click='handleOnClick()')
     .row(v-if='notification.type === "error"')
       .text.col-12
         div(v-html='notification.text')
@@ -146,6 +146,15 @@ export default {
   beforeDestroy () {
     clearTimeout(this.timer);
   },
+  methods: {
+    handleOnClick () {
+      if (typeof this.notification.onClick === 'function') {
+        this.notification.onClick();
+      }
+
+      this.show = false;
+    },
+  },
   watch: {
     show () {
       this.$store.dispatch('snackbars:remove', this.notification);

website/client/mixins/notifications.js

@@ -56,9 +56,9 @@ export default {
     streak (val) {
       this.notify(`${val}`, 'streak');
     },
-    text (val, onClick) {
+    text (val, onClick, timeout) {
       if (!val) return;
-      this.notify(val, 'info', null, null, onClick);
+      this.notify(val, 'info', null, null, onClick, timeout);
     },
     sign (number) {
       return getSign(number);
@@ -66,14 +66,19 @@ export default {
     round (number, nDigits) {
       return round(number, nDigits);
     },
-    notify (html, type, icon, sign) {
+    notify (html, type, icon, sign, onClick, timeout) {
+      if (typeof timeout === 'undefined') {
+        timeout = true;
+      }
+
       this.$store.dispatch('snackbars:add', {
         title: '',
         text: html,
         type,
         icon,
         sign,
-        timeout: true,
+        onClick,
+        timeout,
       });
     },
   },

website/common/locales/en/achievements.json

@@ -1,4 +1,5 @@
 {
+  "achievement": "Achievement",
   "share": "Share",
   "onwards": "Onwards!",
   "levelup": "By accomplishing your real life goals, you leveled up and are now fully healed!",