self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-09-16 08:56:40 +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

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

@@ -90,8 +90,8 @@ android {
applicationId "net.cozic.joplin" applicationId "net.cozic.joplin"
minSdkVersion 16 minSdkVersion 16
targetSdkVersion 22 targetSdkVersion 22
versionCode 50 versionCode 52
versionName "0.9.37" versionName "0.9.39"
ndk { ndk {
abiFilters "armeabi-v7a", "x86" 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 { SearchScreen } from 'lib/components/screens/search.js';
import { View } from 'react-native'; import { View } from 'react-native';
import { _ } from 'lib/locale.js'; import { _ } from 'lib/locale.js';
import { themeStyle } from 'lib/components/global-style.js';
class AppNavComponent extends Component { class AppNavComponent extends Component {
@@ -38,8 +39,12 @@ class AppNavComponent extends Component {
this.previousRouteName_ = route.routeName; this.previousRouteName_ = route.routeName;
const theme = themeStyle(this.props.theme);
const style = { flex: 1, backgroundColor: theme.backgroundColor }
return ( return (
<View style={{ flex: 1 }}> <View style={style}>
<NotesScreen visible={notesScreenVisible} navigation={{ state: route }} /> <NotesScreen visible={notesScreenVisible} navigation={{ state: route }} />
{ searchScreenLoaded && <SearchScreen visible={searchScreenVisible} navigation={{ state: route }} /> } { searchScreenLoaded && <SearchScreen visible={searchScreenVisible} navigation={{ state: route }} /> }
{ (!notesScreenVisible && !searchScreenVisible) && <Screen navigation={{ state: route }} /> } { (!notesScreenVisible && !searchScreenVisible) && <Screen navigation={{ state: route }} /> }
@@ -53,6 +58,7 @@ const AppNav = connect(
(state) => { (state) => {
return { return {
route: state.route, route: state.route,
theme: state.settings.theme,
}; };
} }
)(AppNavComponent) )(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 { globalStyle } from 'lib/components/global-style.js';
import { Resource } from 'lib/models/resource.js'; import { Resource } from 'lib/models/resource.js';
import { shim } from 'lib/shim.js'; import { shim } from 'lib/shim.js';
import { reg } from 'lib/registry.js';
import marked from 'lib/marked.js'; import marked from 'lib/marked.js';
const Entities = require('html-entities').AllHtmlEntities; const Entities = require('html-entities').AllHtmlEntities;
const htmlentities = (new Entities()).encode; const htmlentities = (new Entities()).encode;
@@ -172,8 +173,6 @@ class NoteBodyViewer extends Component {
html = '<body onscroll="postMessage(\'bodyscroll:\' + document.body.scrollTop);">' + html + scriptHtml + '</body>'; html = '<body onscroll="postMessage(\'bodyscroll:\' + document.body.scrollTop);">' + html + scriptHtml + '</body>';
// console.info(html);
return html; return html;
} }
@@ -203,6 +202,7 @@ class NoteBodyViewer extends Component {
style={webViewStyle} style={webViewStyle}
source={{ html: html }} source={{ html: html }}
onLoadEnd={() => this.onLoadEnd()} onLoadEnd={() => this.onLoadEnd()}
onError={(e) => reg.logger().error('WebView error', e) }
onMessage={(event) => { onMessage={(event) => {
let msg = event.nativeEvent.data; let msg = event.nativeEvent.data;

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

@@ -181,6 +181,8 @@ class SideMenuContentComponent extends Component {
render() { render() {
let items = []; let items = [];
const theme = themeStyle(this.props.theme);
// HACK: inner height of ScrollView doesn't appear to be calculated correctly when // 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. // using padding. So instead creating blank elements for padding bottom and top.
items.push(<View style={{ height: globalStyle.marginTop }} key='bottom_top_hack'/>); 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'/>); items.push(<View style={{ height: globalStyle.marginBottom }} key='bottom_padding_hack'/>);
let style = {
flex:1,
borderRightWidth: 1,
borderRightColor: globalStyle.dividerColor,
backgroundColor: theme.backgroundColor,
};
return ( return (
<View style={{flex:1, borderRightWidth: 1, borderRightColor: globalStyle.dividerColor }}> <View style={style}>
<View style={{flexDirection:'row'}}> <View style={{flex:1, opacity: this.props.opacity}}>
<Image style={{flex:1, height: 100}} source={require('../images/SideMenuHeader.png')} /> <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> </View>
<ScrollView scrollsToTop={false} style={this.styles().menu}>
{ items }
</ScrollView>
</View> </View>
); );
} }
@@ -247,6 +258,7 @@ const SideMenuContent = connect(
notesParentType: state.notesParentType, notesParentType: state.notesParentType,
locale: state.settings.locale, locale: state.settings.locale,
theme: state.settings.theme, theme: state.settings.theme,
opacity: state.sideMenuOpenPercent,
}; };
} }
)(SideMenuContentComponent) )(SideMenuContentComponent)

7
ReactNativeClient/lib/reducer.js
View File

@@ -23,6 +23,7 @@ const defaultState = {
searchQuery: '', searchQuery: '',
settings: {}, settings: {},
appState: 'starting', appState: 'starting',
sideMenuOpenPercent: 0,
route: { route: {
type: 'NAV_GO', type: 'NAV_GO',
routeName: 'Welcome', routeName: 'Welcome',
@@ -336,6 +337,12 @@ const reducer = (state = defaultState, action) => {
newState.showSideMenu = false newState.showSideMenu = false
break; break;
case 'SIDE_MENU_OPEN_PERCENT':
newState = Object.assign({}, state);
newState.sideMenuOpenPercent = action.value;
break;
case 'SYNC_STARTED': case 'SYNC_STARTED':
newState = Object.assign({}, state); 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'; import { reducer, defaultState } from 'lib/reducer.js';
const generalMiddleware = store => next => async (action) => { 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 PoorManIntervals.update(); // This function needs to be called regularly so put it here
const result = next(action); const result = next(action);
@@ -254,7 +254,16 @@ class AppComponent extends React.Component {
}; };
return ( 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 }}> <MenuContext style={{ flex: 1 }}>
<AppNav screens={appNavInit} /> <AppNav screens={appNavInit} />
</MenuContext> </MenuContext>