Merge pull request #86 from idanlevi1/master

ImagePicker, modal design and notifications - iOS fixes
startach · Feb 18, 2019 · daba5d8 · daba5d8
2 parents 9c2b5ee + 98707ac
commit daba5d8
Show file tree

Hide file tree

Showing 15 changed files with 141 additions and 114 deletions.
diff --git a/src/nav/SideMenu.js b/src/nav/SideMenu.js
@@ -180,7 +180,7 @@ const styles = StyleSheet.create({
     userImage:{
         width:85,
         height:85,
-        borderRadius:50,
+        borderRadius:85/2,
         borderWidth:1,
         borderColor: '#ffffff',
         marginBottom:5,

diff --git a/src/views/activities/ActivitiesStyle.js b/src/views/activities/ActivitiesStyle.js
@@ -1,4 +1,5 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
+const { height } = Dimensions.get('screen');
 
 export default StyleSheet.create({
   container: {
@@ -97,10 +98,10 @@ export default StyleSheet.create({
     alignItems: 'center',
     alignSelf: "center",
     backgroundColor: "#B4B7BA",
-    marginTop: 100,
-    height: 300,
+    marginTop: height * 0.25,
+    height: height * 0.5,
     width: "90%",
-    borderRadius: 15
+    borderRadius: 10,
   },
   participantsContainer: {
     flex: 1,
@@ -125,7 +126,7 @@ export default StyleSheet.create({
     marginBottom: 3,
     width: 30,
     height: 30,
-    borderRadius: 100
+    borderRadius: 30 / 2
   },
   withoutImgList: {
     margin: 5,

diff --git a/src/views/adminActivities/AdminActivitiyList.js b/src/views/adminActivities/AdminActivitiyList.js
@@ -77,7 +77,6 @@ class AdminActivitiyList extends React.Component {
     }
 
     render() {
-        const {navigation:{navigate}} =this.props;
         return (
             <AdminActiviyListView 
                 events= {this.state.events} 

diff --git a/src/views/adminActivities/AdminActivitiyListView.js b/src/views/adminActivities/AdminActivitiyListView.js
@@ -17,11 +17,11 @@ const renderCaptionText = (caption)=> {
 const ActivityItem = ({activity, index, openActivity, participants}) => {
     return  <TouchableOpacity underlayColor='#fff' onPress={() => {openActivity(activity,participants[index])}}>
         <View style={(index%2 === 0) ? adminActivityListStyle.activityItemEven : adminActivityListStyle.activityItemOdd}>
-            <Text style={[activity.fullFormatDate<new Date().toISOString()?{color:'#E94B3C'}:{color:'#009B77'} ,{width: '25%'}]}>{activity.date}</Text>
+            <Text style={[activity.fullFormatDate<new Date().toISOString()?{color:'#E94B3C'}:{color:'#009B77'} ,adminActivityListStyle.dateText]}>{activity.date}</Text>
             <Text>|</Text>
-            <Text style={{width: '35%'}}>{renderCaptionText(activity.caption)}</Text>
+            <Text style={adminActivityListStyle.captionText}>{renderCaptionText(activity.caption)}</Text>
             <Text>|</Text>
-            <Text style={{width: '25%'}}>{renderParticipantsText(participants[index])}</Text>
+            <Text style={adminActivityListStyle.participantsText}>{renderParticipantsText(participants[index])}</Text>
             <FontAwesome name="chevron-left"/>
         </View>
     </TouchableOpacity>

diff --git a/src/views/adminActivities/AdminActivityView.js b/src/views/adminActivities/AdminActivityView.js
@@ -111,7 +111,7 @@ class AdminActivityView extends Component{
                     onRequestClose={() => this.setState({displaySendMessagesDialog:true})}
                     >
                     { !this.props.process ?
-                    <View style={[modalStyles.modalContainer,{height: "35%"}]}>
+                    <View style={[modalStyles.modalContainer]}>
                             <Text style={[modalStyles.title,{color:'#fff'}]}> שלח הודעה למתנדבים {'\n'} </Text>
                             <TextInput
                                 style={styles.inputField}

diff --git a/src/views/adminActivities/CreateActivityView.js b/src/views/adminActivities/CreateActivityView.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {View, Text, TextInput, KeyboardAvoidingView, Keyboard, TouchableOpacity, Modal, TouchableWithoutFeedback, Switch, ActivityIndicator} from "react-native";
+import {View, Text, TextInput, KeyboardAvoidingView, Keyboard, TouchableOpacity, Modal, TouchableWithoutFeedback, Switch, ActivityIndicator, ScrollView} from "react-native";
 import DateTimePicker from 'react-native-modal-datetime-picker';
 import {CreateActivityStyle as styles } from './styles';
 import {sendNotificationToAllUsers} from '../notification/NotificationService';
@@ -72,7 +72,7 @@ class CreateActivityView extends Component {
     }
 
     getModalMessage(hospital) { return (
-        <Text style={[styles.subtitle,{color:'#fff'}]}>
+        <Text style={[styles.subtitle,{color:'#fff', paddingVertical: 15}]}>
             {this.state.success ?
             'פעילות נוספה בהצלחה' +'\n' + this.state.activityName  + '\nבתאריך ' + this.state.fullDate + '\nבשעה ' +this.state.fullTime + '\nבבית חולים ' + hospital : 
             'שגיאה! נסה שנית מאוחר יותר' }
@@ -88,61 +88,61 @@ class CreateActivityView extends Component {
         const { hospital, first, last } = this.props;
         return (
         <KeyboardAvoidingView behavior='padding' style={styles.container}>
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-            <View style={{flex: 1, paddingTop:25}}>
-                <Text style={styles.subtitle}>שם הרכז</Text>
-                <Text style={[styles.inputField,styles.untouchableField]}>{first +' '+ last}</Text>
-                <Text style={styles.subtitle}>מקום פעילות</Text>
-                <Text style={[styles.inputField,styles.untouchableField]}>{hospital}</Text>
-                <Text style={styles.subtitle}>שם הפעילות</Text>
-                <TextInput
-                    style={styles.inputField}
-                    placeholder= 'שם הפעילות'
-                    underlineColorAndroid='transparent'
-                    onChangeText={ (text) => { this.setState({activityName:text,isButtonDisabled: !(text.length > 0)}) } }
-                    value={this.state.activityName}
-                    maxLength={60}
-                />
-                <TouchableOpacity
-                    rounded
-                    onPress={this._showDateTimePicker}
-                    style={[styles.button,{backgroundColor:'#009B77'}]}>
-                    <Text style={styles.buttonText}>בחר תאריך וזמן פעילות</Text>
-                </TouchableOpacity>
-                <Text style={[styles.subtitle,styles.dateField]}>
-                {
-                    this.state.fullTime ?
-                    'תאריך: ' + this.state.fullDate + ' שעה: ' + this.state.fullTime
-                    : this.alertDate
-                }
-                </Text>
-                <View style={{flexDirection:'row',justifyContent: "center"}}>
-                    <Text style={{fontSize: 14,color:'#B93A32'}}>לשלוח התראות על האירוע לכל המשתמשים?</Text>
-                    <Switch 
-                    onTintColor={'#00A591'}
-                    thumbTintColor={ this.state.notificationToAll ? '#79C753' : '#898E8C'}
-                    tintColor={'#B93A32'}
-                    style= {styles.switch}
-                    onValueChange={() => this.setState({notificationToAll:!this.state.notificationToAll})}
-                    value={this.state.notificationToAll}
+            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+                <ScrollView style={styles.scrollContainer}>
+                    <Text style={styles.subtitle}>שם הרכז</Text>
+                    <Text style={[styles.inputField,styles.untouchableField]}>{first +' '+ last}</Text>
+                    <Text style={styles.subtitle}>מקום פעילות</Text>
+                    <Text style={[styles.inputField,styles.untouchableField]}>{hospital}</Text>
+                    <Text style={styles.subtitle}>שם הפעילות</Text>
+                    <TextInput
+                        style={styles.inputField}
+                        placeholder= 'שם הפעילות'
+                        underlineColorAndroid='transparent'
+                        onChangeText={ (text) => { this.setState({activityName:text,isButtonDisabled: !(text.length > 0)}) } }
+                        value={this.state.activityName}
+                        maxLength={60}
                     />
-                </View>
-                <TouchableOpacity 
-                    rounded
-                    disabled = {this.state.isButtonDisabled || this.state.loading}
-                    onPress={this.createNewActivity}
-                    style={[styles.button, this.state.isButtonDisabled ? { backgroundColor:'#c6c6c6'} : { }]}>
+                    <TouchableOpacity
+                        rounded
+                        onPress={this._showDateTimePicker}
+                        style={[styles.button,{backgroundColor:'#009B77'}]}>
+                        <Text style={styles.buttonText}>בחר תאריך וזמן פעילות</Text>
+                    </TouchableOpacity>
+                    <Text style={[styles.subtitle,styles.dateField]}>
                     {
-                    !this.state.loading ? 
-                    <Text style={styles.buttonText}>אישור</Text>
-                    :
+                        this.state.fullTime ?
+                        'תאריך: ' + this.state.fullDate + ' שעה: ' + this.state.fullTime
+                        : this.alertDate
+                    }
+                    </Text>
                     <View style={{flexDirection:'row',justifyContent: "center"}}>
-                        <Text style={{fontSize: 18,color:'#FFFFFF'}}>שולח התראות</Text>
-                        <ActivityIndicator size='large' color='#FFFFFF' /> 
+                        <Text style={{fontSize: 14,color:'#B93A32'}}>לשלוח התראות על האירוע לכל המשתמשים?</Text>
+                        <Switch 
+                        onTintColor={'#00A591'}
+                        thumbTintColor={ this.state.notificationToAll ? '#79C753' : '#898E8C'}
+                        tintColor={'#B93A32'}
+                        style= {styles.switch}
+                        onValueChange={() => this.setState({notificationToAll:!this.state.notificationToAll})}
+                        value={this.state.notificationToAll}
+                        />
                     </View>
-                    }
-                </TouchableOpacity>
-            </View>
+                    <TouchableOpacity 
+                        rounded
+                        disabled = {this.state.isButtonDisabled || this.state.loading}
+                        onPress={this.createNewActivity}
+                        style={[styles.button, this.state.isButtonDisabled ? { backgroundColor:'#c6c6c6'} : { }]}>
+                        {
+                        !this.state.loading ? 
+                        <Text style={styles.buttonText}>אישור</Text>
+                        :
+                        <View style={{flexDirection:'row',justifyContent: "center"}}>
+                            <Text style={{fontSize: 18,color:'#FFFFFF'}}>שולח התראות</Text>
+                            <ActivityIndicator size='large' color='#FFFFFF' /> 
+                        </View>
+                        }
+                    </TouchableOpacity>
+                </ScrollView>
             </TouchableWithoutFeedback>
 
             <DateTimePicker
@@ -164,7 +164,7 @@ class CreateActivityView extends Component {
                     {this.getModalMessage(hospital)}     
                     <TouchableOpacity
                     rounded
-                    style={[styles.button,{marginTop:0}]}
+                    style={[styles.button]}
                     onPress={() => { this.state.success ? this.backToList() : this.setState({modalVisible:false})}}
                     >
                     <Text style={styles.buttonText}>אישור</Text>

diff --git a/src/views/adminActivities/EventView.js b/src/views/adminActivities/EventView.js
@@ -288,7 +288,7 @@ class EventView extends Component {
             :
             null
         }
-        <Toast ref="toast" style={{backgroundColor:'#C2185B'}} positionValue={180} opacity={0.8}/>
+        <Toast ref="toast" style={{backgroundColor:'#555'}} positionValue={180} opacity={0.8}/>
       </View>
     )
   }

diff --git a/src/views/adminActivities/styles.js b/src/views/adminActivities/styles.js
@@ -1,4 +1,5 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, Dimensions } from "react-native";
+const { height } = Dimensions.get('screen');
 
 const adminActivityStyle = StyleSheet.create({
   container: {
@@ -26,7 +27,7 @@ const adminActivityStyle = StyleSheet.create({
     marginBottom: 3,
     width: 35,
     height: 35,
-    borderRadius: 100
+    borderRadius: 35 / 2
   },
   withoutImgList: {
     margin: 5,
@@ -138,21 +139,21 @@ const modalActivityStyle = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     alignSelf: "center",
-    marginTop: "20%",
-    backgroundColor: "#B4B7BA",
-    height: 300,
+    marginTop: height * 0.2,
+    backgroundColor: '#c2185b',
+    height: height * 0.4,
     width: "90%",
-    borderRadius: 15,
+    borderRadius: 10,
   },
   modalContainer: {
-    marginTop: "30%",
+    marginTop: height * 0.2,
     justifyContent: "center",
     alignSelf: "center",
-    backgroundColor: "#B4B7BA",
-    height: "80%",
+    backgroundColor: '#c2185b',
+    height: height * 0.4,
     width: "90%",
     borderWidth: 2,
-    borderRadius: 15
+    borderRadius: 10
   },
   title: {
     fontSize: 22,
@@ -207,7 +208,7 @@ const adminActivityListStyle = StyleSheet.create({
   },
   userImage: {
     marginBottom: 10,
-    borderRadius: 100,
+    borderRadius: 65 / 2,
     width: 65,
     height: 65
   },
@@ -247,7 +248,22 @@ const adminActivityListStyle = StyleSheet.create({
     justifyContent: "space-around",
     alignItems: "center",
     backgroundColor: "#ddd"
-  }
+  },
+  dateText:{
+    width: '25%',
+    paddingRight: 2,
+    textAlign: 'left',
+  },
+  captionText:{
+    width: '35%',
+    paddingRight: 2,
+    textAlign: 'left',
+  },
+  participantsText:{
+    width: '25%',
+    paddingRight: 2,
+    textAlign: 'left',
+  },
 });
 
 const CreateActivityStyle = StyleSheet.create({
@@ -256,7 +272,10 @@ const CreateActivityStyle = StyleSheet.create({
     justifyContent: "center",
     alignContent: "center",
     borderWidth: 2,
-    borderColor: "#D81A4C"
+    borderColor: "#D81A4C",
+  },
+  scrollContainer:{
+    paddingVertical: 20
   },
   name: {
     height: 100
@@ -303,14 +322,13 @@ const CreateActivityStyle = StyleSheet.create({
     paddingBottom: 20
   },
   modalContainer: {
-    marginTop: "40%",
-    justifyContent: "center",
+    marginTop: height * 0.25,
     alignSelf: "center",
-    backgroundColor: "#B4B7BA",
-    height: "35%",
+    backgroundColor: '#c2185b',
+    height: "45%",
     width: "90%",
     borderWidth: 2,
-    borderRadius: 15
+    borderRadius: 10,
   }
 });
 

diff --git a/src/views/eventsList/EventsListStyle.js b/src/views/eventsList/EventsListStyle.js
@@ -102,10 +102,10 @@ export default StyleSheet.create({
     marginBottom: "30%",
     justifyContent: 'center',
     alignSelf:'center',        
-    backgroundColor: '#B4B7BA',
+    backgroundColor: '#c2185b',
     width: '70%',
     borderWidth:2,
-    borderRadius:15,
+    borderRadius:10,
   },
   participantItem: {
     marginHorizontal: "17.5%",
@@ -121,7 +121,7 @@ export default StyleSheet.create({
     marginBottom: 3,
     width: 30,
     height: 30,
-    borderRadius: 100
+    borderRadius: 30/2
   },
   withoutImgList: {
     margin: 5,

diff --git a/src/views/help/HelpViewStyle.js b/src/views/help/HelpViewStyle.js
@@ -1,4 +1,5 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
+const { height } = Dimensions.get('screen');
 
 export default StyleSheet.create({
     container: {
@@ -56,13 +57,12 @@ export default StyleSheet.create({
       textAlign:'center',
     },
     modalContainer: {
-      marginTop: "40%",
+      marginTop: height * 0.25,
       justifyContent: 'center',
       alignSelf:'center',        
-      backgroundColor: '#B4B7BA',
+      backgroundColor: '#c2185b',
       height:'40%',
       width: '90%',
-      borderWidth:2,
-      borderRadius:15,
+      borderRadius:10,
     },
   });  
diff --git a/src/views/institutes/EventRegistrationView.js b/src/views/institutes/EventRegistrationView.js
@@ -57,7 +57,7 @@ class EventRegistrationView extends Component {
   render() {
     return (
       <React.Fragment>
-        <Toast ref="toast" style={{backgroundColor:'#C2185B'}} positionValue={180} opacity={0.8}/>
+        <Toast ref="toast" style={{backgroundColor:'#555'}} positionValue={180} opacity={0.8}/>
         <View>
         {this.props.registeredNow ?
           <View style={{flexDirection: 'row'}}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -288,7 +288,7 @@ class EventView extends Component { @@
                 :
                 null
             }
-            <Toast ref="toast" style={{backgroundColor:'#C2185B'}} positionValue={180} opacity={0.8}/>
+            <Toast ref="toast" style={{backgroundColor:'#555'}} positionValue={180} opacity={0.8}/>
           </View>
         )
       }
@@ Expand Down @@