Merge branch 'fix-event-admin-screen-styling' into 'master'

Minor bugfixes and styling improvements

See merge request !221

__tests__/assets/locales/__snapshots__/index.js.spec.js.snap

@@ -41,16 +41,16 @@ Object {
       "day": "dag",
     },
     "screens/events/EventAdminScreen": Object {
-      "Card": "Pin",
-      "Cash": "Cash",
+      "CARD": "PIN",
+      "CASH": "CONTANT",
       "Could not load the event...": "Kon het evenement niet laden...",
       "Disabled filter": "Filter uitgeschakeld",
       "Filtering on payment": "Filteren op betaling",
       "Filtering on presence": "Filteren op aanwezigheid",
       "Find a member": "Zoek een lid",
+      "NOT PAID": "NIET BETAALD",
       "No registrations found with this filter.": "Geen inschrijvingen gevonden met dit filter.",
       "No registrations found...": "Geen inschrijvingen gevonden...",
-      "Not paid": "Niet betaald",
       "Present": "Aanwezig",
       "Registrations": "Inschrijvingen",
     },

__tests__/sagas/registration.spec.js

@@ -53,7 +53,7 @@ describe('registration saga', () => {
         [matchers.call.like({ fn: apiRequest, args: ['events/1/registrations'] }), { }],
       ])
       .dispatch(registrationActions.register(1))
-      .put(eventActions.event(1))
+      .put(eventActions.event(1, false))
       .silentRun());
 
     it('should show a snackbar when the request succeeds', () => expectSaga(registrationSaga)
@@ -188,7 +188,7 @@ describe('registration saga', () => {
         [matchers.call.fn(apiRequest), {}],
       ])
       .dispatch(registrationActions.cancel(1))
-      .put(eventActions.event(1))
+      .put(eventActions.event(1, false))
       .silentRun());
 
     it('should put event action when the request fails', () => expectSaga(registrationSaga)

app/assets/locales/nl/app/ui/screens/events/EventAdminScreen.json

@@ -3,12 +3,12 @@
   "Filtering on presence": "Filteren op aanwezigheid",
   "Filtering on payment": "Filteren op betaling",
   "Present": "Aanwezig",
-  "Not paid": "Niet betaald",
-  "Cash": "Cash",
-  "Card": "Pin",
   "No registrations found...": "Geen inschrijvingen gevonden...",
   "Registrations": "Inschrijvingen",
   "Find a member": "Zoek een lid",
   "No registrations found with this filter.": "Geen inschrijvingen gevonden met dit filter.",
-  "Could not load the event...": "Kon het evenement niet laden..."
+  "Could not load the event...": "Kon het evenement niet laden...",
+  "NOT PAID": "NIET BETAALD",
+  "CASH": "CONTANT",
+  "CARD": "PIN"
 }

app/sagas/registration.js

