saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Added collapsible headers to more screens

Browse source
This commit is contained in:
Arnaud Vergnet 2020-07-23 15:19:04 +02:00
parent 5349e210cb
commit 14970abeab
4 changed files with 101 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
src/navigation/TabNavigator.js
View file

@ -44,9 +44,21 @@ function ServicesStackComponent() {
headerMode={"screen"}
screenOptions={defaultScreenOptions}
>
{createScreenCollapsibleStack("index", ServicesStack, WebsitesHomeScreen, i18n.t('screens.services.title'))}
{createScreenCollapsibleStack("services-section", ServicesStack, ServicesSectionScreen, "SECTION")}
{createScreenCollapsibleStack("amicale-contact", ServicesStack, AmicaleContactScreen, i18n.t('screens.amicaleAbout.title'))}
{createScreenCollapsibleStack(
"index",
ServicesStack,
WebsitesHomeScreen,
i18n.t('screens.services.title'))}
{createScreenCollapsibleStack(
"services-section",
ServicesStack,
ServicesSectionScreen,
"SECTION")}
{createScreenCollapsibleStack(
"amicale-contact",
ServicesStack,
AmicaleContactScreen,
i18n.t('screens.amicaleAbout.title'))}
</ServicesStack.Navigator>
);
}
@ -60,12 +72,16 @@ function ProxiwashStackComponent() {
headerMode={"screen"}
screenOptions={defaultScreenOptions}
>
{createScreenCollapsibleStack("index", ProxiwashStack, ProxiwashScreen, i18n.t('screens.proxiwash.title'))}
<ProxiwashStack.Screen
name="proxiwash-about"
component={ProxiwashAboutScreen}
options={{title: i18n.t('screens.proxiwash.title'),}}
/>
{createScreenCollapsibleStack(
"index",
ProxiwashStack,
ProxiwashScreen,
i18n.t('screens.proxiwash.title'))}
{createScreenCollapsibleStack(
"proxiwash-about",
ProxiwashStack,
ProxiwashAboutScreen,
i18n.t('screens.proxiwash.title'))}
</ProxiwashStack.Navigator>
);
}
@ -84,11 +100,11 @@ function PlanningStackComponent() {
component={PlanningScreen}
options={{title: i18n.t('screens.planning.title'),}}
/>
<PlanningStack.Screen
name="planning-information"
component={PlanningDisplayScreen}
options={{title: i18n.t('screens.planning.eventDetails'),}}
/>
{createScreenCollapsibleStack(
"planning-information",
PlanningStack,
PlanningDisplayScreen,
i18n.t('screens.planning.eventDetails'))}
</PlanningStack.Navigator>
);
}
@ -115,29 +131,30 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
headerStyle: {
backgroundColor: colors.surface,
},
headerTitle: (props) => <View style={{flexDirection: "row"}}>
<Mascot
style={{
width: 50
}}
emotion={MASCOT_STYLE.RANDOM}
animated={true}
entryAnimation={{
animation: "bounceIn",
duration: 1000
}}
loopAnimation={{
animation: "pulse",
duration: 2000,
iterationCount: "infinite"
}}
/>
<Title style={{
marginLeft: 10,
marginTop: "auto",
marginBottom: "auto",
}}>{i18n.t('screens.home.title')}</Title>
</View>
headerTitle: () =>
<View style={{flexDirection: "row"}}>
<Mascot
style={{
width: 50
}}
emotion={MASCOT_STYLE.RANDOM}
animated={true}
entryAnimation={{
animation: "bounceIn",
duration: 1000
}}
loopAnimation={{
animation: "pulse",
duration: 2000,
iterationCount: "infinite"
}}
/>
<Title style={{
marginLeft: 10,
marginTop: "auto",
marginBottom: "auto",
}}>{i18n.t('screens.home.title')}</Title>
</View>
}}
initialParams={params}
/>,
@ -151,21 +168,22 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
component={ScannerScreen}
options={{title: i18n.t('screens.scanner.title'),}}
/>
<HomeStack.Screen
name="club-information"
component={ClubDisplayScreen}
options={{title: i18n.t('screens.clubs.details'),}}
/>
<HomeStack.Screen
name="feed-information"
component={FeedItemScreen}
options={{title: i18n.t('screens.home.feed'),}}
/>
<HomeStack.Screen
name="planning-information"
component={PlanningDisplayScreen}
options={{title: i18n.t('screens.planning.eventDetails'),}}
/>
{createScreenCollapsibleStack(
"club-information",
HomeStack,
ClubDisplayScreen,
i18n.t('screens.clubs.details'))}
{createScreenCollapsibleStack(
"feed-information",
HomeStack,
FeedItemScreen,
i18n.t('screens.home.feed'))}
{createScreenCollapsibleStack(
"planning-information",
HomeStack,
PlanningDisplayScreen,
i18n.t('screens.planning.eventDetails'))}
</HomeStack.Navigator>
);
}
@ -179,8 +197,16 @@ function PlanexStackComponent() {
headerMode={"screen"}
screenOptions={defaultScreenOptions}
>
{getWebsiteStack("index", PlanexStack, PlanexScreen, i18n.t("screens.planex.title"))}
{createScreenCollapsibleStack("group-select", PlanexStack, GroupSelectionScreen, "GROUP SELECT")}
{getWebsiteStack(
"index",
PlanexStack,
PlanexScreen,
i18n.t("screens.planex.title"))}
{createScreenCollapsibleStack(
"group-select",
PlanexStack,
GroupSelectionScreen,
"")}
</PlanexStack.Navigator>
);
}

