feat(layout): improve UX

devshred · Mar 15, 2024 · c7f2b5b · c7f2b5b
1 parent 8ac6444
commit c7f2b5b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/src/components/merge/DownloadLink.tsx b/src/components/merge/DownloadLink.tsx
@@ -20,7 +20,7 @@ const DownloadLink: React.FC<DownloadLinkProps> = ({ type, trackname }) => {
           (trackname.length > 0 ? `&name=${trackname}` : '')
         }
       >
-        <FiDownload className='inline mr-1' />
+        <FiDownload className='inline mr-1 relative bottom-0.5' />
         Download as {type.toUpperCase()}
       </a>
     )

diff --git a/src/components/merge/MergeFiles.tsx b/src/components/merge/MergeFiles.tsx
@@ -67,11 +67,14 @@ const MergeFiles = () => {
                       {...provided.dragHandleProps}
                       className='flex mb-1 mt-1 bg-slate-700'
                     >
-                      <FaEllipsisVertical />
+                      <FaEllipsisVertical className='relative top-1' />
                       {file.filename} -{' '}
                       {addThousandsSeparator(Math.round(file.size / 1024), '.')}
                       kB{' '}
-                      <FaTrashCan className='ml-1' onClick={removeFile(file)} />
+                      <FaTrashCan
+                        className='ml-1 relative top-1'
+                        onClick={removeFile(file)}
+                      />
                     </div>
                   )}
                 </Draggable>

diff --git a/src/components/merge/UploadForm.tsx b/src/components/merge/UploadForm.tsx
@@ -28,12 +28,13 @@ const UploadForm: React.FC = () => {
               <input {...getInputProps()} />
               {isDragActive ? (
                 <p>
-                  <FiUpload className='inline' /> Drop the files here ...
+                  <FiUpload className='inline relative bottom-0.5' /> Drop the
+                  files here ...
                 </p>
               ) : (
                 <p>
-                  <FiUpload className='inline' /> Drag 'n' drop some files here,
-                  or click to select files
+                  <FiUpload className='inline relative bottom-0.5' /> Drag 'n'
+                  drop some files here, or click to select files
                 </p>
               )}
             </div>

diff --git a/src/components/merge/VisualizeTrack.tsx b/src/components/merge/VisualizeTrack.tsx
@@ -30,6 +30,7 @@ import { MdCenterFocusStrong } from 'react-icons/md'
 import API from '../common/gps-backend-api'
 import { WayPoint } from '../../@types/gps'
 import { sanitizeFilename } from '../common/tools'
+import { FaPenToSquare } from 'react-icons/fa6'
 
 type VisualizeTrackProps = {
   trackId: string
@@ -58,6 +59,7 @@ const VisualizeTrack: React.FC<VisualizeTrackProps> = ({
   ])
   const polylineRef = createRef<LeafletPolyline>()
   const tracknameRef = useRef('')
+  const tracknameInputFieldRef: React.RefObject<HTMLElement> = useRef(null)
 
   useEffect(() => {
     setIsLoading(true)
@@ -132,13 +134,20 @@ const VisualizeTrack: React.FC<VisualizeTrackProps> = ({
       <br />
       <div className='mb-7 grid'>
         <div className='text-xs'>Trackname</div>
-        <ContentEditable
-          html={tracknameRef.current}
-          onChange={handleChange}
-          onBlur={handleBlur}
-        />
-        <div>
-          <hr />
+        <div className='underline flex'>
+          <ContentEditable
+            html={tracknameRef.current}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            innerRef={tracknameInputFieldRef}
+          />
+          &nbsp;
+          <FaPenToSquare
+            className='mx-0 relative top-1'
+            onClick={() => {
+              tracknameInputFieldRef?.current?.focus()
+            }}
+          />
         </div>
       </div>
       <MapContainer bounds={bounds}>