From 1bfc92da5a78a5d1d7ee4e77809f52c5998a4814 Mon Sep 17 00:00:00 2001
From: Attila Farago <attila.farago.hu@gmail.com>
Date: Tue, 12 Nov 2024 17:39:58 +0100
Subject: [PATCH] style: improve CSS background properties and update
 FileSelector component to use Button from react-bootstrap

---
 src/App.css          |  26 ++-----
 src/FileSelector.tsx | 179 ++++++++++++++++++++++---------------------
 2 files changed, 96 insertions(+), 109 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7d5868e..01696cd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -109,16 +109,9 @@ a {
             transparent 39.3px,
             #f6c407 60px
         );
-    background-size:
-        3px calc(100% + 120px),
-        calc(100% + 120px) 3px,
-        3px calc(100% + 120px),
-        calc(100% + 120px) 3px;
-    background-position:
-        0 0,
-        0 0,
-        100% 0,
-        0 100%;
+    background-size: 3px calc(100% + 120px), calc(100% + 120px) 3px,
+        3px calc(100% + 120px), calc(100% + 120px) 3px;
+    background-position: 0 0, 0 0, 100% 0, 0 100%;
     background-repeat: no-repeat;
     animation: dropActive-borderAnimation 0.8s infinite linear;
     border-radius: 8px;
