diff --git a/gui/src/components/Toolbar.tsx b/gui/src/components/Toolbar.tsx index fff8e87d2..d643dd1f3 100644 --- a/gui/src/components/Toolbar.tsx +++ b/gui/src/components/Toolbar.tsx @@ -85,7 +85,9 @@ function BasicResetButton(options: UseResetOptions & { customName?: string }) { spacing={5} preferedDirection={error ? 'bottom' : 'top'} > -
- + ); } diff --git a/gui/src/components/commons/Tooltip.tsx b/gui/src/components/commons/Tooltip.tsx index e1fa60ca0..5d1ad580b 100644 --- a/gui/src/components/commons/Tooltip.tsx +++ b/gui/src/components/commons/Tooltip.tsx @@ -24,6 +24,7 @@ interface TooltipProps { disabled?: boolean; tag?: string; spacing?: number; + bindTo?: string; } interface TooltipPos { @@ -468,11 +469,16 @@ export function Tooltip({ variant = 'auto', disabled = false, tag = 'div', + bindTo, spacing = 10, }: TooltipProps) { const childRef = useRef(null); const isAndroid = window.__ANDROID__?.isThere(); + if (bindTo) { + childRef.current = document.querySelector(bindTo); + } + let portal = null; if (variant === 'auto') { portal = isAndroid ? ( @@ -508,7 +514,13 @@ export function Tooltip({ return ( <> - {createElement(tag, { className: 'contents', ref: childRef }, children)} + {bindTo + ? children + : createElement( + tag, + { className: 'contents', ref: childRef }, + children + )} {!disabled && createPortal(portal, document.body)} ); diff --git a/gui/src/components/tracker/TrackersTable.tsx b/gui/src/components/tracker/TrackersTable.tsx index 371f42add..1a4fdb022 100644 --- a/gui/src/components/tracker/TrackersTable.tsx +++ b/gui/src/components/tracker/TrackersTable.tsx @@ -104,7 +104,6 @@ export function TrackerRotCell({ function Header({ name, - className, first = false, last = false, show = true, @@ -116,17 +115,15 @@ function Header({ show?: boolean; }) { return ( - -
- -
- + + ); } @@ -147,7 +144,9 @@ function Cell({ const velocity = useVelocity(); return ( - +
{children}
- +
); } @@ -171,10 +170,12 @@ function Row({ data, highlightedTrackers, clickedTracker, + gridTemplateColumns, }: { data: FlatDeviceTracker; highlightedTrackers: highlightedTrackers | undefined; clickedTracker: (tracker: TrackerDataT) => void; + gridTemplateColumns: string; }) { const { config } = useConfig(); const fontColor = config?.devSettings?.highContrast ? 'primary' : 'secondary'; @@ -191,6 +192,11 @@ function Row({ return ( +
+
+ +
+
) } - tag="tr" spacing={-5} > <> -
-
- -
-
- clickedTracker(tracker)}> +
clickedTracker(tracker)} + > @@ -287,7 +291,7 @@ function Row({ ).toString()} - +
@@ -307,7 +311,7 @@ export function TrackersTable({ const filteringEnabled = config?.debug && config?.devSettings?.filterSlimesAndHMD; const sortingEnabled = config?.debug && config?.devSettings?.sortByName; - // TODO: fix memo + const filteredSortedTrackers = useMemo(() => { const list = filteringEnabled ? flatTrackers.filter((t) => isHMD(t) || isSlime(t)) @@ -321,49 +325,62 @@ export function TrackersTable({ const moreInfo = config?.devSettings?.moreInfo; + const gridTemplateColumns = useMemo(() => { + const cols = [ + 'minmax(150px, 1.5fr)', // Name + 'minmax(100px, 1fr)', // Type + 'minmax(60px, 1fr)', // Battery + '6rem', // Ping (w-24) + 'minmax(60px, 1fr)', // TPS + config?.devSettings?.preciseRotation ? '11rem' : '8rem', // Rotation + 'minmax(60px, 1fr)', // Temp + ]; + + if (moreInfo) { + cols.push('9rem'); // Linear Acc + cols.push('9rem'); // Position + cols.push('9rem'); // Stay Aligned + cols.push('minmax(150px, 1fr)'); // URL + } + + return cols.join(' '); + }, [config?.devSettings?.preciseRotation, moreInfo]); + return (
- - +
+
-
+
-
+
+
+
-
-
-
- {filteredSortedTrackers.map((data) => ( - - ))} -
+
+
+ {filteredSortedTrackers.map((data) => ( + + ))} +
+ ); }