Skip to content

Commit 16878d5

Browse files
NerivecNerivec
authored
fix: add tooltips (#251)
1 parent 48a0afc commit 16878d5

17 files changed

Lines changed: 64 additions & 66 deletions

‎src/components/Button.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@ interface ButtonProps<T> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "
66
}
77

88
export default function Button<T>(props: ButtonProps<T>): JSX.Element {
9-
const { children, item, onClick, ...rest } = props;
9+
const { children, item, onClick, title, className, ...rest } = props;
1010

1111
return (
12-
<button type="button" {...rest} onClick={async () => await onClick?.(item as T)}>
12+
<button
13+
type="button"
14+
className={`${className} ${title ? "tooltip" : ""}`}
15+
data-tip={title}
16+
{...rest}
17+
onClick={async () => await onClick?.(item as T)}
18+
>
1319
{children}
1420
</button>
1521
);

‎src/components/ConfirmButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface ConfirmButtonProps<T>
1111
}
1212

1313
export default function ConfirmButton<T>(props: ConfirmButtonProps<T>): JSX.Element {
14-
const { children, item, onClick, modalDescription, modalCancelLabel, title, ...rest } = props;
14+
const { children, item, onClick, modalDescription, modalCancelLabel, title, className, ...rest } = props;
1515

1616
const onClickHandler = useCallback(async (): Promise<void> => {
1717
await NiceModal.show(DialogConfirmationModal, {
@@ -24,7 +24,7 @@ export default function ConfirmButton<T>(props: ConfirmButtonProps<T>): JSX.Elem
2424
}, [item, onClick, title, modalDescription, modalCancelLabel]);
2525

2626
return (
27-
<button type="button" title={title} {...rest} onClick={onClickHandler}>
27+
<button type="button" className={`${className} tooltip`} data-tip={title} {...rest} onClick={onClickHandler}>
2828
{children}
2929
</button>
3030
);

‎src/components/Notifications.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@ const Notification = memo(({ log, onClick }: NotificationProps) => {
2323
const alertRef = useRef<HTMLDivElement | null>(null);
2424

2525
return (
26-
<div ref={alertRef} className={`alert ${LOG_LEVELS_CMAP[log.level]} break-all gap-1 p-2 pe-0.5`} title={log.timestamp}>
26+
<div
27+
ref={alertRef}
28+
className={`alert ${LOG_LEVELS_CMAP[log.level]} break-all gap-1 p-2 pe-0.5 tooltip tooltip-left`}
29+
data-tip={log.timestamp}
30+
>
2731
<span>{log.message}</span>
2832
<div className="justify-self-end">
2933
<Button item={alertRef} onClick={onClick} className="btn btn-xs btn-square">

‎src/components/PermitJoinButton.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
55
import store2 from "store2";
66
import { useShallow } from "zustand/react/shallow";
77
import { PERMIT_JOIN_TIME_KEY } from "../localStoreConsts.js";
8-
import { API_NAMES, API_URLS, MULTI_INSTANCE, useAppStore } from "../store.js";
8+
import { API_URLS, useAppStore } from "../store.js";
99
import type { Device } from "../types.js";
1010
import { sendMessage } from "../websocket/WebSocketManager.js";
1111
import Button from "./Button.js";
@@ -38,7 +38,6 @@ const PermitJoinDropdown = memo(({ selectedRouter, setSelectedRouter }: PermitJo
3838
setSelectedRouter([sourceIdx, device]);
3939
}
4040
}}
41-
title={MULTI_INSTANCE ? `${API_NAMES[sourceIdx]} - ${device.friendly_name}` : device.friendly_name}
4241
>
4342
<span
4443
className={`dropdown-item${selectedRouter[0] === sourceIdx && selectedRouter[1]?.ieee_address === device.ieee_address ? " menu-active" : ""}`}
@@ -65,7 +64,6 @@ const PermitJoinDropdown = memo(({ selectedRouter, setSelectedRouter }: PermitJo
6564
setSelectedRouter([sourceIdx, undefined]);
6665
}
6766
}}
68-
title={MULTI_INSTANCE ? `${API_NAMES[sourceIdx]} - ${t(($) => $.all)}` : t(($) => $.all)}
6967
>
7068
<span className={`dropdown-item${selectedRouter[0] === sourceIdx && selectedRouter[1] === undefined ? " menu-active" : ""}`}>
7169
<SourceDot idx={sourceIdx} autoHide namePostfix=" - " />
@@ -81,7 +79,7 @@ const PermitJoinDropdown = memo(({ selectedRouter, setSelectedRouter }: PermitJo
8179
return (
8280
<DialogDropdown
8381
buttonChildren={
84-
<span title={t(($) => $.toggle_dropdown)}>
82+
<span className="tooltip tooltip-right" data-tip={t(($) => $.toggle_dropdown)}>
8583
<FontAwesomeIcon icon={faAngleDown} />
8684
</span>
8785
}

‎src/components/device-page/HeaderDeviceSelector.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,7 @@ const HeaderDeviceSelector = memo(({ currentSourceIdx, currentDevice, tab = "inf
6161
>
6262
<label className="input min-h-10" key="search">
6363
<FontAwesomeIcon icon={faMagnifyingGlass} />
64-
<DebouncedInput
65-
onChange={setSearchTerm}
66-
placeholder={t(($) => $.type_to_filter)}
67-
value={searchTerm}
68-
title={t(($) => $.type_to_filter)}
69-
/>
64+
<DebouncedInput onChange={setSearchTerm} placeholder={t(($) => $.type_to_filter)} value={searchTerm} />
7065
</label>
7166
{items}
7267
</DialogDropdown>

‎src/components/device-page/ReportingRow.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ const ReportingRow = memo(({ sourceIdx, rule, device, onApply }: ReportingRowPro
153153
<legend className="fieldset-legend">{t(($) => $.actions)}</legend>
154154
<div className="join join-horizontal">
155155
<Button<NiceReportingRule>
156+
title={t(($) => $.apply, { ns: "common" })}
156157
className="btn btn-primary btn-outline join-item"
157158
item={stateRule}
158159
onClick={onApply}

‎src/components/device/DeviceCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,10 @@ const DeviceCard = memo(
104104
</div>
105105
</div>
106106
<div className="flex flex-row flex-wrap gap-1 mx-2 mb-2 justify-around items-center">
107-
<span className="badge badge-soft badge-ghost cursor-default" title={t(($) => $.lqi)}>
107+
<span className="badge badge-soft badge-ghost cursor-default tooltip" data-tip={t(($) => $.lqi)}>
108108
<Lqi value={deviceState.linkquality as number | undefined} />
109109
</span>
110-
<span className="badge badge-soft badge-ghost cursor-default" title={t(($) => $.power)}>
110+
<span className="badge badge-soft badge-ghost cursor-default tooltip" data-tip={t(($) => $.power)}>
111111
<PowerSource
112112
device={device}
113113
batteryPercent={deviceState.battery as number}

‎src/components/device/DeviceControlEditName.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const DeviceControlEditName = memo(({ sourceIdx, name, homeassistantEnabled, sty
1919

2020
return (
2121
<Button<undefined>
22-
className={`btn ${style}`}
22+
className={`btn ${style} tooltip`}
2323
onClick={async () =>
2424
await NiceModal.show(RenameDeviceModal, {
2525
sourceIdx,
@@ -28,7 +28,7 @@ const DeviceControlEditName = memo(({ sourceIdx, name, homeassistantEnabled, sty
2828
homeassistantEnabled,
2929
})
3030
}
31-
title={t(($) => $.rename_device)}
31+
data-tip={t(($) => $.rename_device)}
3232
>
3333
<FontAwesomeIcon icon={faEdit} />
3434
</Button>

‎src/components/features/Binary.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const Binary = memo((props: BinaryProps) => {
4343
{valueExists ? (
4444
<input className="toggle" type="checkbox" checked={deviceValue === valueOn} onChange={onCheckboxChange} />
4545
) : (
46-
<span title={t(($) => $.unknown)}>
46+
<span className="tooltip" data-tip={t(($) => $.unknown)}>
4747
<FontAwesomeIcon icon={faQuestion} />
4848
</span>
4949
)}

‎src/components/group/GroupCard.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,6 @@ const GroupCard = ({ sourceIdx, group, endpoint, removeFromGroup }: GroupCardPro
3333
)}
3434
</div>
3535
</div>
36-
{/* <div className="text-sm w-full p-2 max-h-125 overflow-y-auto" style={{ scrollbarWidth: "thin" }}>
37-
{group.members.map((member) => (
38-
<div key={`${member.ieee_address}-${member.endpoint}`} className="flex flex-row items-center gap-1 mb-2">
39-
<div className="grow-1">{member.ieee_address}</div>
40-
<div className="shrink-1" title={t("endpoint", {ns: "zigbee"})}>
41-
{member.endpoint}
42-
</div>
43-
</div>
44-
))}
45-
</div> */}
4636
</div>
4737
<div className="flex flex-row flex-wrap gap-1 mx-2 mb-2 justify-around items-center">
4838
<div className="badge badge-soft badge-ghost cursor-default me-2 tooltip" data-tip={t(($) => $.group_members)}>

0 commit comments

Comments
 (0)