mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 13:23:28 +00:00
[MOB-82] Switch to expo image & inspector long press (#2301)
* open action modal on long press * fix styling on about screen * better/optimized image component
This commit is contained in:
parent
504242f97e
commit
f48a91b124
|
@ -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'
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Folder, Folder_Light } from '@sd/assets/icons';
|
||||
import { Image } from 'react-native';
|
||||
import { Image } from 'expo-image';
|
||||
|
||||
type FolderProps = {
|
||||
/**
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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`}>
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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: '*'
|
||||
|
|
Loading…
Reference in a new issue