mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-02 10:03:28 +00:00
[MOB-108] UI adjustments (#2563)
* wip * wip * max width on locations in drawer * remove fade and console log * lint fix
This commit is contained in:
parent
7743796163
commit
a9eb3c7f42
|
@ -1,18 +1,18 @@
|
||||||
import { useDrawerStatus } from '@react-navigation/drawer';
|
import { useDrawerStatus } from '@react-navigation/drawer';
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
|
import { useClientContext } from '@sd/client';
|
||||||
import { MotiView } from 'moti';
|
import { MotiView } from 'moti';
|
||||||
import { CaretRight, CloudArrowDown, Gear, Lock, Plus } from 'phosphor-react-native';
|
import { CaretRight, CloudArrowDown, Gear, Lock, Plus } from 'phosphor-react-native';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { Alert, Pressable, Text, View } from 'react-native';
|
import { Alert, Pressable, Text, View } from 'react-native';
|
||||||
import { useClientContext } from '@sd/client';
|
|
||||||
import { tw, twStyle } from '~/lib/tailwind';
|
import { tw, twStyle } from '~/lib/tailwind';
|
||||||
import { currentLibraryStore } from '~/utils/nav';
|
import { currentLibraryStore } from '~/utils/nav';
|
||||||
|
|
||||||
import { AnimatedHeight } from '../animation/layout';
|
import { AnimatedHeight } from '../animation/layout';
|
||||||
import { ModalRef } from '../layout/Modal';
|
import { ModalRef } from '../layout/Modal';
|
||||||
import CreateLibraryModal from '../modal/CreateLibraryModal';
|
import CreateLibraryModal from '../modal/CreateLibraryModal';
|
||||||
import { Divider } from '../primitive/Divider';
|
|
||||||
import ImportModalLibrary from '../modal/ImportLibraryModal';
|
import ImportModalLibrary from '../modal/ImportLibraryModal';
|
||||||
|
import { Divider } from '../primitive/Divider';
|
||||||
|
|
||||||
const DrawerLibraryManager = () => {
|
const DrawerLibraryManager = () => {
|
||||||
const [dropdownClosed, setDropdownClosed] = useState(true);
|
const [dropdownClosed, setDropdownClosed] = useState(true);
|
||||||
|
@ -24,7 +24,6 @@ const DrawerLibraryManager = () => {
|
||||||
}, [isDrawerOpen]);
|
}, [isDrawerOpen]);
|
||||||
|
|
||||||
const { library: currentLibrary, libraries } = useClientContext();
|
const { library: currentLibrary, libraries } = useClientContext();
|
||||||
|
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
|
|
||||||
const modalRef = useRef<ModalRef>(null);
|
const modalRef = useRef<ModalRef>(null);
|
||||||
|
@ -58,7 +57,6 @@ const DrawerLibraryManager = () => {
|
||||||
>
|
>
|
||||||
{/* Libraries */}
|
{/* Libraries */}
|
||||||
{libraries.data?.map((library) => {
|
{libraries.data?.map((library) => {
|
||||||
// console.log('library', library);
|
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
key={library.uuid}
|
key={library.uuid}
|
||||||
|
|
|
@ -45,7 +45,7 @@ const DrawerLocationItem: React.FC<DrawerLocationItemProps> = ({
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<Text style={twStyle('text-xs font-medium text-ink')} numberOfLines={1}>
|
<Text style={twStyle('max-w-[150px] text-xs font-medium text-ink')} numberOfLines={1}>
|
||||||
{location.name ?? ''}
|
{location.name ?? ''}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -1,16 +1,15 @@
|
||||||
import { DocumentDirectoryPath } from '@dr.pogodin/react-native-fs';
|
import { DocumentDirectoryPath } from '@dr.pogodin/react-native-fs';
|
||||||
import { getIcon } from '@sd/assets/util';
|
import { getIcon } from '@sd/assets/util';
|
||||||
|
import {
|
||||||
|
ThumbKey,
|
||||||
|
getExplorerItemData,
|
||||||
|
getItemLocation,
|
||||||
|
isDarkTheme,
|
||||||
|
type ExplorerItem
|
||||||
|
} from '@sd/client';
|
||||||
import { Image } from 'expo-image';
|
import { Image } from 'expo-image';
|
||||||
import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react';
|
import { useEffect, useLayoutEffect, useMemo, useState, type PropsWithChildren } from 'react';
|
||||||
import { View } from 'react-native';
|
import { View } from 'react-native';
|
||||||
import {
|
|
||||||
getExplorerItemData,
|
|
||||||
getItemFilePath,
|
|
||||||
getItemLocation,
|
|
||||||
isDarkTheme,
|
|
||||||
ThumbKey,
|
|
||||||
type ExplorerItem
|
|
||||||
} from '@sd/client';
|
|
||||||
import { flattenThumbnailKey, useExplorerStore } from '~/stores/explorerStore';
|
import { flattenThumbnailKey, useExplorerStore } from '~/stores/explorerStore';
|
||||||
|
|
||||||
import { tw } from '../../lib/tailwind';
|
import { tw } from '../../lib/tailwind';
|
||||||
|
@ -71,7 +70,6 @@ type FileThumbProps = {
|
||||||
export default function FileThumb({ size = 1, ...props }: FileThumbProps) {
|
export default function FileThumb({ size = 1, ...props }: FileThumbProps) {
|
||||||
const itemData = useExplorerItemData(props.data);
|
const itemData = useExplorerItemData(props.data);
|
||||||
const locationData = getItemLocation(props.data);
|
const locationData = getItemLocation(props.data);
|
||||||
const filePath = getItemFilePath(props.data);
|
|
||||||
|
|
||||||
const [src, setSrc] = useState<null | string>(null);
|
const [src, setSrc] = useState<null | string>(null);
|
||||||
const [thumbType, setThumbType] = useState(ThumbType.Icon);
|
const [thumbType, setThumbType] = useState(ThumbType.Icon);
|
||||||
|
@ -132,7 +130,6 @@ export default function FileThumb({ size = 1, ...props }: FileThumbProps) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}, [itemData, thumbType]);
|
}, [itemData, thumbType]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FileThumbWrapper size={size}>
|
<FileThumbWrapper size={size}>
|
||||||
{(() => {
|
{(() => {
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { IconTypes } from '@sd/assets/util';
|
import { IconTypes } from '@sd/assets/util';
|
||||||
|
import { ObjectKind } from '@sd/client';
|
||||||
import { MotiView } from 'moti';
|
import { MotiView } from 'moti';
|
||||||
import { memo, useCallback, useMemo } from 'react';
|
import { memo, useCallback, useMemo } from 'react';
|
||||||
import { FlatList, Pressable, Text, View } from 'react-native';
|
import { FlatList, Pressable, Text, View } from 'react-native';
|
||||||
import { LinearTransition } from 'react-native-reanimated';
|
import { LinearTransition } from 'react-native-reanimated';
|
||||||
import { ObjectKind } from '@sd/client';
|
|
||||||
import { Icon } from '~/components/icons/Icon';
|
import { Icon } from '~/components/icons/Icon';
|
||||||
import Card from '~/components/layout/Card';
|
import Card from '~/components/layout/Card';
|
||||||
import Fade from '~/components/layout/Fade';
|
|
||||||
import SectionTitle from '~/components/layout/SectionTitle';
|
import SectionTitle from '~/components/layout/SectionTitle';
|
||||||
import VirtualizedListWrapper from '~/components/layout/VirtualizedListWrapper';
|
import VirtualizedListWrapper from '~/components/layout/VirtualizedListWrapper';
|
||||||
import { tw, twStyle } from '~/lib/tailwind';
|
import { tw, twStyle } from '~/lib/tailwind';
|
||||||
|
@ -40,12 +39,11 @@ const Kind = () => {
|
||||||
sub="What kind of objects should be searched?"
|
sub="What kind of objects should be searched?"
|
||||||
/>
|
/>
|
||||||
<View>
|
<View>
|
||||||
<Fade color="black" width={30} height="100%">
|
|
||||||
<VirtualizedListWrapper horizontal>
|
<VirtualizedListWrapper horizontal>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={kinds}
|
data={kinds}
|
||||||
renderItem={({ item }) => <KindFilter data={item} />}
|
renderItem={({ item }) => <KindFilter data={item} />}
|
||||||
contentContainerStyle={tw`pl-6`}
|
contentContainerStyle={tw`px-6`}
|
||||||
numColumns={kinds && Math.ceil(Number(kinds.length) / 2)}
|
numColumns={kinds && Math.ceil(Number(kinds.length) / 2)}
|
||||||
key={kinds ? 'kindsSearch' : '_'}
|
key={kinds ? 'kindsSearch' : '_'}
|
||||||
scrollEnabled={false}
|
scrollEnabled={false}
|
||||||
|
@ -56,7 +54,6 @@ const Kind = () => {
|
||||||
style={tw`flex-row`}
|
style={tw`flex-row`}
|
||||||
/>
|
/>
|
||||||
</VirtualizedListWrapper>
|
</VirtualizedListWrapper>
|
||||||
</Fade>
|
|
||||||
</View>
|
</View>
|
||||||
</MotiView>
|
</MotiView>
|
||||||
);
|
);
|
||||||
|
|
|
@ -153,7 +153,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
|
||||||
const debugState = useDebugState();
|
const debugState = useDebugState();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScreenContainer tabHeight={false} scrollview={false} style={tw`gap-0 px-6 py-0`}>
|
<ScreenContainer tabHeight={false} style={tw`gap-0 px-5 py-0`}>
|
||||||
<SectionList
|
<SectionList
|
||||||
contentContainerStyle={tw`py-6`}
|
contentContainerStyle={tw`py-6`}
|
||||||
sections={sections(debugState)}
|
sections={sections(debugState)}
|
||||||
|
@ -165,6 +165,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
|
||||||
rounded={item.rounded}
|
rounded={item.rounded}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
scrollEnabled={false}
|
||||||
renderSectionHeader={renderSectionHeader}
|
renderSectionHeader={renderSectionHeader}
|
||||||
ListFooterComponent={<FooterComponent />}
|
ListFooterComponent={<FooterComponent />}
|
||||||
showsVerticalScrollIndicator={false}
|
showsVerticalScrollIndicator={false}
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
|
import { LibraryConfigWrapped, useBridgeQuery, useLibraryContext } from '@sd/client';
|
||||||
import { DotsThreeOutlineVertical, Pen, Trash } from 'phosphor-react-native';
|
import { DotsThreeOutlineVertical, Pen, Trash } from 'phosphor-react-native';
|
||||||
import React, { useEffect, useRef } from 'react';
|
import React, { useEffect, useRef } from 'react';
|
||||||
import { Animated, FlatList, Pressable, Text, View } from 'react-native';
|
import { Animated, FlatList, Pressable, Text, View } from 'react-native';
|
||||||
import { Swipeable } from 'react-native-gesture-handler';
|
import { Swipeable } from 'react-native-gesture-handler';
|
||||||
import { LibraryConfigWrapped, useBridgeQuery } from '@sd/client';
|
|
||||||
import Fade from '~/components/layout/Fade';
|
|
||||||
import { ModalRef } from '~/components/layout/Modal';
|
import { ModalRef } from '~/components/layout/Modal';
|
||||||
import ScreenContainer from '~/components/layout/ScreenContainer';
|
import ScreenContainer from '~/components/layout/ScreenContainer';
|
||||||
import DeleteLibraryModal from '~/components/modal/confirmModals/DeleteLibraryModal';
|
import DeleteLibraryModal from '~/components/modal/confirmModals/DeleteLibraryModal';
|
||||||
|
@ -14,10 +13,12 @@ import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack';
|
||||||
function LibraryItem({
|
function LibraryItem({
|
||||||
library,
|
library,
|
||||||
index,
|
index,
|
||||||
navigation
|
navigation,
|
||||||
|
current
|
||||||
}: {
|
}: {
|
||||||
library: LibraryConfigWrapped;
|
library: LibraryConfigWrapped;
|
||||||
index: number;
|
index: number;
|
||||||
|
current: boolean;
|
||||||
navigation: SettingsStackScreenProps<'LibrarySettings'>['navigation'];
|
navigation: SettingsStackScreenProps<'LibrarySettings'>['navigation'];
|
||||||
}) {
|
}) {
|
||||||
const renderRightActions = (
|
const renderRightActions = (
|
||||||
|
@ -63,8 +64,15 @@ function LibraryItem({
|
||||||
>
|
>
|
||||||
<View style={tw`flex-row items-center justify-between`}>
|
<View style={tw`flex-row items-center justify-between`}>
|
||||||
<View>
|
<View>
|
||||||
|
<View style={tw`flex-row items-center gap-2`}>
|
||||||
<Text style={tw`text-md font-semibold text-ink`}>{library.config.name}</Text>
|
<Text style={tw`text-md font-semibold text-ink`}>{library.config.name}</Text>
|
||||||
<Text style={tw`mt-1 text-xs text-ink-dull`}>{library.uuid}</Text>
|
{current && (
|
||||||
|
<View style={tw`rounded-md bg-accent px-1.5 py-[2px]`}>
|
||||||
|
<Text style={tw`text-xs font-semibold text-white`}>Current</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<Text style={tw`mt-1.5 text-xs text-ink-dull`}>{library.uuid}</Text>
|
||||||
</View>
|
</View>
|
||||||
<Pressable onPress={() => swipeRef.current?.openRight()}>
|
<Pressable onPress={() => swipeRef.current?.openRight()}>
|
||||||
<DotsThreeOutlineVertical
|
<DotsThreeOutlineVertical
|
||||||
|
@ -81,6 +89,7 @@ function LibraryItem({
|
||||||
const LibrarySettingsScreen = ({ navigation }: SettingsStackScreenProps<'LibrarySettings'>) => {
|
const LibrarySettingsScreen = ({ navigation }: SettingsStackScreenProps<'LibrarySettings'>) => {
|
||||||
const libraryList = useBridgeQuery(['library.list']);
|
const libraryList = useBridgeQuery(['library.list']);
|
||||||
const libraries = libraryList.data;
|
const libraries = libraryList.data;
|
||||||
|
const { library } = useLibraryContext();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
navigation.setOptions({
|
navigation.setOptions({
|
||||||
|
@ -101,22 +110,19 @@ const LibrarySettingsScreen = ({ navigation }: SettingsStackScreenProps<'Library
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScreenContainer style={tw`justify-start gap-0 px-6 py-0`} scrollview={false}>
|
<ScreenContainer style={tw`justify-start gap-0 px-6 py-0`} scrollview={false}>
|
||||||
<Fade
|
|
||||||
fadeSides="top-bottom"
|
|
||||||
orientation="vertical"
|
|
||||||
color="black"
|
|
||||||
width={30}
|
|
||||||
height="100%"
|
|
||||||
>
|
|
||||||
<FlatList
|
<FlatList
|
||||||
data={libraries}
|
data={libraries}
|
||||||
contentContainerStyle={tw`py-5`}
|
contentContainerStyle={tw`py-5`}
|
||||||
keyExtractor={(item) => item.uuid}
|
keyExtractor={(item) => item.uuid}
|
||||||
renderItem={({ item, index }) => (
|
renderItem={({ item, index }) => (
|
||||||
<LibraryItem navigation={navigation} library={item} index={index} />
|
<LibraryItem
|
||||||
|
current={item.uuid === library.uuid}
|
||||||
|
navigation={navigation}
|
||||||
|
library={item}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</Fade>
|
|
||||||
</ScreenContainer>
|
</ScreenContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
|
import { useBridgeQuery } from '@sd/client';
|
||||||
import { Image } from 'expo-image';
|
import { Image } from 'expo-image';
|
||||||
import { Globe } from 'phosphor-react-native';
|
import { Globe } from 'phosphor-react-native';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { 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 { DiscordIcon, GitHubIcon } from '~/components/icons/Brands';
|
||||||
import ScreenContainer from '~/components/layout/ScreenContainer';
|
import ScreenContainer from '~/components/layout/ScreenContainer';
|
||||||
import { Button } from '~/components/primitive/Button';
|
import { Button } from '~/components/primitive/Button';
|
||||||
|
@ -98,7 +98,7 @@ const AboutScreen = () => {
|
||||||
<Image
|
<Image
|
||||||
source={{ uri: 'https://i.imgur.com/SwUcWHP.png' }}
|
source={{ uri: 'https://i.imgur.com/SwUcWHP.png' }}
|
||||||
style={{ height: 200, width: '100%' }}
|
style={{ height: 200, width: '100%' }}
|
||||||
resizeMode="contain"
|
contentFit='contain'
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
</ScreenContainer>
|
</ScreenContainer>
|
||||||
|
|
|
@ -41,7 +41,7 @@ const Library = ({ cloudLibrary }: LibraryProps) => {
|
||||||
</InfoBox>
|
</InfoBox>
|
||||||
<Button
|
<Button
|
||||||
disabled={syncLibrary.isLoading || thisInstance !== undefined}
|
disabled={syncLibrary.isLoading || thisInstance !== undefined}
|
||||||
variant={thisInstance ? 'gray' : 'accent'}
|
variant="gray"
|
||||||
onPress={() => syncLibrary.mutate(null)}
|
onPress={() => syncLibrary.mutate(null)}
|
||||||
style={tw`mt-2 flex-row gap-1 py-2`}
|
style={tw`mt-2 flex-row gap-1 py-2`}
|
||||||
>
|
>
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import { inferSubscriptionResult } from '@oscartbeaumont-sd/rspc-client';
|
import { inferSubscriptionResult } from '@oscartbeaumont-sd/rspc-client';
|
||||||
import { MotiView } from 'moti';
|
|
||||||
import { Circle } from 'phosphor-react-native';
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { Text, View } from 'react-native';
|
|
||||||
import {
|
import {
|
||||||
Procedures,
|
Procedures,
|
||||||
useLibraryMutation,
|
useLibraryMutation,
|
||||||
useLibraryQuery,
|
useLibraryQuery,
|
||||||
useLibrarySubscription
|
useLibrarySubscription
|
||||||
} from '@sd/client';
|
} from '@sd/client';
|
||||||
|
import { MotiView } from 'moti';
|
||||||
|
import { Circle } from 'phosphor-react-native';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Text, View } from 'react-native';
|
||||||
import Card from '~/components/layout/Card';
|
import Card from '~/components/layout/Card';
|
||||||
import ScreenContainer from '~/components/layout/ScreenContainer';
|
import ScreenContainer from '~/components/layout/ScreenContainer';
|
||||||
import { Button } from '~/components/primitive/Button';
|
import { Button } from '~/components/primitive/Button';
|
||||||
|
|
Loading…
Reference in a new issue