Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-02-14 00:17:05 +01:00
Code Issues Projects Releases Wiki Activity

Allow customization of tooltip capitalization (#7172)

Browse Source
This commit is contained in:
Nicolas Mowen 2023-07-16 06:44:05 -06:00 committed by GitHub
parent 662025a961
commit c6d0e93157
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/Button.jsx
View File

@ -65,6 +65,7 @@ export default function Button({
className = '', className = '',
color = 'blue', color = 'blue',
disabled = false, disabled = false,
ariaCapitalize = false,
href, href,
type = 'contained', type = 'contained',
...attrs ...attrs
@ -107,7 +108,7 @@ export default function Button({
> >
{children} {children}
</Element> </Element>
{hovered && attrs['aria-label'] ? <Tooltip text={attrs['aria-label']} relativeTo={ref} /> : null} {hovered && attrs['aria-label'] ? <Tooltip text={attrs['aria-label']} relativeTo={ref} capitalize={ariaCapitalize} /> : null}
</Fragment> </Fragment>
); );
} }

2
web/src/components/Card.jsx
View File

@ -39,7 +39,7 @@ export default function Box({
))} ))}
<div class="flex-grow" /> <div class="flex-grow" />
{icons.map(({ name, icon: Icon, ...props }) => ( {icons.map(({ name, icon: Icon, ...props }) => (
<Button aria-label={name} className="rounded-full" key={name} type="text" {...props}> <Button aria-label={name} ariaCapitalize={true} className="rounded-full" key={name} type="text" {...props}>
<Icon className="w-6" /> <Icon className="w-6" />
</Button> </Button>
))} ))}

8
web/src/components/Tooltip.jsx
View File

@ -4,7 +4,7 @@ import { useLayoutEffect, useRef, useState } from 'preact/hooks';
const TIP_SPACE = 20; const TIP_SPACE = 20;
export default function Tooltip({ relativeTo, text }) { export default function Tooltip({ relativeTo, text, capitalize }) {
const [position, setPosition] = useState({ top: -9999, left: -9999 }); const [position, setPosition] = useState({ top: -9999, left: -9999 });
const portalRoot = document.getElementById('tooltips'); const portalRoot = document.getElementById('tooltips');
const ref = useRef(); const ref = useRef();
@ -49,9 +49,9 @@ export default function Tooltip({ relativeTo, text }) {
const tooltip = ( const tooltip = (
<div <div
role="tooltip" role="tooltip"
className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm capitalize ${ className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm ${
position.top >= 0 ? 'opacity-100 scale-100' : '' capitalize ? 'capitalize' : ''
}`} } ${position.top >= 0 ? 'opacity-100 scale-100' : ''}`}
ref={ref} ref={ref}
style={position} style={position}
> >