Made status page scrollable

ReactNativeClient/android/app/build.gradle

@@ -90,8 +90,8 @@ android {
 		applicationId "net.cozic.joplin"
 		minSdkVersion 16
 		targetSdkVersion 22
-		versionCode 39
-		versionName "0.9.26"
+		versionCode 40
+		versionName "0.9.27"
 		ndk {
 			abiFilters "armeabi-v7a", "x86"
 		}

ReactNativeClient/lib/components/screens/status.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ListView, StyleSheet, View, Text, Button } from 'react-native';
+import { ListView, StyleSheet, View, Text, Button, FlatList } from 'react-native';
 import { Setting } from 'lib/models/setting.js';
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
@@ -53,28 +53,47 @@ class StatusScreenComponent extends BaseScreenComponent {
 			let baseStyle = {
 				paddingLeft: 6,
 				paddingRight: 6,
-				paddingTop: 0,
-				paddingBottom: 0,
+				paddingTop: 2,
+				paddingBottom: 2,
 				flex: 0,
 				color: theme.color,
 				fontSize: theme.fontSize,
 			};
+
+			let lines = [];
+
 			for (let i = 0; i < report.length; i++) {
 				let section = report[i];
 
 				let style = Object.assign({}, baseStyle);
 				style.fontWeight = 'bold';
 				if (i > 0) style.paddingTop = 20;
-				output.push(<Text key={'sectiontitle_' + i} style={style}>{section.title}</Text>);
+				lines.push({ key: 'section_' + i, isSection: true, text: section.title });
 
 				for (let n in section.body) {
 					if (!section.body.hasOwnProperty(n)) continue;
 					style = Object.assign({}, baseStyle);
-					output.push(<Text key={'line_' + i + '_' + n} style={style}>{section.body[n]}</Text>);
-				}
+					lines.push({ key: 'item_' + i + '_' + n, text: section.body[n] });
 				}
 
-			return output;
+				lines.push({ key: 'divider2_' + i, isDivider: true });
+			}
+
+			return (<FlatList
+				data={lines}
+				renderItem={({item}) => {
+					let style = Object.assign({}, baseStyle);
+					if (item.isSection === true) {
+						style.fontWeight = 'bold';
+						style.marginBottom = 5;
+					}
+					if (item.isDivider) {
+						return (<View style={{borderBottomWidth: 1, borderBottomColor: 'white', marginTop: 20, marginBottom: 20}}/>);
+					} else {
+						return (<Text style={style}>{item.text}</Text>);
+					}
+				}}
+			/>);
 		}
 
 		let body = renderBody(this.state.report);

index.html

@@ -148,6 +148,7 @@
 <li>Search functionality.</li>
 <li>Geolocation support.</li>
 <li>Supports multiple languages.</li>
+<li>Mobile: Support for dark theme / light theme.</li>
 </ul>
 <h1 id="localisation">Localisation</h1>
 <p>The applications are currently available in English and French. If you would like to contribute a translation it is quite straightforward, please follow these steps:</p>
@@ -162,7 +163,6 @@
 <li>All clients: End to end encryption.</li>
 <li>All clients: Support for Dropbox synchronisation.</li>
 <li>Mobile: Compile Windows app?</li>
-<li>Mobile: Support for dark theme / light theme.</li>
 <li>Mobile: Link for non-image resources.</li>
 <li>Mobile: Handle tags.</li>
 <li>Mobile: Markdown edition support</li>