@@ -33,7 +33,7 @@ const register = function* register(action) {
   try {
     const registration = yield call(apiRequest, `events/${event}/registrations`, data);
 
-    yield put(eventActions.event(event));
+    yield put(eventActions.event(event, false));
     if (registration.fields) {
       yield put(registrationActions.retrieveFields(registration.pk));
     }
@@ -100,7 +100,7 @@ const cancel = function* cancel(action) {
     Sentry.captureException(error);
   }
 
-  yield put(eventActions.event(event));
+  yield put(eventActions.event(event, false));
 };
 
 const fields = function* fields(action) {

app/ui/screens/memberList/style/SearchHeader.js → app/ui/components/searchHeader/style/SearchHeader.js

@@ -3,7 +3,7 @@ import { Dimensions } from 'react-native';
 import StyleSheet from '../../../style/StyleSheet';
 import Colors from '../../../style/Colors';
 import { STATUSBAR_HEIGHT, APPBAR_HEIGHT }
-  from '../../../components/standardHeader/style/StandardHeader';
+  from '../../standardHeader/style/StandardHeader';
 
 const windowWidth = Dimensions.get('window').width;
 

app/ui/screens/events/EventAdminScreen.js

 import React, { Component } from 'react';
 import {
-  View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableOpacity,
+  View, Text, Switch, RefreshControl, ScrollView, FlatList, TouchableHighlight,
 } from 'react-native';
 import { translate } from 'react-i18next';
 import PropTypes from 'prop-types';
@@ -13,7 +13,7 @@ import Colors from '../../style/Colors';
 import StandardHeader from '../../components/standardHeader/StandardHeader';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
-import SearchHeader from '../memberList/SearchHeaderContainer';
+import SearchHeader from '../../components/searchHeader/SearchHeaderContainer';
 
 const PAYMENT_TYPES = {
   NONE: 'no_payment',
@@ -161,36 +161,39 @@ class EventAdminScreen extends Component {
             />
           </View>
           <View style={styles.paymentContainer}>
-            <TouchableOpacity
+            <TouchableHighlight
               key={`${item}_${PAYMENT_TYPES.NONE}`}
               onPress={() => this.updateValue(item, present, PAYMENT_TYPES.NONE)}
-              style={[styles.button, payment === PAYMENT_TYPES.NONE && styles.selected]}
-              underlayColor={Colors.gray}
+              style={styles.button}
             >
-              <Text style={[styles.text, styles.buttonText]}>
-                {t('Not paid')}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
+              <View style={[styles.card, payment === PAYMENT_TYPES.NONE && styles.selected]}>
+                <Text style={[styles.text, styles.buttonText]}>
+                  {t('NOT PAID')}
+                </Text>
+              </View>
+            </TouchableHighlight>
+            <TouchableHighlight
               key={`${item}_${PAYMENT_TYPES.CASH}`}
               onPress={() => this.updateValue(item, present, PAYMENT_TYPES.CASH)}
-              style={[styles.button, payment === PAYMENT_TYPES.CASH && styles.selected]}
-              underlayColor={Colors.gray}
+              style={styles.button}
             >
-              <Text style={[styles.text, styles.buttonText]}>
-                {t('Cash')}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
+              <View style={[styles.card, payment === PAYMENT_TYPES.CASH && styles.selected]}>
+                <Text style={[styles.text, styles.buttonText]}>
+                  {t('CASH')}
+                </Text>
+              </View>
+            </TouchableHighlight>
+            <TouchableHighlight
               key={`${item}_${PAYMENT_TYPES.CARD}`}
               onPress={() => this.updateValue(item, present, PAYMENT_TYPES.CARD)}
-              style={[styles.button, payment === PAYMENT_TYPES.CARD && styles.selected]}
-              underlayColor={Colors.gray}
+              style={styles.button}
             >
-              <Text style={[styles.text, styles.buttonText]}>
-                {t('Card')}
-              </Text>
-            </TouchableOpacity>
+              <View style={[styles.card, payment === PAYMENT_TYPES.CARD && styles.selected]}>
+                <Text style={[styles.text, styles.buttonText]}>
+                  {t('CARD')}
+                </Text>
+              </View>
+            </TouchableHighlight>
           </View>
         </View>
       </View>
@@ -244,16 +247,18 @@ class EventAdminScreen extends Component {
       );
 
       const filterButton = (
-        <TouchableOpacity
+        <TouchableHighlight
           onPress={this.updateFilter}
           style={styles.filterButton}
         >
-          <Icon
-            name="filter-list"
-            size={32}
-            color={Colors.white}
-          />
-        </TouchableOpacity>
+          <View style={styles.filterButtonWrapper}>
+            <Icon
+              name="filter-list"
+              size={32}
+              color={Colors.white}
+            />
+          </View>
+        </TouchableHighlight>
       );
 
       if (keys.length === 0) {

app/ui/screens/events/style/EventAdminScreen.js

@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 8,
+    padding: 16,
   },
   text: {
     color: Colors.textColour,
@@ -49,9 +49,7 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
     margin: 2,
-    padding: 8,
-    backgroundColor: Colors.gray,
-    borderRadius: 4,
+    borderRadius: 2,
     overflow: 'hidden',
     android: {
       elevation: 2,
@@ -62,6 +60,11 @@ const styles = StyleSheet.create({
       borderWidth: 0.5,
     },
   },
+  card: {
+    padding: 8,
+    backgroundColor: Colors.gray,
+    alignItems: 'center',
+  },
   buttonText: {
     color: Colors.white,
     fontSize: 12,
@@ -70,15 +73,12 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.magenta,
   },
   filterButton: {
-    width: 56,
-    height: 56,
     position: 'absolute',
     bottom: 16,
     right: 16,
     borderRadius: 28,
-    backgroundColor: Colors.magenta,
-    justifyContent: 'center',
-    alignItems: 'center',
+    overflow: 'hidden',
+    backgroundColor: Colors.gray,
     android: {
       elevation: 4,
     },
@@ -88,6 +88,13 @@ const styles = StyleSheet.create({
       borderWidth: 0.5,
     },
   },
+  filterButtonWrapper: {
+    width: 56,
+    height: 56,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.magenta,
+  },
   noResultsMessage: {
     fontSize: 18,
     padding: 16,

app/ui/screens/events/style/EventScreen.js

@@ -92,15 +92,13 @@ const styles = StyleSheet.create({
     marginTop: 16,
   },
   registrationActions: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
     marginTop: 16,
   },
   termsUrl: {
     color: Colors.magenta,
   },
   secondButtonMargin: {
-    marginLeft: 16,
+    marginTop: 16,
   },
   descText: {
     fontSize: 14,
@@ -111,7 +109,7 @@ const styles = StyleSheet.create({
     color: Colors.white,
   },
   adminIcon: {
-    marginLeft: 16,
+    marginLeft: 24,
     color: Colors.white,
   },
   rightView: {

app/ui/screens/memberList/MemberListScreen.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import MemberView from '../../components/memberView/MemberViewContainer';
 import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
 import ErrorScreen from '../../components/errorScreen/ErrorScreen';
-import SearchHeader from './SearchHeaderContainer';
+import SearchHeader from '../../components/searchHeader/SearchHeaderContainer';
 
 import styles, { memberSize } from './style/MemberList';
 import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView';