Use a different styling for file uploads

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -75,6 +75,7 @@ export default () => {
                     />
                     <Can action={'file.create'}>
                         <div className={style.manager_actions}>
+                            <FileManagerStatus />
                             <NewDirectoryButton />
                             <UploadButton />
                             <NavLink to={`/server/${id}/files/new${window.location.hash}`}>
@@ -105,7 +106,6 @@ export default () => {
                                     <FileObjectRow key={file.key} file={file} />
                                 ))}
                                 <MassActionsBar />
-                                <FileManagerStatus />
                             </div>
                         </CSSTransition>
                     )}

resources/scripts/components/server/files/FileManagerStatus.tsx

@@ -1,72 +1,90 @@
-import React from 'react';
-import tw, { styled } from 'twin.macro';
+import React, { useContext, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
-import { bytesToString } from '@/lib/formatters';
+import { CloudUploadIcon } from '@heroicons/react/solid';
+import asDialog from '@/hoc/asDialog';
+import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
+import { Button } from '@/components/elements/button/index';
+import Tooltip from '@/components/elements/tooltip/Tooltip';
+import Code from '@/components/elements/Code';
 
-const SpinnerCircle = styled.circle`
-    transition: stroke-dashoffset 0.35s;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
-`;
+const svgProps = {
+    cx: 16,
+    cy: 16,
+    r: 14,
+    strokeWidth: 3,
+    fill: 'none',
+    stroke: 'currentColor',
+};
 
-function Spinner({ progress }: { progress: number }) {
-    const stroke = 3;
-    const radius = 20;
-    const normalizedRadius = radius - stroke * 2;
-    const circumference = normalizedRadius * 2 * Math.PI;
+const Spinner = ({ progress, className }: { progress: number; className?: string }) => (
+    <svg viewBox={'0 0 32 32'} className={className}>
+        <circle {...svgProps} className={'opacity-25'} />
+        <circle
+            {...svgProps}
+            stroke={'white'}
+            strokeDasharray={28 * Math.PI}
+            className={'rotate-[-90deg] origin-[50%_50%] transition-[stroke-dashoffset] duration-300'}
+            style={{ strokeDashoffset: ((100 - progress) / 100) * 28 * Math.PI }}
+        />
+    </svg>
+);
 
-    return (
-        <svg width={radius * 2 - 8} height={radius * 2 - 8}>
-            <circle
-                stroke={'rgba(255, 255, 255, 0.07)'}
-                fill={'none'}
-                strokeWidth={stroke}
-                r={normalizedRadius}
-                cx={radius - 4}
-                cy={radius - 4}
-            />
-            <SpinnerCircle
-                stroke={'white'}
-                fill={'none'}
-                strokeDasharray={circumference}
-                strokeWidth={stroke}
-                r={normalizedRadius}
-                cx={radius - 4}
-                cy={radius - 4}
-                style={{ strokeDashoffset: ((100 - progress) / 100) * circumference }}
-            />
-        </svg>
+const FileUploadList = () => {
+    const { close } = useContext(DialogWrapperContext);
+    const uploads = ServerContext.useStoreState((state) =>
+        state.files.uploads.sort((a, b) => a.name.localeCompare(b.name))
     );
-}
-
-function FileManagerStatus() {
-    const uploads = ServerContext.useStoreState((state) => state.files.uploads);
 
     return (
-        <div css={tw`pointer-events-none fixed right-0 bottom-0 z-20 flex justify-center`}>
-            {uploads.length > 0 && (
-                <div
-                    css={tw`flex flex-col justify-center bg-neutral-700 rounded shadow mb-2 mr-2 pointer-events-auto px-3 py-1`}
-                >
-                    {uploads
-                        .sort((a, b) => a.total - b.total)
-                        .map((f) => (
-                            <div key={f.name} css={tw`h-10 flex flex-row items-center`}>
-                                <div css={tw`mr-2`}>
-                                    <Spinner progress={Math.round((100 * f.loaded) / f.total)} />
-                                </div>
-
-                                <div css={tw`block`}>
-                                    <span css={tw`text-base font-normal leading-none text-neutral-300`}>
-                                        {f.name} ({bytesToString(f.loaded)}/{bytesToString(f.total)})
-                                    </span>
-                                </div>
-                            </div>
-                        ))}
+        <div className={'space-y-2 mt-6'}>
+            {uploads.map((file) => (
+                <div key={file.name} className={'flex items-center space-x-3 bg-gray-700 p-3 rounded'}>
+                    <Tooltip content={`${Math.floor((file.loaded / file.total) * 100)}%`} placement={'left'}>
+                        <div className={'flex-shrink-0'}>
+                            <Spinner progress={(file.loaded / file.total) * 100} className={'w-6 h-6'} />
+                        </div>
+                    </Tooltip>
+                    <Code>{file.name}</Code>
                 </div>
-            )}
+            ))}
+            <Dialog.Footer>
+                <Button.Text onClick={close}>Close</Button.Text>
+            </Dialog.Footer>
         </div>
     );
-}
+};
 
-export default FileManagerStatus;
+const FileUploadListDialog = asDialog({
+    title: 'File Uploads',
+    description: 'The following files are being uploaded to your server.',
+})(FileUploadList);
+
+export default () => {
+    const [open, setOpen] = useState(false);
+
+    const count = ServerContext.useStoreState((state) => state.files.uploads.length);
+    const progress = ServerContext.useStoreState((state) => ({
+        uploaded: state.files.uploads.reduce((count, file) => count + file.loaded, 0),
+        total: state.files.uploads.reduce((count, file) => count + file.total, 0),
+    }));
+
+    useEffect(() => {
+        if (count === 0) {
+            setOpen(false);
+        }
+    }, [count]);
+
+    return (
+        <>
+            {count > 0 && (
+                <Tooltip content={`${count} files are uploading, click to view`}>
+                    <button className={'flex items-center justify-center w-10 h-10'} onClick={setOpen.bind(this, true)}>
+                        <Spinner progress={(progress.uploaded / progress.total) * 100} className={'w-8 h-8'} />
+                        <CloudUploadIcon className={'h-3 absolute mx-auto animate-pulse'} />
+                    </button>
+                </Tooltip>
+            )}
+            <FileUploadListDialog open={open} onClose={setOpen.bind(this, false)} />
+        </>
+    );
+};