Use a different styling for file uploads
This commit is contained in:
DaneEveritt
parent
12242848b0
commit
1d5d92f678
2 changed files with 80 additions and 62 deletions
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
return (
|
||||
<svg width={radius * 2 - 8} height={radius * 2 - 8}>
|
||||
const Spinner = ({ progress, className }: { progress: number; className?: string }) => (
|
||||
<svg viewBox={'0 0 32 32'} className={className}>
|
||||
<circle {...svgProps} className={'opacity-25'} />
|
||||
<circle
|
||||
stroke={'rgba(255, 255, 255, 0.07)'}
|
||||
fill={'none'}
|
||||
strokeWidth={stroke}
|
||||
r={normalizedRadius}
|
||||
cx={radius - 4}
|
||||
cy={radius - 4}
|
||||
/>
|
||||
<SpinnerCircle
|
||||
{...svgProps}
|
||||
stroke={'white'}
|
||||
fill={'none'}
|
||||
strokeDasharray={circumference}
|
||||
strokeWidth={stroke}
|
||||
r={normalizedRadius}
|
||||
cx={radius - 4}
|
||||
cy={radius - 4}
|
||||
style={{ strokeDashoffset: ((100 - progress) / 100) * circumference }}
|
||||
strokeDasharray={28 * Math.PI}
|
||||
className={'rotate-[-90deg] origin-[50%_50%] transition-[stroke-dashoffset] duration-300'}
|
||||
style={{ strokeDashoffset: ((100 - progress) / 100) * 28 * Math.PI }}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
function FileManagerStatus() {
|
||||
const uploads = ServerContext.useStoreState((state) => state.files.uploads);
|
||||
const FileUploadList = () => {
|
||||
const { close } = useContext(DialogWrapperContext);
|
||||
const uploads = ServerContext.useStoreState((state) =>
|
||||
state.files.uploads.sort((a, b) => a.name.localeCompare(b.name))
|
||||
);
|
||||
|
||||
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 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>
|
||||
))}
|
||||
</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)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue