Merge branch '639-2' into 'develop'

Add "Mention user" button to user card

Closes #639

See merge request pleroma/pleroma-fe!955

src/components/mobile_post_status_button/mobile_post_status_button.js

@@ -1,14 +1,9 @@
-import PostStatusForm from '../post_status_form/post_status_form.vue'
 import { debounce } from 'lodash'
 
-const MobilePostStatusModal = {
-  components: {
-    PostStatusForm
-  },
+const MobilePostStatusButton = {
   data () {
     return {
       hidden: false,
-      postFormOpen: false,
       scrollingDown: false,
       inputActive: false,
       oldScrollPos: 0,
@@ -28,8 +23,8 @@ const MobilePostStatusModal = {
     window.removeEventListener('resize', this.handleOSK)
   },
   computed: {
-    currentUser () {
-      return this.$store.state.users.currentUser
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
     },
     isHidden () {
       return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
@@ -57,17 +52,7 @@ const MobilePostStatusModal = {
       window.removeEventListener('scroll', this.handleScrollEnd)
     },
     openPostForm () {
-      this.postFormOpen = true
-      this.hidden = true
-
-      const el = this.$el.querySelector('textarea')
-      this.$nextTick(function () {
-        el.focus()
-      })
-    },
-    closePostForm () {
-      this.postFormOpen = false
-      this.hidden = false
+      this.$store.dispatch('openPostStatusModal')
     },
     handleOSK () {
       // This is a big hack: we're guessing from changed window sizes if the
@@ -105,4 +90,4 @@ const MobilePostStatusModal = {
   }
 }
 
-export default MobilePostStatusModal
+export default MobilePostStatusButton

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -1,23 +1,5 @@
 <template>
-  <div v-if="currentUser">
-    <div
-      v-show="postFormOpen"
-      class="post-form-modal-view modal-view"
-      @click="closePostForm"
-    >
-      <div
-        class="post-form-modal-panel panel"
-        @click.stop=""
-      >
-        <div class="panel-heading">
-          {{ $t('post_status.new_status') }}
-        </div>
-        <PostStatusForm
-          class="panel-body"
-          @posted="closePostForm"
-        />
-      </div>
-    </div>
+  <div v-if="isLoggedIn">
     <button
       class="new-status-button"
       :class="{ 'hidden': isHidden }"
@@ -28,27 +10,11 @@
   </div>
 </template>
 
-<script src="./mobile_post_status_modal.js"></script>
+<script src="./mobile_post_status_button.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%;
-  }
-}
-
 .new-status-button {
   width: 5em;
   height: 5em;

src/components/post_status_form/post_status_form.js

@@ -8,7 +8,7 @@ import fileTypeService from '../../services/file_type/file_type.service.js'
 import { reject, map, uniqBy } from 'lodash'
 import suggestor from '../emoji-input/suggestor.js'
 
-const buildMentionsString = ({ user, attentions }, currentUser) => {
+const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   let allAttentions = [...attentions]
 
   allAttentions.unshift(user)

src/components/post_status_modal/post_status_modal.js

@@ -0,0 +1,32 @@
+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 || {}
+    }
+  },
+  watch: {
+    isOpen (val) {
+      if (val) {
+        this.$nextTick(() => this.$el.querySelector('textarea').focus())
+      }
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closePostStatusModal')
+    }
+  }
+}
+
+export default PostStatusModal

src/components/post_status_modal/post_status_modal.vue

@@ -0,0 +1,43 @@
+<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"
+        v-bind="params"
+        @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

@@ -168,6 +168,9 @@ export default {
       }
       this.$store.dispatch('setMedia', [attachment])
       this.$store.dispatch('setCurrent', attachment)
+    },
+    mentionUser () {
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }

src/components/user_card/user_card.vue

@@ -188,6 +188,15 @@
             </ProgressButton>
           </div>
 
+          <div>
+            <button
+              class="btn btn-default btn-block"
+              @click="mentionUser"
+            >
+              {{ $t('user_card.mention') }}
+            </button>
+          </div>
+
           <div>
             <button
               v-if="user.muted"

src/components/user_panel/user_panel.vue

@@ -11,7 +11,7 @@
         rounded="top"
       />
       <div class="panel-footer">
-        <post-status-form v-if="user" />
+        <post-status-form />
       </div>
     </div>
     <auth-form