Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-02 10:03:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MOB-82] Switch to expo image & inspector long press (#2301)

Browse source 
* open action modal on long press

* fix styling on about screen

* better/optimized image component
This commit is contained in:
Utku 2024-04-09 08:13:27 -04:00 committed by GitHub
parent 504242f97e
commit f48a91b124
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 60 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/mobile/.eslintrc.js
View file

@ -22,6 +22,11 @@ module.exports = {
importNames: ['SafeAreaView'],
message: 'Import SafeAreaView from react-native-safe-area-context instead'
},
{
name: 'react-native',
importNames: ['Image', 'ImageProps', 'ImageBackground'],
message: 'Import it from expo-image instead'
},
{
name: 'react-native-toast-message',
message: 'Import it from components instead'

1
apps/mobile/package.json
View file

@ -41,6 +41,7 @@
"expo-av": "^13.10.5",
"expo-blur": "^12.9.2",
"expo-build-properties": "~0.11.1",
"expo-image": "^1.10.6",
"expo-linking": "~6.2.2",
"expo-media-library": "~15.9.1",
"expo-splash-screen": "~0.26.4",

5
apps/mobile/src/components/drawer/DrawerContent.tsx
View file

@ -1,9 +1,10 @@
import { DrawerContentScrollView } from '@react-navigation/drawer';
import { DrawerContentComponentProps } from '@react-navigation/drawer/lib/typescript/src/types';
import { AppLogo } from '@sd/assets/images';
import { CheckCircle, Gear } from 'phosphor-react-native';
import { Image } from 'expo-image';
import { CheckCircle } from 'phosphor-react-native';
import { useRef } from 'react';
import { Image, Platform, Pressable, Text, View } from 'react-native';
import { Platform, Pressable, Text, View } from 'react-native';
import { JobManagerContextProvider, useLibraryQuery } from '@sd/client';
import Layout from '~/constants/Layout';
import { tw, twStyle } from '~/lib/tailwind';

3
apps/mobile/src/components/explorer/FileThumb.tsx
View file

@ -1,7 +1,8 @@
import { DocumentDirectoryPath } from '@dr.pogodin/react-native-fs';
import { getIcon } from '@sd/assets/util';
import { Image } from 'expo-image';
import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react';
import { Image, View } from 'react-native';
import { View } from 'react-native';
import {
getExplorerItemData,
getItemFilePath,

2
apps/mobile/src/components/icons/FolderIcon.tsx
View file

@ -1,5 +1,5 @@
import { Folder, Folder_Light } from '@sd/assets/icons';
import { Image } from 'react-native';
import { Image } from 'expo-image';
type FolderProps = {
/**

2
apps/mobile/src/components/icons/Icon.tsx
View file

@ -1,5 +1,5 @@
import { getIcon, iconNames } from '@sd/assets/util';
import { Image, ImageProps } from 'react-native';
import { Image, ImageProps } from 'expo-image';
import { ClassInput } from 'twrnc';
import { isDarkTheme } from '@sd/client';
import { twStyle } from '~/lib/tailwind';

3
apps/mobile/src/components/job/JobContainer.tsx
View file

@ -1,6 +1,7 @@
import { Image } from 'expo-image';
import { Icon } from 'phosphor-react-native';
import { Fragment } from 'react';
import { Image, Text, View, ViewStyle } from 'react-native';
import { Text, View, ViewStyle } from 'react-native';
import { TextItems } from '@sd/client';
import { styled, tw, twStyle } from '~/lib/tailwind';

5
apps/mobile/src/components/modal/inspector/ActionsModal.tsx
View file

@ -102,7 +102,10 @@ export const ActionsModal = () => {
<View style={tw`flex-1 px-4`}>
<View style={tw`flex flex-row items-center`}>
{/* Thumbnail/Icon */}
<Pressable onPress={() => fileInfoRef.current?.present()}>
<Pressable
onPress={handleOpen}
onLongPress={() => fileInfoRef.current?.present()}
>
<FileThumb data={data} size={1} />
</Pressable>
<View style={tw`ml-2 flex-1`}>

3
apps/mobile/src/screens/onboarding/GetStarted.tsx
View file

@ -2,10 +2,11 @@ import { useNavigation, useRoute } from '@react-navigation/native';
import { AppLogo, BloomOne } from '@sd/assets/images';
import { SdMobIntro } from '@sd/assets/videos';
import { ResizeMode, Video } from 'expo-av';
import { Image } from 'expo-image';
import { MotiView } from 'moti';
import { CaretLeft } from 'phosphor-react-native';
import { useEffect } from 'react';
import { Image, KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native';
import { KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native';
import Animated from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useOnboardingStore } from '@sd/client';

51
apps/mobile/src/screens/settings/info/About.tsx
View file

@ -1,6 +1,7 @@
import { Image } from 'expo-image';
import { Globe } from 'phosphor-react-native';
import React from 'react';
import { Image, Linking, Platform, Text, View } from 'react-native';
import { Linking, Platform, Text, View } from 'react-native';
import { useBridgeQuery } from '@sd/client';
import { DiscordIcon, GitHubIcon } from '~/components/icons/Brands';
import ScreenContainer from '~/components/layout/ScreenContainer';
@ -13,14 +14,14 @@ const AboutScreen = () => {
return (
<ScreenContainer style={tw`justify-start gap-0 px-6`}>
<View style={tw.style('flex flex-row items-center')}>
<View style={tw`flex flex-row items-center`}>
<Image
source={require('../../../../assets/icon.png')}
style={tw.style('mr-8 h-[88px] w-[88px] rounded-3xl')}
style={tw`mr-8 h-[88px] w-[88px] rounded-3xl`}
resizeMode="contain"
/>
<View style={tw.style('flex flex-col')}>
<Text style={tw.style('text-2xl font-bold text-white')}>
<View style={tw`flex flex-col`}>
<Text style={tw`text-2xl font-bold text-white`}>
Spacedrive{' '}
{`for ${
Platform.OS === 'android'
@ -28,56 +29,56 @@ const AboutScreen = () => {
: Platform.OS[0] + Platform.OS.slice(1).toUpperCase()
}`}
</Text>
<Text style={tw.style('mt-1 text-sm text-ink-dull')}>
<Text style={tw`mt-1 text-sm text-ink-dull`}>
The file manager from the future.
</Text>
<Text style={tw.style('mt-1 text-xs text-ink-faint/80')}>
<Text style={tw`mt-1 text-xs text-ink-faint/80`}>
v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'}
</Text>
</View>
</View>
{/* iOS has buttons falling out of the screen for some reason. So, I made the buttons veritical instead */}
<View style={tw.style('my-5 flex-col justify-between gap-2')}>
<View style={tw`my-5 flex-col justify-between gap-2`}>
{/* Discord Button */}
<Button
onPress={() => Linking.openURL('https://discord.gg/ukRnWSnAbG')}
style={tw.style('flex-row items-center')}
style={tw`flex-row items-center`}
variant="gray"
>
<View style={tw.style('h-4 w-4')}>
<View style={tw`h-4 w-4`}>
<DiscordIcon fill="white" />
</View>
<Text style={tw.style('ml-2 text-white font-bold')}>Join Discord</Text>
<Text style={tw`ml-2 font-bold text-white`}>Join Discord</Text>
</Button>
{/* GitHub Button */}
<Button
onPress={() => Linking.openURL('https://github.com/spacedriveapp/spacedrive')}
style={tw.style('flex-row items-center font-bold')}
style={tw`flex-row items-center font-bold`}
variant="accent"
>
<View style={tw.style('h-4 w-4')}>
<View style={tw`h-4 w-4`}>
<GitHubIcon fill="white" />
</View>
<Text style={tw.style('ml-2 text-white font-bold')}>Star on GitHub</Text>
<Text style={tw`ml-2 font-bold text-white`}>Star on GitHub</Text>
</Button>
{/* Website Button */}
<Button
onPress={() => Linking.openURL('https://spacedrive.app')}
style={tw.style('flex-row items-center')}
style={tw`flex-row items-center`}
variant="accent"
>
<View style={tw.style('h-4 w-4')}>
<View style={tw`h-4 w-4`}>
<Globe weight="bold" size={16} color="white" />
</View>
<Text style={tw.style('ml-2 text-white font-bold')}>Website</Text>
<Text style={tw`ml-2 font-bold text-white`}>Website</Text>
</Button>
</View>
<Divider />
<View style={tw.style('my-5')}>
<Text style={tw.style('mb-3 text-lg font-bold text-ink')}>Vision</Text>
<Text style={tw.style('w-full text-sm text-ink-faint')}>
<View style={tw`my-5`}>
<Text style={tw`mb-3 text-lg font-bold text-ink`}>Vision</Text>
<Text style={tw`w-full text-sm text-ink-faint`}>
Many of us have multiple cloud accounts, drives that aren’t backed up and data
at risk of loss. We depend on cloud services like Google Photos and iCloud, but
are locked in with limited capacity and almost zero interoperability between
@ -90,14 +91,12 @@ const AboutScreen = () => {
</View>
<Divider />
<View>
<Text style={tw.style('my-5 text-lg font-bold text-ink')}>
<Text style={tw`my-5 text-lg font-bold text-ink`}>
Meet the contributors behind Spacedrive
</Text>
{/* Temporary image url approach until a solution is reached */}
{/* TODO: Temporary image url approach until a solution is reached */}
<Image
source={{
uri: 'https://i.imgur.com/SwUcWHP.png'
}}
source={{ uri: 'https://i.imgur.com/SwUcWHP.png' }}
style={{ height: 200, width: '100%' }}
resizeMode="contain"
/>
@ -107,5 +106,3 @@ const AboutScreen = () => {
};
export default AboutScreen;
// React Native doesn't allow for SVGs to be imported, so we have to use react-native-svg.

22
pnpm-lock.yaml
View file

@ -392,6 +392,9 @@ importers:
expo-build-properties:
specifier: ~0.11.1
version: 0.11.1(expo@50.0.13)
expo-image:
specifier: ^1.10.6
version: 1.10.6(expo@50.0.13)
expo-linking:
specifier: ~6.2.2
version: 6.2.2(expo@50.0.13)
@ -3092,10 +3095,6 @@ packages:
peerDependencies:
'@effect-ts/otel-node': '*'
peerDependenciesMeta:
'@effect-ts/core':
optional: true
'@effect-ts/otel':
optional: true
'@effect-ts/otel-node':
optional: true
dependencies:
@ -14728,6 +14727,15 @@ packages:
fontfaceobserver: 2.3.0
dev: false
/expo-image@1.10.6(expo@50.0.13):
resolution: {integrity: sha512-vcnAIym1eU8vQgV1re1E7rVQZStJimBa4aPDhjFfzMzbddAF7heJuagyewiUkTzbZUwYzPaZAie6VJPyWx9Ueg==}
peerDependencies:
expo: '*'
dependencies:
'@react-native/assets-registry': 0.73.1
expo: 50.0.13(@babel/core@7.24.0)(@react-native/babel-preset@0.73.21)
dev: false
/expo-keep-awake@12.8.2(expo@50.0.13):
resolution: {integrity: sha512-uiQdGbSX24Pt8nGbnmBtrKq6xL/Tm3+DuDRGBk/3ZE/HlizzNosGRIufIMJ/4B4FRw4dw8KU81h2RLuTjbay6g==}
peerDependencies:
@ -24486,7 +24494,7 @@ packages:
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
'@types/node': '>18.18.x'
less: '*'
lightningcss: ^1.21.0
sass: '*'
@ -24521,7 +24529,7 @@ packages:
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
peerDependencies:
'@types/node': ^18.0.0 || >=20.0.0
'@types/node': '>18.18.x'
less: '*'
lightningcss: ^1.21.0
sass: '*'
@ -24556,7 +24564,7 @@ packages:
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
peerDependencies:
'@types/node': ^18.0.0 || >=20.0.0
'@types/node': '>18.18.x'
less: '*'
lightningcss: ^1.21.0
sass: '*'