From 20967c236aaac3fb50f6567aa8fc2466de8598cd Mon Sep 17 00:00:00 2001
From: wibus-wee <1596355173@qq.com>
Date: Fri, 7 Jul 2023 11:49:49 +0800
Subject: [PATCH] fix: new image container is attached to the wrong container

---
 src/functions/better-image-display.ts | 29 ++++++++++++++++++---------
 style.scss                            | 19 +++++++++++++++++-
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/functions/better-image-display.ts b/src/functions/better-image-display.ts
index 5a28c62..66cdcdd 100644
--- a/src/functions/better-image-display.ts
+++ b/src/functions/better-image-display.ts
@@ -13,7 +13,7 @@ export function betterImageDisplay(messageUserList: IMessageUserList) {
     // 判断下生成了没有
     if (
       messageElement
-        .querySelector(".vac-message-container")
+        .querySelector(".vac-message-card")
         ?.querySelector(".vac-image-tg-container")
     ) {
       return;
@@ -58,15 +58,24 @@ export function betterImageDisplay(messageUserList: IMessageUserList) {
     `;
     // Thanks to @dmlgzs for this fix: https://github.com/wibus-wee/icalingua-theme-telegram/issues/21#issuecomment-1621200630
     newMessageImageContainer.onclick = () => {
-      require('electron').ipcRenderer.send('openImage', messageImageSrc);
+      // 检查一下有没有 vac-forward-container
+      const forwardContainer = document.querySelector(".vac-forward-container");
+      if (!forwardContainer) {
+        require("electron").ipcRenderer.send("openImage", messageImageSrc);
+      }
     };
-    (
-      messageElement.querySelector(
-        ".vac-message-container .vac-message-card"
-      ) as HTMLElement
-    ).style.display = "none"; // 隐藏原来的消息
-    (
-      messageElement.querySelector(".vac-message-container") as HTMLElement
-    ).appendChild(newMessageImageContainer); // 添加新的图片容器
+    const messageCard = messageElement.querySelector(
+      ".vac-message-container .vac-message-card"
+    ) as HTMLElement;
+    // 把里面所有内容 hidden 掉
+    Array.from(messageCard.querySelectorAll("*")).forEach((element) => {
+      (element as HTMLElement).style.display = "none";
+    });
+    // 然后把新的图片容器添加进去
+    messageCard.appendChild(newMessageImageContainer); // 添加新的图片容器
+    // 并且要设置多一个 class 以便于我们在 CSS 里面控制不显示垃圾边框
+    messageElement
+      .querySelector(".vac-message-container")
+      ?.classList.add("vac-message-container--image");
   });
 }
diff --git a/style.scss b/style.scss
index 7fe10f5..49b1d92 100644
--- a/style.scss
+++ b/style.scss
@@ -260,6 +260,19 @@ html[theme=light] .vac-message-current.vac-message-selected {
   background-color: rgb(32, 93, 206) !important
 }
 
+.vac-message-container--image .vac-message-card {
+  border: none;
+  padding: 0 !important;
+  background-color: transparent !important;
+}
+
+.vac-message-container--image .vac-message-selected .vac-image-tg-container .vac-image-tg-container__image img {
+  // 亮 & 提高对比度
+  filter: brightness(1.5) contrast(1.5);
+  transition: all 0.2s ease-in-out;
+}
+
+
 .vac-text-username {
   display: block !important;
 }
@@ -467,7 +480,7 @@ html[theme=light] .vac-message-current.vac-message-selected {
 
 .vac-image-tg-container__timestamp {
   position: absolute;
-  right: 5px;
+  right: -5px;
   bottom: 15px;
   font-style: italic;
   opacity: .7 !important;
@@ -681,4 +694,8 @@ html[theme=dark] {
   .vac-message-current.vac-message-selected {
     background-color: rgb(97, 151, 206) !important;
   }
+
+  .vac-message-container--image .vac-message-card {
+    border: none !important;
+  }
 }
\ No newline at end of file