Skip to content

S
safetcut-app
Commit 9e4e07b1 by Tonk
Options

.

parent 501e0996
Showing with 39 additions and 30 deletions
screens/Private/ProfileScreen/ProfileScreen.js
import React from 'react'; import React from 'react';
import { Text, Card, Icon, Button, ActionSheet } from 'native-base'; import { Text, Card, Icon, Button, ActionSheet } from 'native-base';
import { View, StyleSheet, TouchableOpacity } from 'react-native'; import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
...@@ -48,23 +48,30 @@ class ProfileScreen extends React.Component { ...@@ -48,23 +48,30 @@ class ProfileScreen extends React.Component {
)} )}
</Card> </Card>
</View> </View>
<View style={styles.infoContainer}> <ScrollView showsVerticalScrollIndicator={false} style={{ marginVertical: 80 }}>
<Text style={theme.description}>Name</Text> <View style={styles.infoContainer}>
<Text style={styles.textInfo}>{displayName || '-'}</Text> <Text style={theme.description}>Name</Text>
<View style={styles.seperator} /> <Text style={styles.textInfo}>{displayName || '-'}</Text>
<Text style={theme.description}>Email</Text> <View style={styles.seperator} />
<Text style={styles.textInfo}>{email || '-'}</Text> <Text style={theme.description}>Email</Text>
<View style={styles.seperator} /> <Text style={styles.textInfo}>{email || '-'}</Text>
<Text style={theme.description}>Phone No.</Text> <View style={styles.seperator} />
<Text style={styles.textInfo}>{phoneNumber || '-'}</Text> <Text style={theme.description}>Phone No.</Text>
</View> <Text style={styles.textInfo}>{phoneNumber || '-'}</Text>
<TouchableOpacity </View>
style={[styles.infoContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]} <TouchableOpacity
onPress={() => this.props.navigation.navigate('ChangePassword')} style={[
> styles.infoContainer,
<Text style={[styles.textInfo, { marginTop: 0 }]}>Change Password</Text> theme.mt2,
<Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} /> theme.rowContainer,
</TouchableOpacity> { justifyContent: 'space-between' },
]}
onPress={() => this.props.navigation.navigate('ChangePassword')}
>
<Text style={[styles.textInfo, { marginTop: 0 }]}>Change Password</Text>
<Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} />
</TouchableOpacity>
</ScrollView>
<Button <Button
full full
rounded rounded
...@@ -110,7 +117,6 @@ const styles = StyleSheet.create({ ...@@ -110,7 +117,6 @@ const styles = StyleSheet.create({
}, },
infoContainer: { infoContainer: {
backgroundColor: color.white, backgroundColor: color.white,
marginTop: 80,
padding: 20, padding: 20,
}, },
textInfo: { textInfo: {
......
screens/Private/SmartMeterScreen/McbLinkScreen.js
...@@ -312,9 +312,7 @@ class McbLinkScreen extends React.Component { ...@@ -312,9 +312,7 @@ class McbLinkScreen extends React.Component {
> >
<Text style={[theme.description, { color: color.white }]}>Done</Text> <Text style={[theme.description, { color: color.white }]}>Done</Text>
</TouchableOpacity> </TouchableOpacity>
) : ( ) : null}
<Text style={theme.description}>Edit</Text>
)}
</View> </View>
<View> <View>
<ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}> <ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}>
...@@ -373,7 +371,7 @@ class McbLinkScreen extends React.Component { ...@@ -373,7 +371,7 @@ class McbLinkScreen extends React.Component {
numColumns={4} numColumns={4}
renderItem={({ item, index }) => { renderItem={({ item, index }) => {
if (item.type === 'empty') { if (item.type === 'empty') {
return <View style={{ flex: 1, margin: 10 }} />; return <View style={{ flex: 1 }} />;
} else { } else {
const dynamicColor = item.type === deviceType ? color.white : color.primary; const dynamicColor = item.type === deviceType ? color.white : color.primary;
return ( return (
...@@ -383,6 +381,9 @@ class McbLinkScreen extends React.Component { ...@@ -383,6 +381,9 @@ class McbLinkScreen extends React.Component {
{ {
backgroundColor: backgroundColor:
item.type === deviceType ? color.primary : color.white, item.type === deviceType ? color.primary : color.white,
marginVertical: 10,
marginRight: (index + 1) % 4 ? 10 : 0,
marginLeft: 0,
}, },
]} ]}
> >
......
screens/Private/SmartMeterScreen/McbLinkSettingScreen.js
...@@ -4,7 +4,7 @@ import { Text, Icon } from 'native-base'; ...@@ -4,7 +4,7 @@ import { Text, Icon } from 'native-base';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
import { TouchableOpacity, FlatList } from 'react-native-gesture-handler'; import { TouchableOpacity, FlatList, ScrollView } from 'react-native-gesture-handler';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
class McbLinkSettingScreen extends React.Component { class McbLinkSettingScreen extends React.Component {
...@@ -56,15 +56,16 @@ class McbLinkSettingScreen extends React.Component { ...@@ -56,15 +56,16 @@ class McbLinkSettingScreen extends React.Component {
render() { render() {
const { mcbLinkInfo, subBreakerInfo } = this.state; const { mcbLinkInfo, subBreakerInfo } = this.state;
return ( return (
<View style={theme.container}> <ScrollView showsVerticalScrollIndicator={false} style={theme.container}>
<View style={theme.mt2}>{this.renderList(mcbLinkInfo)}</View> <View style={theme.mt2}>{this.renderList(mcbLinkInfo)}</View>
<FlatList <FlatList
scrollEnabled={false}
data={subBreakerInfo} data={subBreakerInfo}
renderItem={({ item, index }) => this.renderList(item, index)} renderItem={({ item, index }) => this.renderList(item, index)}
ItemSeparatorComponent={() => <View style={styles.seperator} />} ItemSeparatorComponent={() => <View style={styles.seperator} />}
contentContainerStyle={theme.mt2} contentContainerStyle={{ marginVertical: 20 }}
/> />
</View> </ScrollView>
); );
} }
} }
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
...@@ -213,7 +213,10 @@ class SmartMeterDetailScreen extends Component { ...@@ -213,7 +213,10 @@ class SmartMeterDetailScreen extends Component {
index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 }, index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 },
]} ]}
> >
<Text style={[theme.description, { color: item.value > item.limit ? color.white : color.grey }]}> <Text
numberOfLines={1}
style={[theme.description, { color: item.value > item.limit ? color.white : color.grey }]}
>
{item.name} {item.name}
</Text> </Text>
<Text <Text
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
...@@ -88,8 +88,6 @@ class SmartMeterScreen extends PureComponent { ...@@ -88,8 +88,6 @@ class SmartMeterScreen extends PureComponent {
return ( return (
<View style={[theme.container]}> <View style={[theme.container]}>
<View style={theme.containerWithPadding}> <View style={theme.containerWithPadding}>
<Text style={[theme.smallTitle, theme.textDark, { marginBottom: 10 }]}>Smart Device</Text>
<SearchBar <SearchBar
containerStyle={styles.searchBarContainer} containerStyle={styles.searchBarContainer}
inputContainerStyle={styles.searchBarInputContainer} inputContainerStyle={styles.searchBarInputContainer}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment