feat(frontend): add navigateToLink button for CopyTextField. close #372…

…. (#376) * feat(frontend): add navigateToLink button for CopyTextField. close #372. * chore(frontend): remove unused props for CopyTextField.
stonith404 · Jan 9, 2024 · d775008 · d775008
1 parent eb7216b
commit d775008
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/frontend/src/components/upload/CopyTextField.tsx b/frontend/src/components/upload/CopyTextField.tsx
@@ -1,7 +1,8 @@
-import { ActionIcon, TextInput } from "@mantine/core";
+import { ActionIcon, TextInput, Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useRef, useState } from "react";
 import { TbCheck, TbCopy } from "react-icons/tb";
+import { IoOpenOutline } from "react-icons/io5";
 import useTranslate from "../../hooks/useTranslate.hook";
 import toast from "../../utils/toast.util";
 
@@ -37,12 +38,27 @@ function CopyTextField(props: { link: string }) {
           setTextClicked(true);
         }
       }}
+      rightSectionWidth={62}
       rightSection={
-        window.isSecureContext && (
-          <ActionIcon onClick={copyLink}>
-            {checkState ? <TbCheck /> : <TbCopy />}
-          </ActionIcon>
-        )
+        <>
+          <Tooltip
+            label={t("common.text.navigate-to-link")}
+            position="top"
+            offset={-2}
+            openDelay={200}
+          >
+            <a href={props.link}>
+              <ActionIcon>
+                <IoOpenOutline />
+              </ActionIcon>
+            </a>
+          </Tooltip>
+          {window.isSecureContext && (
+            <ActionIcon onClick={copyLink}>
+              {checkState ? <TbCheck /> : <TbCopy />}
+            </ActionIcon>
+          )}
+        </>
       }
     />
   );

diff --git a/frontend/src/components/upload/modals/showCreateUploadModal.tsx b/frontend/src/components/upload/modals/showCreateUploadModal.tsx
@@ -282,11 +282,12 @@ const CreateUploadModalBody = ({
                   />
                 </Col>
               </Grid>
-              { options.maxExpirationInHours == 0 && <Checkbox
-                label={t("upload.modal.expires.never-long")}
-                {...form.getInputProps("never_expires")}
-              />
-              }
+              {options.maxExpirationInHours == 0 && (
+                <Checkbox
+                  label={t("upload.modal.expires.never-long")}
+                  {...form.getInputProps("never_expires")}
+                />
+              )}
               <Text
                 italic
                 size="xs"

diff --git a/frontend/src/i18n/translations/en-US.ts b/frontend/src/i18n/translations/en-US.ts
@@ -526,6 +526,7 @@ export default {
   "common.button.generate": "Generate",
   "common.button.done": "Done",
   "common.text.link": "Link",
+  "common.text.navigate-to-link": "Go to the link",
   "common.text.or": "or",
   "common.button.go-back": "Go back",
   "common.notify.copied": "Your link was copied to the clipboard",

diff --git a/frontend/src/i18n/translations/zh-CN.ts b/frontend/src/i18n/translations/zh-CN.ts
@@ -404,6 +404,7 @@ export default {
   "common.button.generate": "生成",
   "common.button.done": "完成",
   "common.text.link": "链接",
+  "common.text.navigate-to-link": "访问链接",
   "common.text.or": "或",
   "common.button.go-back": "返回",
   "common.notify.copied": "已复制到剪贴板",