mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 13:23:28 +00:00
[MOB-54] UI Fixes (#2059)
* UI fixes - rive animation - SD version in settings - and more * twStyle
This commit is contained in:
parent
4e70246467
commit
48634c22aa
Binary file not shown.
|
@ -2,7 +2,7 @@ import { useNavigation } from '@react-navigation/native';
|
|||
import { StackHeaderProps } from '@react-navigation/stack';
|
||||
import { ArrowLeft, DotsThreeOutline, MagnifyingGlass } from 'phosphor-react-native';
|
||||
import { lazy } from 'react';
|
||||
import { Pressable, Text, View } from 'react-native';
|
||||
import { Platform, Pressable, Text, View } from 'react-native';
|
||||
import { tw, twStyle } from '~/lib/tailwind';
|
||||
import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
|
||||
|
||||
|
@ -71,7 +71,12 @@ export default function Header({
|
|||
};
|
||||
|
||||
return (
|
||||
<View style={tw`relative h-auto w-full border-b border-app-line/50 bg-mobile-header pt-10`}>
|
||||
<View
|
||||
style={twStyle(
|
||||
'relative h-auto w-full border-b border-app-line/50 bg-mobile-header',
|
||||
Platform.OS === 'android' ? 'pt-5' : 'pt-10'
|
||||
)}
|
||||
>
|
||||
<View style={tw`mx-auto mt-5 h-auto w-full justify-center px-7 pb-5`}>
|
||||
<View style={tw`w-full flex-row items-center justify-between`}>
|
||||
<View style={tw`flex-row items-center gap-5`}>
|
||||
|
|
|
@ -3,7 +3,7 @@ import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/n
|
|||
import { StackScreenProps } from '@react-navigation/stack';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Platform, StyleSheet } from 'react-native';
|
||||
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
|
||||
import Rive, { RiveRef } from 'rive-react-native';
|
||||
import { Style } from 'twrnc/dist/esm/types';
|
||||
|
@ -106,7 +106,12 @@ export default function TabNavigator() {
|
|||
position: 'absolute',
|
||||
backgroundColor: tw.color('mobile-navtab'),
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: tw.color('app-line/50')
|
||||
borderTopColor: tw.color('app-line/50'),
|
||||
height: Platform.OS === 'android' ? 60 : 80,
|
||||
paddingVertical: 5
|
||||
},
|
||||
tabBarItemStyle: {
|
||||
marginBottom: Platform.OS === 'android' ? 10 : 0
|
||||
},
|
||||
tabBarBackground: () => (
|
||||
<BlurView tint="dark" intensity={50} style={StyleSheet.absoluteFill} />
|
||||
|
@ -121,14 +126,21 @@ export default function TabNavigator() {
|
|||
key={screen.name + index}
|
||||
name={screen.name}
|
||||
component={screen.component}
|
||||
options={{
|
||||
options={({ navigation }) => ({
|
||||
tabBarLabel: screen.label,
|
||||
tabBarLabelStyle: screen.labelStyle,
|
||||
tabBarIcon: () => (
|
||||
<TouchableWithoutFeedback>{screen.icon}</TouchableWithoutFeedback>
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => {
|
||||
navigation.navigate(screen.name);
|
||||
setActiveIndex(index);
|
||||
}}
|
||||
>
|
||||
{screen.icon}
|
||||
</TouchableWithoutFeedback>
|
||||
),
|
||||
tabBarTestID: screen.testID
|
||||
}}
|
||||
})}
|
||||
listeners={() => ({
|
||||
tabPress: () => {
|
||||
setActiveIndex(index);
|
||||
|
@ -158,8 +170,10 @@ const TabBarButton = ({
|
|||
const ref = useRef<RiveRef>(null);
|
||||
useEffect(() => {
|
||||
if (active && ref.current) {
|
||||
ref.current?.play();
|
||||
} else ref.current?.stop();
|
||||
ref.current?.play('animate');
|
||||
} else {
|
||||
ref.current?.stop();
|
||||
}
|
||||
}, [active]);
|
||||
return (
|
||||
<Rive
|
||||
|
|
|
@ -13,7 +13,7 @@ import {
|
|||
TagSimple
|
||||
} from 'phosphor-react-native';
|
||||
import React from 'react';
|
||||
import { SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
|
||||
import { Platform, SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
|
||||
import { DebugState, useDebugState, useDebugStateEnabler } from '@sd/client';
|
||||
import { SettingsItem } from '~/components/settings/SettingsItem';
|
||||
import { tw, twStyle } from '~/lib/tailwind';
|
||||
|
@ -143,7 +143,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
|
|||
<View style={tw`flex-1 bg-mobile-screen px-7`}>
|
||||
<SectionList
|
||||
sections={sections(debugState)}
|
||||
contentContainerStyle={tw`py-5`}
|
||||
contentContainerStyle={tw`h-auto pb-5 pt-3`}
|
||||
renderItem={({ item }) => (
|
||||
<SettingsItem
|
||||
title={item.title}
|
||||
|
@ -164,9 +164,10 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
|
|||
|
||||
function FooterComponent() {
|
||||
const onClick = useDebugStateEnabler();
|
||||
|
||||
return (
|
||||
<View style={tw`mb-4 mt-6 items-center`}>
|
||||
<View
|
||||
style={twStyle(Platform.OS === 'android' ? 'mb-14 mt-4' : 'mb-20 mt-5', 'items-center')}
|
||||
>
|
||||
<TouchableWithoutFeedback onPress={onClick}>
|
||||
<Text style={tw`text-base font-bold text-ink`}>Spacedrive</Text>
|
||||
</TouchableWithoutFeedback>
|
||||
|
|
Loading…
Reference in a new issue