From 62346575f84f03f20e63f29353d845e0978083ec Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Fri, 9 Sep 2022 07:11:58 -0700 Subject: [PATCH] iOS: Fixes #6805: Add button to reduce space below markdown toolbar (#6823) --- .eslintignore | 3 + .gitignore | 3 + .../MarkdownToolbar/MarkdownToolbar.tsx | 24 +++-- .../MarkdownToolbar/ToggleSpaceButton.tsx | 96 +++++++++++++++++++ .../NoteEditor/MarkdownToolbar/Toolbar.tsx | 9 +- .../MarkdownToolbar/ToolbarOverflowRows.tsx | 1 + packages/lib/models/Setting.ts | 15 +++ 7 files changed, 135 insertions(+), 16 deletions(-) create mode 100644 packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.tsx diff --git a/.eslintignore b/.eslintignore index 8eeec7b111..289fbaba2a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -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 diff --git a/.gitignore b/.gitignore index ddd1fea070..161850457c 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.tsx b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.tsx index b189d1a9e3..da567aa95d 100644 --- a/packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.tsx +++ b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.tsx @@ -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 ( - <> + { }, ]} /> - - - + ); }; 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: { diff --git a/packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.tsx b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.tsx new file mode 100644 index 0000000000..e1f316fd42 --- /dev/null +++ b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToggleSpaceButton.tsx @@ -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 = ( + <> + + + + + + ); + + const style: ViewStyle = { + marginBottom: props.spaceApplicable ? additionalSpace : 0, + ...props.style, + }; + + return ( + + {props.children} + { decreaseSpaceBtnVisible && props.spaceApplicable ? decreaseSpaceButton : null } + + ); +}; + +export default ToggleSpaceButton; diff --git a/packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.tsx b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.tsx index 0da4227b03..be1d752386 100644 --- a/packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.tsx +++ b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/Toolbar.tsx @@ -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 = ( - {!overflowButtonsVisible ? mainButtons : null } + { mainButtons } ); @@ -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 } + { !overflowButtonsVisible ? mainButtonRow : null } ); }; diff --git a/packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToolbarOverflowRows.tsx b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToolbarOverflowRows.tsx index c0b5d64f1e..1b12fd8480 100644 --- a/packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToolbarOverflowRows.tsx +++ b/packages/app-mobile/components/NoteEditor/MarkdownToolbar/ToolbarOverflowRows.tsx @@ -111,6 +111,7 @@ const ToolbarOverflowRows = (props: OverflowPopupProps) => { style={{ height: props.buttonGroups.length * buttonSize, flexDirection: 'column', + flexGrow: 1, }} onLayout={onContainerLayout} > diff --git a/packages/lib/models/Setting.ts b/packages/lib/models/Setting.ts index 9540e671c2..45a9421d25 100644 --- a/packages/lib/models/Setting.ts +++ b/packages/lib/models/Setting.ts @@ -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,