Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-09-01 19:49:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

web: add support for macOS like pane resizing logic

Browse Source
This commit is contained in:
Abdullah Atta
2024-11-06 09:10:15 +05:00
committed by Abdullah Atta
parent aeebc9878d
commit 263c970320
2 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/app.tsx
View File

@@ -156,7 +156,7 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
</Flex>
) : (
!isFocusMode && (
<Pane minSize={50} snapSize={120}>
<Pane minSize={50} snapSize={120} maxSize={300}>
<NavigationMenu
toggleNavigationContainer={(state) => {
setShow(state || !show);
@@ -167,7 +167,11 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
)
)}
{!isFocusMode && show && (
<Pane style={{ flex: 1, display: "flex" }} snapSize={200}>
<Pane
style={{ flex: 1, display: "flex" }}
snapSize={200}
maxSize={500}
>
<ScopedThemeProvider
className="listMenu"
scope="list"

32
apps/web/src/components/split-pane/index.tsx
View File

@@ -228,7 +228,10 @@ export const SplitPane = React.forwardRef<
);
const onDragging = useCallback(
function (e: React.MouseEvent<HTMLDivElement, MouseEvent>, i: number) {
function onDragging(
e: React.MouseEvent<HTMLDivElement, MouseEvent>,
i: number
) {
const curAxis = { x: e.pageX, y: e.pageY };
let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
axis.current = { x: e.pageX, y: e.pageY };
@@ -241,16 +244,29 @@ export const SplitPane = React.forwardRef<
if (currentSize + distanceX >= rightBorder)
distanceX = rightBorder - currentSize;
if (currentSize + distanceX < currentPaneLimits.min) return;
if (currentSize + distanceX > currentPaneLimits.max) return;
const nextSizes = [...sizes.current];
// if current pane size is out of limit, adjust the previous pane
if (
currentSize + distanceX > currentPaneLimits.max ||
currentSize + distanceX < currentPaneLimits.min
) {
if (i - 1 >= 0) {
// reset axis
axis.current[splitAxis] += -distanceX;
onDragging(e, i - 1);
}
return;
}
nextSizes[i] += distanceX;
nextSizes[i + 1] -= distanceX;
if (nextSizes[i + 1] < nextPaneLimits.min)
nextSizes[i + 1] = nextPaneLimits.min;
// keep the next pane size in the min-max range
nextSizes[i + 1] = Math.min(
nextPaneLimits.max,
Math.max(nextPaneLimits.min, nextSizes[i + 1] - distanceX)
);
// snapping logic
if (currentPaneLimits.snap > 0 && distanceX <= 0) {
if (nextSizes[i] <= currentPaneLimits.snap / 2)
nextSizes[i] = currentPaneLimits.min;