refs #143 Open images in modal window when click the preview

src/renderer/components/TimelineSpace.vue

@@ -11,6 +11,7 @@
   </div>
   <new-toot-modal></new-toot-modal>
   <jump-modal></jump-modal>
+  <image-viewer></image-viewer>
 </div>
 </template>
 
@@ -19,10 +20,11 @@ import SideMenu from './TimelineSpace/SideMenu'
 import HeaderMenu from './TimelineSpace/HeaderMenu'
 import NewTootModal from './TimelineSpace/NewTootModal'
 import JumpModal from './TimelineSpace/JumpModal'
+import ImageViewer from './TimelineSpace/Modals/ImageViewer'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu, HeaderMenu, NewTootModal, JumpModal },
+  components: { SideMenu, HeaderMenu, NewTootModal, JumpModal, ImageViewer },
   created () {
     const loading = this.$loading({
       lock: true,

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

@@ -15,7 +15,7 @@
       <div class="content" v-html="message.content" @click.capture.prevent="tootClick"></div>
       <div class="attachments">
         <div class="media" v-for="media in originalMessage(message).media_attachments">
-          <img :src="media.preview_url" />
+          <img :src="media.preview_url" @click="openImage(media.url)"/>
         </div>
       </div>
       <div class="reblogger" v-if="message.reblog !== null">
@@ -127,6 +127,9 @@ export default {
             })
           })
       }
+    },
+    openImage (url) {
+      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
     }
   }
 }
@@ -195,6 +198,7 @@ function findLink (target) {
     .attachments {
       .media {
         img {
+          cursor: zoom-in;
           width: 200px;
           max-width: 100%;
           border-radius: 8px;

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

@@ -0,0 +1,68 @@
+<template>
+<div id="image" v-if="modalOpen">
+  <div class="image-wrapper">
+    <div class="image-header">
+      <i class="el-icon-close" @click="close"></i>
+    </div>
+    <div class="image-content">
+      <img :src="imageURL">
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'image-viewer',
+  computed: {
+    ...mapState({
+      modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen,
+      imageURL: state => state.TimelineSpace.Modals.ImageViewer.imageURL
+    })
+  },
+  methods: {
+    close () {
+      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image-wrapper {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .image-header {
+    width: 100%;
+    text-align: right;
+    padding: 8px 8px 0 0 ;
+    color: #409eff;
+    box-sizing: border-box;
+    font-size: 18px;
+
+    i {
+      font-weight: 800;
+      cursor: pointer;
+    }
+  }
+
+  .image-content {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      max-width: 80%;
+    }
+  }
+}
+</style>

src/renderer/store/TimelineSpace.js

@@ -9,6 +9,7 @@ import Public from './TimelineSpace/Public'
 import Cards from './TimelineSpace/Cards'
 import NewTootModal from './TimelineSpace/NewTootModal'
 import JumpModal from './TimelineSpace/JumpModal'
+import Modals from './TimelineSpace/Modals'
 import router from '../router'
 
 const TimelineSpace = {
@@ -22,7 +23,8 @@ const TimelineSpace = {
     Public,
     Cards,
     NewTootModal,
-    JumpModal
+    JumpModal,
+    Modals
   },
   state: {
     account: {

src/renderer/store/TimelineSpace/Modals.js

@@ -0,0 +1,10 @@
+import ImageViewer from './Modals/ImageViewer'
+
+const Modals = {
+  namespaced: true,
+  modules: {
+    ImageViewer
+  }
+}
+
+export default Modals

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

@@ -0,0 +1,27 @@
+const ImageViewer = {
+  namespaced: true,
+  state: {
+    modalOpen: false,
+    imageURL: ''
+  },
+  mutations: {
+    changeModal (state, value) {
+      state.modalOpen = value
+    },
+    changeImageURL (state, url) {
+      state.imageURL = url
+    }
+  },
+  actions: {
+    openModal ({ commit }, url) {
+      commit('changeModal', true)
+      commit('changeImageURL', url)
+    },
+    closeModal ({ commit }) {
+      commit('changeModal', false)
+      commit('changeImageURL', '')
+    }
+  }
+}
+
+export default ImageViewer