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

fix(web): tooltips (#1154)

Browse source 
* fix broken tooltips, replace react-tooltip with react-popper-tooltip

* make tooltips use ExternalLink component

* fix import

* get rid of unused import

* fix(tooltip): set delayHide

* removed unecessary comment

* fix tooltip on mobile

* stop tooltip label propagation (mainly for mobile devices)

* added onClick convenience prop for label component wrapper (since onClick isn't propagated down)

---------

Co-authored-by: soup <soup@r4tio.dev>
This commit is contained in:
stacksmash76 2023-10-01 13:16:05 +00:00 • committed by GitHub
parent 98df0c9040
commit 3e3454724b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 1171 additions and 396 deletions
Download patch file Download diff file Expand all files Collapse all files

26
web/src/components/inputs/input_wide.tsx
View file

@ -12,7 +12,7 @@ import { Switch } from "@headlessui/react";
import { ErrorField, RequiredField } from "./common";
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
import { SelectFieldProps } from "./select";
import { CustomTooltip } from "@components/tooltips/CustomTooltip";
import { DocsTooltip } from "@components/tooltips/DocsTooltip";
interface TextFieldWideProps {
name: string;
@ -43,7 +43,9 @@ export const TextFieldWide = ({
<div>
<label htmlFor={name} className="flex text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
<div className="flex">
{label} {tooltip && (<CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>)}
{tooltip ? (
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
) : label}
<RequiredField required={required} />
</div>
</label>
@ -108,7 +110,9 @@ export const PasswordFieldWide = ({
<div>
<label htmlFor={name} className="flex text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
<div className="flex">
{label} {tooltip && (<CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>)}
{tooltip ? (
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
) : label}
<RequiredField required={required} />
</div>
</label>
@ -172,7 +176,9 @@ export const NumberFieldWide = ({
className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
>
<div className="flex">
{label} {tooltip && (<CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>)}
{tooltip ? (
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
) : label}
<RequiredField required={required} />
</div>
</label>
@ -232,10 +238,11 @@ export const SwitchGroupWide = ({
<ul className="px-4 divide-y divide-gray-200 dark:divide-gray-700">
<Switch.Group as="li" className="py-4 flex items-center justify-between">
<div className="flex flex-col">
<Switch.Label as="div" className="text-sm font-medium text-gray-900 dark:text-white"
passive>
<Switch.Label as="div" passive className="text-sm font-medium text-gray-900 dark:text-white">
<div className="flex">
{label} {tooltip && (<CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>)}
{tooltip ? (
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
) : label}
</div>
</Switch.Label>
{description && (
@ -396,8 +403,9 @@ export const SelectFieldWide = ({
className="flex text-sm font-medium text-gray-900 dark:text-white"
>
<div className="flex">
{label}
{tooltip && (<CustomTooltip anchorId={name}>{tooltip}</CustomTooltip>)}
{tooltip ? (
<DocsTooltip label={label}>{tooltip}</DocsTooltip>
) : label}
</div>
</label>
</div>