self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27: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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ReactNativeClient/android/app/build.gradle
View File

@ -90,8 +90,8 @@ android {
applicationId "net.cozic.joplin"
minSdkVersion 16
targetSdkVersion 22
versionCode 50
versionName "0.9.37"
versionCode 52
versionName "0.9.39"
ndk {
abiFilters "armeabi-v7a", "x86"
}

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)

7
ReactNativeClient/lib/reducer.js
View File

@ -23,6 +23,7 @@ const defaultState = {
searchQuery: '',
settings: {},
appState: 'starting',
sideMenuOpenPercent: 0,
route: {
type: 'NAV_GO',
routeName: 'Welcome',
@ -336,6 +337,12 @@ const reducer = (state = defaultState, action) => {
newState.showSideMenu = false
break;
case 'SIDE_MENU_OPEN_PERCENT':
newState = Object.assign({}, state);
newState.sideMenuOpenPercent = action.value;
break;
case 'SYNC_STARTED':
newState = Object.assign({}, state);

13
ReactNativeClient/root.js
View File

@ -38,7 +38,7 @@ import { PoorManIntervals } from 'lib/poor-man-intervals.js';
import { reducer, defaultState } from 'lib/reducer.js';
const generalMiddleware = store => next => async (action) => {
reg.logger().info('Reducer action', action.type);
if (action.type !== 'SIDE_MENU_OPEN_PERCENT') reg.logger().info('Reducer action', action.type);
PoorManIntervals.update(); // This function needs to be called regularly so put it here
const result = next(action);
@ -254,7 +254,16 @@ class AppComponent extends React.Component {
};
return (
<SideMenu menu={sideMenuContent} onChange={(isOpen) => this.sideMenu_change(isOpen)}>
<SideMenu
menu={sideMenuContent}
onChange={(isOpen) => this.sideMenu_change(isOpen)}
onSliding={(percent) => {
this.props.dispatch({
type: 'SIDE_MENU_OPEN_PERCENT',
value: percent,
});
}}
>
<MenuContext style={{ flex: 1 }}>
<AppNav screens={appNavInit} />
</MenuContext>