Merge pull request #158 from Cycling74/fde/tooltips

More tooltips
Cycling74 · Jun 25, 2024 · 3f35ed2 · 3f35ed2
2 parents 2e5f609 + d37cca9
commit 3f35ed2
Show file tree

Hide file tree

Showing 27 changed files with 197 additions and 92 deletions.
diff --git a/src/components/datafile/item.tsx b/src/components/datafile/item.tsx
@@ -1,8 +1,9 @@
-import { ActionIcon, Group, Table, Text } from "@mantine/core";
+import { ActionIcon, Group, Table, Text, Tooltip } from "@mantine/core";
 import { DataFileRecord } from "../../models/datafile";
 import { FC, memo, useCallback } from "react";
 import { IconElement } from "../elements/icon";
 import { mdiTrashCan } from "@mdi/js";
+import { modals } from "@mantine/modals";
 
 export type DataFileListItemProps = {
 	dataFile: DataFileRecord;
@@ -15,7 +16,18 @@ export const DataFileListItem: FC<DataFileListItemProps> = memo(function Wrapped
 }) {
 
 	const onTriggerDelete = useCallback(() => {
-		onDelete(dataFile);
+		modals.openConfirmModal({
+			title: "Delete Audio File",
+			centered: true,
+			children: (
+				<Text size="sm">
+					Are you sure you want to delete the audio file { `"${dataFile.fileName}"` } from the runner?
+				</Text>
+			),
+			labels: { confirm: "Delete", cancel: "Cancel" },
+			confirmProps: { color: "red" },
+			onConfirm: () => onDelete(dataFile)
+		});
 	}, [onDelete, dataFile]);
 
 	return (
@@ -27,9 +39,11 @@ export const DataFileListItem: FC<DataFileListItemProps> = memo(function Wrapped
 			</Table.Td>
 			<Table.Td>
 				<Group justify="flex-end">
-					<ActionIcon color="red" variant="outline" onClick={ onTriggerDelete } >
-						<IconElement path={ mdiTrashCan } />
-					</ActionIcon>
+					<Tooltip label="Delete File">
+						<ActionIcon color="red" variant="outline" onClick={ onTriggerDelete } >
+							<IconElement path={ mdiTrashCan } />
+						</ActionIcon>
+					</Tooltip>
 				</Group>
 			</Table.Td>
 		</Table.Tr>

diff --git a/src/components/datafile/uploadModal.tsx b/src/components/datafile/uploadModal.tsx
@@ -232,7 +232,7 @@ export const DataFileUploadModal: FC<DataFileUploadModalProps> = memo(function W
 						{
 							step === UploadStep.Confirm || step === UploadStep.Uploading || step === UploadStep.Error ? (
 								<>
-									<Table verticalSpacing="sm">
+									<Table verticalSpacing="sm" highlightOnHover>
 										<Table.Thead>
 											<Table.Tr>
 												<Table.Th>Filename</Table.Th>

diff --git a/src/components/dataref/item.tsx b/src/components/dataref/item.tsx
@@ -1,7 +1,7 @@
 import { FormEvent, FunctionComponent, MouseEvent, memo, useCallback, useEffect, useState } from "react";
 import { DataRefRecord } from "../../models/dataref";
 import classes from "./datarefs.module.css";
-import { ActionIcon, Group, Menu, Select, Table, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Group, Menu, Select, Table, Text, TextInput, Tooltip } from "@mantine/core";
 import { Seq } from "immutable";
 import { DataFileRecord } from "../../models/datafile";
 import { IconElement } from "../elements/icon";
@@ -109,17 +109,19 @@ const DataRefEntry: FunctionComponent<DataRefEntryProps> = memo(function Wrapped
 				<Group justify="flex-end">
 					<Menu position="bottom-end">
 						<Menu.Target>
-							<ActionIcon variant="subtle" color="gray" >
-								<IconElement path={ mdiDotsVertical } />
-							</ActionIcon>
+							<Tooltip label="Open Buffer Action Menu">
+								<ActionIcon variant="subtle" color="gray" >
+									<IconElement path={ mdiDotsVertical } />
+								</ActionIcon>
+							</Tooltip>
 						</Menu.Target>
 						<Menu.Dropdown>
-							<Menu.Label>Actions</Menu.Label>
+							<Menu.Label>Buffer Actions</Menu.Label>
 							<Menu.Item onClick={ toggleEditing } leftSection={ <IconElement path={ mdiPencil } /> } >
 								Change Source
 							</Menu.Item>
 							<Menu.Item color="red" leftSection={ <IconElement path={ mdiEraser } /> } onClick={ onClearDataRef } disabled={ !dataFile } >
-								Clear Buffer
+								Clear Buffer Content
 							</Menu.Item>
 						</Menu.Dropdown>
 					</Menu>

diff --git a/src/components/dataref/list.tsx b/src/components/dataref/list.tsx
@@ -21,7 +21,7 @@ const DataRefList: FunctionComponent<DataRefListProps> = memo(function WrappedDa
 	options
 }) {
 	return (
-		<Table layout="fixed" className={ classes.dataRefTable } verticalSpacing="sm" maw="100%">
+		<Table layout="fixed" className={ classes.dataRefTable } verticalSpacing="sm" maw="100%" highlightOnHover>
 			<Table.Thead>
 				<Table.Tr>
 					<Table.Th>Buffer</Table.Th>

diff --git a/src/components/editor/edge.tsx b/src/components/editor/edge.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useCallback } from "react";
 import { getBezierPath, EdgeLabelRenderer, BaseEdge } from "reactflow";
 import classes from "./editor.module.css";
-import { ActionIcon, CloseIcon } from "@mantine/core";
+import { ActionIcon, CloseIcon, Tooltip } from "@mantine/core";
 import { EditorEdgeProps } from "./util";
 
 export const RNBOGraphEdgeType = "rnbo-edge";
@@ -40,9 +40,11 @@ const GraphEdge: FunctionComponent<EditorEdgeProps> = ({
 						transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`
 					}}
 				>
-					<ActionIcon onClick={ onTriggerDelete } >
-						<CloseIcon />
-					</ActionIcon>
+					<Tooltip label="Delete Connection">
+						<ActionIcon onClick={ onTriggerDelete } >
+							<CloseIcon />
+						</ActionIcon>
+					</Tooltip>
 				</div>
 			</EdgeLabelRenderer>
 		</>

diff --git a/src/components/editor/patcherNode.tsx b/src/components/editor/patcherNode.tsx
@@ -3,7 +3,7 @@ import { EditorNodeProps, calcPortOffset } from "./util";
 import { GraphPatcherNodeRecord, GraphPortRecord, PortDirection } from "../../models/graph";
 import EditorPort from "./port";
 import classes from "./editor.module.css";
-import { ActionIcon, Paper } from "@mantine/core";
+import { ActionIcon, Paper, Tooltip } from "@mantine/core";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { IconElement } from "../elements/icon";
@@ -28,14 +28,16 @@ const EditorPatcherNode: FunctionComponent<EditorNodeProps> = memo(function Wrap
 					{ (node as GraphPatcherNodeRecord).index }: { (node as GraphPatcherNodeRecord).patcher }
 				</div>
 				<div>
-					<ActionIcon
-						component={ Link }
-						href={{ pathname: "/instances/[index]", query: { ...query, index: (node as GraphPatcherNodeRecord).index } }}
-						size="md"
-						variant="transparent"
-					>
-						<IconElement path={ mdiCogs } />
-					</ActionIcon>
+					<Tooltip label="Open Patcher Instance Control">
+						<ActionIcon
+							component={ Link }
+							href={{ pathname: "/instances/[index]", query: { ...query, index: (node as GraphPatcherNodeRecord).index } }}
+							size="md"
+							variant="transparent"
+						>
+							<IconElement path={ mdiCogs } />
+						</ActionIcon>
+					</Tooltip>
 				</div>
 			</div>
 			<div className={ classes.nodeContent } style={{ height: `${node.contentHeight}px` }} >

diff --git a/src/components/elements/responsiveButton.tsx b/src/components/elements/responsiveButton.tsx
@@ -0,0 +1,37 @@
+import { ActionIcon, Button, ButtonProps, Tooltip } from "@mantine/core";
+import { FC, MouseEvent } from "react";
+import { IconElement } from "./icon";
+
+export type ResponsiveButtonProps = {
+	color?: ButtonProps["color"];
+	variant?: ButtonProps["variant"];
+	label: string;
+	icon: string;
+	onClick: (e: MouseEvent<HTMLButtonElement>) => any;
+	tooltip?: string;
+}
+
+export const ResponsiveButton: FC<ResponsiveButtonProps> = ({
+	color,
+	variant = "default",
+	label,
+	icon,
+	onClick,
+	tooltip
+}) => {
+
+	return (
+		<>
+			<Tooltip label={ tooltip || "" } disabled={ !tooltip?.length }>
+				<Button visibleFrom="sm" variant={ variant } color={ color } leftSection={ <IconElement path={ icon } /> } onClick={ onClick } >
+					{ label }
+				</Button>
+			</Tooltip>
+			<Tooltip label={ tooltip || "" } disabled={ !tooltip?.length }>
+				<ActionIcon hiddenFrom="sm" variant={ variant } color={ color } onClick={ onClick } size="lg">
+					<IconElement path={ icon } />
+				</ActionIcon>
+			</Tooltip>
+		</>
+	);
+};
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -49,12 +49,12 @@ export const Header: FunctionComponent<HeaderProps> = memo(function WrappedHeade
 					<img src={ scheme === "light" ? "/c74-dark.svg" : "/c74-light.svg" } alt="Cycling '74 Logo" />
 				</Group>
 				<Group justify="end" align="center" gap="md">
-					<Tooltip label="Transport Control" >
+					<Tooltip label="Open Transport Control" >
 						<ActionIcon variant="transparent" color={ isRolling ? undefined : "gray" } onClick={ onToggleTransportControl } >
 							<IconElement path={ mdiMetronome } />
 						</ActionIcon>
 					</Tooltip>
-					<Tooltip label="Runner Info" >
+					<Tooltip label="Open Runner Info" >
 						<ActionIcon variant="transparent" color="gray" onClick={ onToggleEndpointInfo } >
 							<IconElement path={ mdiSatelliteUplink } />
 						</ActionIcon>

diff --git a/src/components/instance/index.tsx b/src/components/instance/index.tsx
@@ -5,7 +5,6 @@ import { InstanceTab } from "../../lib/constants";
 import InstanceParameterTab from "./paramTab";
 import InstanceMessagesTab from "./messageTab";
 import InstanceDataRefsTab from "./datarefTab";
-import { useIsMobileDevice } from "../../hooks/useIsMobileDevice";
 import { InstanceStateRecord } from "../../models/instance";
 import { AppSettingRecord } from "../../models/settings";
 import { DataFileRecord } from "../../models/datafile";
@@ -36,7 +35,6 @@ const Instance: FunctionComponent<InstanceProps> = memo(function WrappedInstance
 }) {
 
 	const [activeTab, setActiveTab] = useState<InstanceTab>(InstanceTab.Parameters);
-	const isMobile = useIsMobileDevice();
 
 	useEffect(() => {
 		if (document.activeElement && document.activeElement instanceof HTMLElement) {
@@ -51,7 +49,7 @@ const Instance: FunctionComponent<InstanceProps> = memo(function WrappedInstance
 			onChange={ t => setActiveTab(t as InstanceTab) }
 			keepMounted={ false }
 		>
-			<Tabs.List grow={ isMobile } >
+			<Tabs.List grow>
 				{
 					tabs.map(({ icon, label, value }) => (
 						<Tabs.Tab key={ value } value={ value } leftSection={ <IconElement path={ icon } /> } >

diff --git a/src/components/instance/instance.module.css b/src/components/instance/instance.module.css
@@ -46,7 +46,7 @@
 	display: none;
 }
 
-@media (min-width: $mantine-breakpoint-sm) {
+@media (min-width: $mantine-breakpoint-xs) {
 	.tabLabel {
 		display: block;
 	}

diff --git a/src/components/messages/inport.tsx b/src/components/messages/inport.tsx
@@ -72,12 +72,14 @@ const MessageInportEntry: FunctionComponent<MessageInportEntryProps> = memo(func
 				</Tooltip>
 				<Menu position="bottom-end">
 					<Menu.Target>
-						<ActionIcon variant="subtle" color="gray" size="md">
-							<IconElement path={ mdiDotsVertical } />
-						</ActionIcon>
+						<Tooltip label="Open Inport Action Menu">
+							<ActionIcon variant="subtle" color="gray" size="md">
+								<IconElement path={ mdiDotsVertical } />
+							</ActionIcon>
+						</Tooltip>
 					</Menu.Target>
 					<Menu.Dropdown>
-						<Menu.Label>Actions</Menu.Label>
+						<Menu.Label>Inport Actions</Menu.Label>
 						<Menu.Item leftSection={ <IconElement path={ mdiCodeBraces } /> } onClick={ toggleMetaEditor }>
 							Edit Metadata
 						</Menu.Item>

diff --git a/src/components/messages/outport.tsx b/src/components/messages/outport.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent, memo, useCallback } from "react";
 import classes from "./ports.module.css";
-import { ActionIcon, Group, Menu, TextInput } from "@mantine/core";
+import { ActionIcon, Group, Menu, TextInput, Tooltip } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { MessagePortRecord } from "../../models/messageport";
 import { MetaEditorModal } from "../meta/metaEditorModal";
@@ -61,12 +61,14 @@ const MessageOutportEntry: FunctionComponent<MessageOutportEntryProps> = memo(fu
 				/>
 				<Menu position="bottom-end">
 					<Menu.Target>
-						<ActionIcon variant="subtle" color="gray" size="md">
-							<IconElement path={ mdiDotsVertical } />
-						</ActionIcon>
+						<Tooltip label="Open Outport Action Menu">
+							<ActionIcon variant="subtle" color="gray" size="md">
+								<IconElement path={ mdiDotsVertical } />
+							</ActionIcon>
+						</Tooltip>
 					</Menu.Target>
 					<Menu.Dropdown>
-						<Menu.Label>Actions</Menu.Label>
+						<Menu.Label>Outport Actions</Menu.Label>
 						<Menu.Item leftSection={ <IconElement path={ mdiCodeBraces } /> } onClick={ toggleMetaEditor }>
 							Edit Metadata
 						</Menu.Item>

diff --git a/src/components/meta/metaEditorModal.tsx b/src/components/meta/metaEditorModal.tsx
@@ -223,7 +223,7 @@ export const MetaEditorModal: FC<MetaEditorModalProps> = memo(function WrappedPa
 							<TextInput size="xs" readOnly label={ uiLabels.nameField.label } name={ uiLabels.nameField.name } value={ name } flex={ 1 } />
 							{
 								onRestore ? (
-									<Tooltip label={ uiLabels.restoreTooltip } openDelay={ 500 } >
+									<Tooltip label={ uiLabels.restoreTooltip } >
 										<Button onClick={ onTriggerRestore } size="xs" variant="default">
 											Restore Default
 										</Button>

diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx
@@ -47,16 +47,16 @@ const AppNav: FunctionComponent = memo(function WrappedNav() {
 					/>
 					<NavLink
 						icon={ mdiFileMusic }
-						label="Sample Dependencies"
-						href={{ pathname: "/dependencies", query: restQuery }}
-						isActive={ pathname === "/dependencies" }
+						label="Audio Files"
+						href={{ pathname: "/files", query: restQuery }}
+						isActive={ pathname === "/files" }
 					/>
 				</Stack>
 				<Stack className={ classes.navMenu } >
 					<ExternalNavLink
 						icon={ mdiHelpCircle }
 						label="Help & Documentation"
-						href="https://rnbo.cycling74.com/learn/raspberry-pi-target-overview"
+						href="https://rnbo.cycling74.com/learn/raspberry-pi-web-interface-guide"
 					/>
 					<NavButton onClick={ onToggleSettings } label="Settings" icon={ mdiCog } isActive={ settingsAreShown } />
 				</Stack>

diff --git a/src/components/page/endpoint.tsx b/src/components/page/endpoint.tsx
@@ -131,7 +131,7 @@ const EndpointInfo: FunctionComponent = memo(function WrappedSettings() {
 		>
 			<Stack gap="xl">
 				<form onSubmit={ onSubmit } ref={ formRef } >
-					<Fieldset legend="Connection Endpoint">
+					<Fieldset legend="Runner Connection Endpoint">
 						<Stack gap="md">
 							<TextInput
 								onChange={ onChangeConfig }