xevion/factorio-achievements-fixer
1
0
Fork 0
mirror of https://github.com/Xevion/factorio-achievements-fixer.git synced 2026-01-31 06:24:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Minor item reorganize, improve HoverState to offer rejection reasons, remove light mode classes

Browse Source
This commit is contained in:
Xevion
2024-11-27 07:10:05 -06:00
parent 81f230687e
commit 8537e9fbff
3 changed files with 65 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+3 -3
View File
@@ -27,16 +27,16 @@ body {
/* Track */
::-webkit-scrollbar-track {
@apply bg-zinc-200 dark:bg-zinc-700 rounded-lg;
@apply bg-zinc-700 rounded-lg;
}
/* Handle */
::-webkit-scrollbar-thumb {
@apply bg-zinc-400 dark:bg-zinc-500 rounded-xl;
@apply bg-zinc-500 rounded-xl;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
@apply bg-zinc-500 dark:bg-zinc-400 rounded-lg;
@apply bg-zinc-400 rounded-lg;
}
}
src/components/DragAndDrop.tsx
+41 -20
View File
@@ -13,20 +13,33 @@ interface DragAndDropProps {
onFile: (path: string) => void;
}
type HoverState = "off" | "valid" | "invalid";
export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
const [isHovering, setIsHovering] = useState<HoverState>("off");
const [hoverState, setIsHovering] = useState<
| {
state: "off" | "valid";
}
| {
state: "invalid";
detail: string;
}
>({ state: "off" });
async function isValid(paths: string[]): Promise<boolean> {
return paths.length === 1 && paths[0].endsWith(".zip") && exists(paths[0]);
async function isValid(
paths: string[]
): Promise<{ valid: true } | { valid: false; detail: string }> {
if (paths.length !== 1) return { valid: false, detail: "Only one file" };
if (!paths[0].endsWith(".zip"))
return { valid: false, detail: "Not a .zip file" };
if (!(await exists(paths[0])))
return { valid: false, detail: "File does not exist" };
return { valid: true };
}
useEffect(() => {
const unlistenDrop = listen<DragDropEvent & { type: "drop" }>(
"tauri://drag-drop",
async (event) => {
setIsHovering("off");
setIsHovering({ state: "off" });
if (await isValid(event.payload.paths)) {
onFile(event.payload.paths[0]);
}
@@ -36,13 +49,14 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
const unlistenEnter = listen<DragDropEvent & { type: "enter" }>(
"tauri://drag-enter",
async (event) => {
if (await isValid(event.payload.paths)) setIsHovering("valid");
else setIsHovering("invalid");
const result = await isValid(event.payload.paths);
if (result.valid) setIsHovering({ state: "valid" });
else setIsHovering({ state: "invalid", detail: result.detail });
}
).then((fn) => fn);
const unlistenLeave = listen("tauri://drag-leave", () => {
setIsHovering("off");
setIsHovering({ state: "off" });
}).then((fn) => fn);
return () => {
@@ -86,22 +100,29 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
className={cn(
"flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-zinc-700 border-zinc-600",
{
"hover:bg-zinc-800 hover:border-zinc-500": isHovering === "off",
"bg-zinc-800 border-zinc-500": isHovering === "valid",
"hover:bg-zinc-800 hover:border-zinc-500":
hoverState.state === "off",
"bg-zinc-800 border-zinc-500": hoverState.state === "valid",
"bg-red-800/25 border-red-700/25 cursor-not-allowed":
isHovering === "invalid",
hoverState.state === "invalid",
}
)}
>
<div className="flex flex-col items-center justify-center pt-5 pb-6">
<FolderArrowDownIcon className="w-8 h-8 mb-4 text-zinc-500 dark:text-zinc-400" />
<p className="mb-2 text-sm text-zinc-500 dark:text-zinc-400">
<span className="font-semibold">Click to select</span> or drag and
drop a save file
</p>
<p className="text-xs text-zinc-500 dark:text-zinc-400">
<Monoblock>.zip</Monoblock> files only
</p>
<FolderArrowDownIcon className="w-8 h-8 mb-4 text-zinc-400" />
{hoverState.state !== "invalid" ? (
<>
<p className="mb-2 text-sm text-zinc-400">
<span className="font-semibold">Click to select</span> or drag
and drop a save file
</p>
<p className="text-xs text-zinc-400">
<Monoblock>.zip</Monoblock> files only
</p>
</>
) : (
<p className="text-sm text-red-400">{hoverState.detail}</p>
)}
</div>
</label>
</div>
src/views/SaveSelector.tsx
+21 -17
View File
@@ -21,30 +21,34 @@ export default function SaveSelector() {
});
}, []);
function Item({ file }: { file: SaveFile }) {
return (
<div
class="flex items-center justify-between p-1 hover:cursor-pointer bg-zinc-700 rounded hover:bg-zinc-600 group"
title={file.path}
>
<div className="flex justify-between text-zinc-400 w-full items-center text-sm">
<FolderIcon class="inline w-6 h-6 shrink-0 ml-0.5 mt-0.5 mr-1.5" />
<div className="grow font-medium text-zinc-200 truncate">
{file.name}
</div>
<div className="pl-1 shrink-0">{file.last_modified}</div>
<span className="text-zinc-300">,</span>
<div className="pl-1 shrink-0">{file.size}</div>
</div>
</div>
);
}
return (
<>
<DragAndDrop className="mr-1.5 bg-red-500!" onFile={() => {}} />
<div className="mt-1 text-center select-none text-zinc-300 text-[0.85rem]">
Or, select a save file from below
</div>
<div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-1.5 space-y-2">
<div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-2 space-y-2">
{saveFiles.map((file) => {
return (
<div
class="flex items-center justify-between p-1 hover:cursor-pointer bg-zinc-700 rounded hover:bg-zinc-600 group"
title={file.path}
>
<div className="flex justify-between text-zinc-400 w-full items-center text-sm">
<FolderIcon class="inline w-6 h-6 shrink-0 ml-0.5 mt-0.5 mr-1.5" />
<div className="grow font-medium text-zinc-200 truncate">
{file.name}
</div>
<div className="pl-1 shrink-0">{file.last_modified}</div>
<span className="text-zinc-300">,</span>
<div className="pl-1 shrink-0">{file.size}</div>
</div>
</div>
);
return <Item file={file} />;
})}
</div>
</>