self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-24 08:12:24 +02:00
Code Issues Releases Activity

Mobile: Fixes #1437: Allow scrolling past end of note

Browse Source
This commit is contained in:
Laurent Cozic 2020-04-08 01:22:18 +01:00
parent 10feeeeb6b
commit be9e873277
3 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,8 +55,6 @@ class NoteBodyViewer extends Component {
this.forceUpdate();
}, 100);
},
paddingTop: '.8em', // Extra top padding on the rendered MD so it doesn't touch the border
paddingBottom: this.props.paddingBottom || '0',
highlightedKeywords: this.props.highlightedKeywords,
resources: this.props.noteResources, // await shared.attachedResources(bodyToRender),
codeTheme: theme.codeThemeCss,
@ -67,7 +65,8 @@ class NoteBodyViewer extends Component {
note.markup_language,
bodyToRender,
{
bodyPaddingBottom: '3.8em', // Extra bottom padding to make it possible to scroll past the action button (so that it doesn't overlap the text)
bodyPaddingTop: '.8em', // Extra top padding on the rendered MD so it doesn't touch the border
bodyPaddingBottom: this.props.paddingBottom, // Extra bottom padding to make it possible to scroll past the action button (so that it doesn't overlap the text)
...this.props.webViewStyle,
},
mdOptions

9
ReactNativeClient/lib/components/screens/note.js
View File

@ -1,5 +1,5 @@
const React = require('react');
const { ScrollView, Platform, Clipboard, Keyboard, View, TextInput, StyleSheet, Linking, Image, Share } = require('react-native');
const { ScrollView, Platform, Clipboard, Keyboard, View, TextInput, StyleSheet, Linking, Image, Share, Dimensions } = require('react-native');
const { connect } = require('react-redux');
const { uuid } = require('lib/uuid.js');
const { MarkdownEditor } = require('../../../MarkdownEditor/index.js');
@ -210,12 +210,17 @@ class NoteScreenComponent extends BaseScreenComponent {
if (this.styles_[cacheKey]) return this.styles_[cacheKey];
this.styles_ = {};
const dimensions = Dimensions.get('window');
// TODO: Clean up these style names and nesting
const styles = {
bodyTextInput: {
flex: 1,
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
// Add extra space to allow scrolling past end of document, and also to fix this:
// https://github.com/laurent22/joplin/issues/1437
paddingBottom: Math.round(dimensions.height / 4),
textAlignVertical: 'top',
color: theme.color,
backgroundColor: theme.backgroundColor,
@ -884,7 +889,7 @@ class NoteScreenComponent extends BaseScreenComponent {
webViewStyle={theme}
// Extra bottom padding to make it possible to scroll past the
// action button (so that it doesn't overlap the text)
paddingBottom='3.8em'
paddingBottom="150"
note={note}
noteResources={this.state.noteResources}
highlightedKeywords={keywords}

11
ReactNativeClient/lib/joplin-renderer/noteStyle.js
View File

@ -1,3 +1,10 @@
function formatCssSize(v) {
if (typeof v === 'string') {
if (v.includes('px') || v.includes('em') || v.includes('%')) return v;
}
return `${v}px`;
}
module.exports = function(theme) {
theme = theme ? theme : {};
@ -18,8 +25,8 @@ module.exports = function(theme) {
line-height: ${theme.htmlLineHeight};
background-color: ${theme.htmlBackgroundColor};
font-family: ${fontFamily};
padding-bottom: ${theme.bodyPaddingBottom}px;
padding-top: ${theme.bodyPaddingTop}px;
padding-bottom: ${formatCssSize(theme.bodyPaddingBottom)};
padding-top: ${formatCssSize(theme.bodyPaddingTop)};
}
strong {
color: ${theme.colorBright};