chore: update sharing image preview

web/src/components/PreviewImageDialog.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useRef, useState } from "react";
-import * as utils from "../helpers/utils";
 import { showDialog } from "./Dialog";
 import "../less/preview-image-dialog.less";
 
@@ -8,33 +6,10 @@ interface Props extends DialogProps {
 }
 
 const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
-  const imgRef = useRef<HTMLImageElement>(null);
-  const [imgWidth, setImgWidth] = useState<number>(-1);
-
-  useEffect(() => {
-    utils.getImageSize(imgUrl).then(({ width }) => {
-      if (width !== 0) {
-        setImgWidth(80);
-      } else {
-        setImgWidth(0);
-      }
-    });
-  }, []);
-
   const handleCloseBtnClick = () => {
     destroy();
   };
 
-  const handleDecreaseImageSize = () => {
-    if (imgWidth > 30) {
-      setImgWidth(imgWidth - 10);
-    }
-  };
-
-  const handleIncreaseImageSize = () => {
-    setImgWidth(imgWidth + 10);
-  };
-
   return (
     <>
       <button className="btn close-btn" onClick={handleCloseBtnClick}>
@@ -42,21 +17,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
       </button>
 
       <div className="img-container">
-        <img className={imgWidth <= 0 ? "hidden" : ""} ref={imgRef} width={imgWidth + "%"} src={imgUrl} />
+        <img src={imgUrl} crossOrigin="anonymous" />
-        <span className={"loading-text " + (imgWidth === -1 ? "" : "hidden")}>Loading image...</span>
-        <span className={"loading-text " + (imgWidth === 0 ? "" : "hidden")}>😟 Failed to load image</span>
-      </div>
-
-      <div className="action-btns-container">
-        <button className="btn" onClick={handleDecreaseImageSize}>
-          ➖
-        </button>
-        <button className="btn" onClick={handleIncreaseImageSize}>
-          ➕
-        </button>
-        <button className="btn" onClick={() => setImgWidth(80)}>
-          ⭕
-        </button>
       </div>
     </>
   );

web/src/components/ShareMemoImageDialog.tsx

