chore: ui fixes
This commit is contained in:
parent
c4ad2083a7
commit
9e34f686de
@ -28,11 +28,12 @@ type BlobListProps = {
|
||||
blobs: BlobDescriptor[];
|
||||
onDelete?: (blob: BlobDescriptor) => void;
|
||||
title?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type AudioBlob = BlobDescriptor & { id3?: ID3Tag; imageData?: string };
|
||||
|
||||
const BlobList = ({ blobs, onDelete, title }: BlobListProps) => {
|
||||
const BlobList = ({ blobs, onDelete, title, className ='' }: BlobListProps) => {
|
||||
const [mode, setMode] = useState<ListMode>('list');
|
||||
const { distribution } = useServerInfo();
|
||||
const fileMetaEventsByHash = useFileMetaEventsByHash();
|
||||
@ -168,7 +169,7 @@ const BlobList = ({ blobs, onDelete, title }: BlobListProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`blog-list-header ${!title ? 'justify-end' : ''}`}>
|
||||
<div className={`blog-list-header ${className} ${!title ? 'justify-end' : ''}`}>
|
||||
{title && <h2>{title}</h2>}
|
||||
<ul className="menu menu-horizontal menu-active bg-base-200 rounded-box">
|
||||
<li>
|
||||
|
@ -3,16 +3,19 @@ const CheckBox = ({
|
||||
checked,
|
||||
setChecked,
|
||||
label,
|
||||
disabled = false,
|
||||
}: {
|
||||
name: string;
|
||||
checked: boolean;
|
||||
setChecked: (checked: boolean) => void;
|
||||
label: string;
|
||||
disabled: boolean;
|
||||
}) => (
|
||||
<>
|
||||
<input
|
||||
className="checkbox checkbox-primary"
|
||||
id={name}
|
||||
disabled={disabled}
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={e => setChecked(e.currentTarget.checked)}
|
||||
|
@ -65,6 +65,7 @@ function Home() {
|
||||
|
||||
{selectedServer && serverInfo[selectedServer] && selectedServerBlobs && (
|
||||
<BlobList
|
||||
className="mt-4"
|
||||
title={`Your objects on ${serverInfo[selectedServer].name}`}
|
||||
blobs={selectedServerBlobs}
|
||||
onDelete={blob =>
|
||||
|
@ -1,5 +1,5 @@
|
||||
.message {
|
||||
@apply text-3xl text-center text-white p-12;
|
||||
@apply text-2xl text-center text-white p-4;
|
||||
}
|
||||
|
||||
.message svg {
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
.action-button {
|
||||
@apply bg-white text-lg text-black hover:bg-pink-600 hover:text-white inline-block rounded-lg p-2 pr-4 pl-3;
|
||||
@apply bg-white text-lg text-black hover:bg-primary hover:text-white inline-block rounded-lg p-2 pr-4 pl-3;
|
||||
}
|
||||
|
||||
.action-button svg {
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.error-log {
|
||||
@apply bg-zinc-800 p-4 text-zinc-300 rounded-lg;
|
||||
@apply p-2 rounded-lg;
|
||||
}
|
||||
|
||||
.error-log svg {
|
||||
|
@ -126,6 +126,7 @@ export const Transfer = () => {
|
||||
></ServerList>
|
||||
{transferTarget && transferJobs && transferJobs.length > 0 ? (
|
||||
<>
|
||||
<div className=" bg-base-200 rounded-xl p-4 text-neutral-content gap-4 flex flex-col my-4">
|
||||
<div className="message">
|
||||
{transferJobs.length} object{transferJobs.length > 1 ? 's' : ''} to transfer{' '}
|
||||
{!started && (
|
||||
@ -138,13 +139,18 @@ export const Transfer = () => {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<ProgressBar value={transferStatus.size} max={transferStatus.fullSize} />
|
||||
{
|
||||
<div className="message">
|
||||
{formatFileSize(transferStatus.size)} / {formatFileSize(transferStatus.fullSize)} transferred
|
||||
</div>
|
||||
<div className="w-5/6">
|
||||
<ProgressBar
|
||||
value={transferStatus.size}
|
||||
max={transferStatus.fullSize}
|
||||
description={
|
||||
formatFileSize(transferStatus.size) +
|
||||
' / ' +
|
||||
formatFileSize(transferStatus.fullSize) +
|
||||
' transferred'
|
||||
}
|
||||
/>
|
||||
{<div className="message"></div>}
|
||||
<div className="error-log">
|
||||
{Object.values(transferLog)
|
||||
.filter(b => b.status == 'error')
|
||||
@ -161,6 +167,7 @@ export const Transfer = () => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!started && <BlobList blobs={transferJobs}></BlobList>}
|
||||
</>
|
||||
) : (
|
||||
|
@ -46,7 +46,8 @@ function Upload() {
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const bs = useBlossomServerEvents();
|
||||
const [fileEventsToPublish, setFileEventsToPublish] = useState<FileEventData[]>([]);
|
||||
console.log(bs);
|
||||
const [uploadBusy, setUploadBusy] = useState(false);
|
||||
console.log(bs);
|
||||
// const [resizeImages, setResizeImages] = useState(false);
|
||||
// const [publishToNostr, setPublishToNostr] = useState(false);
|
||||
|
||||
@ -89,6 +90,8 @@ console.log(bs);
|
||||
}
|
||||
|
||||
const upload = async () => {
|
||||
setUploadBusy(true);
|
||||
|
||||
const filesToUpload: File[] = [];
|
||||
for (const f of files) {
|
||||
if (cleanPrivateData) {
|
||||
@ -170,6 +173,8 @@ console.log(bs);
|
||||
// TODO reset input control value??
|
||||
setFileEventsToPublish(Object.values(fileDimensions));
|
||||
}
|
||||
|
||||
setUploadBusy(false);
|
||||
};
|
||||
|
||||
const clearTransfers = () => {
|
||||
@ -211,6 +216,8 @@ console.log(bs);
|
||||
}, [servers]);
|
||||
|
||||
const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (uploadBusy) return;
|
||||
|
||||
const selectedFiles = event.target.files;
|
||||
if (selectedFiles && selectedFiles.length > 0) {
|
||||
const newFiles = Array.from(selectedFiles);
|
||||
@ -220,7 +227,9 @@ console.log(bs);
|
||||
};
|
||||
|
||||
const handleDrop = (event: DragEvent<HTMLLabelElement>) => {
|
||||
if (uploadBusy) return;
|
||||
event.preventDefault();
|
||||
|
||||
const droppedFiles = event.dataTransfer?.files;
|
||||
if (droppedFiles && droppedFiles.length > 0) {
|
||||
const newFiles = Array.from(droppedFiles);
|
||||
@ -234,7 +243,15 @@ console.log(bs);
|
||||
<>
|
||||
<h2 className=" py-4">Upload</h2>
|
||||
<div className=" bg-base-200 rounded-xl p-4 text-neutral-content gap-4 flex flex-col">
|
||||
<input id="browse" type="file" ref={fileInputRef} hidden multiple onChange={handleFileChange} />
|
||||
<input
|
||||
id="browse"
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
disabled={uploadBusy}
|
||||
hidden
|
||||
multiple
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<label
|
||||
htmlFor="browse"
|
||||
className="p-8 bg-base-100 rounded-lg hover:text-primary text-neutral-content border-dashed border-neutral-content border-opacity-50 border-2 block cursor-pointer text-center"
|
||||
@ -249,6 +266,7 @@ console.log(bs);
|
||||
<>
|
||||
<CheckBox
|
||||
name={s.name}
|
||||
disabled={uploadBusy}
|
||||
checked={transfers[s.name]?.enabled || false}
|
||||
setChecked={c =>
|
||||
setTransfers(ut => ({ ...ut, [s.name]: { enabled: c, transferred: 0, size: 0, rate: 0 } }))
|
||||
@ -271,6 +289,7 @@ console.log(bs);
|
||||
<div className="cursor-pointer grid gap-2" style={{ gridTemplateColumns: '1.5em auto' }}>
|
||||
<CheckBox
|
||||
name="cleanData"
|
||||
disabled={uploadBusy}
|
||||
checked={cleanPrivateData}
|
||||
setChecked={c => setCleanPrivateData(c)}
|
||||
label="Clean private data in images (EXIF)"
|
||||
@ -291,13 +310,13 @@ console.log(bs);
|
||||
*/}
|
||||
</div>
|
||||
<div className="flex flex-row gap-2">
|
||||
<button className="btn btn-primary" onClick={() => upload()} disabled={files.length == 0}>
|
||||
<button className="btn btn-primary" onClick={() => upload()} disabled={uploadBusy || files.length == 0}>
|
||||
Upload{files.length > 0 ? (files.length == 1 ? ` 1 file` : ` ${files.length} files`) : ''} /{' '}
|
||||
{formatFileSize(sizeOfFilesToUpload)}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary "
|
||||
disabled={files.length == 0}
|
||||
disabled={uploadBusy || files.length == 0}
|
||||
onClick={() => {
|
||||
clearTransfers();
|
||||
setFiles([]);
|
||||
|
Loading…
Reference in New Issue
Block a user