From 4b787cc8f92504d9df3da4e109371d0c4623fee4 Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Mon, 26 Aug 2024 14:09:32 +0300 Subject: [PATCH] [MOB-116] Fix Drawer appearing & visual improvements (#2691) * Fixes, visual improvements, and more * rename const --- .../src/components/explorer/FileRow.tsx | 18 ++--- .../src/components/locations/GridLocation.tsx | 2 +- .../src/components/overview/Locations.tsx | 1 + .../src/components/overview/StatCard.tsx | 50 ++++++++---- .../mobile/src/navigation/DrawerNavigator.tsx | 2 +- apps/mobile/src/screens/browse/Location.tsx | 2 +- package.json | 3 +- .../@react-navigation__drawer@6.6.15.patch | 71 ++++++++++++++++++ pnpm-lock.yaml | Bin 1050377 -> 1049984 bytes 9 files changed, 120 insertions(+), 29 deletions(-) create mode 100644 patches/@react-navigation__drawer@6.6.15.patch diff --git a/apps/mobile/src/components/explorer/FileRow.tsx b/apps/mobile/src/components/explorer/FileRow.tsx index 4d0d0f940..4ce21d22a 100644 --- a/apps/mobile/src/components/explorer/FileRow.tsx +++ b/apps/mobile/src/components/explorer/FileRow.tsx @@ -36,16 +36,14 @@ const FileRow = ({ data, onLongPress, onPress, renameHandler }: FileRowProps) => - - - - {filePath?.name} - {filePath?.extension && `.${filePath.extension}`} - - + + + {filePath?.name} + {filePath?.extension && `.${filePath.extension}`} + = ({ location, modalRef }: GridL - + {`${humanizeSize(location.size_in_bytes)}`} diff --git a/apps/mobile/src/components/overview/Locations.tsx b/apps/mobile/src/components/overview/Locations.tsx index 1eb65a449..f6e58bc1f 100644 --- a/apps/mobile/src/components/overview/Locations.tsx +++ b/apps/mobile/src/components/overview/Locations.tsx @@ -68,6 +68,7 @@ const Locations = () => { > { +const infoBox = tw`rounded border border-app-lightborder/50 bg-app-highlight/50 px-1.5 py-px`; + +const StatCard = ({ icon, name, connectionType, type, ...stats }: StatCardProps) => { const [mounted, setMounted] = useState(false); const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => { @@ -35,7 +38,8 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => { const progress = useMemo(() => { if (!mounted || totalSpace.bytes === 0n) return 0; - return Math.floor((usedSpaceSpace.value / totalSpace.value) * 100); + // Calculate progress using raw bytes to avoid unit conversion issues + return Math.floor((Number(usedSpaceSpace.bytes) / Number(totalSpace.bytes)) * 100); }, [mounted, totalSpace, usedSpaceSpace]); return ( @@ -47,18 +51,26 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => { size={90} width={7} rotation={0} - fill={usedSpaceSpace.value} + fill={progress} lineCap="round" backgroundColor={tw.color('ink-light/5')} - tintColor={progress > 90 ? '#E14444' : '#2599FF'} + tintColor={ + progress >= 90 + ? '#E14444' + : progress >= 75 + ? 'darkorange' + : progress >= 60 + ? 'yellow' + : '#2599FF' + } style={tw`flex items-center justify-center`} > - {(fill) => ( + {() => ( - {fill.toFixed(0)} + {usedSpaceSpace.value} {usedSpaceSpace.unit} @@ -70,22 +82,30 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => { )} - + {name} - - {freeSpace.value} - {freeSpace.unit} free of {totalSpace.value} - {totalSpace.unit} - + {type !== 'location' && ( + + {freeSpace.value} + {freeSpace.unit} free of {totalSpace.value} + {totalSpace.unit} + + )} - + {type === 'location' && ( + + + {totalSpace.value} + {totalSpace.unit} + + + )} + {connectionType || 'Local'} diff --git a/apps/mobile/src/navigation/DrawerNavigator.tsx b/apps/mobile/src/navigation/DrawerNavigator.tsx index 51d191b6e..a72b4b867 100644 --- a/apps/mobile/src/navigation/DrawerNavigator.tsx +++ b/apps/mobile/src/navigation/DrawerNavigator.tsx @@ -26,7 +26,7 @@ export default function DrawerNavigator() { drawerType: 'slide', swipeEdgeWidth: 50 }} - drawerContent={(props) => } + drawerContent={(props) => } > diff --git a/apps/mobile/src/screens/browse/Location.tsx b/apps/mobile/src/screens/browse/Location.tsx index 2018ffade..81f9a152c 100644 --- a/apps/mobile/src/screens/browse/Location.tsx +++ b/apps/mobile/src/screens/browse/Location.tsx @@ -59,7 +59,7 @@ export default function LocationScreen({ navigation, route }: BrowseStackScreenP const paths = usePathsExplorerQuery({ arg: { - filters: [...defaultFilters, ...layoutFilter].filter(Boolean) as any, + filters: [...defaultFilters, ...layoutFilter].filter(Boolean), take: 30 }, order, diff --git a/package.json b/package.json index 99700424d..c8e4eb4ba 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "@remix-run/router@1.13.1": "patches/@remix-run__router@1.13.1.patch", "@contentlayer/cli@0.3.4": "patches/@contentlayer__cli@0.3.4.patch", "@oscartbeaumont-sd/rspc-tauri@0.0.0-main-dc31e5b2": "patches/@oscartbeaumont-sd__rspc-tauri@0.0.0-main-dc31e5b2.patch", - "tailwindcss-animate@1.0.7": "patches/tailwindcss-animate@1.0.7.patch" + "tailwindcss-animate@1.0.7": "patches/tailwindcss-animate@1.0.7.patch", + "@react-navigation/drawer@6.6.15": "patches/@react-navigation__drawer@6.6.15.patch" }, "overrides": { "@types/node": ">18.18.x", diff --git a/patches/@react-navigation__drawer@6.6.15.patch b/patches/@react-navigation__drawer@6.6.15.patch new file mode 100644 index 000000000..fa4c115a9 --- /dev/null +++ b/patches/@react-navigation__drawer@6.6.15.patch @@ -0,0 +1,71 @@ +diff --git a/src/views/modern/Drawer.tsx b/src/views/modern/Drawer.tsx +index 9909e9698e51379de6469eb2053a1432636d0c7d..220fa07f6784c5da13e6949e9c4893e015a5d1f8 100644 +--- a/src/views/modern/Drawer.tsx ++++ b/src/views/modern/Drawer.tsx +@@ -1,26 +1,27 @@ + import * as React from 'react'; + import { +- I18nManager, +- InteractionManager, +- Keyboard, +- Platform, +- StatusBar, +- StyleSheet, +- View, ++ Dimensions, ++ I18nManager, ++ InteractionManager, ++ Keyboard, ++ Platform, ++ StatusBar, ++ StyleSheet, ++ View, + } from 'react-native'; + import { +- PanGestureHandler, +- PanGestureHandlerGestureEvent, +- State as GestureState, ++ PanGestureHandler, ++ PanGestureHandlerGestureEvent, ++ State as GestureState, + } from 'react-native-gesture-handler'; + import Animated, { +- interpolate, +- runOnJS, +- useAnimatedGestureHandler, +- useAnimatedStyle, +- useDerivedValue, +- useSharedValue, +- withSpring, ++ interpolate, ++ runOnJS, ++ useAnimatedGestureHandler, ++ useAnimatedStyle, ++ useDerivedValue, ++ useSharedValue, ++ withSpring, + } from 'react-native-reanimated'; + + import type { DrawerProps } from '../../types'; +@@ -72,7 +73,8 @@ export default function Drawer({ + const percentage = Number(width.replace(/%$/, '')); + + if (Number.isFinite(percentage)) { +- return dimensions.width * (percentage / 100); ++ const dimensionsWidth = Dimensions.get("screen").width ++ return dimensionsWidth * (percentage / 100); + } + } + +@@ -283,9 +285,10 @@ export default function Drawer({ + return translateX; + }); + ++ const dimensionsWidth = Dimensions.get("screen").width; + const isRTL = I18nManager.getConstants().isRTL; + const drawerAnimatedStyle = useAnimatedStyle(() => { +- const distanceFromEdge = dimensions.width - drawerWidth; ++ const distanceFromEdge = dimensionsWidth - drawerWidth; + + return { + transform: diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5589091fc382c62732c73e0570eb45192a019766..04cae94f1d1eaf099472b28cbc76a7ecafd1da23 100644 GIT binary patch delta 1384 zcma)6T})eL7|uCeY5RTW>mkkfOV^cBhAd;0pEBy$vXh|Tj3QAqdNHBdq^%G@2G;2| z=T9U`god;3iCd)gFT0`2R^#WAP0EciY8)3cA~B)Si+Qmu-eKYr{Z3DY*`ir5p5%SM z^Ssad=6&9rw`a6d)7oO6jEz-U#lx%eR&O+XG`hEXe6lszJ{&z3oP0hWd3iKC)E=Ka zI&`ExuFuL9{_x?6-6P=_W0CMgY;>f*|Hyba{@l2>r*ThXb6ewBc;avr-W#$%J0|~5 zQ2Up&S=S~U*&JJR;O`9Wkaog%j@2MtqT2E8E$T)7Q(9{h({2@7mc9h-61C}xs+0Gs z_$cl6)D?R68?*2K-_e6Rv#F5WT4-}|xT17(F#Xlzm&_#JVav{+(CvjRn|SLx#eB~_ zQLeA(8=Dnx1d>yMq$D5>-UMxN?2eI%0 zS%*7KJ})RD_Y-Zn<72P+p2(6iKKdbP`_0TX4{;;$CJkaKrj|iFCzcjmrhaIDkbS&z zihf0k+=QMAZNsm94i8p#Q9ECmrh^uKJV{?DyVtsPVGy5Lpq)|?%yPVPlWgVhenwq# z5p2A7_bI~USxS(5gl^};mFusW=OS)OpFdHLQ_IAIz(a}yS38yI zO@j~M&j*y7;zoQ01{aKwq~}|nG8wn4t{FzxcYnvx*NSeC~kNY z%x6yb^9*Y@XIiCd1rE)!ZltfPTTs_PT>ShjTeF~Zjx`%~9xTnVKBLZxDwnhMUm|`S zv{vB2W!ei3Y#eKYR+o|b?rdi*sN!_QT8e?wERXjhR%%3d@ocD0vP$&DNICCFvbc=( zGpyymw0H*0YsJa0l^Rs9kt*KyK6_fad)+N5quQ|GY>I`<=vWWA?|dN5Bs|)nmg7Q( z_MnG2O_?bnBczMUVCHB{Ofn_syI4zUd!| z4rZd$rv&r8;KFn%(mXnkyi_xMu-Ha4vsTGTV2sEi7#G9Q#G-lE|E&_5hjGAs+4!Zwmg3i!nV&Cc+CKpw4JBvoJ>>kT9De2T9y8k4 z;_;@E!ndyA$Q48pw6vFR*6iSfEL0klDG*s3uZ!>xPr3M{TE`$6wO1XfGc z(^hYH!qOcqvbkA2H?ZCKZBs!sMuMXeGGrfdV{Oef44VV|kL=>~lqCn0_YapSa*kb`#ixzpYlVcwV=JI=1&lvkYK&&XlxX%FF1M*a?M=iLg6 zX5}t{1*z