Merge branch 'feature/settings-clarifictaions' into develop

Cycling74 · Jun 25, 2024 · 18f7c80 · 18f7c80
2 parents 3f35ed2 + 56a2c0b
commit 18f7c80
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 55 deletions.
diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Button, Group, Modal, Stack, Tabs } from "@mantine/core";
+import { Anchor, Button, Group, Modal, Stack, Tabs, Text } from "@mantine/core";
 import SettingsList from "./list";
 import { FunctionComponent, memo, useCallback, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/useAppDispatch";
@@ -113,7 +113,8 @@ const SettingsTabPanel: FunctionComponent<SettingsTabPanelProps> = memo(function
 								actions.map((info, i) => (
 									<Button
 										key={ i }
-										variant="default"
+										variant="outline"
+										c="blue.6"
 										onClick={ () => dispatch(info.action()) }
 										leftSection={ info.icon ? <IconElement path={ info.icon } /> : null }
 									>
@@ -129,30 +130,6 @@ const SettingsTabPanel: FunctionComponent<SettingsTabPanelProps> = memo(function
 	);
 });
 
-const tabConfigByTab: Record<SettingsTab, TabConfig> = {
-	[SettingsTab.UI]: {
-		title: "UI",
-		description: "UI settings are device scoped, saved to the local storage and restored on page load."
-	},
-	[SettingsTab.Control]: {
-		title: "Control"
-	},
-	[SettingsTab.Instance]: {
-		title: "Instance"
-	},
-	[SettingsTab.Audio]: {
-		title: "Audio",
-		actions: [
-			{
-				action: updateRunnerAudio,
-				description: "Restarts the Jack Server with the updated configuration",
-				icon: mdiRestart,
-				label: "Apply Configuration"
-			}
-		]
-	}
-};
-
 const Settings: FunctionComponent = memo(function WrappedSettings() {
 
 	const [activeTab, setActiveTab] = useState<SettingsTab>(SettingsTab.UI);
@@ -181,6 +158,30 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 	const onOpenAbout = useCallback(() => setShowAbout(true), [setShowAbout]);
 	const onCloseAbout = useCallback(() => setShowAbout(false), [setShowAbout]);
 
+	const tabConfigByTab: Record<SettingsTab, TabConfig> = {
+		[SettingsTab.UI]: {
+			title: "UI",
+			description: "UI settings are device scoped, saved to the local storage and restored on page load."
+		},
+		[SettingsTab.Control]: {
+			title: "Control"
+		},
+		[SettingsTab.Instance]: {
+			title: "Patcher Instance"
+		},
+		[SettingsTab.Audio]: {
+			title: "Audio",
+			actions: [
+				{
+					action: updateRunnerAudio,
+					description: "Restarts the Jack Server with the updated configuration",
+					icon: mdiRestart,
+					label: "Apply Configuration"
+				}
+			]
+		}
+	};
+
 	return (
 		<Modal
 			onClose={ onCloseSettingsModal }
@@ -206,7 +207,11 @@ const Settings: FunctionComponent = memo(function WrappedSettings() {
 								<Tabs.List grow>
 									{
 										Object.values(SettingsTab).map(id => (
-											<Tabs.Tab key={ id } value={ id } >{ tabConfigByTab[id].title }</Tabs.Tab>
+											<Tabs.Tab key={ id } value={ id } >
+												<Text fz={{ base: "sm", sm: "md" }} lh={{ base: "sm", sm: "md" }}>
+													{ tabConfigByTab[id].title }
+												</Text>
+											</Tabs.Tab>
 										))
 									}
 								</Tabs.List>

diff --git a/src/components/settings/item.tsx b/src/components/settings/item.tsx
@@ -150,7 +150,7 @@ export const SettingsItem: FunctionComponent<BaseSettingsItemProps> = memo(funct
 	}
 
 	return (
-		<Group className={ classes.item } >
+		<div className={ classes.item } >
 			<div className={ classes.itemTitleWrap } >
 				<label htmlFor={ props.name } className={ classes.itemTitle } >{ props.title }</label>
 				{
@@ -160,7 +160,7 @@ export const SettingsItem: FunctionComponent<BaseSettingsItemProps> = memo(funct
 			<div className={ classes.itemInputWrap }>
 				{ el }
 			</div>
-		</Group>
+		</div>
 	);
 });
 

diff --git a/src/components/settings/settings.module.css b/src/components/settings/settings.module.css
@@ -7,27 +7,41 @@
 
 
 .item {
+
+	display: flex;
+	flex-direction: column;
+
 	padding: 0 0 var(--mantine-spacing-xs) 0;
 	border-bottom: 1px solid var(--mantine-color-default-border);
 	gap: var(--mantine-spacing-xs);
 
 	&:last-child {
 		border-bottom: none;
 	}
+
+	@media (min-width: $mantine-breakpoint-sm) {
+		flex-direction: row;
+	}
 }
 
 .itemInputWrap {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	min-width: 100px;
-	max-width: 250px;
-	height: 100%;
-	padding: var(--mantine-spacing-xs) 0;
+	display: block;
+	width: 100%;
+
 
 	> * {
 		max-width: 100%;
 	}
+
+	@media (min-width: $mantine-breakpoint-sm) {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		min-width: 100px;
+		max-width: 250px;
+		height: 100%;
+		padding: var(--mantine-spacing-xs) 0;
+	}
 }
 
 .itemTitleWrap {

diff --git a/src/models/config.ts b/src/models/config.ts
@@ -53,52 +53,52 @@ const instanceConfigDetails: Partial<Record<ConfigKey, Omit<ConfigRecordProps, "
 	[ConfigKey.AutoStartLast]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoStartLast}`,
 		tab: SettingsTab.Instance,
-		title: "Startup: Auto Start Last Set"
+		title: "Auto Start Last Set"
 	},
 	[ConfigKey.AutoConnectAudio]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectAudio}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect Audio"
+		title: "Auto Connect Audio"
 	},
 	[ConfigKey.AutoConnectAudioIndexed]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectAudioIndexed}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect Audio by i/o Index number"
+		title: "Auto Connect Audio by i/o Index number"
 	},
 	[ConfigKey.AutoConnectMIDI]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectMIDI}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect MIDI"
+		title: "Auto Connect MIDI"
 	},
 	[ConfigKey.AutoConnectMIDIHardware]: {
 		path: `/rnbo/inst/config/${ConfigKey.AutoConnectMIDIHardware}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Auto Connect MIDI Hardware"
+		title: "Auto Connect MIDI Hardware"
 	},
 	[ConfigKey.AudioFadeIn]: {
 		min: 0,
 		max: 2000,
 		path: `/rnbo/inst/config/${ConfigKey.AudioFadeIn}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Fade In Milliseconds"
+		title: "Fade In Milliseconds"
 	},
 	[ConfigKey.AudioFadeOut]: {
 		min: 0,
 		max: 2000,
 		path: `/rnbo/inst/config/${ConfigKey.AudioFadeOut}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Fade Out Milliseconds"
+		title: "Fade Out Milliseconds"
 	},
 	[ConfigKey.PortToOsc]: {
 		path: `/rnbo/inst/config/${ConfigKey.PortToOsc}`,
 		tab: SettingsTab.Instance,
-		title: "Instance: Port To OSC"
+		title: "Port To OSC"
 	},
 	[ConfigKey.PresetMIDIProgramChangeChannel]: {
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/inst/config/${ConfigKey.AudioFadeOut}`,
 		tab: SettingsTab.Instance,
-		title: "Preset: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Load Instance Preset"
 	}
 };
 
@@ -107,35 +107,35 @@ const jackConfigDetails: Partial<Record<ConfigKey, Omit<ConfigRecordProps, "id"
 		options: [2],
 		path: `/rnbo/jack/config/${ConfigKey.NumPeriods}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Num Periods"
+		title: "Num Periods"
 	},
 	[ConfigKey.PeriodFrames]: {
 		options: [512],
 		path: `/rnbo/jack/config/${ConfigKey.PeriodFrames}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Period Frames"
+		title: "Period Frames"
 	},
 	[ConfigKey.SampleRate]: {
 		options: DEFAULT_SAMPLE_RATES,
 		path: `/rnbo/jack/config/${ConfigKey.SampleRate}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Sample Rate"
+		title: "Sample Rate"
 	},
 	[ConfigKey.Card]: {
 		path: `/rnbo/jack/config/${ConfigKey.Card}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Interface"
+		title: "Interface"
 	},
 	[ConfigKey.MIDISystem]: {
 		options: ["seq", "raw"],
 		path: `/rnbo/jack/config/${ConfigKey.MIDISystem}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: MIDI System"
+		title: "MIDI System"
 	},
 	[ConfigKey.JackExtraArgs]: {
 		path: `/rnbo/jack/config/${ConfigKey.JackExtraArgs}`,
 		tab: SettingsTab.Audio,
-		title: "Audio: Extra Args"
+		title: "Extra Args"
 	}
 };
 
@@ -144,24 +144,24 @@ const controlConfigDetails: Partial<Record<ConfigKey, Omit<ConfigRecordProps, "i
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/config/${ConfigKey.SetMIDIProgramChangeChannel}`,
 		tab: SettingsTab.Control,
-		title: "Set Select: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Select Set"
 	},
 	[ConfigKey.SetPresetMIDIProgramChangeChannel]: {
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/config/${ConfigKey.SetPresetMIDIProgramChangeChannel}`,
 		tab: SettingsTab.Control,
-		title: "Set Preset Select: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Select Set Preset"
 	},
 	[ConfigKey.PatcherMIDIProgramChangeChannel]: {
 		options: DEFAULT_MIDI_RANGE,
 		path: `/rnbo/config/${ConfigKey.PatcherMIDIProgramChangeChannel}`,
 		tab: SettingsTab.Control,
-		title: "Patcher Select: MIDI Program Change Channel"
+		title: "MIDI Program Change Channel: Select Patcher"
 	},
 	[ConfigKey.ControlAutoConnectMIDI]: {
 		path: `/rnbo/config/${ConfigKey.ControlAutoConnectMIDI}`,
 		tab: SettingsTab.Control,
-		title: "RNBO Control: Auto Connect MIDI"
+		title: "Auto Connect MIDI"
 	}
 };