mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 14:33:34 +00:00
parent
6a32752243
commit
a17fb910ed
|
@ -97,8 +97,8 @@ const BrowseLocations = () => {
|
||||||
const locations = useCache(result.data?.items);
|
const locations = useCache(result.data?.items);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={tw`gap-5`}>
|
<View style={tw`gap-3`}>
|
||||||
<View style={tw`w-full flex-row items-center justify-between px-7`}>
|
<View style={tw`w-full flex-row items-center justify-between px-6`}>
|
||||||
<Text style={tw`text-lg font-bold text-white`}>Locations</Text>
|
<Text style={tw`text-lg font-bold text-white`}>Locations</Text>
|
||||||
<View style={tw`flex-row gap-3`}>
|
<View style={tw`flex-row gap-3`}>
|
||||||
<Pressable
|
<Pressable
|
||||||
|
@ -129,7 +129,7 @@ const BrowseLocations = () => {
|
||||||
data={locations}
|
data={locations}
|
||||||
ListEmptyComponent={() => (
|
ListEmptyComponent={() => (
|
||||||
<View
|
<View
|
||||||
style={tw`relative h-auto w-[85.5vw] flex-col items-center justify-center overflow-hidden rounded-md border border-dashed border-sidebar-line p-4`}
|
style={tw`relative h-auto w-[87.5vw] flex-col items-center justify-center overflow-hidden rounded-md border border-dashed border-sidebar-line p-4`}
|
||||||
>
|
>
|
||||||
<Icon name="Folder" size={38} />
|
<Icon name="Folder" size={38} />
|
||||||
<Text style={tw`mt-2 text-center font-medium text-ink-dull`}>
|
<Text style={tw`mt-2 text-center font-medium text-ink-dull`}>
|
||||||
|
|
|
@ -22,13 +22,11 @@ type TagItemProps = {
|
||||||
onPress: () => void;
|
onPress: () => void;
|
||||||
tagStyle?: ClassInput;
|
tagStyle?: ClassInput;
|
||||||
viewStyle?: 'grid' | 'list';
|
viewStyle?: 'grid' | 'list';
|
||||||
rightActions?: () => void;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TagItem = ({
|
export const TagItem = ({
|
||||||
tag,
|
tag,
|
||||||
onPress,
|
onPress,
|
||||||
rightActions,
|
|
||||||
tagStyle,
|
tagStyle,
|
||||||
viewStyle = 'grid'
|
viewStyle = 'grid'
|
||||||
}: TagItemProps) => {
|
}: TagItemProps) => {
|
||||||
|
@ -146,8 +144,8 @@ const BrowseTags = () => {
|
||||||
const modalRef = useRef<ModalRef>(null);
|
const modalRef = useRef<ModalRef>(null);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={tw`gap-5`}>
|
<View style={tw`gap-3`}>
|
||||||
<View style={tw`w-full flex-row items-center justify-between px-7`}>
|
<View style={tw`w-full flex-row items-center justify-between px-6`}>
|
||||||
<Text style={tw`text-lg font-bold text-white`}>Tags</Text>
|
<Text style={tw`text-lg font-bold text-white`}>Tags</Text>
|
||||||
<View style={tw`flex-row gap-3`}>
|
<View style={tw`flex-row gap-3`}>
|
||||||
<Pressable onPress={() => navigation.navigate('Tags')}>
|
<Pressable onPress={() => navigation.navigate('Tags')}>
|
||||||
|
@ -192,7 +190,7 @@ const BrowseTags = () => {
|
||||||
keyExtractor={(item) => item.id.toString()}
|
keyExtractor={(item) => item.id.toString()}
|
||||||
horizontal
|
horizontal
|
||||||
showsHorizontalScrollIndicator={false}
|
showsHorizontalScrollIndicator={false}
|
||||||
contentContainerStyle={tw`px-7`}
|
contentContainerStyle={tw`px-6`}
|
||||||
ItemSeparatorComponent={() => <View style={tw`w-2`} />}
|
ItemSeparatorComponent={() => <View style={tw`w-2`} />}
|
||||||
/>
|
/>
|
||||||
</Fade>
|
</Fade>
|
||||||
|
|
|
@ -28,11 +28,11 @@ const CATEGORIES_LIST = [
|
||||||
];
|
];
|
||||||
const Categories = () => {
|
const Categories = () => {
|
||||||
return (
|
return (
|
||||||
<View style={tw`relative gap-5`}>
|
<View style={tw`relative gap-3`}>
|
||||||
<Text style={tw`px-7 text-lg font-bold text-white`}>Library</Text>
|
<Text style={tw`px-6 text-lg font-bold text-white`}>Library</Text>
|
||||||
<Fade width={30} height="100%" color="mobile-screen">
|
<Fade width={30} height="100%" color="mobile-screen">
|
||||||
<ScrollView showsHorizontalScrollIndicator={false} horizontal>
|
<ScrollView showsHorizontalScrollIndicator={false} horizontal>
|
||||||
<View style={tw`flex-row gap-2 px-7`}>
|
<View style={tw`flex-row gap-2 px-6`}>
|
||||||
{CATEGORIES_LIST.map((c, i) => {
|
{CATEGORIES_LIST.map((c, i) => {
|
||||||
return <Category icon={c.icon} key={i} name={c.name} />;
|
return <Category icon={c.icon} key={i} name={c.name} />;
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -9,13 +9,13 @@ import Fade from '../layout/Fade';
|
||||||
|
|
||||||
const Jobs = () => {
|
const Jobs = () => {
|
||||||
return (
|
return (
|
||||||
<View style={tw`gap-5`}>
|
<View style={tw`gap-3`}>
|
||||||
<View style={tw`w-full flex-row items-center justify-between px-7`}>
|
<View style={tw`w-full flex-row items-center justify-between px-5`}>
|
||||||
<Text style={tw`text-lg font-bold text-white`}>Jobs</Text>
|
<Text style={tw`text-lg font-bold text-white`}>Jobs</Text>
|
||||||
</View>
|
</View>
|
||||||
<Fade color="mobile-screen" height="100%" width={30}>
|
<Fade color="mobile-screen" height="100%" width={30}>
|
||||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
|
||||||
<View style={tw`flex-row gap-2 px-7`}>
|
<View style={tw`flex-row gap-2 px-5`}>
|
||||||
<Job message="Processed 300 of 1431 orphan paths..." progress={55} />
|
<Job message="Processed 300 of 1431 orphan paths..." progress={55} />
|
||||||
<Job message="All tasks have been completed successfully" progress={100} />
|
<Job message="All tasks have been completed successfully" progress={100} />
|
||||||
<Job
|
<Job
|
||||||
|
|
|
@ -44,7 +44,6 @@ export default function Header({
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const explorerStore = useExplorerStore();
|
const explorerStore = useExplorerStore();
|
||||||
const routeParams = route?.route.params as any;
|
const routeParams = route?.route.params as any;
|
||||||
|
|
||||||
const headerHeight = useSafeAreaInsets().top;
|
const headerHeight = useSafeAreaInsets().top;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -54,7 +53,7 @@ export default function Header({
|
||||||
{ paddingTop: headerHeight }
|
{ paddingTop: headerHeight }
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<View style={tw`mx-auto h-auto w-full justify-center px-7 pb-5`}>
|
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-4`}>
|
||||||
<View style={tw`w-full flex-row items-center justify-between`}>
|
<View style={tw`w-full flex-row items-center justify-between`}>
|
||||||
<View style={tw`flex-row items-center gap-3`}>
|
<View style={tw`flex-row items-center gap-3`}>
|
||||||
{navBack && (
|
{navBack && (
|
||||||
|
|
|
@ -15,14 +15,14 @@ const ScreenContainer = ({ children, style, scrollview = true, tabHeight = true
|
||||||
const height = useBottomTabBarHeight();
|
const height = useBottomTabBarHeight();
|
||||||
return scrollview ? (
|
return scrollview ? (
|
||||||
<ScrollView
|
<ScrollView
|
||||||
contentContainerStyle={twStyle('justify-between gap-6 py-5', style)}
|
contentContainerStyle={twStyle('justify-between gap-10 py-6', style)}
|
||||||
style={twStyle('flex-1 bg-mobile-screen', { marginBottom: tabHeight && height })}
|
style={twStyle('flex-1 bg-mobile-screen', { marginBottom: tabHeight && height })}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
) : (
|
) : (
|
||||||
<View
|
<View
|
||||||
style={twStyle('flex-1 justify-between gap-6 bg-mobile-screen py-5', style, {
|
style={twStyle('flex-1 justify-between gap-10 bg-mobile-screen py-6', style, {
|
||||||
marginBottom: tabHeight && height
|
marginBottom: tabHeight && height
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
|
|
|
@ -16,7 +16,7 @@ interface Props {
|
||||||
const Categories = ({ kinds }: Props) => {
|
const Categories = ({ kinds }: Props) => {
|
||||||
return (
|
return (
|
||||||
<View>
|
<View>
|
||||||
<Text style={tw`px-7 pb-5 text-lg font-bold text-white`}>Categories</Text>
|
<Text style={tw`px-6 pb-3 text-lg font-bold text-white`}>Categories</Text>
|
||||||
<View>
|
<View>
|
||||||
<Fade color="mobile-screen" width={30} height="100%">
|
<Fade color="mobile-screen" width={30} height="100%">
|
||||||
<VirtualizedListWrapper horizontal>
|
<VirtualizedListWrapper horizontal>
|
||||||
|
@ -24,7 +24,7 @@ const Categories = ({ kinds }: Props) => {
|
||||||
data={kinds.data?.statistics
|
data={kinds.data?.statistics
|
||||||
?.sort((a, b) => b.count - a.count)
|
?.sort((a, b) => b.count - a.count)
|
||||||
.filter((i) => i.kind !== 0)}
|
.filter((i) => i.kind !== 0)}
|
||||||
contentContainerStyle={tw`pl-7`}
|
contentContainerStyle={tw`pl-5`}
|
||||||
numColumns={Math.ceil(Number(kinds.data?.statistics.length ?? 0) / 2)}
|
numColumns={Math.ceil(Number(kinds.data?.statistics.length ?? 0) / 2)}
|
||||||
key={kinds.data?.statistics ? 'kinds' : '_'} //needed to update numColumns when data is available
|
key={kinds.data?.statistics ? 'kinds' : '_'} //needed to update numColumns when data is available
|
||||||
keyExtractor={(item) => item.name}
|
keyExtractor={(item) => item.name}
|
||||||
|
|
|
@ -30,14 +30,13 @@ function hardwareModelToIcon(hardwareModel: HardwareModel) {
|
||||||
|
|
||||||
const Devices = ({ node, stats }: Props) => {
|
const Devices = ({ node, stats }: Props) => {
|
||||||
return (
|
return (
|
||||||
<View>
|
|
||||||
<OverviewSection title="Devices" count={node ? 1 : 0}>
|
<OverviewSection title="Devices" count={node ? 1 : 0}>
|
||||||
<View>
|
<View>
|
||||||
<Fade height={'100%'} width={30} color="mobile-screen">
|
<Fade height={'100%'} width={30} color="mobile-screen">
|
||||||
<ScrollView
|
<ScrollView
|
||||||
horizontal
|
horizontal
|
||||||
showsHorizontalScrollIndicator={false}
|
showsHorizontalScrollIndicator={false}
|
||||||
contentContainerStyle={tw`px-7`}
|
contentContainerStyle={tw`px-6`}
|
||||||
>
|
>
|
||||||
{node && (
|
{node && (
|
||||||
<StatCard
|
<StatCard
|
||||||
|
@ -63,7 +62,6 @@ const Devices = ({ node, stats }: Props) => {
|
||||||
</Fade>
|
</Fade>
|
||||||
</View>
|
</View>
|
||||||
</OverviewSection>
|
</OverviewSection>
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -9,8 +9,9 @@ interface Props extends PropsWithChildren {
|
||||||
|
|
||||||
const OverviewSection = ({ title, count, children }: Props) => {
|
const OverviewSection = ({ title, count, children }: Props) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<View>
|
||||||
<View style={tw`flex-row items-center gap-3 px-7 pb-5`}>
|
{/* The view wrapper is needed to prevent gap spacing from screen container */}
|
||||||
|
<View style={tw`flex-row items-center gap-3 px-6 pb-3`}>
|
||||||
<Text style={tw`text-lg font-bold text-white`}>{title}</Text>
|
<Text style={tw`text-lg font-bold text-white`}>{title}</Text>
|
||||||
<View
|
<View
|
||||||
style={tw`flex h-[24px] w-[24px] items-center justify-center rounded-full border border-app-button/40 px-1`}
|
style={tw`flex h-[24px] w-[24px] items-center justify-center rounded-full border border-app-button/40 px-1`}
|
||||||
|
@ -19,7 +20,7 @@ const OverviewSection = ({ title, count, children }: Props) => {
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
{children}
|
{children}
|
||||||
</>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -98,8 +98,8 @@ const OverviewStats = ({ stats }: Props) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={tw`px-7`}>
|
<View style={tw`px-6`}>
|
||||||
<Text style={tw`pb-5 text-lg font-bold text-white`}>Statistics</Text>
|
<Text style={tw`pb-3 text-lg font-bold text-white`}>Statistics</Text>
|
||||||
<View style={tw`h-[250px] w-full flex-row justify-between gap-2`}>
|
<View style={tw`h-[250px] w-full flex-row justify-between gap-2`}>
|
||||||
<View style={tw`h-full w-[49%] flex-col justify-between gap-2`}>
|
<View style={tw`h-full w-[49%] flex-col justify-between gap-2`}>
|
||||||
{renderStatItems()}
|
{renderStatItems()}
|
||||||
|
|
|
@ -128,7 +128,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) {
|
||||||
return (
|
return (
|
||||||
<Text
|
<Text
|
||||||
style={twStyle(
|
style={twStyle(
|
||||||
'mb-4 text-md font-bold text-ink',
|
'mb-3 text-lg font-bold text-ink',
|
||||||
section.title === 'Client' ? 'mt-2' : 'mt-5'
|
section.title === 'Client' ? 'mt-2' : 'mt-5'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
@ -141,7 +141,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
|
||||||
const debugState = useDebugState();
|
const debugState = useDebugState();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ScreenContainer tabHeight={false} scrollview={false} style={tw`relative gap-0 px-7 py-0`}>
|
<ScreenContainer tabHeight={false} scrollview={false} style={tw`gap-0 px-6 py-0`}>
|
||||||
<SectionList
|
<SectionList
|
||||||
sections={sections(debugState)}
|
sections={sections(debugState)}
|
||||||
contentContainerStyle={tw`h-auto pb-5 pt-3`}
|
contentContainerStyle={tw`h-auto pb-5 pt-3`}
|
||||||
|
|
Loading…
Reference in a new issue