mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 13:23:28 +00:00
[MOB-90] Visual adjustments (#2383)
* Visual adjustments * Update Tags.tsx * cleanup * remove prop * remove hitslop * sectionlist
This commit is contained in:
parent
e0f540a1be
commit
57b0139240
|
@ -14,7 +14,7 @@ type HeaderProps = {
|
|||
title?: string; //title of the page
|
||||
showSearch?: boolean; //show the search button
|
||||
showDrawer?: boolean; //show the drawer button
|
||||
searchType?: 'explorer' | 'location' | 'categories'; //Temporary
|
||||
searchType?: 'explorer' | 'location' | 'categories' | 'tags'; //Temporary
|
||||
navBack?: boolean; //navigate back to the previous screen
|
||||
headerKind?: 'default' | 'location' | 'tag'; //kind of header
|
||||
route?: never;
|
||||
|
@ -38,7 +38,7 @@ export default function Header({
|
|||
routeTitle,
|
||||
headerKind = 'default',
|
||||
showDrawer = false,
|
||||
showSearch = true
|
||||
showSearch = false,
|
||||
}: Props) {
|
||||
const navigation = useNavigation<DrawerNavigationHelpers>();
|
||||
const explorerStore = useExplorerStore();
|
||||
|
@ -52,7 +52,7 @@ export default function Header({
|
|||
paddingTop: headerHeight + (isAndroid ? 15 : 0)
|
||||
})}
|
||||
>
|
||||
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-4`}>
|
||||
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
|
||||
<View style={tw`w-full flex-row items-center justify-between`}>
|
||||
<View style={tw`flex-row items-center gap-3`}>
|
||||
{navBack && (
|
||||
|
@ -132,6 +132,8 @@ const HeaderSearchType = ({ searchType }: HeaderSearchTypeProps) => {
|
|||
return 'Explorer'; //TODO
|
||||
case 'location':
|
||||
return <Search placeholder="Location name..." />;
|
||||
case 'tags':
|
||||
return <Search placeholder="Tag name..." />;
|
||||
case 'categories':
|
||||
return <Search placeholder="Category name..." />;
|
||||
default:
|
||||
|
@ -151,7 +153,7 @@ const HeaderIconKind = ({ headerKind, routeParams }: HeaderIconKindProps) => {
|
|||
case 'tag':
|
||||
return (
|
||||
<View
|
||||
style={twStyle('h-[30px] w-[30px] rounded-full', {
|
||||
style={twStyle('h-[24px] w-[24px] rounded-full', {
|
||||
backgroundColor: routeParams.color
|
||||
})}
|
||||
/>
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
import { useRoute } from '@react-navigation/native';
|
||||
import { DimensionValue, Platform } from 'react-native';
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
import { ClassInput } from 'twrnc';
|
||||
import { tw, twStyle } from '~/lib/tailwind';
|
||||
import { useExplorerStore } from '~/stores/explorerStore';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode; // children of fade
|
||||
|
@ -13,7 +11,6 @@ interface Props {
|
|||
orientation?: 'horizontal' | 'vertical'; // orientation of fade
|
||||
fadeSides?: 'left-right' | 'top-bottom'; // which sides to fade
|
||||
screenFade?: boolean; // if true, the fade will consider the bottom tab bar height
|
||||
noConditions?: boolean; // if true, the fade will be rendered as is
|
||||
bottomFadeStyle?: ClassInput; // tailwind style for bottom fade
|
||||
topFadeStyle?: ClassInput; // tailwind style for top fade
|
||||
}
|
||||
|
@ -25,20 +22,15 @@ const Fade = ({
|
|||
height,
|
||||
bottomFadeStyle,
|
||||
topFadeStyle,
|
||||
noConditions = false,
|
||||
screenFade = false,
|
||||
fadeSides = 'left-right',
|
||||
orientation = 'horizontal'
|
||||
}: Props) => {
|
||||
const route = useRoute();
|
||||
const { toggleMenu } = useExplorerStore();
|
||||
const bottomTabBarHeight = Platform.OS === 'ios' ? 80 : 60;
|
||||
const gradientStartEndMap = {
|
||||
'left-right': { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
|
||||
'top-bottom': { start: { x: 0, y: 1 }, end: { x: 0, y: 0 } }
|
||||
};
|
||||
const menuHeight = 57; // height of the explorer menu
|
||||
const routesWithMenu = ['Location', 'Search', 'Tag']; // routes that are associated with the explorer
|
||||
return (
|
||||
<>
|
||||
<LinearGradient
|
||||
|
@ -46,10 +38,7 @@ const Fade = ({
|
|||
width: orientation === 'vertical' ? height : width,
|
||||
height: orientation === 'vertical' ? width : height,
|
||||
position: 'absolute',
|
||||
top:
|
||||
!noConditions && toggleMenu && routesWithMenu.includes(route.name)
|
||||
? menuHeight
|
||||
: 0,
|
||||
top: 0,
|
||||
alignSelf: 'center',
|
||||
left: fadeSides === 'left-right' ? 0 : undefined,
|
||||
transform: fadeSides === 'left-right' ? undefined : [{ rotate: '180deg' }],
|
||||
|
|
|
@ -3,8 +3,6 @@ import { Platform, ScrollView, View } from 'react-native';
|
|||
import { ClassInput } from 'twrnc/dist/esm/types';
|
||||
import { tw, twStyle } from '~/lib/tailwind';
|
||||
|
||||
import Fade from './Fade';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
/** If true, the container will be a ScrollView */
|
||||
|
@ -13,16 +11,11 @@ interface Props {
|
|||
/** If true, the bottom tab bar height will be added to the bottom of the container */
|
||||
tabHeight?: boolean;
|
||||
scrollToBottomOnChange?: boolean;
|
||||
/** Styling of both side fades */
|
||||
topFadeStyle?: string;
|
||||
bottomFadeStyle?: string;
|
||||
}
|
||||
|
||||
const ScreenContainer = ({
|
||||
children,
|
||||
style,
|
||||
topFadeStyle,
|
||||
bottomFadeStyle,
|
||||
scrollview = true,
|
||||
tabHeight = true,
|
||||
scrollToBottomOnChange = false
|
||||
|
@ -31,16 +24,6 @@ const ScreenContainer = ({
|
|||
const bottomTabBarHeight = Platform.OS === 'ios' ? 80 : 60;
|
||||
return scrollview ? (
|
||||
<View style={tw`relative flex-1`}>
|
||||
<Fade
|
||||
topFadeStyle={topFadeStyle}
|
||||
bottomFadeStyle={bottomFadeStyle}
|
||||
screenFade
|
||||
fadeSides="top-bottom"
|
||||
orientation="vertical"
|
||||
color="black"
|
||||
width={30}
|
||||
height="100%"
|
||||
>
|
||||
<ScrollView
|
||||
ref={ref}
|
||||
onContentSizeChange={() => {
|
||||
|
@ -55,20 +38,9 @@ const ScreenContainer = ({
|
|||
>
|
||||
{children}
|
||||
</ScrollView>
|
||||
</Fade>
|
||||
</View>
|
||||
) : (
|
||||
<View style={tw`relative flex-1`}>
|
||||
<Fade
|
||||
topFadeStyle={topFadeStyle}
|
||||
bottomFadeStyle={bottomFadeStyle}
|
||||
screenFade
|
||||
fadeSides="top-bottom"
|
||||
orientation="vertical"
|
||||
color="black"
|
||||
width={30}
|
||||
height="100%"
|
||||
>
|
||||
<View
|
||||
style={twStyle(
|
||||
'flex-1 justify-between gap-10 bg-black py-6',
|
||||
|
@ -78,7 +50,6 @@ const ScreenContainer = ({
|
|||
>
|
||||
{children}
|
||||
</View>
|
||||
</Fade>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -28,7 +28,7 @@ const GridLocation: React.FC<GridLocationProps> = ({ location, modalRef }: GridL
|
|||
)}
|
||||
/>
|
||||
</View>
|
||||
<Pressable hitSlop={24} onPress={() => modalRef.current?.present()}>
|
||||
<Pressable onPress={() => modalRef.current?.present()}>
|
||||
<DotsThreeOutlineVertical
|
||||
weight="fill"
|
||||
size={20}
|
||||
|
|
|
@ -26,7 +26,6 @@ const Locations = () => {
|
|||
<>
|
||||
<OverviewSection title="Locations" count={locations?.length}>
|
||||
<View style={tw`flex-row items-center`}>
|
||||
<Fade height={'100%'} width={30} color="black">
|
||||
<FlatList
|
||||
horizontal
|
||||
data={locations}
|
||||
|
@ -77,7 +76,6 @@ const Locations = () => {
|
|||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
</Fade>
|
||||
</View>
|
||||
</OverviewSection>
|
||||
<ImportModal ref={modalRef} />
|
||||
|
|
|
@ -18,7 +18,7 @@ export default function Search({ placeholder }: Props) {
|
|||
}, [searchStore]);
|
||||
return (
|
||||
<View
|
||||
style={tw`mt-4 flex h-11 w-full flex-row items-center justify-between rounded-md border border-app-inputborder bg-app-input px-3 shadow-sm`}
|
||||
style={tw`mt-3 h-10 w-full flex-row items-center justify-between rounded-md border border-app-inputborder bg-app-input px-3 shadow-sm`}
|
||||
>
|
||||
<TextInput
|
||||
onChangeText={(text) => searchStore.setSearch(text)}
|
||||
|
|
|
@ -47,7 +47,7 @@ const FiltersBar = () => {
|
|||
<Plus weight="bold" size={20} color={tw.color('text-ink-dull')} />
|
||||
</Button>
|
||||
<View style={tw`relative flex-1`}>
|
||||
<Fade noConditions height={'100%'} width={30} color="app-header">
|
||||
<Fade height={'100%'} width={30} color="app-header">
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
|
|
|
@ -20,7 +20,7 @@ const GridTag = ({ tag, modalRef }: GridTagProps) => {
|
|||
backgroundColor: tag.color!
|
||||
})}
|
||||
/>
|
||||
<Pressable hitSlop={24} onPress={() => modalRef.current?.present()}>
|
||||
<Pressable onPress={() => modalRef.current?.present()}>
|
||||
<DotsThreeOutlineVertical
|
||||
weight="fill"
|
||||
size={20}
|
||||
|
|
|
@ -18,14 +18,14 @@ export default function BrowseStack() {
|
|||
<Stack.Screen
|
||||
name="Browse"
|
||||
component={BrowseScreen}
|
||||
options={{ header: () => <Header showDrawer title="Browse" /> }}
|
||||
options={{ header: () => <Header showSearch showDrawer title="Browse" /> }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Location"
|
||||
component={LocationScreen}
|
||||
options={{
|
||||
header: (route) => (
|
||||
<Header route={route} headerKind="location" routeTitle navBack />
|
||||
<Header route={route} showSearch headerKind="location" routeTitle navBack />
|
||||
)
|
||||
}}
|
||||
/>
|
||||
|
@ -33,7 +33,7 @@ export default function BrowseStack() {
|
|||
name="Tags"
|
||||
component={TagsScreen}
|
||||
options={{
|
||||
header: () => <Header navBack title="Tags" />
|
||||
header: () => <Header searchType='tags' navBack title="Tags" />
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
|
@ -47,7 +47,7 @@ export default function BrowseStack() {
|
|||
name="Tag"
|
||||
component={TagScreen}
|
||||
options={{
|
||||
header: (route) => <Header navBack routeTitle route={route} headerKind="tag" />
|
||||
header: (route) => <Header showSearch navBack routeTitle route={route} headerKind="tag" />
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
|
|
|
@ -13,7 +13,7 @@ export default function NetworkStack() {
|
|||
<Stack.Screen
|
||||
name="Network"
|
||||
component={NetworkScreen}
|
||||
options={{ header: () => <Header showDrawer title="Network" /> }}
|
||||
options={{ header: () => <Header showSearch showDrawer title="Network" /> }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
|
|
|
@ -14,7 +14,7 @@ export default function OverviewStack() {
|
|||
<Stack.Screen
|
||||
name="Overview"
|
||||
component={OverviewScreen}
|
||||
options={{ header: () => <Header showDrawer title="Overview" /> }}
|
||||
options={{ header: () => <Header showSearch showDrawer title="Overview" /> }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Categories"
|
||||
|
|
|
@ -28,7 +28,7 @@ export default function SettingsStack() {
|
|||
<Stack.Screen
|
||||
name="Settings"
|
||||
component={SettingsScreen}
|
||||
options={{ header: () => <Header showDrawer title="Settings" /> }}
|
||||
options={{ header: () => <Header showSearch showDrawer title="Settings" /> }}
|
||||
/>
|
||||
{/* Client */}
|
||||
<Stack.Screen
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
import { useNavigation } from '@react-navigation/native';
|
||||
import { Plus } from 'phosphor-react-native';
|
||||
import { useRef } from 'react';
|
||||
import { useMemo, useRef } from 'react';
|
||||
import { Pressable, View } from 'react-native';
|
||||
import { FlatList } from 'react-native-gesture-handler';
|
||||
import { useCache, useLibraryQuery, useNodes } from '@sd/client';
|
||||
import Empty from '~/components/layout/Empty';
|
||||
import Fade from '~/components/layout/Fade';
|
||||
import { ModalRef } from '~/components/layout/Modal';
|
||||
import ScreenContainer from '~/components/layout/ScreenContainer';
|
||||
import CreateTagModal from '~/components/modal/tag/CreateTagModal';
|
||||
import { TagItem } from '~/components/tags/TagItem';
|
||||
import { tw, twStyle } from '~/lib/tailwind';
|
||||
import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
import { useSearchStore } from '~/stores/searchStore';
|
||||
|
||||
interface Props {
|
||||
viewStyle?: 'grid' | 'list';
|
||||
|
@ -21,9 +22,19 @@ export default function TagsScreen({ viewStyle = 'list' }: Props) {
|
|||
const navigation = useNavigation<BrowseStackScreenProps<'Browse'>['navigation']>();
|
||||
const modalRef = useRef<ModalRef>(null);
|
||||
|
||||
const {search} = useSearchStore();
|
||||
const tags = useLibraryQuery(['tags.list']);
|
||||
useNodes(tags.data?.nodes);
|
||||
const tagData = useCache(tags.data?.items);
|
||||
const [debouncedSearch] = useDebounce(search, 200);
|
||||
|
||||
const filteredTags = useMemo(
|
||||
() =>
|
||||
tagData?.filter((location) =>
|
||||
location.name?.toLowerCase().includes(debouncedSearch.toLowerCase())
|
||||
) ?? [],
|
||||
[debouncedSearch, tagData]
|
||||
);
|
||||
|
||||
return (
|
||||
<ScreenContainer scrollview={false} style={tw`relative px-6 py-0`}>
|
||||
|
@ -36,15 +47,8 @@ export default function TagsScreen({ viewStyle = 'list' }: Props) {
|
|||
>
|
||||
<Plus size={20} weight="bold" style={tw`text-ink`} />
|
||||
</Pressable>
|
||||
<Fade
|
||||
fadeSides="top-bottom"
|
||||
orientation="vertical"
|
||||
color="black"
|
||||
width={30}
|
||||
height="100%"
|
||||
>
|
||||
<FlatList
|
||||
data={tagData}
|
||||
data={filteredTags}
|
||||
renderItem={({ item }) => (
|
||||
<TagItem
|
||||
viewStyle={viewStyle}
|
||||
|
@ -76,7 +80,6 @@ export default function TagsScreen({ viewStyle = 'list' }: Props) {
|
|||
tagData.length === 0 && 'h-full items-center justify-center'
|
||||
)}
|
||||
/>
|
||||
</Fade>
|
||||
<CreateTagModal ref={modalRef} />
|
||||
</ScreenContainer>
|
||||
);
|
||||
|
|
|
@ -5,7 +5,7 @@ import SaveAdd from '~/components/search/filters/SaveAdd';
|
|||
const FiltersScreen = () => {
|
||||
return (
|
||||
<>
|
||||
<ScreenContainer bottomFadeStyle="bottom-0" tabHeight={false}>
|
||||
<ScreenContainer tabHeight={false}>
|
||||
<FiltersList />
|
||||
</ScreenContainer>
|
||||
<SaveAdd />
|
||||
|
|
|
@ -129,7 +129,7 @@ function renderSectionHeader({ section }: { section: { title: string } }) {
|
|||
<Text
|
||||
style={twStyle(
|
||||
'mb-3 text-lg font-bold text-ink',
|
||||
section.title === 'Client' ? 'mt-2' : 'mt-5'
|
||||
section.title === 'Client' ? 'mt-0' : 'mt-5'
|
||||
)}
|
||||
>
|
||||
{section.title}
|
||||
|
@ -142,24 +142,24 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
|
|||
|
||||
return (
|
||||
<ScreenContainer tabHeight={false} scrollview={false} style={tw`gap-0 px-6 py-0`}>
|
||||
<SectionList
|
||||
sections={sections(debugState)}
|
||||
contentContainerStyle={tw`h-auto pb-5 pt-3`}
|
||||
renderItem={({ item }) => (
|
||||
<SettingsItem
|
||||
title={item.title}
|
||||
leftIcon={item.icon}
|
||||
onPress={() => navigation.navigate(item.navigateTo as any)}
|
||||
rounded={item.rounded}
|
||||
/>
|
||||
)}
|
||||
renderSectionHeader={renderSectionHeader}
|
||||
ListFooterComponent={<FooterComponent />}
|
||||
showsVerticalScrollIndicator={false}
|
||||
stickySectionHeadersEnabled={false}
|
||||
initialNumToRender={50}
|
||||
/>
|
||||
</ScreenContainer>
|
||||
<SectionList
|
||||
contentContainerStyle={tw`py-6`}
|
||||
sections={sections(debugState)}
|
||||
renderItem={({ item }) => (
|
||||
<SettingsItem
|
||||
title={item.title}
|
||||
leftIcon={item.icon}
|
||||
onPress={() => navigation.navigate(item.navigateTo as any)}
|
||||
rounded={item.rounded}
|
||||
/>
|
||||
)}
|
||||
renderSectionHeader={renderSectionHeader}
|
||||
ListFooterComponent={<FooterComponent />}
|
||||
showsVerticalScrollIndicator={false}
|
||||
stickySectionHeadersEnabled={false}
|
||||
initialNumToRender={50}
|
||||
/>
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue