self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-06-15 23:00:36 +02:00
Code Issues Releases Activity

Mobile: Made tag UI a dialog

Browse Source
This commit is contained in:
Laurent Cozic
2018-03-17 23:00:01 +00:00
parent d6f7893c56
commit ca3946689a
7 changed files with 55 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
ReactNativeClient/lib/components/screens/note-tags.js → ReactNativeClient/lib/components/screens/NoteTagsDialog.js
View File

@ -12,18 +12,12 @@ const { Database } = require('lib/database.js');
const Folder = require('lib/models/Folder.js');
const { ReportService } = require('lib/services/report.js');
const { _ } = require('lib/locale.js');
const { BaseScreenComponent } = require('lib/components/base-screen.js');
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
const Icon = require('react-native-vector-icons/Ionicons').default;
const ModalDialog = require('lib/components/ModalDialog');
const naturalCompare = require('string-natural-compare');
const styles = StyleSheet.create({
body: {
flex: 1,
margin: globalStyle.margin,
},
});
class NoteTagsScreenComponent extends BaseScreenComponent {
class NoteTagsDialogComponent extends React.Component {
constructor() {
super();
@ -94,15 +88,11 @@ class NoteTagsScreenComponent extends BaseScreenComponent {
this.setState({ savingTags: false });
}
this.props.dispatch({
type: 'NAV_BACK',
});
if (this.props.onCloseRequested) this.props.onCloseRequested();
}
this.cancelButton_press = () => {
this.props.dispatch({
type: 'NAV_BACK',
});
if (this.props.onCloseRequested) this.props.onCloseRequested();
}
}
@ -122,6 +112,11 @@ class NoteTagsScreenComponent extends BaseScreenComponent {
selected: tagIds.indexOf(tag.id) >= 0,
}});
tagListData.sort((a, b) => {
return naturalCompare.caseInsensitive(a.title, b.title);
//return a.title.toLowerCase() < b.title.toLowerCase() ? -1 : +1;
});
this.setState({ tagListData: tagListData });
}
@ -151,8 +146,8 @@ class NoteTagsScreenComponent extends BaseScreenComponent {
alignItems: 'center',
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
borderTopWidth: 1,
borderTopColor: theme.dividerColor
borderBottomWidth: 1,
borderBottomColor: theme.dividerColor
},
};
@ -163,32 +158,32 @@ class NoteTagsScreenComponent extends BaseScreenComponent {
render() {
const theme = themeStyle(this.props.theme);
return (
<View style={this.rootStyle(this.props.theme).root}>
<ScreenHeader title={_('Note tags')} showSideMenuButton={false} showSearchButton={false} showContextMenuButton={false}/>
const dialogContent = (
<View style={{flex:1}}>
<View style={this.styles().newTagBox}>
<Text>{_('New tags:')}</Text><TextInput value={this.state.newTags} onChangeText={value => { this.setState({ newTags: value }) }} style={{flex:1}}/>
</View>
<FlatList
data={this.state.tagListData}
renderItem={this.renderTag}
keyExtractor={this.tagKeyExtractor}
/>
<View style={this.styles().newTagBox}>
<Text>{_('Or type tags:')}</Text><TextInput value={this.state.newTags} onChangeText={value => { this.setState({ newTags: value }) }} style={{flex:1}}/>
</View>
<View style={theme.buttonRow}>
<View style={{flex:1}}>
<Button disabled={this.state.savingTags} title={_('OK')} onPress={this.okButton_press}></Button>
</View>
<View style={{flex:1, marginLeft: 5}}>
<Button disabled={this.state.savingTags} title={_('Cancel')} onPress={this.cancelButton_press}></Button>
</View>
</View>
</View>
);
return <ModalDialog
theme={this.props.theme}
ContentComponent={dialogContent}
title={_('Type new tags or select from list')}
onOkPress={this.okButton_press}
onCancelPress={this.cancelButton_press}
buttonBarEnabled={!this.state.savingTags}
/>
}
}
const NoteTagsScreen = connect(
const NoteTagsDialog = connect(
(state) => {
return {
theme: state.settings.theme,
@ -196,6 +191,6 @@ const NoteTagsScreen = connect(
noteId: state.selectedNoteIds.length ? state.selectedNoteIds[0] : null,
};
}
)(NoteTagsScreenComponent)
)(NoteTagsDialogComponent)
module.exports = { NoteTagsScreen };
module.exports = NoteTagsDialog;

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

@ -15,6 +15,7 @@ const Icon = require('react-native-vector-icons/Ionicons').default;
const { fileExtension, basename, safeFileExtension } = require('lib/path-utils.js');
const mimeUtils = require('lib/mime-utils.js').mime;
const { ScreenHeader } = require('lib/components/screen-header.js');
const NoteTagsDialog = require('lib/components/screens/NoteTagsDialog');
const { time } = require('lib/time-utils.js');
const { Checkbox } = require('lib/components/checkbox.js');
const { _ } = require('lib/locale.js');
@ -51,7 +52,8 @@ class NoteScreenComponent extends BaseScreenComponent {
isLoading: true,
titleTextInputHeight: 20,
alarmDialogShown: false,
heightBumpView:0
heightBumpView:0,
noteTagDialogShown: false,
};
// iOS doesn't support multiline text fields properly so disable it
@ -101,6 +103,10 @@ class NoteScreenComponent extends BaseScreenComponent {
return false;
};
this.noteTagDialog_closeRequested = () => {
this.setState({ noteTagDialogShown: false });
}
}
styles() {
@ -360,11 +366,7 @@ class NoteScreenComponent extends BaseScreenComponent {
tags_onPress() {
if (!this.state.note || !this.state.note.id) return;
this.props.dispatch({
type: 'NAV_GO',
routeName: 'NoteTags',
noteId: this.state.note.id,
});
this.setState({ noteTagDialogShown: true });
}
setAlarm_onPress() {
@ -547,6 +549,8 @@ class NoteScreenComponent extends BaseScreenComponent {
</View>
);
const noteTagDialog = !this.state.noteTagDialogShown ? null : <NoteTagsDialog onCloseRequested={this.noteTagDialog_closeRequested}/>;
return (
<View style={this.rootStyle(this.props.theme).root}>
<ScreenHeader
@ -584,6 +588,7 @@ class NoteScreenComponent extends BaseScreenComponent {
/>
<DialogBox ref={dialogbox => { this.dialogbox = dialogbox }}/>
{ noteTagDialog }
</View>
);
}