added a clear button for the output and a copy button for the input

ClaudiuHBann · Aug 25, 2024 · 8c7a548 · 8c7a548
1 parent 8b4a0b6
commit 8c7a548
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 40 deletions.
diff --git a/Web/src/routes/root/io/IO.module.css b/Web/src/routes/root/io/IO.module.css
@@ -1,4 +1,4 @@
-.input {
+.io {
   min-height: rem(100);
   max-height: rem(275);
 }
diff --git a/Web/src/routes/root/io/IOShortcutMenu.tsx b/Web/src/routes/root/io/IOShortcutMenu.tsx
@@ -0,0 +1,34 @@
+import { rem } from "@mantine/core";
+import { IconCheck, IconClearAll, IconCopy } from "@tabler/icons-react";
+
+export function FindIconClear(state: boolean) {
+  if (state) {
+    return <IconCheck style={{ width: rem(69) }} />;
+  } else {
+    return <IconClearAll style={{ width: rem(69) }} />;
+  }
+}
+
+export function FindTooltipClear(state: boolean) {
+  return state ? "Cleared" : "Clear";
+}
+
+export function FindIconCopy(state: boolean) {
+  if (state) {
+    return <IconCheck style={{ width: rem(69) }} />;
+  } else {
+    return <IconCopy style={{ width: rem(69) }} />;
+  }
+}
+
+export function FindTooltipCopy(state: boolean) {
+  return state ? "Copied" : "Copy";
+}
+
+export function HandleButtonIconCopy(value: string) {
+  if (value.length === 0) {
+    return;
+  }
+
+  navigator.clipboard.writeText(value);
+}
diff --git a/Web/src/routes/root/io/Input.tsx b/Web/src/routes/root/io/Input.tsx
@@ -1,20 +1,14 @@
-import { Textarea, rem } from "@mantine/core";
-import { IconCheck, IconClearAll } from "@tabler/icons-react";
+import { Textarea } from "@mantine/core";
 import ActionIconEx from "../../../components/ActionIconEx";
 import { useUCContext } from "../../../contexts/UCContext";
 import classes from "./IO.module.css";
-
-function FindIconClear(state: boolean) {
-  if (state) {
-    return <IconCheck style={{ width: rem(69) }} />;
-  } else {
-    return <IconClearAll style={{ width: rem(69) }} />;
-  }
-}
-
-function FindTooltipClear(state: boolean) {
-  return state ? "Cleared" : "Clear";
-}
+import {
+  FindIconClear,
+  FindTooltipClear,
+  FindIconCopy,
+  FindTooltipCopy,
+  HandleButtonIconCopy,
+} from "./IOShortcutMenu";
 
 function Input() {
   const context = useUCContext();
@@ -26,7 +20,7 @@ function Input() {
     <div style={{ position: "relative" }}>
       <Textarea
         variant="filled"
-        classNames={{ input: classes.input }}
+        classNames={{ input: classes.io }}
         size="md"
         radius="md"
         label="Input"
@@ -47,6 +41,19 @@ function Input() {
           right: 10,
         }}
       />
+
+      <ActionIconEx
+        onClick={() => {
+          HandleButtonIconCopy(inputValue);
+        }}
+        findIcon={FindIconCopy}
+        findTooltip={FindTooltipCopy}
+        style={{
+          position: "absolute",
+          top: 10,
+          right: 45,
+        }}
+      />
     </div>
   );
 }

diff --git a/Web/src/routes/root/io/Output.tsx b/Web/src/routes/root/io/Output.tsx
@@ -1,28 +1,14 @@
-import { Textarea, rem } from "@mantine/core";
-import { IconCopy, IconCheck } from "@tabler/icons-react";
+import { Textarea } from "@mantine/core";
 import ActionIconEx from "../../../components/ActionIconEx";
 import { useUCContext } from "../../../contexts/UCContext";
 import classes from "./IO.module.css";
-
-function FindIconCopy(state: boolean) {
-  if (state) {
-    return <IconCheck style={{ width: rem(69) }} />;
-  } else {
-    return <IconCopy style={{ width: rem(69) }} />;
-  }
-}
-
-function FindTooltipCopy(state: boolean) {
-  return state ? "Copied" : "Copy";
-}
-
-function HandleButtonIconCopy(value: string) {
-  if (value.length === 0) {
-    return;
-  }
-
-  navigator.clipboard.writeText(value);
-}
+import {
+  FindIconCopy,
+  FindTooltipCopy,
+  HandleButtonIconCopy,
+  FindIconClear,
+  FindTooltipClear,
+} from "./IOShortcutMenu";
 
 function Output() {
   const context = useUCContext();
@@ -35,7 +21,7 @@ function Output() {
       <Textarea
         variant="filled"
         resize="vertical"
-        classNames={{ input: classes.input }}
+        classNames={{ input: classes.io }}
         readOnly
         size="md"
         radius="md"
@@ -46,6 +32,17 @@ function Output() {
         onChange={(event) => setOutputValue(event.currentTarget.value)}
       />
 
+      <ActionIconEx
+        onClick={() => setOutputValue("")}
+        findIcon={FindIconClear}
+        findTooltip={FindTooltipClear}
+        style={{
+          position: "absolute",
+          top: 10,
+          right: 10,
+        }}
+      />
+
       <ActionIconEx
         onClick={() => {
           HandleButtonIconCopy(outputValue);
@@ -55,7 +52,7 @@ function Output() {
         style={{
           position: "absolute",
           top: 10,
-          right: 10,
+          right: 45,
         }}
       />
     </div>