Add toot modal ready for display toot detail

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -43,7 +43,7 @@
         </el-button>
         <popover name="menu" :width="120">
           <ul class="toot-menu">
-            <li>
+            <li role="button" @click="openDetail(message)">
               View Toot Detail
             </li>
           </ul>
@@ -89,6 +89,9 @@ export default {
     openReply (message) {
       this.$store.dispatch('TimelineSpace/Modals/NewToot/openReply', message)
     },
+    openDetail (message) {
+      this.$store.dispatch('TimelineSpace/Modals/Toot/openToot', message)
+    },
     changeReblog (message) {
       if (message.reblogged) {
         this.$store.dispatch('TimelineSpace/Contents/Cards/Toot/unreblog', message)

src/renderer/components/TimelineSpace/Modals.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <toot></toot>
     <new-toot></new-toot>
     <jump></jump>
     <image-viewer></image-viewer>
@@ -7,6 +8,7 @@
 </template>
 
 <script>
+import Toot from './Modals/Toot'
 import NewToot from './Modals/NewToot'
 import Jump from './Modals/Jump'
 import ImageViewer from './Modals/ImageViewer'
@@ -14,6 +16,7 @@ import ImageViewer from './Modals/ImageViewer'
 export default {
   name: 'modals',
   components: {
+    Toot,
     NewToot,
     Jump,
     ImageViewer

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

@@ -0,0 +1,114 @@
+<template>
+  <el-dialog
+    title="Toot Detail"
+    :visible.sync="tootModal"
+    width="400px"
+    class="toot-modal">
+    Hello World
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'toot',
+  computed: {
+    tootModal: {
+      get () {
+        return this.$store.state.TimelineSpace.Modals.Toot.modalOpen
+      },
+      set (value) {
+        this.$store.dispatch('TimelineSpace/Modals/Toot/changeModal', value)
+      }
+    }
+  },
+  updated () {
+    if (this.TootModal) {
+      this.$refs.status.focus()
+    }
+  },
+  methods: {
+    close () {
+      this.$store.dispatch('TimelineSpace/Modals/Toot/changeModal', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.toot-modal /deep/ {
+  .el-dialog__header {
+    background-color: #4a5664;
+
+    .el-dialog__title {
+      color: #ebeef5;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0;
+
+    .status {
+      textarea {
+        display: block;
+        padding: 5px 15px;
+        line-height: 1.5;
+        box-sizing: border-box;
+        width: 100%;
+        font-size: inherit;
+        color: #606266;
+        background-image: none;
+        border: 0;
+        border-radius: 4px;
+        resize: none;
+        height: 120px;
+        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+      }
+
+      textarea:focus {
+        outline: 0;
+      }
+    }
+
+    .preview {
+      box-sizing: border-box;
+      padding: 0 12px;
+
+      .image-wrapper {
+        position: relative;
+        display: inline-block;
+
+        .preview-image {
+          width: 60px;
+          margin-right: 8px;
+        }
+
+        .remove-image {
+          position: absolute;
+          top: 0;
+          left: 0;
+          padding: 0;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    background-color: #f2f6fc;
+
+    .upload-image {
+      text-align: left;
+      float: left;
+
+      .image-input {
+        display: none;
+      }
+    }
+
+    .text-count {
+      padding-right: 24px;
+      color: #909399;
+    }
+  }
+}
+</style>

src/renderer/store/TimelineSpace/Modals.js

@@ -1,4 +1,5 @@
 import NewToot from './Modals/NewToot'
+import Toot from './Modals/Toot'
 import ImageViewer from './Modals/ImageViewer'
 import Jump from './Modals/Jump'
 
@@ -7,6 +8,7 @@ const Modals = {
   modules: {
     ImageViewer,
     NewToot,
+    Toot,
     Jump
   }
 }

src/renderer/store/TimelineSpace/Modals/Toot.js

@@ -0,0 +1,28 @@
+// import Mastodon from 'mastodon-api'
+// import { ipcRenderer } from 'electron'
+// import fs from 'fs'
+
+const Toot = {
+  namespaced: true,
+  state: {
+    modalOpen: false
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    }
+  },
+  actions: {
+    openToot ({ commit }, message) {
+      commit('changeModal', true)
+    },
+    changeModal ({ commit }, value) {
+      commit('changeModal', value)
+    }
+  }
+}
+
+export default Toot
+
+// class AuthenticationError {}
+// class UnknownTypeError {}