@@ -55,7 +55,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
 
   const handleImageOnLoad = (ev: React.SyntheticEvent<HTMLImageElement>) => {
     if (ev.type === "error") {
-      toastHelper.error("有个图片加载失败了😟");
+      toastHelper.error("😟 Image load failed");
       (ev.target as HTMLImageElement).remove();
     }
     setImgAmount(imgAmount - 1);

web/src/less/daily-memo.less

@@ -11,7 +11,7 @@
   }
 
   > .split-line {
-    @apply h-full px-px bg-gray-100 absolute top-1 left-6 z-0 -ml-px;
+    @apply h-full px-px bg-gray-50 absolute top-1 left-6 z-0 -ml-px;
   }
 
   > .time-wrapper {
@@ -28,7 +28,7 @@
     }
 
     > .images-container {
-      @apply flex flex-col justify-start items-start w-full;
+      @apply flex flex-col justify-start items-start mt-1 w-full;
 
       > img {
         @apply w-full h-auto rounded mb-2 last:mb-0;

web/src/less/global.less

@@ -45,4 +45,3 @@ a {
 .btn {
   @apply select-none cursor-pointer text-center;
 }
-

web/src/less/preview-image-dialog.less

@@ -1,85 +1,27 @@
 @import "./mixin.less";
 
 .preview-image-dialog {
-  padding: 0;
+  @apply p-0;
 
   > .dialog-container {
-    .flex(column, center, center);
+    @apply flex flex-col justify-center items-center relative w-full h-full p-0;
-    position: relative;
-    width: 100%;
-    height: 100%;
     background-color: unset;
-    padding: 0;
 
     > .close-btn {
-      position: fixed;
+      @apply fixed top-8 right-8 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 z-10 shadow-md hover:opacity-70;
-      top: 36px;
-      right: 36px;
-      width: 36px;
-      height: 36px;
-      padding: 4px;
-      cursor: pointer;
-      border-radius: 4px;
-      background-color: lightgray;
-      z-index: 1;
 
       > .icon-img {
-        width: 28px;
+        @apply w-6 h-auto;
-        height: 28px;
-      }
-
-      &:hover {
-        opacity: 0.8;
       }
     }
 
     > .img-container {
-      width: 100%;
+      @apply w-full h-full flex flex-col justify-center items-center;
-      height: 100%;
+      background-color: unset;
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
       .hide-scroll-bar();
 
       > img {
-        padding: 16px;
+        @apply h-auto w-auto max-w-full max-h-full p-4;
-        height: auto;
-        margin: auto;
-      }
-
-      > .loading-text {
-        color: white;
-        font-size: 24px;
-        margin: auto;
-        border-bottom: 2px solid white;
-        padding: 8px 4px;
-      }
-    }
-
-    > .action-btns-container {
-      .flex(row, center, center);
-      position: fixed;
-      bottom: 36px;
-      z-index: 1;
-
-      > .btn {
-        .flex(row, center, center);
-        width: 40px;
-        height: 40px;
-        font-size: 20px;
-        margin-right: 16px;
-        border-radius: 4px;
-        background-color: lightgray;
-        box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-
-        &:last-child {
-          margin-right: 0;
-        }
-
-        &:hover,
-        &:active {
-          opacity: 0.8;
-        }
       }
     }
   }

web/src/less/share-memo-image-dialog.less

@@ -2,37 +2,21 @@
 
 .share-memo-image-dialog {
   > .dialog-container {
-    width: 380px;
+    @apply w-96 p-0 bg-gray-200;
-    padding: 0;
-    background-color: @bg-lightgray;
 
     > .dialog-header-container {
-      padding: 8px 16px;
+      @apply py-2 pt-4 px-4 pl-6 mb-0 bg-white rounded-t-lg;
-      padding-left: 24px;
-      margin-bottom: 0;
-      background-color: white;
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
     }
 
     > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
+      @apply w-full flex flex-col justify-start items-start relative;
-      position: relative;
-      width: 100%;
       min-height: 128px;
 
       > .tip-words-container {
-        .flex(column, center, flex-start);
+        @apply w-full flex flex-col justify-center items-start border-b bg-white px-6 py-0 pb-2;
-        width: 100%;
-        border-bottom: 1px solid lightgray;
-        background-color: white;
-        padding: 0 24px;
-        padding-bottom: 8px;
 
         > .tip-text {
-          color: gray;
+          @apply text-sm text-gray-500;
-          font-size: 13px;
-          line-height: 24px;
         }
 
         &.loading {
@@ -53,80 +37,41 @@
       }
 
       > .memo-container {
-        .flex(column, flex-start, flex-start);
+        @apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start;
-        width: 380px;
-        max-width: 100%;
-        height: auto;
-        user-select: none;
-        position: relative;
 
         > .memo-shortcut-img {
-          position: absolute;
+          @apply absolute top-0 left-0 w-full h-auto rounded-b-lg;
-          top: 0;
-          left: 0;
           z-index: 1;
-          width: 100%;
-          height: auto;
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
         }
 
         > .time-text {
-          width: 100%;
+          @apply w-full px-6 pt-5 text-xs text-gray-500 bg-white;
-          padding: 0 24px;
-          padding-top: 20px;
-          font-size: 12px;
-          color: gray;
-          background-color: white;
         }
 
         > .memo-content-text {
-          padding: 12px 24px;
+          @apply w-full pt-2 pb-4 px-6 text-base bg-white;
-          width: 100%;
-          font-size: 15px;
-          background-color: white;
         }
 
         > .images-container {
-          .flex(column, flex-start, flex-start);
+          @apply w-full h-auto flex flex-col justify-start items-start px-6 pb-2 bg-white;
-          width: 100%;
-          height: auto;
-          padding: 0 24px;
-          padding-bottom: 8px;
-          background-color: white;
-          .hide-scroll-bar();
 
           > img {
-            width: 100%;
+            @apply w-full h-auto mb-2 rounded;
-            height: auto;
-            margin-bottom: 8px;
-            border-radius: 4px;
           }
         }
 
         > .watermark-container {
-          .flex(row, flex-start, center);
+          @apply flex flex-row justify-start items-center w-full py-3 px-6;
-          flex-wrap: nowrap;
-          width: 100%;
-          padding: 16px 26px;
 
           > .normal-text {
-            .flex(row, flex-start, center);
+            @apply w-full flex flex-row justify-start items-center text-sm text-gray-500;
-            width: 100%;
-            font-size: 12px;
-            line-height: 20px;
-            color: gray;
 
             > .name-text {
-              font-size: 13px;
+              @apply text-black ml-2;
-              color: @text-black;
-              margin-left: 4px;
-              line-height: 20px;
             }
 
             > .icon-text {
-              font-size: 15px;
+              @apply text-lg ml-1 mr-2;
-              margin-right: 6px;
             }
           }
         }

web/src/less/toast.less

@@ -4,7 +4,7 @@
   @apply flex flex-col justify-start items-end fixed top-2 right-4 z-1000 max-h-full;
 
   > .toast-wrapper {
-    @apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow rounded bg-white mt-6 py-2 px-4;
+    @apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow-lg rounded bg-white mt-6 py-2 px-4;
     min-width: 6em;
     transition: all 0.4s ease;