Moved about screen in sidemenu, fixed warnings

This commit is contained in:
keplyx 2020-01-30 18:58:23 +01:00
parent d654a5d7a8
commit e72196812e
6 changed files with 155 additions and 115 deletions

View file

@ -65,15 +65,15 @@ export default class SideBar extends React.Component<Props, State> {
route: "TutorInsaScreen", route: "TutorInsaScreen",
icon: "school", icon: "school",
}, },
{
name: "Mails BlueMind",
route: "BlueMindScreen",
icon: "email",
},
{ {
name: i18n.t('sidenav.divider2'), name: i18n.t('sidenav.divider2'),
route: "Divider2" route: "Divider2"
}, },
{
name: i18n.t('screens.bluemind'),
route: "BlueMindScreen",
icon: "email",
},
{ {
name: i18n.t('screens.availableRooms'), name: i18n.t('screens.availableRooms'),
route: "AvailableRoomScreen", route: "AvailableRoomScreen",
@ -93,6 +93,11 @@ export default class SideBar extends React.Component<Props, State> {
route: "SettingsScreen", route: "SettingsScreen",
icon: "settings", icon: "settings",
}, },
{
name: i18n.t('screens.about'),
route: "AboutScreen",
icon: "information",
},
]; ];
} }

View file

@ -31,24 +31,22 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
return ( return (
<Container> <Container>
<CustomHeader hasBackButton={true} navigation={nav} title={i18n.t('aboutScreen.libs')}/> <CustomHeader hasBackButton={true} navigation={nav} title={i18n.t('aboutScreen.libs')}/>
<Content> <FlatList
<FlatList data={data}
data={data} keyExtractor={(item) => item.name}
keyExtractor={(item) => item.name} style={{minHeight: 300, width: '100%'}}
style={{minHeight: 300, width: '100%'}} renderItem={({item}) =>
renderItem={({item}) => <ListItem>
<ListItem> <Body>
<Body> <Text>
<Text> {item.name}
{item.name} </Text>
</Text> <Text note>
<Text note> {item.version.replace('^', '')}
{item.version.replace('^', '')} </Text>
</Text> </Body>
</Body> </ListItem>}
</ListItem>} />
/>
</Content>
</Container> </Container>
); );
} }

View file

@ -185,6 +185,107 @@ export default class AboutScreen extends React.Component<Props, State> {
}, },
]; ];
dataOrder: Array<Object> = [
{
id: 'app',
},
{
id: 'team',
},
{
id: 'techno',
},
];
getAppCard() {
return (
<Card>
<CardItem>
<Left>
<Thumbnail square source={require('../../assets/icon.png')}/>
<Body>
<H1>{appJson.expo.name}</H1>
<Text note>
v.{appJson.expo.version}
</Text>
</Body>
</Left>
</CardItem>
<FlatList
data={this.appData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "app"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
);
}
getTeamCard() {
return (
<Card>
<CardItem>
<Left>
<CustomMaterialIcon
icon={'account-multiple'}
fontSize={40}
width={40}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
<Body>
<H1>{i18n.t('aboutScreen.team')}</H1>
</Body>
</Left>
</CardItem>
<CardItem header>
<Text>{i18n.t('aboutScreen.author')}</Text>
</CardItem>
<FlatList
data={this.authorData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "team1"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
<CardItem header>
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
</CardItem>
<FlatList
data={this.additionalDevData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "team2"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
);
}
getTechnoCard() {
return (
<Card>
<CardItem header>
<Text>{i18n.t('aboutScreen.technologies')}</Text>
</CardItem>
<FlatList
data={this.technoData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={(item) => "techno"}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
);
}
/** /**
* Get a clickable card item to be rendered inside a card. * Get a clickable card item to be rendered inside a card.
* *
@ -284,86 +385,33 @@ export default class AboutScreen extends React.Component<Props, State> {
} }
} }
getMainCard(item: Object) {
switch (item.id) {
case 'app':
return this.getAppCard();
case 'team':
return this.getTeamCard();
case 'techno':
return this.getTechnoCard();
}
return <View/>;
}
render() { render() {
const nav = this.props.navigation; const nav = this.props.navigation;
return ( return (
<Container> <Container>
{this.getBugReportModal()} {this.getBugReportModal()}
<CustomHeader navigation={nav} title={i18n.t('screens.about')} hasBackButton={true}/> <CustomHeader navigation={nav} title={i18n.t('screens.about')} hasBackButton={true}/>
<Content padder> <FlatList
<Card> style={{padding: 5}}
<CardItem> data={this.dataOrder}
<Left> extraData={this.state}
<Thumbnail square source={require('../../assets/icon.png')}/> keyExtractor={(item) => item.id}
<Body> renderItem={({item}) =>
<H1>{appJson.expo.name}</H1> this.getMainCard(item)
<Text note> }
v.{appJson.expo.version} />
</Text>
</Body>
</Left>
</CardItem>
<FlatList
data={this.appData}
extraData={this.state}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
<Card>
<CardItem>
<Left>
<CustomMaterialIcon
icon={'account-multiple'}
fontSize={40}
width={40}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
<Body>
<H1>{i18n.t('aboutScreen.team')}</H1>
</Body>
</Left>
</CardItem>
<CardItem header>
<Text>{i18n.t('aboutScreen.author')}</Text>
</CardItem>
<FlatList
data={this.authorData}
extraData={this.state}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
<CardItem header>
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
</CardItem>
<FlatList
data={this.additionalDevData}
extraData={this.state}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
<Card>
<CardItem header>
<Text>{i18n.t('aboutScreen.technologies')}</Text>
</CardItem>
<FlatList
data={this.technoData}
extraData={this.state}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
}
/>
</Card>
</Content>
</Container> </Container>
); );
} }

View file

@ -212,24 +212,11 @@ export default class SettingsScreen extends React.Component<Props, State> {
); );
} }
getRightButton() {
return (
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('AboutScreen')}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
</Touchable>
);
}
render() { render() {
const nav = this.props.navigation; const nav = this.props.navigation;
return ( return (
<Container> <Container>
<CustomHeader navigation={nav} title={i18n.t('screens.settings')} hasBackButton={true} <CustomHeader navigation={nav} title={i18n.t('screens.settings')} hasBackButton={true}/>
rightButton={this.getRightButton()}/>
<Content padder> <Content padder>
<Card> <Card>
<CardItem header> <CardItem header>

View file

@ -7,12 +7,13 @@
"menuSelf": "RU Menu", "menuSelf": "RU Menu",
"settings": "Settings", "settings": "Settings",
"availableRooms": "Available rooms", "availableRooms": "Available rooms",
"bluemind": "INSA Mails",
"about": "About", "about": "About",
"debug": "Debug" "debug": "Debug"
}, },
"sidenav": { "sidenav": {
"divider1": "Nice websites", "divider1": "Useful websites",
"divider2": "Useful services", "divider2": "Services",
"divider3": "Personalisation" "divider3": "Personalisation"
}, },
"intro": { "intro": {

View file

@ -7,12 +7,13 @@
"menuSelf": "Menu du RU", "menuSelf": "Menu du RU",
"settings": "Paramètres", "settings": "Paramètres",
"availableRooms": "Salles dispo", "availableRooms": "Salles dispo",
"bluemind": "Mails INSA",
"about": "À Propos", "about": "À Propos",
"debug": "Debug" "debug": "Debug"
}, },
"sidenav": { "sidenav": {
"divider1": "Sites bien", "divider1": "Sites utiles",
"divider2": "Services utiles", "divider2": "Services",
"divider3": "Personnalisation" "divider3": "Personnalisation"
}, },
"intro": { "intro": {