self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-29 22:48:10 +02:00
Code Issues Releases Activity

Mobile: Improved and cleaned up config screen

Browse Source
This commit is contained in:
Laurent Cozic
2019-06-08 00:23:17 +01:00
parent 799ad5f1da
commit fa28ae1433
3 changed files with 125 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
ReactNativeClient/lib/components/screens/config.js
View File

@@ -62,7 +62,6 @@ class ConfigScreenComponent extends BaseScreenComponent {
paddingRight: theme.marginRight,
},
settingText: {
fontWeight: 'bold',
color: theme.color,
fontSize: theme.fontSize,
flex: 1,
@@ -73,6 +72,10 @@ class ConfigScreenComponent extends BaseScreenComponent {
fontSize: theme.fontSize,
flex: 1,
},
sliderUnits: {
color: theme.color,
fontSize: theme.fontSize,
},
settingDescriptionText: {
color: theme.color,
fontSize: theme.fontSize,
@@ -114,6 +117,8 @@ class ConfigScreenComponent extends BaseScreenComponent {
styles.linkText.flex = 0;
styles.linkText.fontWeight = 'normal';
styles.headerWrapperStyle = Object.assign({}, styles.settingContainer, theme.headerWrapperStyle)
styles.switchSettingControl = Object.assign({}, styles.settingControl);
delete styles.switchSettingControl.color;
//styles.switchSettingControl.width = '20%';
@@ -123,6 +128,61 @@ class ConfigScreenComponent extends BaseScreenComponent {
return this.styles_[themeId];
}
renderHeader(key, title) {
const theme = themeStyle(this.props.theme);
return (
<View key={key} style={this.styles().headerWrapperStyle}>
<Text style={theme.headerStyle}>{title}</Text>
</View>
);
}
sectionToComponent(key, section, settings) {
const theme = themeStyle(this.props.theme);
const settingComps = [];
for (let i = 0; i < section.metadatas.length; i++) {
const md = section.metadatas[i];
if (section.name === 'sync' && md.key === 'sync.resourceDownloadMode') {
const syncTargetMd = SyncTargetRegistry.idToMetadata(settings['sync.target']);
if (syncTargetMd.supportsConfigCheck) {
const messages = shared.checkSyncConfigMessages(this);
const statusComp = !messages.length ? null : (
<View style={{flex:1, marginTop: 10}}>
<Text style={this.styles().descriptionText}>{messages[0]}</Text>
{messages.length >= 1 ? (<View style={{marginTop:10}}><Text style={this.styles().descriptionText}>{messages[1]}</Text></View>) : null}
</View>);
settingComps.push(
<View key="check_sync_config_button" style={this.styles().settingContainer}>
<View style={{flex:1, flexDirection: 'column'}}>
<View style={{flex:1}}>
<Button title={_('Check synchronisation configuration')} onPress={this.checkSyncConfig_}/>
</View>
{ statusComp }
</View>
</View>);
}
}
const settingComp = this.settingToComponent(md.key, settings[md.key]);
settingComps.push(settingComp);
}
const headerWrapperStyle = this.styles().headerWrapperStyle;
return (
<View key={key}>
{this.renderHeader(section.name, Setting.sectionNameToLabel(section.name))}
<View>
{settingComps}
</View>
</View>
);
}
settingToComponent(key, value) {
const themeId = this.props.theme;
const theme = themeStyle(themeId);
@@ -149,8 +209,8 @@ class ConfigScreenComponent extends BaseScreenComponent {
const containerStyle = !settingDescription ? this.styles().settingContainer : this.styles().settingContainerNoBottomBorder;
return (
<View style={{flexDirection:'column', borderBottomWidth: 1, borderBottomColor: theme.dividerColor}}>
<View key={key} style={containerStyle}>
<View key={key} style={{flexDirection:'column', borderBottomWidth: 1, borderBottomColor: theme.dividerColor}}>
<View style={containerStyle}>
<Text key="label" style={this.styles().settingText}>{md.label()}</Text>
<Dropdown
key="control"
@@ -187,8 +247,8 @@ class ConfigScreenComponent extends BaseScreenComponent {
<View key={key} style={this.styles().settingContainer}>
<Text key="label" style={this.styles().settingText}>{md.label()}</Text>
<View style={{display:'flex', flexDirection: 'column', alignItems: 'center', flex:1}}>
<Slider key="control" style={{width:'100%'}} step={md.step} minimumValue={md.minimum} maximumValue={md.maximum} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
<Text>{unitLabel}</Text>
<Slider key="control" minimumTrackTintColor={theme.color} maximumTrackTintColor={theme.color} style={{width:'100%'}} step={md.step} minimumValue={md.minimum} maximumValue={md.maximum} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
<Text style={this.styles().sliderUnits}>{unitLabel}</Text>
</View>
</View>
);
@@ -196,7 +256,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
return (
<View key={key} style={this.styles().settingContainer}>
<Text key="label" style={this.styles().settingText}>{md.label()}</Text>
<TextInput selectionColor={theme.textSelectionColor} autoCapitalize="none" key="control" style={this.styles().settingControl} value={value} onChangeText={(value) => updateSettingValue(key, value)} secureTextEntry={!!md.secure} />
<TextInput autoCorrect={false} autoCompleteType="off" selectionColor={theme.textSelectionColor} autoCapitalize="none" key="control" style={this.styles().settingControl} value={value} onChangeText={(value) => updateSettingValue(key, value)} secureTextEntry={!!md.secure} />
</View>
);
} else {
@@ -209,32 +269,14 @@ class ConfigScreenComponent extends BaseScreenComponent {
render() {
const settings = this.state.settings;
const settingComps = shared.settingsToComponents(this, 'mobile', settings);
const settingComps = shared.settingsToComponents2(this, 'mobile', settings);
const syncTargetMd = SyncTargetRegistry.idToMetadata(settings['sync.target']);
if (syncTargetMd.supportsConfigCheck) {
const messages = shared.checkSyncConfigMessages(this);
const statusComp = !messages.length ? null : (
<View style={{flex:1, marginTop: 10}}>
<Text style={this.styles().descriptionText}>{messages[0]}</Text>
{messages.length >= 1 ? (<View style={{marginTop:10}}><Text style={this.styles().descriptionText}>{messages[1]}</Text></View>) : null}
</View>);
settingComps.push(
<View key="check_sync_config_button" style={this.styles().settingContainer}>
<View style={{flex:1, flexDirection: 'column'}}>
<View style={{flex:1}}>
<Button title={_('Check synchronisation configuration')} onPress={this.checkSyncConfig_}/>
</View>
{ statusComp }
</View>
</View>);
}
settingComps.push(this.renderHeader('moreInfo', _('More information')));
if (Platform.OS === 'android' && Platform.Version >= 23) {
// Note: `PermissionsAndroid` doesn't work so we have to ask the user to manually
// set these permissions. https://stackoverflow.com/questions/49771084/permission-always-returns-never-ask-again
settingComps.push(
<View key="permission_info" style={this.styles().settingContainer}>
<View key="permission_info_wrapper">