Fix Modals

frontend/utils/events.js

@@ -6,9 +6,7 @@ export const REPLACED_STATE = 'replaced-state'
 export const CONTRACTS_MODIFIED = 'contracts-modified'
 
 export const OPEN_MODAL = 'open-modal'
-export const LOAD_MODAL = 'load-modal'
 export const CLOSE_MODAL = 'close-modal'
-export const UNLOAD_MODAL = 'unload-modal'
 export const REPLACE_MODAL = 'replace-modal'
 
 export const PROPOSAL_RESULT = 'proposal-result'

frontend/utils/lazyLoadedView.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-// NOTE: any modals opened with `LOAD_MODAL` go here
+// NOTE: any modals opened with `OPEN_MODAL` go here
 Vue.component('LoginModal', () => import('../views/containers/modals/Login.vue'))
 Vue.component('SignUp', () => import('../views/containers/modals/SignUp.vue'))
 Vue.component('Settings', () => import('../views/containers/settings/Wrapper.vue'))
@@ -19,4 +19,5 @@ Vue.component('RuleRemoveMemberProposal', () => import('../views/containers/prop
 
 // TODO Remove after design test period
 Vue.component('DesignSystemModal', () => import('../views/containers/modals/DesignSystem.vue'))
+Vue.component('DesignSystemModalBase', () => import('../views/containers/modals/DesignSystemBase.vue'))
 Vue.component('TimeTravel', () => import('../views/containers/TimeTravel.vue'))

frontend/views/components/Chatroom/ChatMain.vue

@@ -161,7 +161,6 @@ export default {
       return this.details.conversation.findIndex(message => message.unread === true)
     },
     getPendingAt () {
-      console.log('PLOP')
       return this.ephemeral.pendingMessages.map((message, index) => ({
         text: message.text,
         who: this.who(true),

frontend/views/components/CreateGroupSteps/GroupName.vue

@@ -117,10 +117,12 @@ export default {
   img {
     display: block;
     width: 113px;
+    height: 113px;
     margin: 0 auto;
 
     @include tablet {
       width: 71px;
+      height: 71px;
     }
   }
 }

frontend/views/components/GroupSettings.vue

@@ -35,7 +35,7 @@
 <script>
 import sbp from '~/shared/sbp.js'
 import { toPercent } from '@view-utils/filters.js'
-import { LOAD_MODAL } from '@utils/events.js'
+import { OPEN_MODAL } from '@utils/events.js'
 
 // TODO: there is another file called GroupSettings in pages/, rename this one (and move it?)
 export default {
@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     openProposal (component) {
-      sbp('okTurtles.events/emit', LOAD_MODAL, component)
+      sbp('okTurtles.events/emit', OPEN_MODAL, component)
     }
   }
 }

frontend/views/components/Modal/Modal.vue

@@ -1,78 +1,100 @@
 <template lang='pug'>
   div
-    component(:is='content')
+    component(:is='content' ref='content')
     component(:is='subcontent[subcontent.length-1]')
 </template>
 <script>
 import sbp from '~/shared/sbp.js'
-import { OPEN_MODAL, LOAD_MODAL, UNLOAD_MODAL, REPLACE_MODAL, CLOSE_MODAL } from '@utils/events.js'
+import { OPEN_MODAL, REPLACE_MODAL, CLOSE_MODAL } from '@utils/events.js'
 
 export default {
   name: 'Modal',
   data () {
     return {
-      // QUESTION: What's the dif between content and subcontent?
-      // What are the use cases of it?
-      content: null,
-      subcontent: []
+      content: null, // This is the main modal
+      subcontent: [] // This is for collection of modal on top of modals
     }
   },
   created () {
-    sbp('okTurtles.events/on', LOAD_MODAL, component => this.openModal(component))
-    sbp('okTurtles.events/on', UNLOAD_MODAL, component => this.closeModal(component))
+    sbp('okTurtles.events/on', OPEN_MODAL, component => this.openModal(component))
+    sbp('okTurtles.events/on', CLOSE_MODAL, component => this.unloadModal(component))
     sbp('okTurtles.events/on', REPLACE_MODAL, component => this.replaceModal(component))
+    // When press escape it should close the modal
+    window.addEventListener('keyup', this.handleKeyUp)
   },
   mounted () {
-    const modal = this.$route.query.modal
-    if (modal) this.openModal(modal)
+    this.initializeModals()
   },
   beforeDestroy () {
-    sbp('okTurtles.events/off', LOAD_MODAL, this.openModal)
-    sbp('okTurtles.events/off', UNLOAD_MODAL, this.closeModal)
-    sbp('okTurtles.events/off', REPLACE_MODAL, this.replaceModal)
+    sbp('okTurtles.events/off', OPEN_MODAL)
+    sbp('okTurtles.events/off', CLOSE_MODAL)
+    sbp('okTurtles.events/off', REPLACE_MODAL)
+    window.removeEventListener('keyup', this.handleKeyUp)
   },
   watch: {
     '$route' (to, from) {
-      if (from.query.modal && !to.query.modal) {
-        sbp('okTurtles.events/emit', CLOSE_MODAL)
+      if (to.query.modal) {
+        // We reset the modals with no animation for simplicity
+        if (to.query.modal !== this.content) this.content = to.query.modal
+        const subcontent = to.query.subcontent
+        if (subcontent !== this.activeSubcontent()) {
+          // Try to find the new subcontent in the list of subcontent
+          const i = this.subcontent.indexOf(subcontent)
+          if (i) {
+            this.subcontent = this.subcontent.splice(0, i)
+          } else this.subcontent = subcontent
+        }
+      } else {
+        // When the route change we compare to see if the modal changed
+        // If so, we send the event to close the modal
+        if (from.query.modal) {
+          sbp('okTurtles.events/emit', CLOSE_MODAL)
+        }
       }
     }
   },
   methods: {
+    handleKeyUp (e) {
+      // Only if there an active modal
+      if (this.content && e.key === 'Escape') {
+        this.unloadModal()
+      }
+    },
+    activeSubcontent () {
+      return this.subcontent[this.subcontent.length - 1]
+    },
+    initializeModals () {
+      const modal = this.$route.query.modal
+      if (modal) this.openModal(modal)
+      const subcontent = this.$route.query.subcontent
+      if (subcontent) this.openModal(subcontent)
+    },
+    updateUrl () {
+      if (this.content) {
+        this.$router.push({ query: { modal: this.content, subcontent: this.activeSubcontent() } })
+      } else {
+        this.$router.push({ query: null })
+      }
+    },
     openModal (componentName) {
       if (this.content) {
         this.subcontent.push(componentName)
-        // QUESTION: Why emmiting this event if
-        // there is not any events/on' poiting to OPEN_MODAL?
-        sbp('okTurtles.events/emit', OPEN_MODAL)
       } else {
         this.content = componentName
-        // QUESTION: Same here..
-        sbp('okTurtles.events/emit', OPEN_MODAL)
       }
-      this.$router.push({ query: { modal: this.content, subcontent: this.subcontent[this.subcontent.length - 1] } })
-    },
-    replaceModal (componentName) {
-      this.closeModal()
-      setTimeout(() => {
-        this.openModal(componentName)
-      }, 300)
+      this.updateUrl()
     },
-    closeModal () {
-      const query = this.$route.query || {}
-
+    unloadModal (name) {
       if (this.subcontent.length) {
         this.subcontent.pop()
-        query.subcontent = this.subcontent[this.subcontent.length - 1]
-        query.modal = this.content
       } else {
-        this.content = undefined
+        this.content = null
       }
-
-      // BUG: This isn't working at all but if you pause the dev
-      // tools and do it manually on the console it works :/
-      // Avoid event problem by removing completly the component
-      this.$router.push({ query: query })
+      this.updateUrl()
+    },
+    replaceModal (componentName) {
+      this.unloadModal()
+      this.openModal(componentName)
     }
   }
 }

frontend/views/components/Modal/ModalBaseTemplate.vue

@@ -1,5 +1,5 @@
 <template lang='pug'>
-  transition(name='zoom' appear @after-leave='$destroy()')
+  transition(name='zoom' appear @after-leave='unload')
     .modal(data-test='modal' role='dialog' v-if='isActive')
       modal-close(@close='close')
       slot
@@ -15,6 +15,8 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+@import "../../../assets/style/_variables.scss";
+
 .modal {
   display: flex;
   position: fixed;
@@ -29,4 +31,15 @@ export default {
 .modal-body {
   height: 100%;
 }
+
+.modal .c-modal-close {
+  background-color: $background;
+}
+
+.has-background .c-modal-close {
+  background-color: $general_1;
+  @include tablet {
+    background-color: $background;
+  }
+}
 </style>

frontend/views/components/Modal/ModalClose.vue

@@ -1,13 +1,22 @@
 <template lang='pug'>
   button.c-modal-close(
+    :class='{ "back-on-mobile": backOnMobile }'
     @click.self='$emit("close")'
     aria-label='close'
   )
+    i.icon-chevron-left(aria-hidden='true')
 </template>
 
 <script>
 export default {
-  name: 'ModalClose'
+  name: 'ModalClose',
+
+  props: {
+    backOnMobile: {
+      type: Boolean,
+      default: false
+    }
+  }
 }
 </script>
 
@@ -16,32 +25,31 @@ export default {
 
 .c-modal-close {
   position: absolute;
-  right: 1rem;
-  top: 1.375rem;
+  right: $spacer;
+  top: $spacer;
   z-index: 4;
-  height: 32px;
-  min-height: 32px;
-  width: 32px;
+  height: 2.75rem;
+  width: 2.75rem;
   border: none;
   border-radius: 50%;
   padding: 0;
-  @extend %unselectable;
   -moz-appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   background-color: $general_1;
 
+  i {
+    display: none;
+  }
+
   @include tablet {
-    background-color: $background;
-    top: 24px;
-    right: 24px;
-    height: 40px;
-    width: 40px;
+    top: 1.5rem;
+    right: 1.5rem;
   }
 
   @include desktop {
-    top: 1rem;
-    right: 1rem;
+    top: $spacer;
+    right: $spacer;
   }
 
   &::before,
@@ -77,5 +85,25 @@ export default {
       transform: translateX(-50%) translateY(-50%) rotate(0);
     }
   }
+
+  &.back-on-mobile {
+    @include until($tablet) {
+      position: relative;
+      left: 0;
+      top: 0;
+      margin-right: $spacer;
+
+      i {
+        display: block;
+        color: $text_0;
+        margin-left: 0;
+      }
+
+      &::before,
+      &::after {
+        content: none;
+      }
+    }
+  }
 }
 </style>

frontend/views/components/Modal/ModalMixins.js

@@ -1,9 +1,14 @@
 import sbp from '~/shared/sbp.js'
-import { CLOSE_MODAL, UNLOAD_MODAL } from '~/frontend/utils/events.js'
+import { CLOSE_MODAL } from '~/frontend/utils/events.js'
 import ModalClose from './ModalClose.vue'
-let keyboardEvent = Event
 
 const modaMixins = {
+  props: {
+    backOnMobile: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       isActive: true
@@ -12,39 +17,12 @@ const modaMixins = {
   components: {
     ModalClose
   },
-  mounted () {
-    sbp('okTurtles.events/on', CLOSE_MODAL, this.hide)
-    keyboardEvent = window.addEventListener('keyup', (e) => {
-      if (e.key === 'Escape') {
-        this.close()
-      }
-    })
-  },
-  beforeDestroy () {
-    sbp('okTurtles.events/emit', UNLOAD_MODAL)
-    window.removeEventListener('keyup', keyboardEvent)
-  },
   methods: {
     close (e) {
-      sbp('okTurtles.events/emit', CLOSE_MODAL)
-    },
-    hide () {
-      // Only the last open modal should close
-      // TODO: find a more eleguant way to identify the current instance
-      // Maybe saving the name in the modal ?
-      const instance = this.$parent.$options._componentTag
-      const query = this.$route.query
-      if (query) {
-        const subcontent = query.subcontent
-        if (subcontent) {
-          if (subcontent === instance) this.isActive = false
-          // Don't do anything if it's not the last modal
-          return false
-        }
-      }
-      // Remove event only if it's the last modal
-      sbp('okTurtles.events/off', CLOSE_MODAL)
       this.isActive = false
+    },
+    unload () {
+      sbp('okTurtles.events/emit', CLOSE_MODAL)
     }
   }
 }