Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +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 = '',
color = 'blue',
disabled = false,
ariaCapitalize = false,
href,
type = 'contained',
...attrs
@ -107,7 +108,7 @@ export default function Button({
>
{children}
</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>
);
}

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

@ -39,7 +39,7 @@ export default function Box({
))}
<div class="flex-grow" />
{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" />
</Button>
))}

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

@ -4,7 +4,7 @@ import { useLayoutEffect, useRef, useState } from 'preact/hooks';
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 portalRoot = document.getElementById('tooltips');
const ref = useRef();
@ -49,9 +49,9 @@ export default function Tooltip({ relativeTo, text }) {
const tooltip = (
<div
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 ${
position.top >= 0 ? 'opacity-100 scale-100' : ''
}`}
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 ? 'capitalize' : ''
} ${position.top >= 0 ? 'opacity-100 scale-100' : ''}`}
ref={ref}
style={position}
>