Improved UI and layout

This commit is contained in:
Arnaud Vergnet 2020-07-16 23:12:03 +02:00
parent b405f2aa6b
commit 96c64a98e0
5 changed files with 56 additions and 37 deletions

View file

@ -358,7 +358,7 @@
"feedbackDescription": "Tu veux voir une fonctionnalité ajoutée/modifiée/supprimée ? Tu veux donner ton opinion sur l'appli ou simplement discuter avec le développeur (c'est moi coucou) ? Utilise un des liens ci-dessous !",
"contactMeans": "L'utilisation de Gitea est recommandée, pour l'utiliser, connecte toi avec tes identifiants INSA.",
"homeButtonTitle": "Feedback/Bugs",
"homeButtonSubtitle": "Contacter le développeur"
"homeButtonSubtitle": "Contacte le développeur de l'appli"
},
"game": {
"title": "Le jeu trop ouf",

View file

@ -24,7 +24,7 @@ class ActionsDashBoardItem extends React.Component<Props> {
<List.Item
title={i18n.t("screens.feedback.homeButtonTitle")}
description={i18n.t("screens.feedback.homeButtonSubtitle")}
left={props => <List.Icon {...props} icon={"bug"}/>}
left={props => <List.Icon {...props} icon={"comment-quote"}/>}
right={props => <List.Icon {...props} icon={"chevron-right"}/>}
onPress={() => this.props.navigation.navigate("feedback")}
style={{paddingTop: 0, paddingBottom: 0, marginLeft: 10, marginRight: 10}}

View file

@ -39,8 +39,8 @@ class SmallDashboardItem extends React.Component<Props> {
onPress={this.props.onPress}
borderless={true}
style={{
marginLeft: 5,
marginRight: 5,
marginLeft: this.itemSize / 4,
marginRight: this.itemSize / 4,
}}
>
<View style={{

View file

@ -3,7 +3,7 @@
import * as React from 'react';
import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager";
import {Button, Paragraph, withTheme} from "react-native-paper";
import {Button, Card, Paragraph, withTheme} from "react-native-paper";
import type {ServiceCategory, ServiceItem} from "../../../managers/ServicesManager";
import DashboardManager from "../../../managers/DashboardManager";
import DashboardItem from "../../../components/Home/EventDashboardItem";
@ -97,7 +97,7 @@ class DashboardEditScreen extends React.Component<Props, State> {
);
}
undoDashboard= () => {
undoDashboard = () => {
this.setState({
currentDashboard: [...this.initialDashboard],
currentDashboardIdList: [...this.initialDashboardIdList]
@ -132,13 +132,18 @@ class DashboardEditScreen extends React.Component<Props, State> {
</View>
</View>
<FlatList
data={this.content}
renderItem={this.renderItem}
ListHeaderComponent={<Paragraph>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>}
style={{
}}
/>
<FlatList
data={this.content}
renderItem={this.renderItem}
ListHeaderComponent={<Card style={{margin: 5}}>
<Card.Content>
<Paragraph
style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
</Card.Content>
</Card>}
style={{}}
/>
</View>
);
}

View file

@ -172,6 +172,19 @@ class SettingsScreen extends React.Component<Props, State> {
);
}
getNavigateItem(route: string, icon: string, title: string, subtitle: string, onLongPress?: () => void) {
return (
<List.Item
title={title}
description={subtitle}
onPress={() => this.props.navigation.navigate(route)}
left={props => <List.Icon {...props} icon={icon}/>}
right={props => <List.Icon {...props} icon={"chevron-right"}/>}
onLongPress={onLongPress}
/>
);
}
render() {
return (
<ScrollView>
@ -203,12 +216,12 @@ class SettingsScreen extends React.Component<Props, State> {
left={props => <List.Icon {...props} icon="power"/>}
/>
{this.getStartScreenPicker()}
<List.Item
title={i18n.t('screens.settings.dashboard')}
description={i18n.t('screens.settings.dashboardSub')}
onPress={() => this.props.navigation.navigate("dashboard-edit")}
left={props => <List.Icon {...props} icon="view-dashboard"/>}
/>
{this.getNavigateItem(
"dashboard-edit",
"view-dashboard",
i18n.t('screens.settings.dashboard'),
i18n.t('screens.settings.dashboardSub')
)}
</List.Section>
</Card>
<Card style={{margin: 5}}>
@ -229,25 +242,26 @@ class SettingsScreen extends React.Component<Props, State> {
<Card.Title title={i18n.t('screens.settings.information')}/>
<List.Section>
{this.state.isDebugUnlocked
? <List.Item
title={i18n.t('screens.debug.title')}
left={props => <List.Icon {...props} icon="bug-check"/>}
onPress={() => this.props.navigation.navigate("debug")}
/>
? this.getNavigateItem(
"debug",
"bug-check",
i18n.t('screens.debug.title'),
""
)
: null}
<List.Item
title={i18n.t('screens.about.title')}
description={i18n.t('screens.about.buttonDesc')}
left={props => <List.Icon {...props} icon="information"/>}
onPress={() => this.props.navigation.navigate("about")}
onLongPress={this.unlockDebugMode}
/>
<List.Item
title={i18n.t('screens.feedback.homeButtonTitle')}
description={i18n.t('screens.feedback.homeButtonSubtitle')}
left={props => <List.Icon {...props} icon="bug"/>}
onPress={() => this.props.navigation.navigate("feedback")}
/>
{this.getNavigateItem(
"about",
"information",
i18n.t('screens.about.title'),
i18n.t('screens.about.buttonDesc'),
this.unlockDebugMode,
)}
{this.getNavigateItem(
"feedback",
"comment-quote",
i18n.t('screens.feedback.homeButtonTitle'),
i18n.t('screens.feedback.homeButtonSubtitle'),
)}
</List.Section>
</Card>
</ScrollView>