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

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

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

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

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

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

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