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: More rendering optimisations to make animations smoother and to allow typing fast on large notes

Browse Source
This commit is contained in:
Laurent Cozic
2019-07-12 19:36:12 +01:00
parent 981c97cca5
commit c2a80b12f0
5 changed files with 111 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
ReactNativeClient/lib/components/screens/note.js
View File

@@ -190,13 +190,20 @@ class NoteScreenComponent extends BaseScreenComponent {
this.sideMenuOptions = this.sideMenuOptions.bind(this);
this.folderPickerOptions_valueChanged = this.folderPickerOptions_valueChanged.bind(this);
this.saveNoteButton_press = this.saveNoteButton_press.bind(this);
this.onAlarmDialogAccept = this.onAlarmDialogAccept.bind(this);
this.onAlarmDialogReject = this.onAlarmDialogReject.bind(this);
this.todoCheckbox_change = this.todoCheckbox_change.bind(this);
this.titleTextInput_contentSizeChange = this.titleTextInput_contentSizeChange.bind(this);
this.title_changeText = this.title_changeText.bind(this);
}
styles() {
const themeId = this.props.theme;
const theme = themeStyle(themeId);
if (this.styles_[themeId]) return this.styles_[themeId];
const cacheKey = [themeId, this.state.titleTextInputHeight, this.state.HACK_webviewLoadingState].join('_');
if (this.styles_[cacheKey]) return this.styles_[cacheKey];
this.styles_ = {};
let styles = {
@@ -216,6 +223,13 @@ class NoteScreenComponent extends BaseScreenComponent {
paddingTop: theme.marginTop,
paddingBottom: theme.marginBottom,
},
checkbox: {
color: theme.color,
paddingRight: 10,
paddingLeft: theme.marginLeft,
paddingTop: 10, // Added for iOS (Not needed for Android??)
paddingBottom: 10, // Added for iOS (Not needed for Android??)
},
};
styles.titleContainer = {
@@ -230,8 +244,23 @@ class NoteScreenComponent extends BaseScreenComponent {
styles.titleContainerTodo = Object.assign({}, styles.titleContainer);
styles.titleContainerTodo.paddingLeft = 0;
this.styles_[themeId] = StyleSheet.create(styles);
return this.styles_[themeId];
styles.titleTextInput = {
flex: 1,
marginTop: 0,
paddingLeft: 0,
color: theme.color,
backgroundColor: theme.backgroundColor,
fontWeight: 'bold',
fontSize: theme.fontSize,
paddingTop: 10, // Added for iOS (Not needed for Android??)
paddingBottom: 10, // Added for iOS (Not needed for Android??)
};
if (this.enableMultilineTitle_) styles.titleTextInput.height = this.state.titleTextInputHeight;
if (this.state.HACK_webviewLoadingState === 1) styles.titleTextInput.marginTop = 1;
this.styles_[cacheKey] = StyleSheet.create(styles);
return this.styles_[cacheKey];
}
isModified() {
@@ -783,7 +812,7 @@ class NoteScreenComponent extends BaseScreenComponent {
},
});
if (this.state.mode == 'edit') return null;//<ActionButton style={{display:'none'}}/>;
if (this.state.mode == 'edit') return null;
return <ActionButton multiStates={true} buttons={buttons} buttonIndex={0} />
}
@@ -797,46 +826,20 @@ class NoteScreenComponent extends BaseScreenComponent {
const titleContainerStyle = isTodo ? this.styles().titleContainerTodo : this.styles().titleContainer;
let titleTextInputStyle = {
flex: 1,
marginTop: 0,
paddingLeft: 0,
color: theme.color,
backgroundColor: theme.backgroundColor,
fontWeight: 'bold',
fontSize: theme.fontSize,
paddingTop: 10, // Added for iOS (Not needed for Android??)
paddingBottom: 10, // Added for iOS (Not needed for Android??)
};
if (this.enableMultilineTitle_) titleTextInputStyle.height = this.state.titleTextInputHeight;
let checkboxStyle = {
color: theme.color,
paddingRight: 10,
paddingLeft: theme.marginLeft,
paddingTop: 10, // Added for iOS (Not needed for Android??)
paddingBottom: 10, // Added for iOS (Not needed for Android??)
}
if (this.state.HACK_webviewLoadingState === 1) {
titleTextInputStyle.marginTop = 1;
}
const dueDate = isTodo && note.todo_due ? new Date(note.todo_due) : null;
const dueDate = Note.dueDateObject(note);
const titleComp = (
<View style={titleContainerStyle}>
{ isTodo && <Checkbox style={checkboxStyle} checked={!!Number(note.todo_completed)} onChange={(checked) => { this.todoCheckbox_change(checked) }} /> }
{ isTodo && <Checkbox style={this.styles().checkbox} checked={!!Number(note.todo_completed)} onChange={this.todoCheckbox_change} /> }
<TextInput
onContentSizeChange={(event) => this.titleTextInput_contentSizeChange(event)}
onContentSizeChange={this.titleTextInput_contentSizeChange}
multiline={this.enableMultilineTitle_}
ref="titleTextField"
underlineColorAndroid="#ffffff00"
autoCapitalize="sentences"
style={titleTextInputStyle}
style={this.styles().titleTextInput}
value={note.title}
onChangeText={(text) => this.title_changeText(text)}
onChangeText={this.title_changeText}
selectionColor={theme.textSelectionColor}
placeholder={_('Add title')}
/>
@@ -863,8 +866,8 @@ class NoteScreenComponent extends BaseScreenComponent {
<SelectDateTimeDialog
shown={this.state.alarmDialogShown}
date={dueDate}
onAccept={(date) => this.onAlarmDialogAccept(date) }
onReject={() => this.onAlarmDialogReject() }
onAccept={this.onAlarmDialogAccept}
onReject={this.onAlarmDialogReject}
/>
<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>

62
ReactNativeClient/lib/components/screens/notes.js
View File

@@ -1,5 +1,5 @@
const React = require('react'); const Component = React.Component;
const { AppState, View, Button, Text } = require('react-native');
const { AppState, View, Button, Text, StyleSheet } = require('react-native');
const { stateUtils } = require('lib/reducer.js');
const { connect } = require('react-redux');
const { reg } = require('lib/registry.js');
@@ -72,6 +72,25 @@ class NotesScreenComponent extends BaseScreenComponent {
}
}
styles() {
if (!this.styles_) this.styles_ = {};
const themeId = this.props.theme;
const theme = themeStyle(themeId);
const cacheKey = themeId;
if (this.styles_[cacheKey]) return this.styles_[cacheKey];
this.styles_ = {};
let styles = {
noteList: {
flex: 1,
},
};
this.styles_[cacheKey] = StyleSheet.create(styles);
return this.styles_[cacheKey];
}
async componentDidMount() {
await this.refreshNotes();
AppState.addEventListener('change', this.onAppStateChange_);
@@ -151,23 +170,6 @@ class NotesScreenComponent extends BaseScreenComponent {
});
}
menuOptions() {
if (this.props.notesParentType == 'Folder') {
if (this.props.selectedFolderId == Folder.conflictFolderId()) return [];
const folder = this.parentItem();
if (!folder) return [];
let output = [];
// if (!folder.encryption_applied) output.push({ title: _('Edit notebook'), onPress: () => { this.editFolder_onPress(this.props.selectedFolderId); } });
// output.push({ title: _('Delete notebook'), onPress: () => { this.deleteFolder_onPress(this.props.selectedFolderId); } });
return output;
} else {
return []; // For tags - TODO
}
}
parentItem(props = null) {
if (!props) props = this.props;
@@ -185,6 +187,18 @@ class NotesScreenComponent extends BaseScreenComponent {
return output;
}
folderPickerOptions() {
const options = {
enabled: this.props.noteSelectionEnabled,
mustSelect: true,
};
if (this.folderPickerOptions_ && options.enabled === this.folderPickerOptions_.enabled) return this.folderPickerOptions_;
this.folderPickerOptions_ = options;
return this.folderPickerOptions_;
}
render() {
const parent = this.parentItem();
const theme = themeStyle(this.props.theme);
@@ -201,7 +215,7 @@ class NotesScreenComponent extends BaseScreenComponent {
if (!parent) {
return (
<View style={rootStyle}>
<ScreenHeader title={title} menuOptions={this.menuOptions()} />
<ScreenHeader title={title} />
</View>
)
}
@@ -216,15 +230,13 @@ class NotesScreenComponent extends BaseScreenComponent {
<ScreenHeader
title={title}
showBackButton={false}
menuOptions={this.menuOptions()}
parentComponent={thisComp}
sortButton_press={this.sortButton_press}
folderPickerOptions={{
enabled: this.props.noteSelectionEnabled,
mustSelect: true,
}}
folderPickerOptions={this.folderPickerOptions()}
showSearchButton={true}
showSideMenuButton={true}
/>
<NoteList style={{flex: 1}}/>
<NoteList style={this.styles().noteList}/>
{ actionButtonComp }
<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
</View>