refs #28 Add new toot modal

src/renderer/components/TimelineSpace.vue

@@ -4,15 +4,17 @@
   <div class="content">
     <router-view></router-view>
   </div>
+  <new-toot-modal></new-toot-modal>
 </div>
 </template>
 
 <script>
 import SideMenu from './TimelineSpace/SideMenu'
+import NewTootModal from './TimelineSpace/NewTootModal'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu },
+  components: { SideMenu, NewTootModal },
   created () {
     this.$store.dispatch('TimelineSpace/fetchAccount', this.$route.params.id)
       .then((account) => {
@@ -36,8 +38,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .content {
   margin-left: 180px;
 }
+
 </style>

src/renderer/components/TimelineSpace/NewTootModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog
+    title="New Toot"
+    :visible.sync="newTootModal"
+    width="400px"
+    custom-class="new-toot-modal">
+    <el-form :model="tootForm">
+      <el-input type="textarea" v-model="tootForm.body" class="body"></el-input>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button>Cancel</el-button>
+      <el-button type="primary">Toot</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'new-toot-modal',
+  data () {
+    return {
+      tootForm: {
+        body: ''
+      }
+    }
+  },
+  computed: {
+    newTootModal: {
+      get () {
+        return this.$store.state.TimelineSpace.newTootModal
+      },
+      set (value) {
+        this.$store.commit('TimelineSpace/changeNewTootModal', value)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.new-toot-modal {
+  .el-dialog__header {
+    background-color: #4a5664;
+
+    .el-dialog__title {
+      color: #ebeef5;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0;
+
+    .body {
+      textarea {
+        border: 0;
+        resize: none;
+        height: 120px;
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    background-color: #f2f6fc;
+  }
+}
+</style>