Merge pull request #1679 from Yidadaa/export

chore: mobile export image style

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,9 +222,11 @@ export function MessageExporter() {
 export function PreviewActions(props: {
   download: () => void;
   copy: () => void;
+  showCopy?: boolean;
 }) {
   return (
     <div className={styles["preview-actions"]}>
+      {props.showCopy && (
         <IconButton
           text={Locale.Export.Copy}
           bordered
@@ -232,6 +234,7 @@ export function PreviewActions(props: {
           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;
+
+        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}

app/components/message-selector.module.scss

@@ -5,13 +5,34 @@
     .search-bar {
       max-width: unset;
       flex-grow: 1;
+      margin-right: 10px;
     }
 
-    .filter-item:not(:last-child) {
+    .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;
+        }
+      }
+    }
+  }
+
   .messages {
     margin-top: 20px;
     border-radius: 10px;

app/components/message-selector.tsx

@@ -140,6 +140,7 @@ export function MessageSelector(props: {
           }}
         ></input>
 
+        <div className={styles["actions"]}>
           <IconButton
             text={Locale.Select.All}
             bordered
@@ -168,6 +169,7 @@ export function MessageSelector(props: {
             }
           />
         </div>
+      </div>
 
       <div className={styles["messages"]}>
         {messages.map((m, i) => {