Improved ProxiwashScreen UI

This commit is contained in:
Yohan Simard 2020-03-10 15:33:01 +01:00
parent 67357227c0
commit 1bb52839d9
4 changed files with 32 additions and 14 deletions

View file

@ -356,25 +356,39 @@ class ProxiwashScreen extends React.Component<Props, State> {
getRenderSectionHeader({section}: Object) { getRenderSectionHeader({section}: Object) {
const isDryer = section.title === i18n.t('proxiwashScreen.dryers'); const isDryer = section.title === i18n.t('proxiwashScreen.dryers');
const subtitle = this.getMachineAvailableNumber(isDryer) + ' ' + i18n.t('proxiwashScreen.numAvailable'); const nbAvailable = this.getMachineAvailableNumber(isDryer);
const subtitle = nbAvailable + ' ' + ((nbAvailable <= 1) ? i18n.t('proxiwashScreen.numAvailable')
: i18n.t('proxiwashScreen.numAvailablePlural'));
return ( return (
<Card style={{ <View style={{
flexDirection: 'row',
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginBottom: 10, marginBottom: 10,
marginTop: 20, marginTop: 20,
elevation: 4,
}}> }}>
<Card.Title <Avatar.Icon
title={section.title}
subtitle={subtitle}
left={() => <Avatar.Icon
icon={isDryer ? 'tumble-dryer' : 'washing-machine'} icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
color={this.colors.primary} color={this.colors.primary}
style={{backgroundColor: 'transparent'}} style={{backgroundColor: 'transparent'}}
/>}
/> />
</Card> <View style={{
justifyContent: 'center',
}}>
<Text style={{
fontSize: 20,
fontWeight: 'bold',
}}>
{section.title}
</Text>
<Text style={{
color: this.colors.subtitle,
}}>
{subtitle}
</Text>
</View>
</View>
); );
} }

View file

@ -169,6 +169,7 @@
"tips": "Tips", "tips": "Tips",
"enableNotificationsTip": "Click on a running machine to enable notifications", "enableNotificationsTip": "Click on a running machine to enable notifications",
"numAvailable": "available", "numAvailable": "available",
"numAvailablePlural": "available",
"modal": { "modal": {
"enableNotifications": "Notify me", "enableNotifications": "Notify me",
"disableNotifications": "Stop notifications", "disableNotifications": "Stop notifications",

View file

@ -168,7 +168,8 @@
"procedure": "Procédure", "procedure": "Procédure",
"tips": "Conseils", "tips": "Conseils",
"enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications", "enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications",
"numAvailable": "disponibles", "numAvailable": "disponible",
"numAvailablePlural": "disponibles",
"modal": { "modal": {
"enableNotifications": "Me Notifier", "enableNotifications": "Me Notifier",
"disableNotifications": "Désactiver les notifications", "disableNotifications": "Désactiver les notifications",

View file

@ -31,6 +31,7 @@ export default class ThemeManager {
dividerBackground: '#e2e2e2', dividerBackground: '#e2e2e2',
textDisabled: '#c1c1c1', textDisabled: '#c1c1c1',
icon: '#5d5d5d', icon: '#5d5d5d',
subtitle: '#707070',
success: "#5cb85c", success: "#5cb85c",
warning: "#f0ad4e", warning: "#f0ad4e",
danger: "#d9534f", danger: "#d9534f",
@ -70,6 +71,7 @@ export default class ThemeManager {
dividerBackground: '#222222', dividerBackground: '#222222',
textDisabled: '#5b5b5b', textDisabled: '#5b5b5b',
icon: '#b3b3b3', icon: '#b3b3b3',
subtitle: '#aaaaaa',
success: "#5cb85c", success: "#5cb85c",
warning: "#f0ad4e", warning: "#f0ad4e",
danger: "#d9534f", danger: "#d9534f",