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(