From 5b399482ed11891a9089e14b263a83d794923756 Mon Sep 17 00:00:00 2001 From: florian <> Date: Mon, 15 Apr 2024 18:55:38 +0200 Subject: [PATCH] feat: Added daisyUI --- package-lock.json | 79 ++++++++++++++ package.json | 1 + src/components/BlobList/BlobList.css | 20 +--- src/components/BlobList/BlobList.tsx | 103 ++++++++++-------- src/components/CheckBox/CheckBox.tsx | 2 +- .../FileEventEditor/FileEventEditor.tsx | 71 ++++++++++++ src/components/Layout/Layout.css | 8 +- src/components/Layout/Layout.tsx | 10 +- src/components/ProgressBar/ProgressBar.tsx | 12 +- src/components/ServerList/Server.tsx | 2 +- src/components/ServerList/ServerList.css | 19 ++-- src/components/ThemeSwitcher.tsx | 24 ++++ src/index.css | 4 - src/pages/Check.tsx | 8 +- src/pages/Home.css | 2 +- src/pages/Transfer.css | 17 --- src/pages/Upload.tsx | 71 +++++++++--- tailwind.config.js | 12 -- tailwind.config.ts | 45 ++++++++ 19 files changed, 374 insertions(+), 136 deletions(-) create mode 100644 src/components/FileEventEditor/FileEventEditor.tsx create mode 100644 src/components/ThemeSwitcher.tsx delete mode 100644 tailwind.config.js create mode 100644 tailwind.config.ts diff --git a/package-lock.json b/package-lock.json index 6819d7b..87f7c43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react-swc": "^3.6.0", "autoprefixer": "^10.4.19", + "daisyui": "latest", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", @@ -2478,6 +2479,16 @@ "node": ">= 8" } }, + "node_modules/css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -2496,6 +2507,15 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "devOptional": true }, + "node_modules/culori": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", + "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + } + }, "node_modules/d": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz", @@ -2508,6 +2528,25 @@ "node": ">=0.12" } }, + "node_modules/daisyui": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.1.tgz", + "integrity": "sha512-Ds0Z0Fv+Xf6ZEqV4Q5JIOeKfg83xxnww0Lzid0V94vPtlQ0yYmucEa33zSctsX2VEgBALtmk5zVEqd59pnUbuQ==", + "dev": true, + "dependencies": { + "css-selector-tokenizer": "^0.8", + "culori": "^3", + "picocolors": "^1", + "postcss-js": "^4" + }, + "engines": { + "node": ">=16.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/daisyui" + } + }, "node_modules/data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", @@ -3015,6 +3054,12 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -7313,6 +7358,16 @@ "which": "^2.0.1" } }, + "css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -7325,6 +7380,12 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "devOptional": true }, + "culori": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", + "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==", + "dev": true + }, "d": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz", @@ -7334,6 +7395,18 @@ "type": "^2.7.2" } }, + "daisyui": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.1.tgz", + "integrity": "sha512-Ds0Z0Fv+Xf6ZEqV4Q5JIOeKfg83xxnww0Lzid0V94vPtlQ0yYmucEa33zSctsX2VEgBALtmk5zVEqd59pnUbuQ==", + "dev": true, + "requires": { + "css-selector-tokenizer": "^0.8", + "culori": "^3", + "picocolors": "^1", + "postcss-js": "^4" + } + }, "data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", @@ -7729,6 +7802,12 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, + "fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", diff --git a/package.json b/package.json index 697e62b..608c397 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react-swc": "^3.6.0", "autoprefixer": "^10.4.19", + "daisyui": "latest", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", diff --git a/src/components/BlobList/BlobList.css b/src/components/BlobList/BlobList.css index c1d6e4b..68fb1b4 100644 --- a/src/components/BlobList/BlobList.css +++ b/src/components/BlobList/BlobList.css @@ -2,16 +2,12 @@ @apply w-5 inline align-text-bottom mr-1; } -.blob-list a { - @apply text-pink-500 hover:text-white; -} - .blob-list { - @apply bg-zinc-800 p-4 text-zinc-300 rounded-lg; + @apply bg-base-200 p-4 text-neutral-content rounded-lg; } .blob-list .blob { - @apply p-1 hover:bg-zinc-700 rounded-md grid pr-4; + @apply p-1 hover:bg-base-200 rounded-md grid pr-4; grid-template-columns: 2em auto /*auto*/ 2em 6em 10em 7em 3em; } @@ -19,12 +15,8 @@ @apply overflow-ellipsis overflow-hidden text-nowrap; } -.blob-list .blob a { - @apply cursor-pointer; -} - .blog-list-header { - @apply flex flex-row mt-4; + @apply flex flex-row py-2 items-center; } .blog-list-header h2 { @@ -32,11 +24,11 @@ } .blog-list-header button { - @apply bg-zinc-800 hover:bg-zinc-700 p-2 ml-2 my-2 text-white rounded-lg disabled:text-zinc-700 disabled:bg-zinc-900; + @apply btn p-2 ml-2 my-2 text-neutral-content rounded-lg; } .blog-list-header button.selected { - @apply bg-pink-700 text-white; + @apply btn-primary text-primary-content; } .blog-list-header svg { @@ -44,5 +36,5 @@ } .blob-list .blob span a.pill { - @apply bg-zinc-700 p-1 px-2 rounded-2xl text-white; + @apply bg-base-200 p-1 px-2 rounded-2xl text-white; } \ No newline at end of file diff --git a/src/components/BlobList/BlobList.tsx b/src/components/BlobList/BlobList.tsx index 367de2c..1c775e6 100644 --- a/src/components/BlobList/BlobList.tsx +++ b/src/components/BlobList/BlobList.tsx @@ -103,7 +103,7 @@ const BlobList = ({ blobs, onDelete, title }: BlobListProps) => {
{JSON.stringify(fileEventData, null, 2)}+ + {fileEventData.dim ? `(${fileEventData.dim})` : ''} +
Downloads all objects from the server and checks the integrity of the content.
@@ -16,6 +16,8 @@ function Check() { servers={Object.values(serverInfo).filter(s => s.name == source)} onCancel={() => navigate('/')} > + */} + > ); } diff --git a/src/pages/Home.css b/src/pages/Home.css index cc80ead..542a2b0 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -1,5 +1,5 @@ body h2 { - @apply text-2xl text-white py-4; + @apply text-2xl text-base-content; } body h2 svg { diff --git a/src/pages/Transfer.css b/src/pages/Transfer.css index f5bcb3f..7b39d66 100644 --- a/src/pages/Transfer.css +++ b/src/pages/Transfer.css @@ -30,20 +30,3 @@ @apply overflow-ellipsis overflow-hidden text-nowrap; } -.blob-list svg { - @apply w-5 inline align-text-bottom mr-1; -} - -.blob-list a { - @apply text-pink-500 hover:text-white; -} - -.blob-list { -} - -.blob-list .blob { -} - -.blob-list .blob a { - @apply cursor-pointer; -} diff --git a/src/pages/Upload.tsx b/src/pages/Upload.tsx index d207e57..3b18eaa 100644 --- a/src/pages/Upload.tsx +++ b/src/pages/Upload.tsx @@ -4,12 +4,13 @@ import { BlobDescriptor, BlossomClient, SignedEvent } from 'blossom-client-sdk'; import { useNDK } from '../ndk'; import { useServerInfo } from '../utils/useServerInfo'; import { useQueryClient } from '@tanstack/react-query'; -import { ArrowUpOnSquareIcon, TrashIcon } from '@heroicons/react/24/outline'; -import ProgressBar from '../components/ProgressBar/ProgressBar'; import { removeExifData } from '../exif'; -import CheckBox from '../components/CheckBox/CheckBox'; import axios, { AxiosProgressEvent } from 'axios'; +import { ArrowUpOnSquareIcon, TrashIcon } from '@heroicons/react/24/outline'; +import CheckBox from '../components/CheckBox/CheckBox'; +import ProgressBar from '../components/ProgressBar/ProgressBar'; import { formatFileSize } from '../utils'; +import FileEventEditor, { FileEventData } from '../components/FileEventEditor/FileEventEditor'; type TransferStats = { enabled: boolean; @@ -17,6 +18,21 @@ type TransferStats = { transferred: number; }; +/* +TODO +steps +- select files +- (preview/reisze/exif removal) + - images: size, blurimage, dimensions + - audio: id3 tag + - video: dimensions, bitrate +- upload + - server slection, progress bars, upload speed +- + + +*/ + function Upload() { const servers = useServers(); const { signEventTemplate } = useNDK(); @@ -27,6 +43,8 @@ function Upload() { const [cleanPrivateData, setCleanPrivateData] = useState(true); const [transferSpeed, setTransferSpeed] = useState