self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
Code Issues Releases Activity

Mobile: Fixes #11276: Fix new note button is pushed offscreen on certain Android devices (#11323)

Browse Source
This commit is contained in:
Henry Heino 2024-11-08 05:01:29 -08:00 committed by GitHub
parent b3ea127848
commit 9fb104ec7c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/app-mobile/components/buttons/FloatingActionButton.tsx
View File

@ -3,7 +3,7 @@ import { useState, useCallback, useMemo } from 'react';
import { FAB, Portal } from 'react-native-paper'; import { FAB, Portal } from 'react-native-paper';
import { _ } from '@joplin/lib/locale'; import { _ } from '@joplin/lib/locale';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { Platform, useWindowDimensions, View } from 'react-native'; import { Platform, View, ViewStyle } from 'react-native';
import shim from '@joplin/lib/shim'; import shim from '@joplin/lib/shim';
import AccessibleWebMenu from '../accessibility/AccessibleModalMenu'; import AccessibleWebMenu from '../accessibility/AccessibleModalMenu';
const Icon = require('react-native-vector-icons/Ionicons').default; const Icon = require('react-native-vector-icons/Ionicons').default;
@ -71,10 +71,22 @@ const FloatingActionButton = (props: ActionButtonProps) => {
// is disabled. // is disabled.
// //
// See https://github.com/callstack/react-native-paper/issues/4064 // See https://github.com/callstack/react-native-paper/issues/4064
const windowSize = useWindowDimensions(); // May be possible to remove if https://github.com/callstack/react-native-paper/pull/4514
// is merged.
const adjustMargins = !open && shim.mobilePlatform() === 'android'; const adjustMargins = !open && shim.mobilePlatform() === 'android';
const marginTop = adjustMargins ? Math.max(0, windowSize.height - 140) : undefined; const marginStyles = useMemo((): ViewStyle => {
const marginStart = adjustMargins ? Math.max(0, windowSize.width - 200) : undefined; if (!adjustMargins) {
return {};
}
// Internally, React Native Paper uses absolute positioning to make its
// (usually invisible) view fill the screen. Setting top and left to
// undefined causes the view to take up only part of the screen.
return {
top: undefined,
left: undefined,
};
}, [adjustMargins]);
const label = props.mainButton?.label ?? _('Add new'); const label = props.mainButton?.label ?? _('Add new');
@ -92,7 +104,7 @@ const FloatingActionButton = (props: ActionButtonProps) => {
const menuContent = <FAB.Group const menuContent = <FAB.Group
open={open} open={open}
accessibilityLabel={label} accessibilityLabel={label}
style={{ marginStart, marginTop }} style={marginStyles}
icon={ open ? openIcon : closedIcon } icon={ open ? openIcon : closedIcon }
fabStyle={{ fabStyle={{
backgroundColor: props.mainButton?.color ?? 'rgba(231,76,60,1)', backgroundColor: props.mainButton?.color ?? 'rgba(231,76,60,1)',