Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-29 00:20:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

mobile: fix multi window mode on iPads (#1424)

Browse Source
This commit is contained in:
Ammar Ahmed
2022-12-05 14:48:42 +05:00
committed by GitHub
parent b65761f9da
commit 6b601afe0f
4 changed files with 93 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/mobile/app/components/list/card.js
View File

@@ -47,7 +47,7 @@ export const Card = ({ color, warning }) => {
width: "95%",
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-start",
justifyContent: "space-between",
paddingHorizontal: 0
}}
>
@@ -59,7 +59,6 @@ export const Card = ({ color, warning }) => {
? hexToRGBA(colors.red, 0.15)
: hexToRGBA(color, 0.15),
height: 40,
marginLeft: 10,
borderRadius: 100,
alignItems: "center",
justifyContent: "center"
@@ -77,7 +76,8 @@ export const Card = ({ color, warning }) => {
<View
style={{
marginLeft: 10,
maxWidth: "70%"
flexShrink: 1,
marginRight: 10
}}
>
<Paragraph color={colors.icon} size={SIZE.xs}>
@@ -85,7 +85,8 @@ export const Card = ({ color, warning }) => {
</Paragraph>
<Paragraph
style={{
maxWidth: "100%"
flexWrap: "wrap",
flexShrink: 1
}}
color={colors.heading}
>
@@ -98,9 +99,7 @@ export const Card = ({ color, warning }) => {
width: 40,
height: 40,
justifyContent: "center",
alignItems: "center",
position: "absolute",
right: 6
alignItems: "center"
}}
>
<Icon

38
apps/mobile/app/components/tabs/index.tsx
View File

@@ -51,12 +51,12 @@ interface TabProps extends ViewProps {
}
export interface TabsRef {
goToPage: (page: number, animated?:boolean) => void;
goToIndex: (index: number) => 0 | undefined;
goToPage: (page: number, animated?: boolean) => void;
goToIndex: (index: number, animated?: boolean) => 0 | undefined;
unlock: () => boolean;
lock: () => boolean;
openDrawer: () => void;
closeDrawer: () => void;
openDrawer: (animated: boolean) => void;
closeDrawer: (animated: boolean) => void;
page: number;
setScrollEnabled: () => true;
isDrawerOpen: () => boolean;
@@ -149,7 +149,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
(): TabsRef => ({
goToPage: (page: number, animated = true) => {
if (deviceMode === "tablet") {
translateX.value = withTiming(0);
translateX.value = animated ? withTiming(0) : 0;
return;
}
page = page + 1;
@@ -167,20 +167,22 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
currentTab.value = 2;
}
},
goToIndex: (index: number) => {
goToIndex: (index: number, animated = true) => {
if (deviceMode === "tablet") {
translateX.value = withTiming(0);
translateX.value = animated ? withTiming(0) : 0;
return;
}
if (index === 0) {
onDrawerStateChange(true);
return (translateX.value = withSpring(0));
return (translateX.value = animated ? withSpring(0) : 0);
}
if (index === 1) {
translateX.value = withTiming(homePosition);
translateX.value = animated ? withTiming(homePosition) : homePosition;
currentTab.value = 1;
} else if (index === 2) {
translateX.value = withTiming(editorPosition);
translateX.value = animated
? withTiming(editorPosition)
: editorPosition;
currentTab.value = 2;
}
},
@@ -193,19 +195,21 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
return true;
},
isDrawerOpen: () => isDrawerOpen.value,
openDrawer: () => {
translateX.value = withSpring(drawerPosition, {
mass: 0.5
});
openDrawer: (animated = true) => {
translateX.value = animated
? withSpring(drawerPosition, {
mass: 0.5
})
: drawerPosition;
isDrawerOpen.value = true;
onDrawerStateChange(true);
},
closeDrawer: () => {
closeDrawer: (animated = true) => {
if (deviceMode === "tablet") {
translateX.value = withTiming(0);
translateX.value = animated ? withTiming(0) : 0;
return;
}
translateX.value = withTiming(homePosition);
translateX.value = animated ? withTiming(homePosition) : homePosition;
onDrawerStateChange(false);
isDrawerOpen.value = false;
},

3
apps/mobile/app/hooks/use-is-floating-keyboard.ts
View File

@@ -29,10 +29,9 @@ const useIsFloatingKeyboard = () => {
const { width } = useWindowDimensions();
const [floating, setFloating] = useState<boolean>(false);
const onKeyboardWillChangeFrame = useCallback(
(event: KeyboardEvent) => {
setFloating(event.endCoordinates.width !== width);
setFloating(event.endCoordinates.width < width);
},
[width]
);

123
apps/mobile/app/navigation/tabs-holder.js
View File

@@ -133,7 +133,7 @@ const _TabsHolder = () => {
const showFullScreenEditor = useCallback(() => {
setFullscreen(true);
if (deviceMode === "smallTablet") {
tabBarRef.current?.openDrawer();
tabBarRef.current?.openDrawer(false);
}
editorRef.current?.setNativeProps({
style: {
@@ -147,30 +147,36 @@ const _TabsHolder = () => {
});
}, [deviceMode, dimensions.width, setFullscreen]);
const closeFullScreenEditor = useCallback(() => {
if (deviceMode === "smallTablet") {
tabBarRef.current?.closeDrawer();
}
setFullscreen(false);
editorController.current?.commands.updateSettings({
fullscreen: false
});
editorRef.current?.setNativeProps({
style: {
width:
deviceMode === "smallTablet"
? dimensions.width - valueLimiter(dimensions.width * 0.4, 300, 450)
: dimensions.width * 0.55,
zIndex: null,
paddingHorizontal: 0
const closeFullScreenEditor = useCallback(
(current) => {
const _deviceMode = current || deviceMode;
if (_deviceMode === "smallTablet") {
tabBarRef.current?.closeDrawer(false);
}
});
if (deviceMode === "smallTablet") {
setTimeout(() => {
tabBarRef.current?.goToIndex(1);
}, 100);
}
}, [deviceMode, dimensions.width, setFullscreen]);
setFullscreen(false);
editorController.current?.commands.updateSettings({
fullscreen: false
});
editorRef.current?.setNativeProps({
style: {
width:
_deviceMode === "smallTablet"
? dimensions.width -
valueLimiter(dimensions.width * 0.4, 300, 450)
: dimensions.width * 0.55,
zIndex: null,
paddingHorizontal: 0
}
});
if (_deviceMode === "smallTablet") {
tabBarRef.current?.goToIndex(1, false);
}
if (_deviceMode === "mobile") {
tabBarRef.current?.goToIndex(2, false);
}
},
[deviceMode, dimensions.width, setFullscreen]
);
useEffect(() => {
if (!tabBarRef.current?.isDrawerOpen()) {
@@ -205,9 +211,7 @@ const _TabsHolder = () => {
return;
}
layoutTimer = setTimeout(async () => {
checkDeviceType(size);
}, 500);
checkDeviceType(size);
};
function checkDeviceType(size) {
@@ -217,32 +221,19 @@ const _TabsHolder = () => {
});
setWidthHeight(size);
DDS.setSize(size, orientation);
if (DDS.isLargeTablet()) {
setDeviceMode("tablet", size);
setTimeout(() => {
introCompleted && tabBarRef.current?.goToIndex(0);
}, 500);
} else if (DDS.isSmallTab) {
setDeviceMode("smallTablet", size);
if (!fullscreen) {
setTimeout(() => {
introCompleted && tabBarRef.current?.closeDrawer();
}, 500);
} else {
setTimeout(() => {
introCompleted && tabBarRef.current?.openDrawer();
}, 500);
}
} else {
setDeviceMode("mobile", size);
}
const nextDeviceMode = DDS.isLargeTablet()
? "tablet"
: DDS.isSmallTab
? "smallTablet"
: "mobile";
setDeviceMode(nextDeviceMode, size);
}
function setDeviceMode(current, size) {
setDeviceModeState(current);
let needsUpdate = current !== deviceMode;
if (fullscreen) {
if (fullscreen && current !== "mobile") {
editorRef.current?.setNativeProps({
style: {
width: size.width,
@@ -252,6 +243,7 @@ const _TabsHolder = () => {
}
});
} else {
eSendEvent(eCloseFullscreenEditor, current);
editorRef.current?.setNativeProps({
style: {
position: "relative",
@@ -270,14 +262,24 @@ const _TabsHolder = () => {
return;
}
setTimeout(() => {
if (current === "tablet") {
tabBarRef.current?.goToIndex(0);
} else {
if (!editorState().movedAway) {
tabBarRef.current?.goToIndex(2);
} else {
tabBarRef.current?.goToIndex(1);
}
switch (current) {
case "tablet":
introCompleted && tabBarRef.current?.goToIndex(0, false);
break;
case "smallTablet":
if (!fullscreen) {
introCompleted && tabBarRef.current?.closeDrawer(false);
} else {
introCompleted && tabBarRef.current?.openDrawer(false);
}
break;
case "mobile":
if (!editorState().movedAway && useEditorStore.getState().currentEditingNote) {
tabBarRef.current?.goToIndex(2, false);
} else {
tabBarRef.current?.goToIndex(1, false);
}
break;
}
}, 1);
}
@@ -340,7 +342,6 @@ const _TabsHolder = () => {
c: 0
}
};
const widths = {
mobile: {
a: dimensions.width * 0.75,
@@ -353,9 +354,15 @@ const _TabsHolder = () => {
c: dimensions.width - valueLimiter(dimensions.width * 0.4, 300, 450)
},
tablet: {
a: dimensions.width * 0.15,
a:
dimensions.width > 1100
? dimensions.width * 0.15
: dimensions.width * 0.2,
b: dimensions.width * 0.3,
c: dimensions.width * 0.55
c:
dimensions.width > 1100
? dimensions.width * 0.55
: dimensions.width * 0.5
}
};