From 1f12753c6870fbe69d83d4dfbe155a61d2b292c2 Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Mon, 22 May 2023 01:23:08 +0800
Subject: [PATCH] chore: mobile export image style

---
 app/components/exporter.tsx                 | 40 ++++++++++-----
 app/components/message-selector.module.scss | 25 ++++++++-
 app/components/message-selector.tsx         | 56 +++++++++++----------
 3 files changed, 79 insertions(+), 42 deletions(-)

diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index 8f38be0f..1465d89a 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -3,7 +3,7 @@ import Locale from "../locales";
 import styles from "./exporter.module.scss";
 import { List, ListItem, Modal, showToast } from "./ui-lib";
 import { IconButton } from "./button";
-import { copyToClipboard, downloadAs } from "../utils";
+import { copyToClipboard, downloadAs, useMobileScreen } from "../utils";
 
 import CopyIcon from "../icons/copy.svg";
 import LoadingIcon from "../icons/three-dots.svg";
@@ -222,16 +222,19 @@ export function MessageExporter() {
 export function PreviewActions(props: {
   download: () => void;
   copy: () => void;
+  showCopy?: boolean;
 }) {
   return (
     <div className={styles["preview-actions"]}>
-      <IconButton
-        text={Locale.Export.Copy}
-        bordered
-        shadow
-        icon={<CopyIcon />}
-        onClick={props.copy}
-      ></IconButton>
+      {props.showCopy && (
+        <IconButton
+          text={Locale.Export.Copy}
+          bordered
+          shadow
+          icon={<CopyIcon />}
+          onClick={props.copy}
+        ></IconButton>
+      )}
       <IconButton
         text={Locale.Export.Download}
         bordered
@@ -282,23 +285,34 @@ export function ImagePreviewer(props: {
       }
     });
   };
+
+  const isMobile = useMobileScreen();
+
   const download = () => {
     const dom = previewRef.current;
     if (!dom) return;
     toPng(dom)
       .then((blob) => {
         if (!blob) return;
-        const link = document.createElement("a");
-        link.download = `${props.topic}.png`;
-        link.href = blob;
-        link.click();
+
+        if (isMobile) {
+          const image = new Image();
+          image.src = blob;
+          const win = window.open("");
+          win?.document.write(image.outerHTML);
+        } else {
+          const link = document.createElement("a");
+          link.download = `${props.topic}.png`;
+          link.href = blob;
+          link.click();
+        }
       })
       .catch((e) => console.log("[Export Image] ", e));
   };
 
   return (
     <div className={styles["image-previewer"]}>
-      <PreviewActions copy={copy} download={download} />
+      <PreviewActions copy={copy} download={download} showCopy={!isMobile} />
       <div
         className={`${styles["preview-body"]} ${styles["default-theme"]}`}
         ref={previewRef}
diff --git a/app/components/message-selector.module.scss b/app/components/message-selector.module.scss
index c1bbf201..b4ba1a14 100644
--- a/app/components/message-selector.module.scss
+++ b/app/components/message-selector.module.scss
@@ -5,10 +5,31 @@
     .search-bar {
       max-width: unset;
       flex-grow: 1;
+      margin-right: 10px;
     }
 
-    .filter-item:not(:last-child) {
-      margin-right: 10px;
+    .actions {
+      display: flex;
+
+      button:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+      flex-direction: column;
+
+      .search-bar {
+        margin-right: 0;
+      }
+
+      .actions {
+        margin-top: 20px;
+
+        button {
+          flex-grow: 1;
+        }
+      }
     }
   }
 
diff --git a/app/components/message-selector.tsx b/app/components/message-selector.tsx
index 2c100082..3068e544 100644
--- a/app/components/message-selector.tsx
+++ b/app/components/message-selector.tsx
@@ -140,33 +140,35 @@ export function MessageSelector(props: {
           }}
         ></input>
 
-        <IconButton
-          text={Locale.Select.All}
-          bordered
-          className={styles["filter-item"]}
-          onClick={selectAll}
-        />
-        <IconButton
-          text={Locale.Select.Latest}
-          bordered
-          className={styles["filter-item"]}
-          onClick={() =>
-            props.updateSelection((selection) => {
-              selection.clear();
-              messages
-                .slice(messageCount - 10)
-                .forEach((m) => selection.add(m.id!));
-            })
-          }
-        />
-        <IconButton
-          text={Locale.Select.Clear}
-          bordered
-          className={styles["filter-item"]}
-          onClick={() =>
-            props.updateSelection((selection) => selection.clear())
-          }
-        />
+        <div className={styles["actions"]}>
+          <IconButton
+            text={Locale.Select.All}
+            bordered
+            className={styles["filter-item"]}
+            onClick={selectAll}
+          />
+          <IconButton
+            text={Locale.Select.Latest}
+            bordered
+            className={styles["filter-item"]}
+            onClick={() =>
+              props.updateSelection((selection) => {
+                selection.clear();
+                messages
+                  .slice(messageCount - 10)
+                  .forEach((m) => selection.add(m.id!));
+              })
+            }
+          />
+          <IconButton
+            text={Locale.Select.Clear}
+            bordered
+            className={styles["filter-item"]}
+            onClick={() =>
+              props.updateSelection((selection) => selection.clear())
+            }
+          />
+        </div>
       </div>
 
       <div className={styles["messages"]}>