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

Update styling if there's only 1 instance

Browse source
This commit is contained in:
Arnab Chakraborty 2024-06-11 21:48:56 +05:30
parent 2309fc6373
commit 712ea1d411
1 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
apps/mobile/src/screens/settings/library/CloudSettings.tsx
View file

@ -6,7 +6,7 @@ import VirtualizedListWrapper from '~/components/layout/VirtualizedListWrapper';
import { Button } from '~/components/primitive/Button'; import { Button } from '~/components/primitive/Button';
import { Divider } from '~/components/primitive/Divider'; import { Divider } from '~/components/primitive/Divider';
import { SettingsTitle } from '~/components/settings/SettingsContainer'; import { SettingsTitle } from '~/components/settings/SettingsContainer';
import { styled, tw } from '~/lib/tailwind'; import { styled, tw, twStyle } from '~/lib/tailwind';
import { cancel, login, useAuthStateSnapshot } from '~/stores/auth'; import { cancel, login, useAuthStateSnapshot } from '~/stores/auth';
const InfoBox = styled(View, 'rounded-md border border-app bg-transparent p-2'); const InfoBox = styled(View, 'rounded-md border border-app bg-transparent p-2');
@ -48,7 +48,7 @@ const Authenticated = () => {
<View style={tw`flex-col items-start gap-5`}> <View style={tw`flex-col items-start gap-5`}>
<Card style={tw`w-full`}> <Card style={tw`w-full`}>
<Text style={tw`font-semibold text-ink`}>Library</Text> <Text style={tw`font-semibold text-ink`}>Library</Text>
<Divider style={tw`mt-2 mb-4`}/> <Divider style={tw`mb-4 mt-2`}/>
<SettingsTitle style={tw`mb-1`}>Name</SettingsTitle> <SettingsTitle style={tw`mb-1`}>Name</SettingsTitle>
<InfoBox> <InfoBox>
<Text style={tw`text-ink`}>{cloudLibrary.data.name}</Text> <Text style={tw`text-ink`}>{cloudLibrary.data.name}</Text>
@ -67,17 +67,17 @@ const Authenticated = () => {
{thisInstance && ( {thisInstance && (
<Card style={tw`w-full`}> <Card style={tw`w-full`}>
<Text style={tw`font-semibold text-ink`}>This Instance</Text> <Text style={tw`font-semibold text-ink`}>This Instance</Text>
<Divider style={tw`mt-2 mb-4`}/> <Divider style={tw`mb-4 mt-2`}/>
<SettingsTitle style={tw`mb-1 text-ink`}>Id</SettingsTitle> <SettingsTitle style={tw`mb-1 text-ink`}>Id</SettingsTitle>
<InfoBox> <InfoBox>
<Text style={tw`text-ink-dull`}>{thisInstance.id}</Text> <Text style={tw`text-ink-dull`}>{thisInstance.id}</Text>
</InfoBox> </InfoBox>
<SettingsTitle style={tw`mt-4 mb-1`}>UUID</SettingsTitle> <SettingsTitle style={tw`mb-1 mt-4`}>UUID</SettingsTitle>
<InfoBox> <InfoBox>
<Text style={tw`text-ink-dull`}>{thisInstance.uuid}</Text> <Text style={tw`text-ink-dull`}>{thisInstance.uuid}</Text>
</InfoBox> </InfoBox>
<SettingsTitle style={tw`mt-4 mb-1`}>Public Key</SettingsTitle> <SettingsTitle style={tw`mb-1 mt-4`}>Public Key</SettingsTitle>
<InfoBox> <InfoBox>
<Text numberOfLines={1} style={tw`text-ink-dull`}>{thisInstance.identity}</Text> <Text numberOfLines={1} style={tw`text-ink-dull`}>{thisInstance.identity}</Text>
</InfoBox> </InfoBox>
@ -92,17 +92,17 @@ const Authenticated = () => {
</View> </View>
<Text style={tw`font-semibold text-ink`}>Instances</Text> <Text style={tw`font-semibold text-ink`}>Instances</Text>
</View> </View>
<Divider style={tw`mt-2 mb-4`}/> <Divider style={tw`mb-4 mt-2`}/>
<VirtualizedListWrapper scrollEnabled={false} contentContainerStyle={tw`flex-1`} horizontal> <VirtualizedListWrapper scrollEnabled={false} contentContainerStyle={tw`flex-1`} horizontal>
<FlatList <FlatList
data={cloudInstances} data={cloudInstances}
scrollEnabled={false} scrollEnabled={false}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
ItemSeparatorComponent={() => <View style={tw`h-2`}/>} ItemSeparatorComponent={() => <View style={tw`h-2`}/>}
columnWrapperStyle={tw`justify-between w-full`} renderItem={({ item }) => <Instance data={item} length={cloudInstances?.length ?? 0} />}
renderItem={({ item }) => <Instance data={item} />}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
numColumns={2} numColumns={(cloudInstances?.length ?? 0) > 1 ? 2 : 1}
{...(cloudInstances?.length ?? 0) > 1 ? {columnWrapperStyle: tw`w-full justify-between`} : {}}
/> />
</VirtualizedListWrapper> </VirtualizedListWrapper>
</Card> </Card>
@ -127,20 +127,21 @@ const Authenticated = () => {
interface Props { interface Props {
data: CloudInstance; data: CloudInstance;
length: number;
} }
const Instance = ({data}: Props) => { const Instance = ({data, length}: Props) => {
return ( return (
<InfoBox style={tw`w-[49%]`}> <InfoBox style={twStyle(length > 1 ? 'w-[49%]' : 'w-full')}>
<SettingsTitle style={tw`mb-1`}>Id</SettingsTitle> <SettingsTitle style={tw`mb-1`}>Id</SettingsTitle>
<InfoBox> <InfoBox>
<Text numberOfLines={1} style={tw`text-ink-dull`}>{data.id}</Text> <Text numberOfLines={1} style={tw`text-ink-dull`}>{data.id}</Text>
</InfoBox> </InfoBox>
<SettingsTitle style={tw`mt-4 mb-1`}>UUID</SettingsTitle> <SettingsTitle style={tw`mb-1 mt-4`}>UUID</SettingsTitle>
<InfoBox> <InfoBox>
<Text numberOfLines={1} style={tw`text-ink-dull`}>{data.uuid}</Text> <Text numberOfLines={1} style={tw`text-ink-dull`}>{data.uuid}</Text>
</InfoBox> </InfoBox>
<SettingsTitle style={tw`mt-4 mb-1`}>Public Key</SettingsTitle> <SettingsTitle style={tw`mb-1 mt-4`}>Public Key</SettingsTitle>
<InfoBox> <InfoBox>
<Text numberOfLines={1} style={tw`text-ink-dull`}>{data.identity}</Text> <Text numberOfLines={1} style={tw`text-ink-dull`}>{data.identity}</Text>
</InfoBox> </InfoBox>