quentintaranpino/bouquet
1
0
Fork 0
forked from florian/bouquet
Code Pull Requests Activity

chore: ui fixes

Browse Source
This commit is contained in:
florian 2024-04-23 22:18:54 +02:00
parent c4ad2083a7
commit 9e34f686de
6 changed files with 72 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/BlobList/BlobList.tsx
View File

@ -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
src/components/CheckBox/CheckBox.tsx
View File

@ -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)}

1
src/pages/Home.tsx
View File

@ -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 =>

6
src/pages/Transfer.css
View File

@ -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 {

19
src/pages/Transfer.tsx
View File

@ -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>}
</>
) : (

25
src/pages/Upload.tsx
View File

@ -46,6 +46,7 @@ function Upload() {
const fileInputRef = useRef<HTMLInputElement | null>(null);
const bs = useBlossomServerEvents();
const [fileEventsToPublish, setFileEventsToPublish] = useState<FileEventData[]>([]);
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([]);