refs #1453 Display quote target status in new toot

src/renderer/components/TimelineSpace/Modals/NewToot.vue

@@ -8,6 +8,7 @@
     ref="dialog"
   >
     <el-form v-on:submit.prevent="toot" role="form">
+      <Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
       <div class="spoiler" v-if="showContentWarning" ref="spoiler">
         <div class="el-input">
           <input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" v-shortkey.avoid />
@@ -145,6 +146,7 @@ import { mapState, mapGetters } from 'vuex'
 import Visibility from '~/src/constants/visibility'
 import Status from './NewToot/Status'
 import Poll from './NewToot/Poll'
+import Quote from './NewToot/Quote'
 import { NewTootTootLength, NewTootAttachLength, NewTootModalOpen, NewTootBlockSubmit, NewTootPollInvalid } from '@/errors/validations'
 import { Event } from '~/src/renderer/components/event'
 
@@ -152,7 +154,8 @@ export default {
   name: 'new-toot',
   components: {
     Status,
-    Poll
+    Poll,
+    Quote
   },
   data() {
     return {
@@ -178,6 +181,7 @@ export default {
           return null
         }
       },
+      quoteToMessage: state => state.quoteToMessage,
       attachedMedias: state => state.attachedMedias,
       attachedMediaId: state => state.attachedMediaId,
       mediaDescriptions: state => state.mediaDescriptions,
@@ -205,6 +209,9 @@ export default {
     ...mapState('TimelineSpace', {
       tootMax: state => state.tootMax
     }),
+    ...mapState('App', {
+      displayNameStyle: state => state.displayNameStyle
+    }),
     ...mapGetters('TimelineSpace/Modals/NewToot', ['hashtagInserting']),
     newTootModal: {
       get() {
@@ -424,7 +431,11 @@ export default {
       if (style.overflow === '' || style.overflow === 'hidden') {
         const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
         const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
-        this.statusHeight = event.height - 63 - 54 - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight
+        const quoteHeight = this.$refs.quote ? this.$refs.quote.$el.offsetHeight : 0
+        const headerHeight = 54
+        const footerHeight = 63
+        this.statusHeight =
+          event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight
       }
     },
     innerElementOpened(open) {

src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="quote-target">
+    <div class="icon">
+      <FailoverImg :src="message.account.avatar" />
+    </div>
+    <div class="detail">
+      <div class="toot-header">
+        <div class="user">
+          <span class="display-name"><bdi v-html="username(message.account)"></bdi></span>
+          <span class="acct">{{ accountName(message.account) }}</span>
+        </div>
+        <div class="clearfix"></div>
+      </div>
+      <div class="content-wrapper">
+        <div class="spoiler" v-html="emojiText(message.spoiler_text, message.emojis)"></div>
+        <div class="content" v-html="emojiText(message.content, message.emojis)"></div>
+      </div>
+    </div>
+    <div class="clearfix"></div>
+  </div>
+</template>
+
+<script>
+import DisplayStyle from '~/src/constants/displayStyle'
+import FailoverImg from '@/components/atoms/FailoverImg'
+import emojify from '@/utils/emojify'
+
+export default {
+  new: 'quote-target',
+  components: {
+    FailoverImg
+  },
+  props: {
+    message: {
+      type: Object,
+      default: {}
+    },
+    displayNameStyle: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    username(account) {
+      switch (this.displayNameStyle) {
+        case DisplayStyle.DisplayNameAndUsername.value:
+          if (account.display_name !== '') {
+            return emojify(account.display_name, account.emojis)
+          } else {
+            return account.acct
+          }
+        case DisplayStyle.DisplayName.value:
+          if (account.display_name !== '') {
+            return emojify(account.display_name, account.emojis)
+          } else {
+            return account.acct
+          }
+        case DisplayStyle.Username.value:
+          return account.acct
+      }
+    },
+    accountName(account) {
+      switch (this.displayNameStyle) {
+        case DisplayStyle.DisplayNameAndUsername.value:
+          return `@${account.acct}`
+        case DisplayStyle.DisplayName.value:
+        case DisplayStyle.Username.value:
+          return ''
+      }
+    },
+    emojiText(content, emojis) {
+      return emojify(content, emojis)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.quote-target {
+  background-color: var(--theme-background-color);
+  padding: 8px 12px;
+
+  .icon {
+    float: left;
+
+    img {
+      width: 28px;
+      height: 28px;
+      border-radius: 4px;
+      display: block;
+    }
+  }
+
+  .detail {
+    margin: 0 8px 0 8px;
+    float: left;
+    width: calc(100% - 52px);
+
+    .content-wrapper /deep/ {
+      font-size: var(--base-font-size);
+      color: var(--theme-primary-color);
+
+      blockquote {
+        padding-left: 10px;
+        border-left: 3px solid #9baec8;
+        color: #9baec8;
+        margin: 0;
+      }
+
+      .content {
+        margin: var(--toot-padding) 0;
+        word-wrap: break-word;
+
+        pre {
+          white-space: pre-wrap;
+        }
+      }
+
+      .content p {
+        unicode-bidi: plaintext;
+      }
+
+      .emojione {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .toot-header {
+      .user {
+        float: left;
+        font-size: var(--base-font-size);
+        white-space: nowrap;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .display-name /deep/ {
+          font-weight: 800;
+          color: var(--theme-primary-color);
+
+          .emojione {
+            max-width: 14px;
+            max-height: 14px;
+          }
+        }
+
+        .acct {
+          font-weight: normal;
+          color: var(--theme-secondary-color);
+        }
+      }
+    }
+
+    .spoiler {
+      margin: 8px 0;
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+}
+</style>

src/renderer/components/organisms/Toot.vue

@@ -167,7 +167,7 @@
           <span class="count">
             {{ favouritesCount }}
           </span>
-          <el-button type="text" class="quote-btn" v-if="quoteSupported">
+          <el-button type="text" class="quote-btn" v-if="quoteSupported" @click="openQuote()">
             <icon name="quote-right" scale="0.9"></icon>
           </el-button>
           <template v-if="sns !== 'mastodon'">
@@ -376,7 +376,7 @@ export default {
       return this.message.visibility === 'direct'
     },
     quoteSupported: function () {
-      return QuoteSupported(this.sns, this.account)
+      return QuoteSupported(this.sns, this.account.domain)
     }
   },
   mounted() {
@@ -675,6 +675,9 @@ export default {
         native: native
       })
       this.$emit('update', status)
+    },
+    openQuote() {
+      this.$store.dispatch('TimelineSpace/Modals/NewToot/openQuote', this.originalMessage)
     }
   }
 }

src/renderer/store/TimelineSpace/Modals/NewToot.ts

@@ -35,6 +35,7 @@ export type NewTootState = {
   initialStatus: string
   initialSpoiler: string
   replyToMessage: Entity.Status | null
+  quoteToMessage: Entity.Status | null
   blockSubmit: boolean
   attachedMedias: Array<Entity.Attachment>
   mediaDescriptions: { [key: string]: string | null }
@@ -57,6 +58,7 @@ const state = (): NewTootState => ({
   initialStatus: '',
   initialSpoiler: '',
   replyToMessage: null,
+  quoteToMessage: null,
   blockSubmit: false,
   attachedMedias: [],
   mediaDescriptions: {},
@@ -71,6 +73,7 @@ const state = (): NewTootState => ({
 export const MUTATION_TYPES = {
   CHANGE_MODAL: 'changeModal',
   SET_REPLY_TO: 'setReplyTo',
+  SET_QUOTE_TO: 'setQuoteTo',
   UPDATE_INITIAL_STATUS: 'updateInitialStatus',
   UPDATE_INITIAL_SPOILER: 'updateInitialSpoiler',
   CHANGE_BLOCK_SUBMIT: 'changeBlockSubmit',
@@ -95,6 +98,9 @@ const mutations: MutationTree<NewTootState> = {
   [MUTATION_TYPES.SET_REPLY_TO]: (state, message: Entity.Status) => {
     state.replyToMessage = message
   },
+  [MUTATION_TYPES.SET_QUOTE_TO]: (state, message: Entity.Status) => {
+    state.quoteToMessage = message
+  },
   [MUTATION_TYPES.UPDATE_INITIAL_STATUS]: (state, status: string) => {
     state.initialStatus = status
   },
@@ -293,6 +299,10 @@ const actions: ActionTree<NewTootState, RootState> = {
     })
     commit(MUTATION_TYPES.CHANGE_VISIBILITY_VALUE, value)
   },
+  openQuote: ({ commit }, message: Entity.Status) => {
+    commit(MUTATION_TYPES.SET_QUOTE_TO, message)
+    commit(MUTATION_TYPES.CHANGE_MODAL, true)
+  },
   openModal: ({ dispatch, commit, state }) => {
     if (!state.replyToMessage && state.pinedHashtag) {
       commit(MUTATION_TYPES.UPDATE_INITIAL_STATUS, state.hashtags.map(t => `#${t.name}`).join(' '))