self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-02-19 20:00:20 +02:00
Code Issues Releases Activity

iOS: Fixes #6805: Add button to reduce space below markdown toolbar (#6823)

Browse Source
This commit is contained in:
Henry Heino 2022-09-09 07:11:58 -07:00 committed by GitHub
parent 0a590b7de9
commit 62346575f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 135 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintignore
View File

@ -921,6 +921,9 @@ packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.js.map
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleOverflowButton.d.ts
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleOverflowButton.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleOverflowButton.js.map
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.d.ts
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.js.map
packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.d.ts
packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.js.map

3
.gitignore vendored
View File

@ -909,6 +909,9 @@ packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.js.map
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleOverflowButton.d.ts
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleOverflowButton.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleOverflowButton.js.map
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.d.ts
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.js.map
packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.d.ts
packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.js.map

24
packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.tsx
View File

@ -1,7 +1,7 @@
// A toolbar for the markdown editor.
const React = require('react');
import { Platform, StyleSheet, View } from 'react-native';
import { Platform, StyleSheet } from 'react-native';
import { useMemo, useState, useCallback } from 'react';
// See https://oblador.github.io/react-native-vector-icons/ for a list of
@ -20,6 +20,7 @@ import { ButtonSpec, StyleSheetData } from './types';
import Toolbar from './Toolbar';
import { buttonSize } from './ToolbarButton';
import { Theme } from '@joplin/lib/themes/type';
import ToggleSpaceButton from './ToggleSpaceButton';
type OnAttachCallback = ()=> void;
@ -277,7 +278,11 @@ const MarkdownToolbar = (props: MarkdownToolbarProps) => {
};
return (
<>
<ToggleSpaceButton
spaceApplicable={ Platform.OS === 'ios' && keyboardVisible }
themeId={props.editorSettings.themeId}
style={styles.container}
>
<Toolbar
styleSheet={styleData}
buttons={[
@ -299,21 +304,16 @@ const MarkdownToolbar = (props: MarkdownToolbarProps) => {
},
]}
/>
<View style={{
// The keyboard on iOS can overlap the markdown toolbar.
// Add additional padding to prevent this.
height: (
Platform.OS === 'ios' && keyboardVisible ? 16 : 0
),
}}/>
</>
</ToggleSpaceButton>
);
};
const useStyles = (styleProps: any, theme: Theme) => {
return useMemo(() => {
return StyleSheet.create({
container: {
...styleProps,
},
button: {
width: buttonSize,
height: buttonSize,
@ -348,10 +348,8 @@ const useStyles = (styleProps: any, theme: Theme) => {
// Add a small amount of additional padding for button borders
height: buttonSize + 6,
...styleProps,
},
toolbarContainer: {
maxHeight: '65%',
flexShrink: 1,
},
toolbarContent: {

96
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.tsx Normal file
View File

@ -0,0 +1,96 @@
// On some devices, the SafeAreaView conflicts with the KeyboardAvoidingView, creating
// additional (or a lack of additional) space at the bottom of the screen. Because this
// is different on different devices, this button allows toggling additional space a the bottom
// of the screen to compensate.
// Works around https://github.com/facebook/react-native/issues/13393 by adding additional
// space below the given component when the keyboard is visible unless a button is pressed.
import Setting from '@joplin/lib/models/Setting';
import { themeStyle } from '@joplin/lib/theme';
import { Theme } from '@joplin/lib/themes/type';
import * as React from 'react';
import { ReactNode, useCallback, useState, useEffect } from 'react';
import { View, ViewStyle } from 'react-native';
import CustomButton from '../../CustomButton';
const AntIcon = require('react-native-vector-icons/AntDesign').default;
interface Props {
children: ReactNode;
spaceApplicable: boolean;
themeId: number;
style?: ViewStyle;
}
const ToggleSpaceButton = (props: Props) => {
const [additionalSpace, setAdditionalSpace] = useState(0);
const [decreaseSpaceBtnVisible, setDecreaseSpaceBtnVisible] = useState(true);
// Some devices need space added, others need space removed.
const additionalPositiveSpace = 14;
const additionalNegativeSpace = -14;
// Switch from adding +14px to -14px.
const onDecreaseSpace = useCallback(() => {
setAdditionalSpace(additionalNegativeSpace);
setDecreaseSpaceBtnVisible(false);
Setting.setValue('editor.mobile.removeSpaceBelowToolbar', true);
}, [setAdditionalSpace, setDecreaseSpaceBtnVisible, additionalNegativeSpace]);
useEffect(() => {
if (Setting.value('editor.mobile.removeSpaceBelowToolbar')) {
onDecreaseSpace();
}
}, [onDecreaseSpace]);
const theme: Theme = themeStyle(props.themeId);
const decreaseSpaceButton = (
<>
<View style={{
height: additionalPositiveSpace,
zIndex: -2,
}} />
<CustomButton
themeId={props.themeId}
description={'Move toolbar to bottom of screen'}
style={{
height: additionalPositiveSpace,
width: '100%',
// Ensure that the icon is near the bottom of the screen,
// and thus invisible on devices where it isn't necessary.
position: 'absolute',
bottom: 0,
// Don't show the button on top of views with content.
zIndex: -1,
alignItems: 'center',
}}
onPress={onDecreaseSpace}
>
<AntIcon name='down' style={{
color: theme.color,
}}/>
</CustomButton>
</>
);
const style: ViewStyle = {
marginBottom: props.spaceApplicable ? additionalSpace : 0,
...props.style,
};
return (
<View style={style}>
{props.children}
{ decreaseSpaceBtnVisible && props.spaceApplicable ? decreaseSpaceButton : null }
</View>
);
};
export default ToggleSpaceButton;

9
packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.tsx
View File

@ -2,7 +2,7 @@ const React = require('react');
import { _ } from '@joplin/lib/locale';
import { ReactElement, useCallback, useState } from 'react';
import { AccessibilityInfo, LayoutChangeEvent, ScrollView, View } from 'react-native';
import { AccessibilityInfo, LayoutChangeEvent, ScrollView, View, ViewStyle } from 'react-native';
import ToggleOverflowButton from './ToggleOverflowButton';
import ToolbarButton, { buttonSize } from './ToolbarButton';
import ToolbarOverflowRows from './ToolbarOverflowRows';
@ -11,6 +11,7 @@ import { ButtonGroup, ButtonSpec, StyleSheetData } from './types';
interface ToolbarProps {
buttons: ButtonGroup[];
styleSheet: StyleSheetData;
style?: ViewStyle;
}
// Displays a list of buttons with an overflow menu.
@ -88,7 +89,7 @@ const Toolbar = (props: ToolbarProps) => {
const styles = props.styleSheet.styles;
const mainButtonRow = (
<View style={styles.toolbarRow}>
{!overflowButtonsVisible ? mainButtons : null }
{ mainButtons }
</View>
);
@ -101,6 +102,8 @@ const Toolbar = (props: ToolbarProps) => {
// container. As such, we can't base the container's width on the
// size of its content.
width: '100%',
...props.style,
}}
onLayout={onContainerLayout}
>
@ -111,8 +114,8 @@ const Toolbar = (props: ToolbarProps) => {
visible={overflowButtonsVisible}
onToggleOverflow={onToggleOverflowVisible}
/>
{ !overflowButtonsVisible ? mainButtonRow : null }
</ScrollView>
{ !overflowButtonsVisible ? mainButtonRow : null }
</View>
);
};

1
packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToolbarOverflowRows.tsx
View File

@ -111,6 +111,7 @@ const ToolbarOverflowRows = (props: OverflowPopupProps) => {
style={{
height: props.buttonGroups.length * buttonSize,
flexDirection: 'column',
flexGrow: 1,
}}
onLayout={onContainerLayout}
>

15
packages/lib/models/Setting.ts
View File

@ -1039,6 +1039,21 @@ class Setting extends BaseModel {
isGlobal: true,
},
// Works around a bug in which additional space is visible beneath the toolbar on some devices.
// See https://github.com/laurent22/joplin/pull/6823
'editor.mobile.removeSpaceBelowToolbar': {
value: false,
type: SettingItemType.Bool,
section: 'note',
public: true,
appTypes: [AppType.Mobile],
show: (settings: any) => settings['editor.mobile.removeSpaceBelowToolbar'],
label: () => 'Remove extra space below the markdown toolbar',
description: () => 'Works around bug on some devices where the markdown toolbar does not touch the bottom of the screen.',
storage: SettingStorage.File,
isGlobal: true,
},
newTodoFocus: {
value: 'title',
type: SettingItemType.String,