self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Improved edit/save note

Browse Source
This commit is contained in:
Laurent Cozic 2017-07-14 00:35:37 +01:00
parent 01fb866835
commit 2142c4aaf0
5 changed files with 102 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
ReactNativeClient/lib/components/action-button.js
View File

@ -1,9 +1,10 @@
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { StyleSheet, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import ReactNativeActionButton from 'react-native-action-button';
import { connect } from 'react-redux'
import { Log } from 'lib/log.js'
import { _ } from 'lib/locale.js'
const styles = StyleSheet.create({
actionButtonIcon: {
@ -15,6 +16,13 @@ const styles = StyleSheet.create({
class ActionButtonComponent extends React.Component {
constructor() {
super();
this.state = {
toggled: false,
};
}
newTodo_press() {
this.props.dispatch({
type: 'Navigation/NAVIGATE',
@ -44,33 +52,73 @@ class ActionButtonComponent extends React.Component {
}
render() {
let buttons = [];
let buttons = this.props.buttons ? this.props.buttons : [];
if (this.props.folders.length) {
buttons.push(
<ReactNativeActionButton.Item key="ab_todo" buttonColor='#9b59b6' title="New todo" onPress={() => { this.newTodo_press() }}>
<Icon name="md-checkbox-outline" style={styles.actionButtonIcon} />
</ReactNativeActionButton.Item>
);
if (this.props.addFolderNoteButtons) {
if (this.props.folders.length) {
buttons.push({
title: _('New todo'),
onPress: () => { this.newTodo_press() },
color: '#9b59b6',
icon: 'md-checkbox-outline',
});
buttons.push(
<ReactNativeActionButton.Item key="ab_note" buttonColor='#9b59b6' title="New note" onPress={() => { this.newNote_press() }}>
<Icon name="md-document" style={styles.actionButtonIcon} />
buttons.push({
title: _('New note'),
onPress: () => { this.newNote_press() },
color: '#9b59b6',
icon: 'md-document',
});
}
buttons.push({
title: _('New folder'),
onPress: () => { this.newFolder_press() },
color: '#3498db',
icon: 'md-folder',
});
}
let buttonComps = [];
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i];
let buttonTitle = button.title ? button.title : '';
let key = buttonTitle.replace(/\s/g, '_') + '_' + button.icon;
buttonComps.push(
<ReactNativeActionButton.Item key={key} buttonColor={button.color} title={buttonTitle} onPress={button.onPress}>
<Icon name={button.icon} style={styles.actionButtonIcon} />
</ReactNativeActionButton.Item>
);
}
buttons.push(
<ReactNativeActionButton.Item key="ab_folder" buttonColor='#3498db' title="New folder" onPress={() => { this.newFolder_press() }}>
<Icon name="md-folder" style={styles.actionButtonIcon} />
</ReactNativeActionButton.Item>
);
if (!buttonComps.length && !this.props.mainButton) {
return <ReactNativeActionButton style={{ display: 'none' }}/>
}
return (
<ReactNativeActionButton buttonColor="rgba(231,76,60,1)">
{ buttons }
</ReactNativeActionButton>
);
let mainButton = this.props.mainButton ? this.props.mainButton : {};
let mainIcon = mainButton.icon ? <Icon name={mainButton.icon} style={styles.actionButtonIcon} /> : <Text style={{fontSize: 20, color:"#ffffff"}}>+</Text>;
if (this.props.isToggle) {
if (!this.props.buttons || this.props.buttons.length != 2) throw new Error('Toggle state requires two buttons');
let button = this.props.buttons[this.state.toggled ? 1 : 0];
let mainIcon = <Icon name={button.icon} style={styles.actionButtonIcon} />
return (
<ReactNativeActionButton
icon={mainIcon}
buttonColor="rgba(231,76,60,1)"
onPress={() => {
let doToggle = button.onPress(this.state.toggled);
if (doToggle !== false) this.setState({ toggled: !this.state.toggled });
}}
/>
);
} else {
return (
<ReactNativeActionButton icon={mainIcon} buttonColor="rgba(231,76,60,1)" onPress={ function() { } }>
{ buttonComps }
</ReactNativeActionButton>
);
}
}
}

2
ReactNativeClient/lib/components/screens/folders.js
View File

@ -18,7 +18,7 @@ class FoldersScreenComponent extends React.Component {
<View style={{flex: 1}}>
<ScreenHeader navState={this.props.navigation.state} />
<FolderList noItemMessage={_('There is currently no notebook. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
<ActionButton></ActionButton>
<ActionButton addFolderNoteButtons={true}></ActionButton>
</View>
);
}

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

@ -4,6 +4,8 @@ import { connect } from 'react-redux'
import { Log } from 'lib/log.js'
import { Note } from 'lib/models/note.js'
import { Folder } from 'lib/models/folder.js'
import { ActionButton } from 'lib/components/action-button.js';
import Icon from 'react-native-vector-icons/Ionicons';
import { ScreenHeader } from 'lib/components/screen-header.js';
import { Checkbox } from 'lib/components/checkbox.js'
import { _ } from 'lib/locale.js';
@ -189,11 +191,10 @@ class NoteScreenComponent extends React.Component {
bodyComponent = (
<View style={{flex:1}}>
<WebView source={source}/>
<Button title="Edit note" onPress={() => { this.setState({ mode: 'edit' }); }}/>
</View>
);
} else {
bodyComponent = <TextInput style={{flex: 1, textAlignVertical: 'top', fontFamily: 'monospace'}} multiline={true} value={note.body} onChangeText={(text) => this.body_changeText(text)} />
bodyComponent = <TextInput autoFocus={true} style={{flex: 1, textAlignVertical: 'top', fontFamily: 'monospace'}} multiline={true} value={note.body} onChangeText={(text) => this.body_changeText(text)} />
}
let title = null;
@ -204,6 +205,31 @@ class NoteScreenComponent extends React.Component {
title = noteHeaderTitle;
}
const renderActionButton = () => {
let buttons = [];
buttons.push({
title: _('Edit'),
icon: 'md-create',
onPress: () => {
this.setState({ mode: 'edit' });
},
});
buttons.push({
title: _('Save'),
icon: 'md-checkmark',
onPress: () => {
this.saveNoteButton_press();
return false;
},
});
return <ActionButton isToggle={true} buttons={buttons}/>
}
const actionButtonComp = renderActionButton();
return (
<View style={{flex: 1}}>
<ScreenHeader navState={this.props.navigation.state} menuOptions={this.menuOptions()} title={title} />
@ -212,7 +238,7 @@ class NoteScreenComponent extends React.Component {
</View>
{ bodyComponent }
{ todoComponents }
<Button title="Save note" onPress={() => this.saveNoteButton_press()} />
{ actionButtonComp }
{ this.state.showNoteMetadata && <Text>{this.state.noteMetadata}</Text> }
</View>
);

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

@ -55,8 +55,7 @@ class NotesScreenComponent extends React.Component {
<View style={{flex: 1}}>
<ScreenHeader title={title} navState={this.props.navigation.state} menuOptions={this.menuOptions()} />
<NoteList noItemMessage={_('There are currently no notes. Create one by clicking on the (+) button.')} style={{flex: 1}}/>
<ActionButton parentFolderId={this.props.selectedFolderId}></ActionButton>
<ActionButton addFolderNoteButtons={true} parentFolderId={this.props.selectedFolderId}></ActionButton>
<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
</View>
);

4
ReactNativeClient/lib/components/screens/welcome.js
View File

@ -24,9 +24,9 @@ class WelcomeScreenComponent extends React.Component {
return (
<View style={{flex: 1}}>
<ScreenHeader navState={this.props.navigation.state} />
<ScreenHeader navState={this.props.navigation.state}/>
<Text>{message}</Text>
<ActionButton></ActionButton>
<ActionButton addFolderNoteButtons={true}/>
</View>
);
}