idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

enhancement(web): log download spinner icon (#847)

Browse source 
replace loading dots with spinner and move text to title for it display at mouseover
This commit is contained in:
martylukyy 2023-04-17 20:54:30 +02:00 • committed by GitHub
parent 9f86c3ab4b
commit d03561d61c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/Icons.tsx
View file

@ -15,3 +15,7 @@ export const SortUpIcon = ({ className }: IconProps) => (
export const SortDownIcon = ({ className }: IconProps) => (
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 320 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>
);
export const RingResizeSpinner = ({ className }: IconProps) => (
<svg className={className} stroke="currentColor" fill="currentColor" strokeWidth="3" strokeLinecap="round" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><circle cx="12" cy="12" r="9.5" fill="none"><animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
);

45
web/src/screens/Logs.tsx
View file

@ -14,6 +14,7 @@ import {
import { useQuery } from "react-query";
import { Menu, Transition } from "@headlessui/react";
import { baseUrl } from "../utils";
import { RingResizeSpinner } from "@/components/Icons";
type LogEvent = {
@ -148,7 +149,7 @@ export const Logs = () => {
<div className="max-w-screen-xl mx-auto pb-10 px-2 sm:px-4 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-4 sm:px-6 pt-3 sm:pt-4">
<LogFiles />
<LogFiles />
</div>
</div>
@ -208,38 +209,6 @@ interface LogFilesItemProps {
file: LogFile;
}
const Dots = () => {
const [step, setStep] = useState(1);
useEffect(() => {
const interval = setInterval(() => {
setStep((prevStep) => (prevStep % 3) + 1);
}, 300);
return () => clearInterval(interval);
}, []);
return (
<div className="flex">
<div
className={`h-2 w-2 bg-blue-500 rounded-full mx-1 ${
step === 1 ? "opacity-100" : "opacity-30"
}`}
/>
<div
className={`h-2 w-2 bg-blue-500 rounded-full mx-1 ${
step === 2 ? "opacity-100" : "opacity-30"
}`}
/>
<div
className={`h-2 w-2 bg-blue-500 rounded-full mx-1 ${
step === 3 ? "opacity-100" : "opacity-30"
}`}
/>
</div>
);
};
const LogFilesItem = ({ file }: LogFilesItemProps) => {
const [isDownloading, setIsDownloading] = useState(false);
@ -279,7 +248,7 @@ const LogFilesItem = ({ file }: LogFilesItemProps) => {
"text-gray-900 dark:text-gray-300",
"font-medium group flex rounded-md items-center px-2 py-2 text-sm"
)}
title="Download file"
title={!isDownloading ? "Download file" : "Sanitizing log..."}
onClick={handleDownload}
>
{!isDownloading ? (
@ -288,10 +257,10 @@ const LogFilesItem = ({ file }: LogFilesItemProps) => {
aria-hidden="true"
/>
) : (
<div className="h-5 flex items-center">
<span className="sanitizing-text">Sanitizing log</span>
<Dots />
</div>
<RingResizeSpinner
className="text-blue-500 w-5 h-5 iconHeight"
aria-hidden="true"
/>
)}
</button>
</div>