From 197cea77914c09140c060c29cbe76032b54915f0 Mon Sep 17 00:00:00 2001 From: Henry Heino Date: Mon, 23 Dec 2024 13:07:43 -0800 Subject: [PATCH] Show a description below the file chooser input --- .../screens/ConfigScreen/ConfigScreen.tsx | 31 ++++++++----------- .../screens/ConfigScreen/SettingComponent.tsx | 27 +++++++++------- .../screens/ConfigScreen/SettingsToggle.tsx | 6 ++-- .../ConfigScreen/configScreenStyles.ts | 22 +++++++++++-- .../plugins/PluginUploadButton.tsx | 2 +- .../components/screens/ConfigScreen/types.ts | 2 +- 6 files changed, 54 insertions(+), 36 deletions(-) diff --git a/packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx b/packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx index 4539d43cca3..1c849479033 100644 --- a/packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx +++ b/packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Platform, Linking, View, Switch, ScrollView, Text, TouchableOpacity, Alert, PermissionsAndroid, Dimensions, AccessibilityInfo } from 'react-native'; +import { Platform, Linking, View, ScrollView, Text, TouchableOpacity, Alert, PermissionsAndroid, Dimensions, AccessibilityInfo } from 'react-native'; import Setting, { AppType, SettingMetadataSection } from '@joplin/lib/models/Setting'; import NavService from '@joplin/lib/services/NavService'; import SearchEngine from '@joplin/lib/services/search/SearchEngine'; @@ -12,7 +12,6 @@ import { connect } from 'react-redux'; import ScreenHeader from '../../ScreenHeader'; import { _ } from '@joplin/lib/locale'; import BaseScreenComponent from '../../base-screen'; -import { themeStyle } from '../../global-style'; import * as shared from '@joplin/lib/components/shared/config/config-shared'; import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry'; import biometricAuthenticate from '../../biometrics/biometricAuthenticate'; @@ -36,6 +35,8 @@ import EnablePluginSupportPage from './plugins/EnablePluginSupportPage'; import getVersionInfoText from '../../../utils/getVersionInfoText'; import JoplinCloudConfig, { emailToNoteDescription, emailToNoteLabel } from './JoplinCloudConfig'; import shim from '@joplin/lib/shim'; +import SettingsToggle from './SettingsToggle'; +import { UpdateSettingValueCallback } from './types'; interface ConfigScreenState { // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied @@ -673,22 +674,16 @@ class ConfigScreenComponent extends BaseScreenComponent - - - {label} - - {/* eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied */} - void updateSettingValue(key, value)} /> - - {descriptionComp} - - ); + private renderToggle(key: string, label: string, value: unknown, updateSettingValue: UpdateSettingValueCallback) { + return ; } // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied diff --git a/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx b/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx index fc0aa47873c..33eec599b49 100644 --- a/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx +++ b/packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx @@ -38,7 +38,7 @@ const SettingComponent: React.FunctionComponent = props => { const styleSheet = props.styles.styleSheet; const descriptionComp = !settingDescription ? null : {settingDescription}; - const containerStyle = props.styles.getContainerStyle(!!settingDescription); + const containerStyles = props.styles.getContainerStyle(!!settingDescription); const labelId = useId(); @@ -49,8 +49,8 @@ const SettingComponent: React.FunctionComponent = props => { const label = md.label(); return ( - - + + {label} @@ -124,19 +124,22 @@ const SettingComponent: React.FunctionComponent = props => { } else if (md.type === Setting.TYPE_STRING) { if (['sync.2.path', 'plugins.devPluginPaths'].includes(md.key) && (shim.fsDriver().isUsingAndroidSAF() || shim.mobilePlatform() === 'web')) { return ( - + + + {descriptionComp} + ); } return ( - - + + {md.label()} diff --git a/packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.tsx b/packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.tsx index a9c4f38cf2b..ebace0634b5 100644 --- a/packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.tsx +++ b/packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.tsx @@ -24,9 +24,11 @@ const SettingsToggle: FunctionComponent = props => { const theme = themeStyle(props.themeId); const styleSheet = props.styles.styleSheet; + const containerStyles = props.styles.getContainerStyle(!!props.description); + return ( - - + + {props.label} diff --git a/packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts b/packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts index 2ddff9b9b9f..b243c7c091d 100644 --- a/packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts +++ b/packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts @@ -6,8 +6,11 @@ type SidebarButtonStyle = ViewStyle & { height: number }; export interface ConfigScreenStyleSheet { body: ViewStyle; + settingOuterContainer: ViewStyle; + settingOuterContainerNoBorder: ViewStyle; settingContainer: ViewStyle; settingContainerNoBottomBorder: ViewStyle; + headerWrapperStyle: ViewStyle; headerTextStyle: TextStyle; @@ -39,12 +42,17 @@ export interface ConfigScreenStyleSheet { settingControl: TextStyle; } +interface ContainerStyles { + outerContainer: ViewStyle; + innerContainer: ViewStyle; +} + export interface ConfigScreenStyles { styleSheet: ConfigScreenStyleSheet; selectedSectionButtonColor: string; keyboardAppearance: 'default'|'light'|'dark'; - getContainerStyle(hasDescription: boolean): ViewStyle; + getContainerStyle(hasDescription: boolean): ContainerStyles; } const configScreenStyles = (themeId: number): ConfigScreenStyles => { @@ -107,6 +115,14 @@ const configScreenStyles = (themeId: number): ConfigScreenStyles => { justifyContent: 'flex-start', flexDirection: 'column', }, + settingOuterContainer: { + flexDirection: 'column', + borderBottomWidth: 1, + borderBottomColor: theme.dividerColor, + }, + settingOuterContainerNoBorder: { + flexDirection: 'column', + }, settingContainer: settingContainerStyle, settingContainerNoBottomBorder: { ...settingContainerStyle, @@ -229,7 +245,9 @@ const configScreenStyles = (themeId: number): ConfigScreenStyles => { selectedSectionButtonColor: theme.selectedColor, keyboardAppearance: theme.keyboardAppearance, getContainerStyle: (hasDescription) => { - return !hasDescription ? styleSheet.settingContainer : styleSheet.settingContainerNoBottomBorder; + const outerContainer = hasDescription ? styleSheet.settingOuterContainer : styleSheet.settingOuterContainerNoBorder; + const innerContainer = hasDescription ? styleSheet.settingContainerNoBottomBorder : styleSheet.settingContainer; + return { outerContainer, innerContainer }; }, }; }; diff --git a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginUploadButton.tsx b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginUploadButton.tsx index 1b46bf0fec7..0d59ac68b99 100644 --- a/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginUploadButton.tsx +++ b/packages/app-mobile/components/screens/ConfigScreen/plugins/PluginUploadButton.tsx @@ -91,7 +91,7 @@ const PluginUploadButton: React.FC = props => { }, [props.pluginSettings, props.updatePluginStates]); return ( - + Promise; +export type UpdateSettingValueCallback = (key: string, value: any)=> void|Promise; export interface PluginStatusRecord { [pluginId: string]: boolean;