@@ -126,19 +119,11 @@ a {
 
 @keyframes dropActive-borderAnimation {
     from {
-        background-position:
-            0 0,
-            -120px 0,
-            100% -120px,
-            0 100%;
+        background-position: 0 0, -120px 0, 100% -120px, 0 100%;
     }
 
     to {
-        background-position:
-            0 -120px,
-            0 0,
-            100% 0,
-            -120px 100%;
+        background-position: 0 -120px, 0 0, 100% 0, -120px 100%;
     }
 }
 
@@ -227,4 +212,5 @@ a {
 
 .example-content-button {
     margin-left: 0.4em;
+    font-size: 14px;
 }
diff --git a/src/FileSelector.tsx b/src/FileSelector.tsx
index ad3803a..f2e166f 100644
--- a/src/FileSelector.tsx
+++ b/src/FileSelector.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
 
 const FileSelector: React.FC<{
     selectedFile: File | undefined;
@@ -12,103 +13,103 @@ const FileSelector: React.FC<{
     isAdditionalCommentsChecked,
     setIsAdditionalCommentsChecked,
 }) => {
-    const fileInputRef = useRef<HTMLInputElement | null>(null);
-    // const [lastFile, setLastFile] = React.useState<File | undefined>(undefined);
+        const fileInputRef = useRef<HTMLInputElement | null>(null);
+        // const [lastFile, setLastFile] = React.useState<File | undefined>(undefined);
 
-    const handleAdditionalCommentsChange = (
-        event: React.ChangeEvent<HTMLInputElement>,
-    ) => {
-        setIsAdditionalCommentsChecked(event.target.checked);
-    };
-
-    const handleExampleButtonClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-        const path = (event.target as HTMLAnchorElement).dataset.file;
-        if (!path) {
-            return;
-        }
+        const handleAdditionalCommentsChange = (
+            event: React.ChangeEvent<HTMLInputElement>,
+        ) => {
+            setIsAdditionalCommentsChecked(event.target.checked);
+        };
 
-        fetch(path)
-            .then(async (data) => {
-                const data2 = await data.blob();
-                const fname = path?.split('/')?.pop();
-                if (!fname) return false;
-                const file = new File([data2], fname);
+        const handleExampleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+            const path = (event.target as HTMLAnchorElement).dataset.file;
+            if (!path) {
+                return;
+            }
 
-                const dataTransfer = new DataTransfer();
-                dataTransfer.items.add(file);
+            fetch(path)
+                .then(async (data) => {
+                    const data2 = await data.blob();
+                    const fname = path?.split('/')?.pop();
+                    if (!fname) return false;
+                    const file = new File([data2], fname);
 
-                // ($('#file-selector').get(0) as HTMLInputElement).files =
-                //     dataTransfer.files;
-                setSelectedFile(file);
-            })
-            .catch((error: unknown) => {
-                console.error('::ERROR::', error);
-            });
-        return false;
-    };
+                    const dataTransfer = new DataTransfer();
+                    dataTransfer.items.add(file);
 
-    useEffect(() => {
-        if (fileInputRef.current && selectedFile) {
-            const dataTransfer = new DataTransfer();
-            dataTransfer.items.add(selectedFile);
-            fileInputRef.current.files = dataTransfer.files;
-        }
-    }, [selectedFile]);
+                    // ($('#file-selector').get(0) as HTMLInputElement).files =
+                    //     dataTransfer.files;
+                    setSelectedFile(file);
+                })
+                .catch((error: unknown) => {
+                    console.error('::ERROR::', error);
+                });
+            return false;
+        };
 
-    return (
-        <div>
-            <Form.Group controlId="file-selector">
-                <Form.Control
-                    type="file"
-                    accept=".llsp,.lms,.lmsp,.llsp3,.ev3,.ev3m"
-                    ref={fileInputRef}
-                    onChange={(e) => {
-                        const target = e.target as HTMLInputElement;
-                        if (target.files) setSelectedFile(target.files[0]);
-                    }}
-                />
-            </Form.Group>
+        useEffect(() => {
+            if (fileInputRef.current && selectedFile) {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(selectedFile);
+                fileInputRef.current.files = dataTransfer.files;
+            }
+        }, [selectedFile]);
 
-            <div className="col-sm-12 m-0 p-0 pt-1 fileptions">
-                <small>
-                    <b>Examples:</b>
-                    {[
-                        {
-                            file: './static/samples/demo_cityshaper_cranemission.llsp3',
-                            label: 'SPIKE block sample',
-                        },
-                        {
-                            file: './static/samples/demo_cityshaper_cranemission.lmsp',
-                            label: 'EV3Classroom sample',
-                        },
-                        {
-                            file: './static/samples/demo_cityshaper_cranemission.ev3',
-                            label: 'EV3Lab sample',
-                        },
-                    ].map((example, index) => (
-                        <a
-                            href="#"
-                            key={index}
-                            className="example-content-button mx-1"
-                            data-file={example.file}
-                            onClick={handleExampleButtonClick}
-                        >
-                            {example.label}
-                        </a>
-                    ))}
-                </small>
-                <small>
-                    <Form.Check
-                        type="switch"
-                        id="additionalCommentsCheck"
-                        label="Explanatory&nbsp;Comments"
-                        checked={isAdditionalCommentsChecked}
-                        onChange={handleAdditionalCommentsChange}
+        return (
+            <div>
+                <Form.Group controlId="file-selector">
+                    <Form.Control
+                        type="file"
+                        accept=".llsp,.lms,.lmsp,.llsp3,.ev3,.ev3m"
+                        ref={fileInputRef}
+                        onChange={(e) => {
+                            const target = e.target as HTMLInputElement;
+                            if (target.files) setSelectedFile(target.files[0]);
+                        }}
                     />
-                </small>
+                </Form.Group>
+
+                <div className="col-sm-12 m-0 p-0 pt-1 fileptions">
+                    <small>
+                        <b>Examples:</b>
+                        {[
+                            {
+                                file: './static/samples/demo_cityshaper_cranemission.llsp3',
+                                label: 'SPIKE block sample',
+                            },
+                            {
+                                file: './static/samples/demo_cityshaper_cranemission.lmsp',
+                                label: 'EV3Classroom sample',
+                            },
+                            {
+                                file: './static/samples/demo_cityshaper_cranemission.ev3',
+                                label: 'EV3Lab sample',
+                            },
+                        ].map((example, index) => (
+                            <Button
+                                variant="link"
+                                key={index}
+                                className="example-content-button"
+                                data-file={example.file}
+                                onClick={handleExampleButtonClick}
+                            >
+                                {example.label}
+                            </Button>
+                        ))}
+                    </small>
+                    <small>
+                        <Form.Check
+                            type="switch"
+                            id="additionalCommentsCheck"
+                            label="Explanatory&nbsp;Comments"
+                            checked={isAdditionalCommentsChecked}
+                            onChange={handleAdditionalCommentsChange}
+                        />
+                    </small>
+                </div>
             </div>
-        </div>
-    );
-};
+        );
+    };
 
 export default FileSelector;