add new module and modal to post new status

src/App.js

@@ -11,6 +11,7 @@ import SideDrawer from './components/side_drawer/side_drawer.vue'
 import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue'
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
+import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import { windowWidth } from './services/window_utils/window_utils'
 
 export default {
@@ -28,7 +29,8 @@ export default {
     SideDrawer,
     MobilePostStatusModal,
     MobileNav,
-    UserReportingModal
+    UserReportingModal,
+    PostStatusModal
   },
   data: () => ({
     mobileActivePanel: 'timeline',

src/App.vue

@@ -109,6 +109,7 @@
     />
     <MobilePostStatusModal />
     <UserReportingModal />
+    <PostStatusModal />
     <portal-target name="modal" />
   </div>
 </template>

src/components/post_status_modal/post_status_modal.js

@@ -0,0 +1,25 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+
+const PostStatusModal = {
+  components: {
+    PostStatusForm
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    isOpen () {
+      return this.isLoggedIn && this.$store.state.postStatus.modalActivated
+    },
+    params () {
+      return this.$store.state.postStatus.params
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closePostStatusModal')
+    }
+  }
+}
+
+export default PostStatusModal

src/components/post_status_modal/post_status_modal.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="post-form-modal-view modal-view"
+    @click="closeModal"
+  >
+    <div
+      class="post-form-modal-panel panel"
+      @click.stop=""
+    >
+      <div class="panel-heading">
+        {{ $t('post_status.new_status') }}
+      </div>
+      <PostStatusForm
+        class="panel-body"
+        @posted="closeModal"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./post_status_modal.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.post-form-modal-view {
+  align-items: flex-start;
+}
+
+.post-form-modal-panel {
+  flex-shrink: 0;
+  margin-top: 25%;
+  margin-bottom: 2em;
+  width: 100%;
+  max-width: 700px;
+
+  @media (orientation: landscape) {
+    margin-top: 8%;
+  }
+}
+</style>

src/components/user_card/user_card.js

@@ -170,7 +170,7 @@ export default {
       this.$store.dispatch('setCurrent', attachment)
     },
     mentionUser () {
-
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }

src/main.js

@@ -15,6 +15,7 @@ import mediaViewerModule from './modules/media_viewer.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
 import pollsModule from './modules/polls.js'
+import postStatusModule from './modules/postStatus.js'
 
 import VueI18n from 'vue-i18n'
 
@@ -76,7 +77,8 @@ const persistedStateOptions = {
       mediaViewer: mediaViewerModule,
       oauthTokens: oauthTokensModule,
       reports: reportsModule,
-      polls: pollsModule
+      polls: pollsModule,
+      postStatus: postStatusModule
     },
     plugins: [persistedState, pushNotifications],
     strict: false // Socket modifies itself, let's ignore this for now.

src/modules/postStatus.js

@@ -0,0 +1,25 @@
+const postStatus = {
+  state: {
+    params: null,
+    modalActivated: false
+  },
+  mutations: {
+    openPostStatusModal (state, params) {
+      state.params = params
+      state.modalActivated = true
+    },
+    closePostStatusModal (state) {
+      state.modalActivated = false
+    }
+  },
+  actions: {
+    openPostStatusModal ({ commit }, params) {
+      commit('openPostStatusModal', params)
+    },
+    closePostStatusModal ({ commit }) {
+      commit('closePostStatusModal')
+    }
+  }
+}
+
+export default postStatus