mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 01:05:34 +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 { useSnapshot } from 'valtio';
import { api } from '../utils/api'; import { api } from '../utils/api';
import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
import states from '../utils/states'; import states from '../utils/states';
import store from '../utils/store'; import store from '../utils/store';
@ -52,6 +53,13 @@ function NavMenu(props) {
const buttonRef = useRef(); const buttonRef = useRef();
const [menuState, setMenuState] = useState(undefined); const [menuState, setMenuState] = useState(undefined);
const boundingBoxPadding = safeBoundingBoxPadding([
0,
0,
snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0,
0,
]);
return ( return (
<> <>
<button <button
@ -104,7 +112,7 @@ function NavMenu(props) {
viewScroll="close" viewScroll="close"
position="anchor" position="anchor"
align="center" align="center"
boundingBoxPadding="8 8 8 8" boundingBoxPadding={boundingBoxPadding}
unmountOnClose unmountOnClose
> >
<section> <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 root = document.documentElement;
const style = getComputedStyle(root); const style = getComputedStyle(root);
const defaultBoundingBoxPadding = 8; const defaultBoundingBoxPadding = 8;
function _safeBoundingBoxPadding() { function _safeBoundingBoxPadding(paddings = []) {
// paddings = [top, right, bottom, left]
// Get safe area inset variables from root // Get safe area inset variables from root
const safeAreaInsetTop = style.getPropertyValue('--sai-top'); const safeAreaInsetTop = style.getPropertyValue('--sai-top');
const safeAreaInsetRight = style.getPropertyValue('--sai-right'); const safeAreaInsetRight = style.getPropertyValue('--sai-right');
@ -15,7 +16,10 @@ function _safeBoundingBoxPadding() {
safeAreaInsetBottom, safeAreaInsetBottom,
safeAreaInsetLeft, safeAreaInsetLeft,
] ]
.map((v) => parseInt(v, 10) || defaultBoundingBoxPadding) .map(
(v, i) =>
(parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
)
.join(' '); .join(' ');
// console.log(str); // console.log(str);
return str; return str;