mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix nav menu overlapping tab bar

Browse source 
Also allow custom padding into safeBoundingBoxPadding function
This commit is contained in:
Lim Chee Aun 2023-06-15 18:03:37 +08:00
parent d75a9191fc
commit 8d35d476e3
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/nav-menu.jsx
View file

@ -6,6 +6,7 @@ import { useLongPress } from 'use-long-press';
import { useSnapshot } from 'valtio';
import { api } from '../utils/api';
import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
import states from '../utils/states';
import store from '../utils/store';
@ -52,6 +53,13 @@ function NavMenu(props) {
const buttonRef = useRef();
const [menuState, setMenuState] = useState(undefined);
const boundingBoxPadding = safeBoundingBoxPadding([
0,
0,
snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0,
0,
]);
return (
<>
<button
@ -104,7 +112,7 @@ function NavMenu(props) {
viewScroll="close"
position="anchor"
align="center"
boundingBoxPadding="8 8 8 8"
boundingBoxPadding={boundingBoxPadding}
unmountOnClose
>
<section>

8
src/utils/safe-bounding-box-padding.jsx → src/utils/safe-bounding-box-padding.js
View file

@ -3,7 +3,8 @@ import mem from 'mem';
const root = document.documentElement;
const style = getComputedStyle(root);
const defaultBoundingBoxPadding = 8;
function _safeBoundingBoxPadding() {
function _safeBoundingBoxPadding(paddings = []) {
// paddings = [top, right, bottom, left]
// Get safe area inset variables from root
const safeAreaInsetTop = style.getPropertyValue('--sai-top');
const safeAreaInsetRight = style.getPropertyValue('--sai-right');
@ -15,7 +16,10 @@ function _safeBoundingBoxPadding() {
safeAreaInsetBottom,
safeAreaInsetLeft,
]
.map((v) => parseInt(v, 10) || defaultBoundingBoxPadding)
.map(
(v, i) =>
(parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
)
.join(' ');
// console.log(str);
return str;