diff --git a/ReactNativeClient/android/app/build.gradle b/ReactNativeClient/android/app/build.gradle
index 2e9abc594..0bc8150be 100644
--- a/ReactNativeClient/android/app/build.gradle
+++ b/ReactNativeClient/android/app/build.gradle
@@ -90,8 +90,8 @@ android {
applicationId "net.cozic.joplin"
minSdkVersion 16
targetSdkVersion 22
- versionCode 26
- versionName "0.9.13"
+ versionCode 27
+ versionName "0.9.14"
ndk {
abiFilters "armeabi-v7a", "x86"
}
diff --git a/ReactNativeClient/lib/components/global-style.js b/ReactNativeClient/lib/components/global-style.js
index b58109837..8846e6306 100644
--- a/ReactNativeClient/lib/components/global-style.js
+++ b/ReactNativeClient/lib/components/global-style.js
@@ -1,9 +1,11 @@
const globalStyle = {
margin: 15, // No text and no interactive component should be within this margin
backgroundColor: "#ffffff",
- color: "#555555",
+ color: "#555555", // For regular text
+ colorFaded: "#777777", // For less important text
fontSize: 10,
dividerColor: "#dddddd",
+ selectedColor: '#eeeeee',
// For WebView - must correspond to the properties above
htmlFontSize: '14px',
@@ -12,6 +14,8 @@ const globalStyle = {
globalStyle.marginRight = globalStyle.margin;
globalStyle.marginLeft = globalStyle.margin;
+globalStyle.marginTop = globalStyle.margin;
+globalStyle.marginBottom = globalStyle.margin;
globalStyle.htmlMarginLeft = ((globalStyle.marginLeft / 10) * 0.6).toFixed(2) + 'em';
export { globalStyle }
\ No newline at end of file
diff --git a/ReactNativeClient/lib/components/side-menu-content.js b/ReactNativeClient/lib/components/side-menu-content.js
index 5c0b6ac3f..2103f059e 100644
--- a/ReactNativeClient/lib/components/side-menu-content.js
+++ b/ReactNativeClient/lib/components/side-menu-content.js
@@ -1,5 +1,7 @@
+import React, { Component } from 'react';
+import { TouchableOpacity , Button, Text, Image, StyleSheet, ScrollView, View } from 'react-native';
import { connect } from 'react-redux'
-import { TouchableOpacity , Button, Text } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
import { Log } from 'lib/log.js';
import { Note } from 'lib/models/note.js';
import { FoldersScreenUtils } from 'lib/components/screens/folders-utils.js'
@@ -9,21 +11,14 @@ import { reg } from 'lib/registry.js';
import { _ } from 'lib/locale.js';
import { globalStyle } from 'lib/components/global-style.js';
-const React = require('react');
-const {
- Dimensions,
- StyleSheet,
- ScrollView,
- View,
- Image,
-} = require('react-native');
-const { Component } = React;
-
-const styles = StyleSheet.create({
+const styleObject = {
menu: {
flex: 1,
backgroundColor: globalStyle.backgroundColor,
- padding: 20,
+ },
+ icon: {
+ fontSize: 20,
+ color: globalStyle.color,
},
name: {
position: 'absolute',
@@ -33,26 +28,35 @@ const styles = StyleSheet.create({
item: {
fontSize: 14,
fontWeight: '300',
- paddingTop: 5,
- },
- folderButton: {
- flex: 1,
- backgroundColor: "#0482E3",
- height: 36,
- marginBottom: 5,
- },
- folderButtonText: {
- color: "#ffffff",
- fontWeight: 'bold',
- textAlign: 'center',
- textAlignVertical: 'center',
- flex: 1,
},
button: {
flex: 1,
- textAlign: 'left',
- }
-});
+ flexDirection: 'row',
+ height: 36,
+ alignItems: 'center',
+ paddingLeft: globalStyle.marginLeft,
+ paddingRight: globalStyle.marginRight,
+ },
+ buttonText: {
+ flex: 1,
+ color: globalStyle.color,
+ paddingLeft: 10,
+ },
+ syncStatus: {
+ paddingLeft: globalStyle.marginLeft,
+ paddingRight: globalStyle.marginRight,
+ color: globalStyle.colorFaded,
+ },
+};
+
+styleObject.folderButton = Object.assign({}, styleObject.button);
+styleObject.folderButtonText = Object.assign({}, styleObject.buttonText);
+styleObject.syncButton = Object.assign({}, styleObject.button);
+styleObject.syncButtonText = Object.assign({}, styleObject.buttonText);
+styleObject.folderButtonSelected = Object.assign({}, styleObject.folderButton);
+styleObject.folderButtonSelected.backgroundColor = globalStyle.selectedColor;
+
+const styles = StyleSheet.create(styleObject);
class SideMenuContentComponent extends Component {
@@ -86,36 +90,68 @@ class SideMenuContentComponent extends Component {
}
}
+ folderItem(folder, selected) {
+ const iconComp = selected ? : ;
+ const folderButtonStyle = selected ? styles.folderButtonSelected : styles.folderButton;
+
+ return (
+ { this.folder_press(folder) }}>
+
+ { iconComp }
+ {folder.title}
+
+
+ );
+ }
+
+ synchronizeButton(state) {
+ const title = state == 'sync' ? _('Synchronize') : _('Cancel synchronization');
+ const iconComp = state == 'sync' ? : ;
+
+ return (
+ { this.synchronize_press() }}>
+
+ { iconComp }
+ {title}
+
+
+ );
+ }
+
render() {
let items = [];
- for (let i = 0; i < this.props.folders.length; i++) {
- let f = this.props.folders[i];
- let title = f.title ? f.title : '';
- items.push(
- { this.folder_press(f) }}>
-
- {title}
-
-
- );
+ // HACK: inner height of ScrollView doesn't appear to be calculated correctly when
+ // using padding. So instead creating blank elements for padding bottom and top.
+ items.push();
+
+ for (let i = 0; i < this.props.folders.length; i++) {
+ let folder = this.props.folders[i];
+ items.push(this.folderItem(folder, this.props.selectedFolderId == folder.id));
}
- if (items.length) items.push(); // DIVIDER
+ if (items.length) items.push(); // DIVIDER
const syncTitle = this.props.syncStarted ? _('Cancel sync') : _('Synchronize');
let lines = Synchronizer.reportToLines(this.props.syncReport);
const syncReportText = lines.join("\n");
- items.push(