mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
Show a description below the file chooser input
This commit is contained in:
Henry Heino
parent
579fdacacb
commit
197cea7791
@ -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<ConfigScreenProps, Confi
|
||||
);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any -- Old code before rule was applied, Old code before rule was applied
|
||||
private renderToggle(key: string, label: string, value: any, updateSettingValue: Function, descriptionComp: any = null) {
|
||||
const theme = themeStyle(this.props.themeId);
|
||||
|
||||
return (
|
||||
<View key={key}>
|
||||
<View style={this.styles().getContainerStyle(false)}>
|
||||
<Text key="label" style={this.styles().styleSheet.switchSettingText}>
|
||||
{label}
|
||||
</Text>
|
||||
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied */}
|
||||
<Switch key="control" style={this.styles().styleSheet.switchSettingControl} trackColor={{ false: theme.dividerColor }} value={value} onValueChange={(value: any) => void updateSettingValue(key, value)} />
|
||||
</View>
|
||||
{descriptionComp}
|
||||
</View>
|
||||
);
|
||||
private renderToggle(key: string, label: string, value: unknown, updateSettingValue: UpdateSettingValueCallback) {
|
||||
return <SettingsToggle
|
||||
key={key}
|
||||
settingId={key}
|
||||
value={value}
|
||||
label={label}
|
||||
updateSettingValue={updateSettingValue}
|
||||
styles={this.styles()}
|
||||
themeId={this.props.themeId}
|
||||
/>;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
|
||||
|
||||
@ -38,7 +38,7 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
|
||||
const styleSheet = props.styles.styleSheet;
|
||||
|
||||
const descriptionComp = !settingDescription ? null : <Text style={styleSheet.settingDescriptionText}>{settingDescription}</Text>;
|
||||
const containerStyle = props.styles.getContainerStyle(!!settingDescription);
|
||||
const containerStyles = props.styles.getContainerStyle(!!settingDescription);
|
||||
|
||||
const labelId = useId();
|
||||
|
||||
@ -49,8 +49,8 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
|
||||
const label = md.label();
|
||||
|
||||
return (
|
||||
<View key={props.settingId} style={{ flexDirection: 'column', borderBottomWidth: 1, borderBottomColor: theme.dividerColor }}>
|
||||
<View style={containerStyle}>
|
||||
<View key={props.settingId} style={containerStyles.outerContainer}>
|
||||
<View style={containerStyles.innerContainer}>
|
||||
<Text key="label" style={styleSheet.settingText}>
|
||||
{label}
|
||||
</Text>
|
||||
@ -124,19 +124,22 @@ 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 (
|
||||
<FileSystemPathSelector
|
||||
themeId={props.themeId}
|
||||
mode={md.key === 'sync.2.path' ? 'readwrite' : 'read'}
|
||||
styles={props.styles}
|
||||
settingMetadata={md}
|
||||
updateSettingValue={props.updateSettingValue}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View key={props.settingId} style={{ flexDirection: 'column', borderBottomWidth: 1, borderBottomColor: theme.dividerColor }}>
|
||||
<View key={props.settingId} style={containerStyle}>
|
||||
<View key={props.settingId} style={containerStyles.outerContainer}>
|
||||
<View key={props.settingId} style={containerStyles.innerContainer}>
|
||||
<Text key="label" style={styleSheet.settingText} nativeID={labelId}>
|
||||
{md.label()}
|
||||
</Text>
|
||||
|
||||
@ -24,9 +24,11 @@ const SettingsToggle: FunctionComponent<Props> = props => {
|
||||
const theme = themeStyle(props.themeId);
|
||||
const styleSheet = props.styles.styleSheet;
|
||||
|
||||
const containerStyles = props.styles.getContainerStyle(!!props.description);
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={props.styles.getContainerStyle(false)}>
|
||||
<View style={containerStyles.outerContainer}>
|
||||
<View style={containerStyles.innerContainer}>
|
||||
<Text key="label" style={styleSheet.switchSettingText}>
|
||||
{props.label}
|
||||
</Text>
|
||||
|
||||
@ -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 };
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -91,7 +91,7 @@ const PluginUploadButton: React.FC<Props> = props => {
|
||||
}, [props.pluginSettings, props.updatePluginStates]);
|
||||
|
||||
return (
|
||||
<View style={props.styles.getContainerStyle(false)}>
|
||||
<View style={props.styles.getContainerStyle(false).innerContainer}>
|
||||
<TextButton
|
||||
type={ButtonType.Primary}
|
||||
onPress={onInstallFromFile}
|
||||
|
||||
@ -8,7 +8,7 @@ export interface CustomSettingSection {
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
|
||||
export type UpdateSettingValueCallback = (key: string, value: any)=> Promise<void>;
|
||||
export type UpdateSettingValueCallback = (key: string, value: any)=> void|Promise<void>;
|
||||
|
||||
export interface PluginStatusRecord {
|
||||
[pluginId: string]: boolean;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user