self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-08-13 22:12:50 +02:00
Code Issues Releases Activity

Mobile: Added icons to left sidebar

Browse Source
This commit is contained in:
Laurent Cozic
2019-07-11 18:44:26 +01:00
parent 4779fc6f43
commit e5a8114887
2 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ReactNativeClient/lib/components/side-menu-content-note.js
View File

@@ -100,6 +100,7 @@ class SideMenuContentNoteComponent extends Component {
borderRightWidth: 1, borderRightWidth: 1,
borderRightColor: globalStyle.dividerColor, borderRightColor: globalStyle.dividerColor,
backgroundColor: theme.backgroundColor, backgroundColor: theme.backgroundColor,
paddingTop: 10,
}; };
return ( return (

74
ReactNativeClient/lib/components/side-menu-content.js
View File

@@ -28,6 +28,7 @@ class SideMenuContentComponent extends Component {
this.newFolderButton_press = this.newFolderButton_press.bind(this); this.newFolderButton_press = this.newFolderButton_press.bind(this);
this.synchronize_press = this.synchronize_press.bind(this); this.synchronize_press = this.synchronize_press.bind(this);
this.configButton_press = this.configButton_press.bind(this); this.configButton_press = this.configButton_press.bind(this);
this.allNotesButton_press = this.allNotesButton_press.bind(this);
this.renderFolderItem = this.renderFolderItem.bind(this); this.renderFolderItem = this.renderFolderItem.bind(this);
} }
@@ -79,6 +80,7 @@ class SideMenuContentComponent extends Component {
styles.folderIcon.paddingTop = 3; styles.folderIcon.paddingTop = 3;
styles.sideButton = Object.assign({}, styles.button, { flex: 0 }); styles.sideButton = Object.assign({}, styles.button, { flex: 0 });
styles.sideButtonSelected = Object.assign({}, styles.sideButton, { backgroundColor: theme.selectedColor });
styles.sideButtonText = Object.assign({}, styles.buttonText); styles.sideButtonText = Object.assign({}, styles.buttonText);
this.styles_[this.props.theme] = StyleSheet.create(styles); this.styles_[this.props.theme] = StyleSheet.create(styles);
@@ -86,23 +88,13 @@ class SideMenuContentComponent extends Component {
} }
folder_press(folder) { folder_press(folder) {
if (folder === 'all') { this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
this.props.dispatch({ this.props.dispatch({
type: 'NAV_GO', type: 'NAV_GO',
routeName: 'Notes', routeName: 'Notes',
smartFilterId: 'c3176726992c11e9ac940492261af972', folderId: folder.id,
}); });
} else {
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Notes',
folderId: folder.id,
});
}
} }
async folder_longPress(folder) { async folder_longPress(folder) {
@@ -181,6 +173,16 @@ class SideMenuContentComponent extends Component {
NavService.go('Config'); NavService.go('Config');
} }
allNotesButton_press() {
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Notes',
smartFilterId: 'c3176726992c11e9ac940492261af972',
});
}
newFolderButton_press() { newFolderButton_press() {
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' }); this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
@@ -215,22 +217,20 @@ class SideMenuContentComponent extends Component {
let iconWrapper = null; let iconWrapper = null;
if (folder !== 'all') { const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'md-arrow-dropdown' : 'md-arrow-dropup';
const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'md-arrow-dropdown' : 'md-arrow-dropup'; const iconComp = <Icon name={iconName} style={this.styles().folderIcon} />
const iconComp = <Icon name={iconName} style={this.styles().folderIcon} />
iconWrapper = !hasChildren ? null : ( iconWrapper = !hasChildren ? null : (
<TouchableOpacity style={iconWrapperStyle} folderid={folder.id} onPress={() => { if (hasChildren) this.folder_togglePress(folder) }}> <TouchableOpacity style={iconWrapperStyle} folderid={folder.id} onPress={() => { if (hasChildren) this.folder_togglePress(folder) }}>
{ iconComp } { iconComp }
</TouchableOpacity> </TouchableOpacity>
); );
}
return ( return (
<View key={folder === 'all' ? folder : folder.id} style={{ flex: 1, flexDirection: 'row' }}> <View key={folder.id} style={{ flex: 1, flexDirection: 'row' }}>
<TouchableOpacity style={{ flex: 1 }} onPress={() => { this.folder_press(folder) }} onLongPress={() => { this.folder_longPress(folder) }}> <TouchableOpacity style={{ flex: 1 }} onPress={() => { this.folder_press(folder) }} onLongPress={() => { this.folder_longPress(folder) }}>
<View style={folderButtonStyle}> <View style={folderButtonStyle}>
<Text numberOfLines={1} style={this.styles().folderButtonText}>{folder === 'all' ? _('All notes') : Folder.displayTitle(folder)}</Text> <Text numberOfLines={1} style={this.styles().folderButtonText}>{Folder.displayTitle(folder)}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
{ iconWrapper } { iconWrapper }
@@ -238,15 +238,21 @@ class SideMenuContentComponent extends Component {
); );
} }
renderSideBarButton(key, title, iconName, onPressHandler) { renderSideBarButton(key, title, iconName, onPressHandler = null, selected = false) {
const theme = themeStyle(this.props.theme); const theme = themeStyle(this.props.theme);
const content = (
<View key={key} style={selected ? this.styles().sideButtonSelected : this.styles().sideButton}>
<Icon name={iconName} style={this.styles().sidebarIcon} />
<Text style={this.styles().sideButtonText}>{title}</Text>
</View>
);
if (!onPressHandler) return content;
return ( return (
<TouchableOpacity key={key} onPress={onPressHandler}> <TouchableOpacity key={key} onPress={onPressHandler}>
<View style={this.styles().sideButton}> {content}
<Icon name={iconName} style={this.styles().sidebarIcon} />
<Text style={this.styles().sideButtonText}>{title}</Text>
</View>
</TouchableOpacity> </TouchableOpacity>
); );
} }
@@ -313,10 +319,12 @@ class SideMenuContentComponent extends Component {
// using padding. So instead creating blank elements for padding bottom and top. // using padding. So instead creating blank elements for padding bottom and top.
items.push(<View style={{ height: globalStyle.marginTop }} key='bottom_top_hack'/>); items.push(<View style={{ height: globalStyle.marginTop }} key='bottom_top_hack'/>);
items.push(this.renderFolderItem('all', this.props.notesParentType === 'SmartFilter', false, 0)); items.push(this.renderSideBarButton('all_notes', _('All notes'), 'md-document', this.allNotesButton_press, this.props.notesParentType === 'SmartFilter'));
items.push(this.makeDivider('divider_all')); items.push(this.makeDivider('divider_all'));
// items.push(this.renderSideBarButton('folder_header', _('Notebooks'), 'md-folder'));
if (this.props.folders.length) { if (this.props.folders.length) {
const result = shared.renderFolders(this.props, this.renderFolderItem); const result = shared.renderFolders(this.props, this.renderFolderItem);
const folderItems = result.items; const folderItems = result.items;