self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-13 00:10:37 +02:00
Code Issues Releases Activity

Mobile: Resolves #9294: Implement settings search (#9320)

Browse Source
This commit is contained in:
Henry Heino
2023-11-16 04:17:03 -08:00
committed by GitHub
parent f9a1ab4d40
commit 18e86a7ba3
5 changed files with 202 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app-mobile/components/ScreenHeader.tsx
View File

@ -70,6 +70,7 @@ interface ScreenHeaderProps {
onRedoButtonPress: OnPressCallback;
onSaveButtonPress: OnPressCallback;
sortButton_press?: OnPressCallback;
onSearchButtonPress?: OnPressCallback;
showSideMenuButton?: boolean;
showSearchButton?: boolean;
@ -242,8 +243,12 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
}
private searchButton_press() {
if (this.props.onSearchButtonPress) {
this.props.onSearchButtonPress();
} else {
void NavService.go('Search');
}
}
private async duplicateButton_press() {
const noteIds = this.props.selectedNoteIds;

277
packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { Platform, Linking, View, Switch, ScrollView, Text, TouchableOpacity, Alert, PermissionsAndroid, Dimensions, AccessibilityInfo } from 'react-native';
import Setting, { AppType } from '@joplin/lib/models/Setting';
import Setting, { AppType, SettingMetadataSection } from '@joplin/lib/models/Setting';
import NavService from '@joplin/lib/services/NavService';
import SearchEngine from '@joplin/lib/services/searchengine/SearchEngine';
import checkPermissions from '../../../utils/checkPermissions';
@ -18,21 +18,25 @@ import * as shared from '@joplin/lib/components/shared/config/config-shared';
import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
import biometricAuthenticate from '../../biometrics/biometricAuthenticate';
import configScreenStyles, { ConfigScreenStyles } from './configScreenStyles';
import NoteExportButton from './NoteExportSection/NoteExportButton';
import NoteExportButton, { exportButtonDescription, exportButtonTitle } from './NoteExportSection/NoteExportButton';
import SettingsButton from './SettingsButton';
import Clipboard from '@react-native-community/clipboard';
import { ReactNode } from 'react';
import { ReactElement, ReactNode } from 'react';
import { Dispatch } from 'redux';
import SectionHeader from './SectionHeader';
import ExportProfileButton from './NoteExportSection/ExportProfileButton';
import ExportProfileButton, { exportProfileButtonTitle } from './NoteExportSection/ExportProfileButton';
import SettingComponent from './SettingComponent';
import ExportDebugReportButton from './NoteExportSection/ExportDebugReportButton';
import ExportDebugReportButton, { exportDebugReportTitle } from './NoteExportSection/ExportDebugReportButton';
import SectionSelector from './SectionSelector';
import { TextInput } from 'react-native-paper';
interface ConfigScreenState {
settings: any;
changedSettingKeys: string[];
searchQuery: string;
searching: boolean;
fixingSearchIndex: boolean;
checkSyncConfigResult: { ok: boolean; errorMessage: string }|'checking'|null;
showAdvancedSettings: boolean;
@ -66,6 +70,8 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
selectedSectionName: null,
fixingSearchIndex: false,
sidebarWidth: 100,
searchQuery: '',
searching: false,
};
this.scrollViewRef_ = React.createRef<ScrollView>();
@ -128,6 +134,21 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
void NavService.go('Log');
};
private setShowSearch_(searching: boolean) {
if (searching !== this.state.searching) {
this.setState({ searching });
AccessibilityInfo.announceForAccessibility(searching ? _('Search shown') : _('Search hidden'));
}
}
private onSearchButtonPress_ = () => {
this.setShowSearch_(!this.state.searching);
};
private onSearchUpdate_ = (newQuery: string) => {
this.setState({ searchQuery: newQuery });
};
private updateSidebarWidth = () => {
const windowWidth = Dimensions.get('window').width;
@ -150,10 +171,13 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
return this.state.sidebarWidth > windowWidth / 2;
}
private switchSectionPress_ = (section: string) => {
private onJumpToSection_ = (section: string) => {
const label = Setting.sectionNameToLabel(section);
AccessibilityInfo.announceForAccessibility(_('Opening section %s', label));
this.setState({ selectedSectionName: section });
this.setState({
selectedSectionName: section,
searching: false,
});
};
private showSectionNavigation_ = () => {
@ -245,6 +269,12 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
await BackButtonService.back();
};
// Cancel search on back
if (this.state.searching) {
this.setShowSearch_(false);
return true;
}
// Show navigation when pressing "back" (unless always visible).
if (this.state.selectedSectionName && this.navigationFillsScreen()) {
this.showSectionNavigation_();
@ -298,10 +328,73 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
);
}
public sectionToComponent(key: string, section: any, settings: any, isSelected: boolean) {
const settingComps = [];
public sectionToComponent(key: string, section: SettingMetadataSection, settings: any, isSelected: boolean) {
const settingComps: ReactElement[] = [];
const headerTitle = Setting.sectionNameToLabel(section.name);
const matchesSearchQuery = (relatedText: string|string[]) => {
let searchThrough;
if (Array.isArray(relatedText)) {
searchThrough = relatedText.join('\n');
} else {
searchThrough = relatedText;
}
searchThrough = searchThrough.toLocaleLowerCase();
const searchQuery = this.state.searchQuery.toLocaleLowerCase().trim();
const hasSearchMatches =
headerTitle.toLocaleLowerCase() === searchQuery
|| searchThrough.includes(searchQuery);
// Don't show results when the search input is empty
return this.state.searchQuery.length > 0 && hasSearchMatches;
};
const addSettingComponent = (component: ReactElement, relatedText: string|string[]) => {
const hiddenBySearch = this.state.searching && !matchesSearchQuery(relatedText);
if (component && !hiddenBySearch) {
settingComps.push(component);
}
};
const addSettingButton = (key: string, title: string, clickHandler: ()=> void, options: any = null) => {
const relatedText = [title];
if (typeof options === 'object' && options?.description) {
relatedText.push(options.description);
}
addSettingComponent(this.renderButton(key, title, clickHandler, options), relatedText);
};
const styleSheet = this.styles().styleSheet;
const addSettingLink = (key: string, title: string, target: string) => {
const component = (
<View key={key} style={styleSheet.settingContainer}>
<TouchableOpacity
onPress={() => {
void Linking.openURL(target);
}}
accessibilityRole='link'
>
<Text key="label" style={styleSheet.linkText}>
{title}
</Text>
</TouchableOpacity>
</View>
);
addSettingComponent(component, title);
};
const addSettingText = (key: string, text: string) => {
addSettingComponent(
<View key={key} style={styleSheet.settingContainer}>
<Text style={styleSheet.settingText}>{text}</Text>
</View>,
text,
);
};
for (let i = 0; i < section.metadatas.length; i++) {
const md = section.metadatas[i];
@ -322,24 +415,29 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
</View>
);
settingComps.push(this.renderButton('check_sync_config_button', _('Check synchronisation configuration'), this.checkSyncConfig_, { statusComp: statusComp }));
addSettingButton('check_sync_config_button', _('Check synchronisation configuration'), this.checkSyncConfig_, { statusComp: statusComp });
}
}
const settingComp = this.settingToComponent(md.key, settings[md.key]);
settingComps.push(settingComp);
const relatedText = [md.label?.() ?? '', md.description?.() ?? ''];
addSettingComponent(
settingComp,
relatedText,
);
}
if (section.name === 'sync') {
settingComps.push(this.renderButton('e2ee_config_button', _('Encryption Config'), this.e2eeConfig_));
addSettingButton('e2ee_config_button', _('Encryption Config'), this.e2eeConfig_);
}
if (section.name === 'joplinCloud') {
const label = _('Email to note');
const description = _('Any email sent to this address will be converted into a note and added to your collection. The note will be saved into the Inbox notebook');
settingComps.push(
addSettingComponent(
<View key="joplinCloud">
<View style={this.styles().styleSheet.settingContainerNoBottomBorder}>
<Text style={this.styles().styleSheet.settingText}>{_('Email to note')}</Text>
<Text style={this.styles().styleSheet.settingText}>{label}</Text>
<Text style={{ fontWeight: 'bold' }}>{this.props.settings['sync.10.inboxEmail']}</Text>
</View>
{
@ -351,20 +449,30 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
)
}
</View>,
[label, description],
);
}
if (section.name === 'tools') {
settingComps.push(this.renderButton('profiles_buttons', _('Manage profiles'), this.manageProfilesButtonPress_));
settingComps.push(this.renderButton('status_button', _('Sync Status'), this.syncStatusButtonPress_));
settingComps.push(this.renderButton('log_button', _('Log'), this.logButtonPress_));
settingComps.push(this.renderButton('fix_search_engine_index', this.state.fixingSearchIndex ? _('Fixing search index...') : _('Fix search index'), this.fixSearchEngineIndexButtonPress_, { disabled: this.state.fixingSearchIndex, description: _('Use this to rebuild the search index if there is a problem with search. It may take a long time depending on the number of notes.') }));
addSettingButton('profiles_buttons', _('Manage profiles'), this.manageProfilesButtonPress_);
addSettingButton('status_button', _('Sync Status'), this.syncStatusButtonPress_);
addSettingButton('log_button', _('Log'), this.logButtonPress_);
addSettingButton('fix_search_engine_index', this.state.fixingSearchIndex ? _('Fixing search index...') : _('Fix search index'), this.fixSearchEngineIndexButtonPress_, { disabled: this.state.fixingSearchIndex, description: _('Use this to rebuild the search index if there is a problem with search. It may take a long time depending on the number of notes.') });
}
if (section.name === 'export') {
settingComps.push(<NoteExportButton key='export_as_jex_button' styles={this.styles()} />);
settingComps.push(<ExportDebugReportButton key='export_report_button' styles={this.styles()}/>);
settingComps.push(<ExportProfileButton key='export_data' styles={this.styles()}/>);
addSettingComponent(
<NoteExportButton key='export_as_jex_button' styles={this.styles()} />,
[exportButtonTitle(), exportButtonDescription()],
);
addSettingComponent(
<ExportDebugReportButton key='export_report_button' styles={this.styles()}/>,
exportDebugReportTitle(),
);
addSettingComponent(
<ExportProfileButton key='export_data' styles={this.styles()}/>,
exportProfileButtonTitle(),
);
}
if (section.name === 'moreInfo') {
@ -372,7 +480,7 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
// 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(
addSettingComponent(
<View key="permission_info" style={styleSheet.settingContainer}>
<View key="permission_info_wrapper">
<Text key="perm1a" style={styleSheet.settingText}>
@ -389,95 +497,60 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
</Text>
</View>
</View>,
'',
);
}
settingComps.push(
<View key="donate_link" style={styleSheet.settingContainer}>
<TouchableOpacity
onPress={() => {
void Linking.openURL('https://joplinapp.org/donate/');
}}
>
<Text key="label" style={styleSheet.linkText}>
{_('Make a donation')}
</Text>
</TouchableOpacity>
</View>,
);
addSettingLink('donate_link', _('Make a donation'), 'https://joplinapp.org/donate/');
addSettingLink('website_link', _('Joplin website'), 'https://joplinapp.org/');
addSettingLink('privacy_link', _('Privacy Policy'), 'https://joplinapp.org/privacy/');
settingComps.push(
<View key="website_link" style={styleSheet.settingContainer}>
<TouchableOpacity
onPress={() => {
void Linking.openURL('https://joplinapp.org/');
}}
>
<Text key="label" style={styleSheet.linkText}>
{_('Joplin website')}
</Text>
</TouchableOpacity>
</View>,
);
settingComps.push(
<View key="privacy_link" style={styleSheet.settingContainer}>
<TouchableOpacity
onPress={() => {
void Linking.openURL('https://joplinapp.org/privacy/');
}}
>
<Text key="label" style={styleSheet.linkText}>
{_('Privacy Policy')}
</Text>
</TouchableOpacity>
</View>,
);
settingComps.push(
<View key="version_info_app" style={styleSheet.settingContainer}>
<Text style={styleSheet.settingText}>{`Joplin ${VersionInfo.appVersion}`}</Text>
</View>,
);
settingComps.push(
<View key="version_info_db" style={styleSheet.settingContainer}>
<Text style={styleSheet.settingText}>{_('Database v%s', reg.db().version())}</Text>
</View>,
);
settingComps.push(
<View key="version_info_fts" style={styleSheet.settingContainer}>
<Text style={styleSheet.settingText}>{_('FTS enabled: %d', this.props.settings['db.ftsEnabled'])}</Text>
</View>,
);
settingComps.push(
<View key="version_info_hermes" style={styleSheet.settingContainer}>
<Text style={styleSheet.settingText}>{_('Hermes enabled: %d', (global as any).HermesInternal ? 1 : 0)}</Text>
</View>,
);
addSettingText('version_info_app', `Joplin ${VersionInfo.appVersion}`);
addSettingText('version_info_db', _('Database v%s', reg.db().version()));
addSettingText('version_info_fts', _('FTS enabled: %d', this.props.settings['db.ftsEnabled']));
addSettingText('version_info_hermes', _('Hermes enabled: %d', (global as any).HermesInternal ? 1 : 0));
const featureFlagKeys = Setting.featureFlagKeys(AppType.Mobile);
if (featureFlagKeys.length) {
const headerKey = 'featureFlags';
settingComps.push(<SectionHeader
const featureFlagsTitle = _('Feature flags');
addSettingComponent(
<SectionHeader
key={headerKey}
styles={this.styles().styleSheet}
title={_('Feature flags')}
title={featureFlagsTitle}
onLayout={event => this.onHeaderLayout(headerKey, event)}
/>);
/>,
_('Feature flags'),
);
settingComps.push(<View key="featureFlagsContainer">{this.renderFeatureFlags(settings, featureFlagKeys)}</View>);
addSettingComponent(
<View key="featureFlagsContainer">{this.renderFeatureFlags(settings, featureFlagKeys)}</View>,
featureFlagsTitle,
);
}
}
if (!settingComps.length) return null;
if (!isSelected) return null;
if (!isSelected && !this.state.searching) return null;
const headerComponent = (
<TouchableOpacity onPress={() => {
this.onJumpToSection_(section.name);
}}>
<SectionHeader
styles={styleSheet}
title={headerTitle}
/>
</TouchableOpacity>
);
return (
<View key={key} onLayout={(event: any) => this.onSectionLayout(key, event)}>
<View>{settingComps}</View>
<View>
{this.state.searching ? headerComponent : null}
{settingComps}
</View>
</View>
);
}
@ -563,18 +636,22 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
currentSectionName = 'general';
}
if (this.state.searching) {
currentSectionName = null;
}
const sectionSelector = (
<SectionSelector
selectedSectionName={currentSectionName}
styles={this.styles()}
settings={settings}
openSection={this.switchSectionPress_}
openSection={this.onJumpToSection_}
width={this.state.sidebarWidth}
/>
);
let currentSection: ReactNode;
if (currentSectionName) {
if (currentSectionName || this.state.searching) {
const settingComps = shared.settingsToComponents2(
this, AppType.Mobile, settings, currentSectionName,
@ -582,11 +659,20 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
// of React in lib/ and app-mobile/
) as ReactNode[];
const searchInput = <TextInput
value={this.state.searchQuery}
label={_('Search')}
placeholder={_('Search...')}
onChangeText={this.onSearchUpdate_}
autoFocus={true}
/>;
currentSection = (
<ScrollView
ref={this.scrollViewRef_}
style={{ flexGrow: 1 }}
>
{this.state.searching ? searchInput : null}
{settingComps}
</ScrollView>
);
@ -620,10 +706,11 @@ class ConfigScreenComponent extends BaseScreenComponent<ConfigScreenProps, Confi
<ScreenHeader
title={screenHeadingText}
showSaveButton={true}
showSearchButton={false}
showSearchButton={true}
showSideMenuButton={false}
saveButtonDisabled={!this.hasUnsavedChanges()}
onSaveButtonPress={this.saveButton_press}
onSearchButtonPress={this.onSearchButtonPress_}
/>
{mainComponent}
</View>

4
packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportDebugReportButton.tsx
View File

@ -11,6 +11,8 @@ interface Props {
styles: ConfigScreenStyles;
}
export const exportDebugReportTitle = () => _('Export Debug Report');
const ExportDebugReportButton = (props: Props) => {
const [creatingReport, setCreatingReport] = useState(false);
@ -24,7 +26,7 @@ const ExportDebugReportButton = (props: Props) => {
const exportDebugReportButton = (
<SettingsButton
title={creatingReport ? _('Creating report...') : _('Export Debug Report')}
title={creatingReport ? _('Creating report...') : exportDebugReportTitle()}
clickHandler={exportDebugButtonPress}
styles={props.styles}
disabled={creatingReport}

4
packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportProfileButton.tsx
View File

@ -13,6 +13,8 @@ interface Props {
styles: ConfigScreenStyles;
}
export const exportProfileButtonTitle = () => _('Export profile');
const ExportProfileButton = (props: Props) => {
const [profileExportStatus, setProfileExportStatus] = useState<'idle'|'prompt'|'exporting'>('idle');
const [profileExportPath, setProfileExportPath] = useState<string>('');
@ -31,7 +33,7 @@ const ExportProfileButton = (props: Props) => {
const exportProfileButton = (
<SettingsButton
styles={props.styles}
title={profileExportStatus === 'exporting' ? _('Exporting profile...') : _('Export profile')}
title={profileExportStatus === 'exporting' ? _('Exporting profile...') : exportProfileButtonTitle()}
clickHandler={exportProfileButtonPress}
description={_('For debugging purpose only: export your profile to an external SD card.')}
disabled={profileExportStatus === 'exporting'}

8
packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExportButton.tsx
View File

@ -24,6 +24,9 @@ enum ExportStatus {
Exported,
}
export const exportButtonTitle = () => _('Export all notes as JEX');
export const exportButtonDescription = () => _('Share a copy of all notes in a file format that can be imported by Joplin on a computer.');
const NoteExportButton: FunctionComponent<Props> = props => {
const [exportStatus, setExportStatus] = useState<ExportStatus>(ExportStatus.NotStarted);
const [exportProgress, setExportProgress] = useState<number|undefined>(0);
@ -80,13 +83,12 @@ const NoteExportButton: FunctionComponent<Props> = props => {
indeterminate={exportProgress === undefined}
progress={exportProgress}/>
);
const descriptionText = _('Share a copy of all notes in a file format that can be imported by Joplin on a computer.');
const startOrCancelExportButton = (
<SettingsButton
title={exportStatus === ExportStatus.Exporting ? _('Exporting...') : _('Export all notes as JEX')}
title={exportStatus === ExportStatus.Exporting ? _('Exporting...') : exportButtonTitle()}
disabled={exportStatus === ExportStatus.Exporting}
description={exportStatus === ExportStatus.NotStarted ? descriptionText : null}
description={exportStatus === ExportStatus.NotStarted ? exportButtonDescription() : null}
statusComponent={progressComponent}
clickHandler={startExport}
styles={props.styles}