Skip to content

Commit 1d5d92f

Browse files
DaneEverittDaneEveritt
committed
Use a different styling for file uploads
1 parent 1224284 commit 1d5d92f

File tree

2 files changed

+80
-62
lines changed

2 files changed

+80
-62
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export default () => {
7575
/>
7676
<Can action={'file.create'}>
7777
<div className={style.manager_actions}>
78+
<FileManagerStatus />
7879
<NewDirectoryButton />
7980
<UploadButton />
8081
<NavLink to={`/server/${id}/files/new${window.location.hash}`}>
@@ -105,7 +106,6 @@ export default () => {
105106
<FileObjectRow key={file.key} file={file} />
106107
))}
107108
<MassActionsBar />
108-
<FileManagerStatus />
109109
</div>
110110
</CSSTransition>
111111
)}

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

Lines changed: 79 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,90 @@
1-
import React from 'react';
2-
import tw, { styled } from 'twin.macro';
1+
import React, { useContext, useEffect, useState } from 'react';
32
import { ServerContext } from '@/state/server';
4-
import { bytesToString } from '@/lib/formatters';
3+
import { CloudUploadIcon } from '@heroicons/react/solid';
4+
import asDialog from '@/hoc/asDialog';
5+
import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
6+
import { Button } from '@/components/elements/button/index';
7+
import Tooltip from '@/components/elements/tooltip/Tooltip';
8+
import Code from '@/components/elements/Code';
59

6-
const SpinnerCircle = styled.circle`
7-
transition: stroke-dashoffset 0.35s;
8-
transform: rotate(-90deg);
9-
transform-origin: 50% 50%;
10-
`;
10+
const svgProps = {
11+
cx: 16,
12+
cy: 16,
13+
r: 14,
14+
strokeWidth: 3,
15+
fill: 'none',
16+
stroke: 'currentColor',
17+
};
1118

12-
function Spinner({ progress }: { progress: number }) {
13-
const stroke = 3;
14-
const radius = 20;
15-
const normalizedRadius = radius - stroke * 2;
16-
const circumference = normalizedRadius * 2 * Math.PI;
19+
const Spinner = ({ progress, className }: { progress: number; className?: string }) => (
20+
<svg viewBox={'0 0 32 32'} className={className}>
21+
<circle {...svgProps} className={'opacity-25'} />
22+
<circle
23+
{...svgProps}
24+
stroke={'white'}
25+
strokeDasharray={28 * Math.PI}
26+
className={'rotate-[-90deg] origin-[50%_50%] transition-[stroke-dashoffset] duration-300'}
27+
style={{ strokeDashoffset: ((100 - progress) / 100) * 28 * Math.PI }}
28+
/>
29+
</svg>
30+
);
1731

18-
return (
19-
<svg width={radius * 2 - 8} height={radius * 2 - 8}>
20-
<circle
21-
stroke={'rgba(255, 255, 255, 0.07)'}
22-
fill={'none'}
23-
strokeWidth={stroke}
24-
r={normalizedRadius}
25-
cx={radius - 4}
26-
cy={radius - 4}
27-
/>
28-
<SpinnerCircle
29-
stroke={'white'}
30-
fill={'none'}
31-
strokeDasharray={circumference}
32-
strokeWidth={stroke}
33-
r={normalizedRadius}
34-
cx={radius - 4}
35-
cy={radius - 4}
36-
style={{ strokeDashoffset: ((100 - progress) / 100) * circumference }}
37-
/>
38-
</svg>
32+
const FileUploadList = () => {
33+
const { close } = useContext(DialogWrapperContext);
34+
const uploads = ServerContext.useStoreState((state) =>
35+
state.files.uploads.sort((a, b) => a.name.localeCompare(b.name))
3936
);
40-
}
41-
42-
function FileManagerStatus() {
43-
const uploads = ServerContext.useStoreState((state) => state.files.uploads);
4437

4538
return (
46-
<div css={tw`pointer-events-none fixed right-0 bottom-0 z-20 flex justify-center`}>
47-
{uploads.length > 0 && (
48-
<div
49-
css={tw`flex flex-col justify-center bg-neutral-700 rounded shadow mb-2 mr-2 pointer-events-auto px-3 py-1`}
50-
>
51-
{uploads
52-
.sort((a, b) => a.total - b.total)
53-
.map((f) => (
54-
<div key={f.name} css={tw`h-10 flex flex-row items-center`}>
55-
<div css={tw`mr-2`}>
56-
<Spinner progress={Math.round((100 * f.loaded) / f.total)} />
57-
</div>
58-
59-
<div css={tw`block`}>
60-
<span css={tw`text-base font-normal leading-none text-neutral-300`}>
61-
{f.name} ({bytesToString(f.loaded)}/{bytesToString(f.total)})
62-
</span>
63-
</div>
64-
</div>
65-
))}
39+
<div className={'space-y-2 mt-6'}>
40+
{uploads.map((file) => (
41+
<div key={file.name} className={'flex items-center space-x-3 bg-gray-700 p-3 rounded'}>
42+
<Tooltip content={`${Math.floor((file.loaded / file.total) * 100)}%`} placement={'left'}>
43+
<div className={'flex-shrink-0'}>
44+
<Spinner progress={(file.loaded / file.total) * 100} className={'w-6 h-6'} />
45+
</div>
46+
</Tooltip>
47+
<Code>{file.name}</Code>
6648
</div>
67-
)}
49+
))}
50+
<Dialog.Footer>
51+
<Button.Text onClick={close}>Close</Button.Text>
52+
</Dialog.Footer>
6853
</div>
6954
);
70-
}
55+
};
56+
57+
const FileUploadListDialog = asDialog({
58+
title: 'File Uploads',
59+
description: 'The following files are being uploaded to your server.',
60+
})(FileUploadList);
61+
62+
export default () => {
63+
const [open, setOpen] = useState(false);
7164

72-
export default FileManagerStatus;
65+
const count = ServerContext.useStoreState((state) => state.files.uploads.length);
66+
const progress = ServerContext.useStoreState((state) => ({
67+
uploaded: state.files.uploads.reduce((count, file) => count + file.loaded, 0),
68+
total: state.files.uploads.reduce((count, file) => count + file.total, 0),
69+
}));
70+
71+
useEffect(() => {
72+
if (count === 0) {
73+
setOpen(false);
74+
}
75+
}, [count]);
76+
77+
return (
78+
<>
79+
{count > 0 && (
80+
<Tooltip content={`${count} files are uploading, click to view`}>
81+
<button className={'flex items-center justify-center w-10 h-10'} onClick={setOpen.bind(this, true)}>
82+
<Spinner progress={(progress.uploaded / progress.total) * 100} className={'w-8 h-8'} />
83+
<CloudUploadIcon className={'h-3 absolute mx-auto animate-pulse'} />
84+
</button>
85+
</Tooltip>
86+
)}
87+
<FileUploadListDialog open={open} onClose={setOpen.bind(this, false)} />
88+
</>
89+
);
90+
};

0 commit comments

Comments
 (0)