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

enhancement(web): ui overhaul (#1155)

Browse source 
* Various WebUI changes and fixes.

* feat(tooltip): make tooltip display upwards

* fix(tooltip): place tooltip to the right

* fix(web): add missing ml-px to SwitchGroup header

current: https://i.imgur.com/2WXstPV.png
new: https://i.imgur.com/QGQ49mP.png

* fix(web): collapse sections

* fix(web):  improve freeleech section

* fix(web): rename action to action_components

Renamed the 'action' folder to 'action_components' to resolve import issues due to case sensitivity.

* fix(web): align CollapsibleSection

Old Advanced tab: https://i.imgur.com/MXaJ5eJ.png
New Advanced tab: https://i.imgur.com/4nPJJRw.png
Music tab for comparison: https://i.imgur.com/I59X7ot.png

* fix(web): remove invalid CSS class

* revert: vertical padding on switchgroup

added py-0 on the freeleech part instead

* feat(settings): add back log files

* fix(settings): irc channels and font sizes

* fix(components): radio select roundness

* fix(styling): various minor changes

* fix(filters): remove jitter fields

---------

Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
Co-authored-by: soup <soup@r4tio.dev>
Co-authored-by: ze0s <ze0s@riseup.net>
This commit is contained in:
stacksmash76 2023-11-18 13:46:16 +00:00 • committed by GitHub
parent a274d9ddce
commit e842a7bd42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
84 changed files with 4378 additions and 4361 deletions
Download patch file Download diff file Expand all files Collapse all files

92
web/src/components/Checkbox.tsx
View file

@ -4,36 +4,82 @@
*/
import { Switch } from "@headlessui/react";
import { classNames } from "@utils";
interface CheckboxProps {
value: boolean;
setValue: (newValue: boolean) => void;
label: string;
description?: string;
value: boolean;
setValue: (newValue: boolean) => void;
label?: string;
description?: string;
className?: string;
disabled?: boolean;
}
export const Checkbox = ({ label, description, value, setValue }: CheckboxProps) => (
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
<Switch.Label as="p" className="text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white" passive>
{label}
</Switch.Label>
{description === undefined ? null : (
<Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
{description}
</Switch.Description>
)}
</div>
export const Checkbox = ({
label,
description,
value,
className,
setValue,
disabled
}: CheckboxProps) => (
<Switch.Group
as="div"
className={classNames(className ?? "py-2", "flex items-center justify-between")}
onClick={(e) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}}
>
{(label || description) ? (
<div className="flex flex-col mr-4">
{label ? (
<Switch.Label as="p" className="text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white" passive>
{label}
</Switch.Label>
) : null}
{description ? (
<Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
{description}
</Switch.Description>
) : null}
</div>
) : null}
<Switch
checked={value}
onChange={setValue}
className={
`${value ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-700"
} ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500`}
onChange={(newValue) => {
!disabled && setValue(newValue);
}}
className={classNames(
disabled
? "cursor-not-allowed bg-gray-450 dark:bg-gray-700 border-gray-375 dark:border-gray-800"
: (
value
? "cursor-pointer bg-blue-600 border-blue-525"
: "cursor-pointer bg-gray-300 dark:bg-gray-700 border-gray-375 dark:border-gray-600"
),
"border relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors"
)}
>
<span
className={`${value ? "translate-x-5" : "translate-x-0"} inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200`}
/>
className={classNames(
value ? "translate-x-6" : "translate-x-[0.15rem]",
disabled ? "bg-gray-650 dark:bg-gray-800" : "bg-white",
"inline-flex items-center align-center h-4 w-4 transform rounded-full transition ring-0 shadow"
)}
>
{value
? (
<svg className={classNames(
disabled ? "text-white dark:text-gray-300" : "text-blue-500", "w-4 h-4"
)} fill="currentColor" viewBox="0 0 12 12"><path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path></svg>
)
: (
<svg className={classNames(
disabled ? "text-white dark:text-gray-300" : "text-gray-600", "w-4 h-4"
)} fill="none" viewBox="0 0 12 12"><path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path></svg>
)}
</span>
</Switch>
</Switch.Group>
);
);