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

refactor(web): headlessui v2 (#1570)

Browse source 
* refactor(web): fix build errors, SlideOver panels and forms

* refactor(web): fix build errors

* refactor(web): fix filter importer

* refactor(web): fix modals

* chore(web): bump pnpm

* refactor(web): pending component

* refactor(web): Dialog.Title to DialogTitle
This commit is contained in:
martylukyy 2024-06-18 14:51:04 +02:00 • committed by GitHub
parent 0841a1ce7c
commit 7821f7fb2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 139 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web/src/screens/filters/Importer.tsx
View file

@ -4,7 +4,7 @@
*/
import { Fragment, useRef, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
import { useQueryClient } from "@tanstack/react-query";
import toast from "react-hot-toast";
@ -27,9 +27,9 @@ interface ModalLowerProps extends ImporterProps {
const ModalUpper = ({ children }: { children: React.ReactNode; }) => (
<div className="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:py-6 sm:px-4 sm:pb-4">
<div className="mt-3 text-left sm:mt-0 max-w-full">
<Dialog.Title as="h3" className="mb-3 text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
<DialogTitle as="h3" className="mb-3 text-lg leading-6 font-medium text-gray-900 dark:text-white break-words">
Import filter (in JSON or autodl-irssi format)
</Dialog.Title>
</DialogTitle>
{children}
</div>
</div>
@ -221,32 +221,20 @@ export const Importer = ({
};
return (
<Transition.Root show={isOpen} as={Fragment}>
<Transition show={isOpen} as={Fragment}>
<Dialog
as="div"
static
className="fixed z-10 inset-0 overflow-y-auto"
className="fixed z-10 inset-0 overflow-y-auto bg-gray-700/60 dark:bg-black/60 transition-opacity"
initialFocus={textAreaRef}
open={isOpen}
onClose={() => setIsOpen(false)}
>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-700/60 dark:bg-black/60 transition-opacity" />
</Transition.Child>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<Transition.Child
<TransitionChild
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@ -255,7 +243,7 @@ export const Importer = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:max-w-6xl">
<DialogPanel className="inline-block align-bottom border border-transparent dark:border-gray-700 rounded-lg text-left overflow-hidden shadow-xl transform transition sm:my-8 sm:align-middle w-full sm:max-w-6xl">
<ModalUpper>
<textarea
className="form-input resize-y block w-full shadow-sm sm:text-sm rounded-md border py-2.5 focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-815 dark:text-gray-100"
@ -287,10 +275,10 @@ export const Importer = ({
) : null}
</ModalUpper>
<ModalLower isOpen={isOpen} setIsOpen={setIsOpen} onImportClick={handleImportJson} />
</div>
</Transition.Child>
</DialogPanel>
</TransitionChild>
</div>
</Dialog>
</Transition.Root>
</Transition>
);
};