From 6c6ae1f9ac405adfe967cbab96ae36cdee08b93c Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 7 May 2020 22:32:08 +0900
Subject: [PATCH 1/4] refs #1317 Show link preview in toot

---
 .../components/molecules/Toot/LinkPreview.vue | 79 +++++++++++++++++++
 src/renderer/components/organisms/Toot.vue    | 11 ++-
 2 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/molecules/Toot/LinkPreview.vue

diff --git a/src/renderer/components/molecules/Toot/LinkPreview.vue b/src/renderer/components/molecules/Toot/LinkPreview.vue
new file mode 100644
index 00000000..f43ffdc3
--- /dev/null
+++ b/src/renderer/components/molecules/Toot/LinkPreview.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="link">
+    <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: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.link {
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 4px;
+  border: 1px solid var(--theme-selected-background-color);
+
+  .icon {
+    width: 60px;
+    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);
+
+    strong {
+      display: block;
+    }
+
+    span {
+      display: block;
+      padding: 4px 0;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 199443ef..21640fdb 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/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 {

From 681bd3b2b19004c0d2807c3f73941da047048caa Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 7 May 2020 22:49:02 +0900
Subject: [PATCH 2/4] refs #1317 Show link preview in notifications

---
 .../components/molecules/Toot/LinkPreview.vue         |  2 +-
 .../components/organisms/Notification/Favourite.vue   | 11 ++++++++++-
 .../components/organisms/Notification/Reaction.vue    | 11 ++++++++++-
 .../components/organisms/Notification/Reblog.vue      | 11 ++++++++++-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/molecules/Toot/LinkPreview.vue b/src/renderer/components/molecules/Toot/LinkPreview.vue
index f43ffdc3..6c50fb70 100644
--- a/src/renderer/components/molecules/Toot/LinkPreview.vue
+++ b/src/renderer/components/molecules/Toot/LinkPreview.vue
@@ -64,7 +64,7 @@ export default {
     box-sizing: border-box;
     height: 60px;
     padding: 4px 0 0 10px;
-    color: var(--theme-secondary-color);
+    color: #909399;
 
     strong {
       display: block;
diff --git a/src/renderer/components/organisms/Notification/Favourite.vue b/src/renderer/components/organisms/Notification/Favourite.vue
index d18727f3..e12536aa 100644
--- a/src/renderer/components/organisms/Notification/Favourite.vue
+++ b/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: {
diff --git a/src/renderer/components/organisms/Notification/Reaction.vue b/src/renderer/components/organisms/Notification/Reaction.vue
index 3dd79f64..9d64213c 100644
--- a/src/renderer/components/organisms/Notification/Reaction.vue
+++ b/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: {
diff --git a/src/renderer/components/organisms/Notification/Reblog.vue b/src/renderer/components/organisms/Notification/Reblog.vue
index d0242ef1..cab4f3ab 100644
--- a/src/renderer/components/organisms/Notification/Reblog.vue
+++ b/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: {

From 2d85190038d83efc1cddf00bd25867cab2655105 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 7 May 2020 23:28:48 +0900
Subject: [PATCH 3/4] refs #1317 Open link when it is clicked on preview

---
 .../components/molecules/Toot/LinkPreview.vue | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/molecules/Toot/LinkPreview.vue b/src/renderer/components/molecules/Toot/LinkPreview.vue
index 6c50fb70..3b56ac46 100644
--- a/src/renderer/components/molecules/Toot/LinkPreview.vue
+++ b/src/renderer/components/molecules/Toot/LinkPreview.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="link">
-    <el-image :src="icon" class="icon" :fit="cover" lazy>
+  <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>
@@ -30,7 +30,14 @@ export default {
     },
     url: {
       type: String,
-      default: ''
+      default: null
+    }
+  },
+  methods: {
+    openLink(link) {
+      if (link) {
+        return window.shell.openExternal(link)
+      }
     }
   }
 }
@@ -43,10 +50,17 @@ export default {
   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;
@@ -64,15 +78,19 @@ export default {
     box-sizing: border-box;
     height: 60px;
     padding: 4px 0 0 10px;
-    color: #909399;
+    color: var(--theme-secondary-color);
 
     strong {
       display: block;
+      text-overflow: ellipsis;
     }
 
     span {
-      display: block;
+      display: inline;
       padding: 4px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }

From a4298c9100b67f8560aa1aaa99c416ebe2ac149a Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 8 May 2020 01:08:45 +0900
Subject: [PATCH 4/4] refs #1317 Set hidden and ellipsis when text is
 overflowed in link preview

---
 src/renderer/components/molecules/Toot/LinkPreview.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/molecules/Toot/LinkPreview.vue b/src/renderer/components/molecules/Toot/LinkPreview.vue
index 3b56ac46..54099bf2 100644
--- a/src/renderer/components/molecules/Toot/LinkPreview.vue
+++ b/src/renderer/components/molecules/Toot/LinkPreview.vue
@@ -79,14 +79,17 @@ export default {
     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: inline;
+      display: block;
       padding: 4px 0;
       overflow: hidden;
       text-overflow: ellipsis;