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

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
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(); this.forceUpdate();
}, 100); }, 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, highlightedKeywords: this.props.highlightedKeywords,
resources: this.props.noteResources, // await shared.attachedResources(bodyToRender), resources: this.props.noteResources, // await shared.attachedResources(bodyToRender),
codeTheme: theme.codeThemeCss, codeTheme: theme.codeThemeCss,
@@ -67,7 +65,8 @@ class NoteBodyViewer extends Component {
note.markup_language, note.markup_language,
bodyToRender, 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, ...this.props.webViewStyle,
}, },
mdOptions mdOptions

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

@@ -1,5 +1,5 @@
const React = require('react'); 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 { connect } = require('react-redux');
const { uuid } = require('lib/uuid.js'); const { uuid } = require('lib/uuid.js');
const { MarkdownEditor } = require('../../../MarkdownEditor/index.js'); const { MarkdownEditor } = require('../../../MarkdownEditor/index.js');
@@ -210,12 +210,17 @@ class NoteScreenComponent extends BaseScreenComponent {
if (this.styles_[cacheKey]) return this.styles_[cacheKey]; if (this.styles_[cacheKey]) return this.styles_[cacheKey];
this.styles_ = {}; this.styles_ = {};
const dimensions = Dimensions.get('window');
// TODO: Clean up these style names and nesting // TODO: Clean up these style names and nesting
const styles = { const styles = {
bodyTextInput: { bodyTextInput: {
flex: 1, flex: 1,
paddingLeft: theme.marginLeft, paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight, 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', textAlignVertical: 'top',
color: theme.color, color: theme.color,
backgroundColor: theme.backgroundColor, backgroundColor: theme.backgroundColor,
@@ -884,7 +889,7 @@ class NoteScreenComponent extends BaseScreenComponent {
webViewStyle={theme} webViewStyle={theme}
// Extra bottom padding to make it possible to scroll past the // Extra bottom padding to make it possible to scroll past the
// action button (so that it doesn't overlap the text) // action button (so that it doesn't overlap the text)
paddingBottom='3.8em' paddingBottom="150"
note={note} note={note}
noteResources={this.state.noteResources} noteResources={this.state.noteResources}
highlightedKeywords={keywords} 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) { module.exports = function(theme) {
theme = theme ? theme : {}; theme = theme ? theme : {};
@@ -18,8 +25,8 @@ module.exports = function(theme) {
line-height: ${theme.htmlLineHeight}; line-height: ${theme.htmlLineHeight};
background-color: ${theme.htmlBackgroundColor}; background-color: ${theme.htmlBackgroundColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
padding-bottom: ${theme.bodyPaddingBottom}px; padding-bottom: ${formatCssSize(theme.bodyPaddingBottom)};
padding-top: ${theme.bodyPaddingTop}px; padding-top: ${formatCssSize(theme.bodyPaddingTop)};
} }
strong { strong {
color: ${theme.colorBright}; color: ${theme.colorBright};