Skip to content

S
safetcut-app
Commit 48fae678 by Tonk
Options

update unread notification style

parent 7d3fab4c
Showing with 67 additions and 24 deletions
assets/images/SendEmailSuccess.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="215px" height="215px" viewBox="0 0 215 215" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
<title>Group 2</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-15.4%" y="-27.1%" width="131.0%" height="154.1%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.341045673 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Project-Safe-T-Cut" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="[Share]Confirm-your-Email-" transform="translate(-80.000000, -197.000000)">
<g id="Group-2" transform="translate(80.000000, 197.000000)">
<rect id="Rectangle" fill="#10CA88" opacity="0.102515811" x="0" y="0" width="215" height="215" rx="107.5"></rect>
<g id="mail" transform="translate(107.263031, 106.678515) rotate(-16.000000) translate(-107.263031, -106.678515) translate(32.263031, 63.678515)">
<g filter="url(#filter-1)" transform="translate(0.173088, 0.883785)">
<polygon id="Star" fill="#E87272" transform="translate(69.845449, 43.865530) scale(-1, 1) rotate(-90.000000) translate(-69.845449, -43.865530) " points="90.3121066 112.317079 28.7364301 112.317079 28.7364301 8.50430267 28.7364301 -24.5860199 100.633287 94.7986734 110.954468 112.317079"></polygon>
<polygon id="Star" fill="#EE5454" transform="translate(79.700815, 43.749855) rotate(-90.000000) translate(-79.700815, -43.749855) " points="100.167473 112.201405 38.591796 112.201405 38.591796 8.38862778 38.591796 -24.7016948 110.488653 94.6829985 120.809834 112.201405"></polygon>
<polygon id="Star-2" fill="#FF8E8E" transform="translate(74.773132, 30.158654) rotate(-180.000000) translate(-74.773132, -30.158654) " points="75.7586686 60.1538462 0.529375344 60.1538462 0.529375344 57.0480769 75.7586686 0.163461538 149.016889 57.0480769 149.016889 60.1538462"></polygon>
</g>
</g>
<g id="Group-4-Copy" transform="translate(156.000000, 112.000000)">
<path d="M22.4561842,0.0877302632 C34.8583224,0.0877302632 44.9122697,10.1416776 44.9122697,22.5439145 C44.9122697,34.9460526 34.8583224,45 22.4561842,45 C10.0539474,45 0,34.9460526 0,22.5439145 C0,10.1416776 10.0539474,0.0877302632 22.4561842,0.0877302632" id="Fill-1" stroke="#10CA88" stroke-width="4" fill="#FFFFFF"></path>
<path d="M34.7137593,16.0860454 L20.113434,32.1168604 C19.1306752,33.2417483 17.4460868,33.2417483 16.463328,32.1168604 L10.2862407,25.2264397 C9.44394649,24.2420515 9.44394649,22.6952688 10.4266066,21.7108806 C11.4093654,20.8671899 12.9535879,20.8671899 13.9363467,21.8514792 L18.288381,26.7732224 L31.0636533,12.8517824 C32.0464121,11.8674931 33.5906346,11.7267956 34.5733934,12.7111838 C35.5560535,13.5548745 35.5560535,15.2423547 34.7137593,16.0860454" id="Fill-5" fill="#10CA88"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
screens/Private/HistoryScreen/HistoryScreen.js
...@@ -52,7 +52,7 @@ export default class HistoryScreen extends React.Component { ...@@ -52,7 +52,7 @@ export default class HistoryScreen extends React.Component {
<View style={[theme.rowContainer, { justifyContent: 'space-between' }]}> <View style={[theme.rowContainer, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText]}>History</Text> <Text style={[theme.normalText]}>History</Text>
<View style={theme.rowContainer}> <View style={theme.rowContainer}>
<View style={[theme.rowContainer, styles.segmentContainer]}> <View style={styles.segmentContainer}>
<Icon <Icon
name="bar-graph" name="bar-graph"
type="Entypo" type="Entypo"
...@@ -143,6 +143,7 @@ export default class HistoryScreen extends React.Component { ...@@ -143,6 +143,7 @@ export default class HistoryScreen extends React.Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
segmentContainer: { segmentContainer: {
...theme.rowContainer,
width: 72, width: 72,
height: 26, height: 26,
borderRadius: 100, borderRadius: 100,
......
screens/Private/NotificationScreen/NotificationScreen.js
...@@ -175,7 +175,7 @@ class NotificationScreen extends React.Component { ...@@ -175,7 +175,7 @@ class NotificationScreen extends React.Component {
<View <View
style={[ style={[
styles.actionContainer, styles.actionContainer,
{ backgroundColor: !data.read ? 'rgba(238, 84, 84, 0.15)' : color.white }, // { backgroundColor: !data.read ? 'rgba(238, 84, 84, 0.15)' : color.white },
]} ]}
> >
{data.type === 'log' ? ( {data.type === 'log' ? (
...@@ -191,18 +191,34 @@ class NotificationScreen extends React.Component { ...@@ -191,18 +191,34 @@ class NotificationScreen extends React.Component {
/> />
)} )}
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}> <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 5 }]}> <View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 10 }]}>
{/* operate's username */}
<Text style={[theme.smDescription, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text> <Text style={[theme.smDescription, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text>
{/* operate time */}
<Text style={[theme.smDescription, { color: '#b9babc' }]}> {!data.read && (
{format(data.time * 1000, 'hh:mm A')} <View
</Text> style={[
{
width: 35,
height: 16,
backgroundColor: color.primary,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
},
]}
>
<Text style={[theme.smDescription, theme.textWhite]}>New</Text>
</View>
)}
</View> </View>
{/* operate action. */} <View style={[theme.rowContainer, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText, theme.textDark]}> <Text style={[theme.normalText, theme.textDark]}>
{data.action} {data.device} {data.action} {data.device}
</Text> </Text>
<Text style={[theme.smDescription, { color: '#b9babc' }]}>
{format(data.time * 1000, 'hh:mm A')}
</Text>
</View>
</View> </View>
</View> </View>
); );
...@@ -267,14 +283,7 @@ class NotificationScreen extends React.Component { ...@@ -267,14 +283,7 @@ class NotificationScreen extends React.Component {
return ( return (
<> <>
<TouchableWithoutFeedback onPress={() => this.setState({ toggleCalendar: !toggleCalendar })}> <TouchableWithoutFeedback onPress={() => this.setState({ toggleCalendar: !toggleCalendar })}>
<View <View style={[styles.pickerContainer, theme.rowContainer, { justifyContent: 'space-between' }]}>
style={[
styles.pickerContainer,
theme.mt2,
theme.rowContainer,
{ justifyContent: 'space-between' },
]}
>
<Text style={[theme.normalText, theme.textDark]}> <Text style={[theme.normalText, theme.textDark]}>
{format(startDate, 'DD-MM-YYYY')} {format(startDate, 'DD-MM-YYYY')}
{endDate === '' ? '' : ' - ' + format(endDate, 'DD-MM-YYYY')} {endDate === '' ? '' : ' - ' + format(endDate, 'DD-MM-YYYY')}
...@@ -288,7 +297,7 @@ class NotificationScreen extends React.Component { ...@@ -288,7 +297,7 @@ class NotificationScreen extends React.Component {
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
{toggleCalendar && ( {toggleCalendar && (
<View style={[theme.mt2, styles.pickerContainer]}> <View style={styles.pickerContainer}>
<CalendarPicker <CalendarPicker
startFromMonday={true} startFromMonday={true}
allowRangeSelection={true} allowRangeSelection={true}
...@@ -388,7 +397,7 @@ class NotificationScreen extends React.Component { ...@@ -388,7 +397,7 @@ class NotificationScreen extends React.Component {
</View> </View>
<Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text> <Text style={[theme.smallTitle, theme.textDanger, theme.mt2]}>Select Date</Text>
<ScrollView> <ScrollView>
<View style={[theme.mt2, styles.pickerContainer]}> <View style={styles.pickerContainer}>
<RNPickerSelect <RNPickerSelect
onValueChange={value => this.setState({ filterBy: value })} onValueChange={value => this.setState({ filterBy: value })}
placeholder={{ label: 'All', value: 'all' }} placeholder={{ label: 'All', value: 'all' }}
...@@ -497,6 +506,7 @@ const styles = StyleSheet.create({ ...@@ -497,6 +506,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
pickerContainer: { pickerContainer: {
...theme.mt2,
borderWidth: 1, borderWidth: 1,
borderColor: '#dcdcdc', borderColor: '#dcdcdc',
borderRadius: 5, borderRadius: 5,
......
screens/Private/NotificationScreen/notification.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"time": 1566370057, "time": 1566370057,
"action": "Switched on", "action": "Switched on",
"device": "sub breaker 4", "device": "sub breaker 4",
"read": true "read": false
}, },
{ {
"type": "log", "type": "log",
......
screens/Private/TimerScreen/TimerScreen.ios.js
...@@ -218,11 +218,7 @@ class TimerScreen extends Component { ...@@ -218,11 +218,7 @@ class TimerScreen extends Component {
</TouchableOpacity> </TouchableOpacity>
), ),
}); });
this.setState({
subBreakerFilterList: this.props.existedData,
});
console.log('STATE', this.state); console.log('STATE', this.state);
console.log('PROPS', this.props);
}; };
renderAddAndEditTimerModal = () => { renderAddAndEditTimerModal = () => {
......
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