WIP: Adjust presentation of the file picker control

laurent22 · Dec 23, 2024 · 00cbe5a · 00cbe5a
1 parent a3b555e
commit 00cbe5a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 15 deletions.
diff --git a/packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.tsx b/packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.tsx
@@ -17,6 +17,7 @@ interface Props {
 	styles: ConfigScreenStyles;
 	settingMetadata: SettingItem;
 	mode: 'read'|'readwrite';
+	description: React.ReactNode|null;
 	updateSettingValue: UpdateSettingValueCallback;
 }
 
@@ -26,9 +27,11 @@ type ExtendedSelf = (typeof window.self) & {
 declare const self: ExtendedSelf;
 
 const pathSelectorStyles = StyleSheet.create({
-	container: {
-		flexDirection: 'row',
-		alignItems: 'center',
+	innerContainer: {
+		paddingTop: 0,
+		paddingBottom: 0,
+		paddingLeft: 0,
+		paddingRight: 0,
 	},
 	mainButton: {
 		flexGrow: 1,
@@ -95,7 +98,9 @@ const FileSystemPathSelector: FunctionComponent<Props> = props => {
 		/>
 	);
 
-	return <View style={pathSelectorStyles.container}>
+	const containerStyles = props.styles.getContainerStyle(!!props.description);
+
+	const control = <View style={[containerStyles.innerContainer, pathSelectorStyles.innerContainer]}>
 		<TouchableRipple
 			onPress={selectDirectoryButtonPress}
 			style={pathSelectorStyles.mainButton}
@@ -112,6 +117,12 @@ const FileSystemPathSelector: FunctionComponent<Props> = props => {
 		</TouchableRipple>
 		{fileSystemPath ? clearButton : null}
 	</View>;
+
+	if (!supported) return null;
+	return <View style={containerStyles.outerContainer}>
+		{control}
+		{props.description}
+	</View>;
 };
 
 export default FileSystemPathSelector;
diff --git a/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx b/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx
@@ -124,16 +124,14 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
 	} else if (md.type === Setting.TYPE_STRING) {
 		if (['sync.2.path', 'plugins.devPluginPaths'].includes(md.key) && (shim.fsDriver().isUsingAndroidSAF() || shim.mobilePlatform() === 'web')) {
 			return (
-				<View style={containerStyles.outerContainer}>
-					<FileSystemPathSelector
-						themeId={props.themeId}
-						mode={md.key === 'sync.2.path' ? 'readwrite' : 'read'}
-						styles={props.styles}
-						settingMetadata={md}
-						updateSettingValue={props.updateSettingValue}
-					/>
-					{descriptionComp}
-				</View>
+				<FileSystemPathSelector
+					themeId={props.themeId}
+					mode={md.key === 'sync.2.path' ? 'readwrite' : 'read'}
+					styles={props.styles}
+					settingMetadata={md}
+					updateSettingValue={props.updateSettingValue}
+					description={descriptionComp}
+				/>
 			);
 		}
 

diff --git a/packages/lib/models/settings/builtInMetadata.ts b/packages/lib/models/settings/builtInMetadata.ts
@@ -931,7 +931,13 @@ const builtInMetadata = (Setting: typeof SettingType) => {
 			advanced: true,
 			appTypes: [AppType.Desktop, AppType.Mobile],
 			// For now, development plugins are only enabled on desktop & web.
-			show: () => shim.isElectron() || shim.mobilePlatform() === 'web',
+			show: (settings) => {
+				if (shim.isElectron()) return true;
+				if (shim.mobilePlatform() !== 'web') return false;
+
+				const pluginSupportEnabled = settings['plugins.pluginSupportEnabled'];
+				return !!pluginSupportEnabled;
+			},
 			label: () => 'Development plugins',
 			description: () => {
 				if (shim.mobilePlatform()) {