Merge pull request #1431 from h3poteto/iss-1317

closes #1317 Show link preview in toot

src/renderer/components/molecules/Toot/LinkPreview.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="link" @click="openLink(url)">
+    <el-image :src="icon" class="icon" fit="cover" lazy>
+      <div class="image-slot" slot="error">
+        <i class="el-icon-link"></i>
+      </div>
+    </el-image>
+    <div class="contents">
+      <strong>{{ title }}</strong>
+      <span>{{ description }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'link-preview',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    openLink(link) {
+      if (link) {
+        return window.shell.openExternal(link)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.link {
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 4px;
+  border: 1px solid var(--theme-selected-background-color);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--theme-selected-background-color);
+  }
+
+  .icon {
+    width: 60px;
+    height: 60px;
+    min-width: 60px;
+    min-height: 60px;
+
+    .image-slot {
+      font-size: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background-color: #f5f7fa;
+      color: #909399;
+    }
+  }
+
+  .contents {
+    box-sizing: border-box;
+    height: 60px;
+    padding: 4px 0 0 10px;
+    color: var(--theme-secondary-color);
+    overflow: hidden;
+
+    strong {
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    span {
+      display: block;
+      padding: 4px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

src/renderer/components/organisms/Notification/Favourite.vue

@@ -91,6 +91,13 @@
             </div>
             <div class="clearfix"></div>
           </div>
+          <LinkPreview
+            v-if="message.status.card && message.status.card.type === 'link'"
+            :icon="message.status.card.image"
+            :title="message.status.card.title"
+            :description="message.status.card.description"
+            :url="message.status.card.url"
+          />
         </div>
       </div>
       <div class="clearfix"></div>
@@ -106,11 +113,13 @@ import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
 import emojify from '~/src/renderer/utils/emojify'
 import TimeFormat from '~/src/constants/timeFormat'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
+import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
 
 export default {
   name: 'favourite',
   components: {
-    FailoverImg
+    FailoverImg,
+    LinkPreview
   },
   props: {
     message: {

src/renderer/components/organisms/Notification/Reaction.vue

@@ -91,6 +91,13 @@
             </div>
             <div class="clearfix"></div>
           </div>
+          <LinkPreview
+            v-if="message.status.card && message.status.card.type === 'link'"
+            :icon="message.status.card.image"
+            :title="message.status.card.title"
+            :description="message.status.card.description"
+            :url="message.status.card.url"
+          />
         </div>
       </div>
       <div class="clearfix"></div>
@@ -106,11 +113,13 @@ import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
 import emojify from '~/src/renderer/utils/emojify'
 import TimeFormat from '~/src/constants/timeFormat'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
+import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
 
 export default {
   name: 'reaction',
   components: {
-    FailoverImg
+    FailoverImg,
+    LinkPreview
   },
   props: {
     message: {

src/renderer/components/organisms/Notification/Reblog.vue

@@ -93,6 +93,13 @@
             </div>
             <div class="clearfix"></div>
           </div>
+          <LinkPreview
+            v-if="message.status.card && message.status.card.type === 'link'"
+            :icon="message.status.card.image"
+            :title="message.status.card.title"
+            :description="message.status.card.description"
+            :url="message.status.card.url"
+          />
         </div>
       </div>
       <div class="clearfix"></div>
@@ -108,11 +115,13 @@ import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
 import emojify from '~/src/renderer/utils/emojify'
 import TimeFormat from '~/src/constants/timeFormat'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
+import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
 
 export default {
   name: 'reblog',
   components: {
-    FailoverImg
+    FailoverImg,
+    LinkPreview
   },
   props: {
     message: {

src/renderer/components/organisms/Toot.vue

@@ -89,6 +89,13 @@
           </div>
           <div class="clearfix"></div>
         </div>
+        <LinkPreview
+          v-if="originalMessage.card && originalMessage.card.type === 'link'"
+          :icon="originalMessage.card.image"
+          :title="originalMessage.card.title"
+          :description="originalMessage.card.description"
+          :url="originalMessage.card.url"
+        />
         <div class="reblogger" v-show="message.reblog !== null">
           <icon name="retweet"></icon>
           <span class="reblogger-icon" @click="openUser(message.account)" role="presentation">
@@ -219,6 +226,7 @@ import TimeFormat from '~/src/constants/timeFormat'
 import emojify from '~/src/renderer/utils/emojify'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
 import Poll from '~/src/renderer/components/molecules/Toot/Poll'
+import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
 import { setInterval, clearInterval } from 'timers'
 
 export default {
@@ -229,7 +237,8 @@ export default {
   components: {
     FailoverImg,
     Poll,
-    Picker
+    Picker,
+    LinkPreview
   },
   data() {
     return {