10
src/screens/Home/FeedItemScreen.js
View file

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import {Linking, ScrollView, View} from 'react-native';
import {Linking, View} from 'react-native';
import {Avatar, Card, Text, withTheme} from 'react-native-paper';
import ImageModal from 'react-native-image-modal';
import Autolink from "react-native-autolink";
@ -9,6 +9,7 @@ import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHead
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import {StackNavigationProp} from "@react-navigation/stack";
import type {feedItem} from "./HomeScreen";
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
type Props = {
navigation: StackNavigationProp,
@ -71,7 +72,10 @@ class FeedItemScreen extends React.Component<Props> {
render() {
const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture != null;
return (
<ScrollView style={{margin: 5,}}>
<CollapsibleScrollView
style={{margin: 5,}}
hasTab={true}
>
<Card.Title
title={NAME_AMICALE}
subtitle={this.date}
@ -99,7 +103,7 @@ class FeedItemScreen extends React.Component<Props> {
/> : null
}
</Card.Content>
</ScrollView>
</CollapsibleScrollView>
);
}
}

10
src/screens/Planning/PlanningDisplayScreen.js
View file

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import {ScrollView, View} from 'react-native';
import {View} from 'react-native';
import {getDateOnlyString, getFormattedEventTime} from '../../utils/Planning';
import {Card, withTheme} from 'react-native-paper';
import DateManager from "../../managers/DateManager";
@ -14,6 +14,7 @@ import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import i18n from 'i18n-js';
import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../managers/ThemeManager";
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
type Props = {
navigation: StackNavigationProp,
@ -108,7 +109,10 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
if (dateString !== null)
subtitle += ' | ' + DateManager.getInstance().getTranslatedDate(dateString);
return (
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
<CollapsibleScrollView
style={{paddingLeft: 5, paddingRight: 5}}
hasTab={true}
>
<Card.Title
title={this.displayData.title}
subtitle={subtitle}
@ -133,7 +137,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
<CustomHTML html={this.displayData.description}/>
</Card.Content>
: <View/>}
</ScrollView>
</CollapsibleScrollView>
);
}

10
src/screens/Proxiwash/ProxiwashAboutScreen.js
View file

@ -1,10 +1,11 @@
// @flow
import * as React from 'react';
import {Image, ScrollView, View} from 'react-native';
import {Image, View} from 'react-native';
import i18n from "i18n-js";
import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
type Props = {};
@ -17,7 +18,10 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
render() {
return (
<ScrollView style={{padding: 5}}>
<CollapsibleScrollView
style={{padding: 5}}
hasTab={true}
>
<View style={{
width: '100%',
height: 100,
@ -76,7 +80,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
<Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph>
</Card.Content>
</Card>
</ScrollView>
</CollapsibleScrollView>
);
}
}