self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-29 22:48:10 +02:00
Code Issues Releases Activity

RN: fixed visual glitches due to side menu being visible below other screens

Browse Source
This commit is contained in:
Laurent Cozic
2017-10-30 18:27:51 +00:00
parent 5492e715f8
commit 6675ea54ac
6 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ReactNativeClient/lib/components/app-nav.js
View File

@@ -4,6 +4,7 @@ import { NotesScreen } from 'lib/components/screens/notes.js';
import { SearchScreen } from 'lib/components/screens/search.js';
import { View } from 'react-native';
import { _ } from 'lib/locale.js';
import { themeStyle } from 'lib/components/global-style.js';
class AppNavComponent extends Component {
@@ -38,8 +39,12 @@ class AppNavComponent extends Component {
this.previousRouteName_ = route.routeName;
const theme = themeStyle(this.props.theme);
const style = { flex: 1, backgroundColor: theme.backgroundColor }
return (
<View style={{ flex: 1 }}>
<View style={style}>
<NotesScreen visible={notesScreenVisible} navigation={{ state: route }} />
{ searchScreenLoaded && <SearchScreen visible={searchScreenVisible} navigation={{ state: route }} /> }
{ (!notesScreenVisible && !searchScreenVisible) && <Screen navigation={{ state: route }} /> }
@@ -53,6 +58,7 @@ const AppNav = connect(
(state) => {
return {
route: state.route,
theme: state.settings.theme,
};
}
)(AppNavComponent)

4
ReactNativeClient/lib/components/note-body-viewer.js
View File

@@ -3,6 +3,7 @@ import { WebView, View, Linking } from 'react-native';
import { globalStyle } from 'lib/components/global-style.js';
import { Resource } from 'lib/models/resource.js';
import { shim } from 'lib/shim.js';
import { reg } from 'lib/registry.js';
import marked from 'lib/marked.js';
const Entities = require('html-entities').AllHtmlEntities;
const htmlentities = (new Entities()).encode;
@@ -172,8 +173,6 @@ class NoteBodyViewer extends Component {
html = '<body onscroll="postMessage(\'bodyscroll:\' + document.body.scrollTop);">' + html + scriptHtml + '</body>';
// console.info(html);
return html;
}
@@ -203,6 +202,7 @@ class NoteBodyViewer extends Component {
style={webViewStyle}
source={{ html: html }}
onLoadEnd={() => this.onLoadEnd()}
onError={(e) => reg.logger().error('WebView error', e) }
onMessage={(event) => {
let msg = event.nativeEvent.data;

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

@@ -181,6 +181,8 @@ class SideMenuContentComponent extends Component {
render() {
let items = [];
const theme = themeStyle(this.props.theme);
// 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(<View style={{ height: globalStyle.marginTop }} key='bottom_top_hack'/>);
@@ -222,14 +224,23 @@ class SideMenuContentComponent extends Component {
items.push(<View style={{ height: globalStyle.marginBottom }} key='bottom_padding_hack'/>);
let style = {
flex:1,
borderRightWidth: 1,
borderRightColor: globalStyle.dividerColor,
backgroundColor: theme.backgroundColor,
};
return (
<View style={{flex:1, borderRightWidth: 1, borderRightColor: globalStyle.dividerColor }}>
<View style={{flexDirection:'row'}}>
<Image style={{flex:1, height: 100}} source={require('../images/SideMenuHeader.png')} />
<View style={style}>
<View style={{flex:1, opacity: this.props.opacity}}>
<View style={{flexDirection:'row'}}>
<Image style={{flex:1, height: 100}} source={require('../images/SideMenuHeader.png')} />
</View>
<ScrollView scrollsToTop={false} style={this.styles().menu}>
{ items }
</ScrollView>
</View>
<ScrollView scrollsToTop={false} style={this.styles().menu}>
{ items }
</ScrollView>
</View>
);
}
@@ -247,6 +258,7 @@ const SideMenuContent = connect(
notesParentType: state.notesParentType,
locale: state.settings.locale,
theme: state.settings.theme,
opacity: state.sideMenuOpenPercent,
};
}
)(SideMenuContentComponent)