added action button

2025-12-16 11:47:54 +01:00 · 2019-11-17 17:48:56 +05:00
parent 3d7285f369
commit 8456760b10
9 changed files with 375 additions and 37 deletions
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -2,20 +2,83 @@ import React, {useState, useEffect} from 'react';
 import NavigationService, {
  AppContainer,
 } from './src/services/NavigationService';
-import {StatusBar} from 'react-native';
+import {StatusBar, View, SafeAreaView, TouchableOpacity} from 'react-native';
+import {COLOR_SCHEME, SIZE, opacity, WEIGHT} from './src/common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import ActionButton from 'react-native-action-button';

 const App = () => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
  useEffect(() => {
    StatusBar.setBackgroundColor('transparent');
    StatusBar.setTranslucent(true);
    StatusBar.setBarStyle('dark-content');
  });
  return (
-    <AppContainer
-      ref={navigatorRef => {
-        NavigationService.setTopLevelNavigator(navigatorRef);
-      }}
-    />
+    <>
+      <AppContainer
+        ref={navigatorRef => {
+          NavigationService.setTopLevelNavigator(navigatorRef);
+        }}
+      />
+
+      <ActionButton elevation={5} buttonColor={colors.accent}>
+        <ActionButton.Item
+          buttonColor="#9b59b6"
+          textStyle={{
+            fontFamily: WEIGHT.regular,
+            color: 'white',
+          }}
+          title=""
+          hideShadow={true}
+          onPress={() => console.log('notes tapped!')}>
+          <Icon
+            name="md-create"
+            style={{
+              fontSize: 20,
+              height: 22,
+              color: 'white',
+            }}
+          />
+        </ActionButton.Item>
+        <ActionButton.Item
+          textStyle={{
+            fontFamily: WEIGHT.regular,
+            color: 'white',
+          }}
+          hideShadow={true}
+          buttonColor="#3498db"
+          title=""
+          onPress={() => {}}>
+          <Icon
+            name="ios-list"
+            style={{
+              fontSize: 20,
+              height: 22,
+              color: 'white',
+            }}
+          />
+        </ActionButton.Item>
+        <ActionButton.Item
+          textStyle={{
+            fontFamily: WEIGHT.regular,
+            color: 'white',
+          }}
+          hideShadow={true}
+          buttonColor="#1abc9c"
+          title=""
+          onPress={() => {}}>
+          <Icon
+            name="ios-clock"
+            style={{
+              fontSize: 20,
+              height: 22,
+              color: 'white',
+            }}
+          />
+        </ActionButton.Item>
+      </ActionButton>
+    </>
  );
 };

--- a/apps/mobile/src/components/ListItem/index.js
+++ b/apps/mobile/src/components/ListItem/index.js
@@ -0,0 +1,96 @@
+import React, {useState} from 'react';
+import {View, Text, TouchableOpacity, Platform, Dimensions} from 'react-native';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {getElevation} from '../../utils/utils';
+import {FlatList} from 'react-native-gesture-handler';
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+export const ListItem = props => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <View
+      style={{
+        ...getElevation(10),
+        width: '90%',
+        marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
+        alignSelf: 'center',
+        borderRadius: br,
+        backgroundColor: '#f0f0f0',
+
+        marginBottom: 20,
+        padding: 5,
+      }}>
+      <View>
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: ph,
+          }}>
+          <Text
+            numberOfLines={1}
+            style={{
+              color: colors.pri,
+              fontSize: SIZE.md,
+              fontFamily: WEIGHT.bold,
+              maxWidth: '100%',
+            }}>
+            Shopping List
+          </Text>
+
+          <View
+            style={{
+              width: '20%',
+              justifyContent: 'space-between',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+            <Icon name="md-share-alt" size={SIZE.lg} color={colors.icon} />
+            <Icon name="md-star" size={SIZE.lg} color={colors.icon} />
+            <Icon name="md-more" size={SIZE.lg} color={colors.icon} />
+          </View>
+        </View>
+
+        <View>
+          <FlatList
+            data={['1 kg wheat flour', '1/2 kg bread']}
+            renderItem={({item, index}) => (
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                }}>
+                <Text
+                  style={{
+                    color: 'white',
+                    ...getElevation(5),
+                    paddingVertical: pv - 5,
+                    paddingHorizontal: ph - 5,
+                    backgroundColor: colors.accent,
+                    marginVertical: 5,
+                    borderRadius: br,
+                    marginHorizontal: 10,
+                    fontFamily: WEIGHT.regular,
+                  }}>
+                  {item}
+                </Text>
+              </TouchableOpacity>
+            )}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -37,24 +37,46 @@ const NoteItem = props => {
        backgroundColor: '#f0f0f0',
        marginVertical: h * 0.015,
        borderRadius: br,
-        flexDirection: 'row',
+
        justifyContent: 'center',
        alignItems: 'center',
        padding: pv,
      }}>
      <View
        style={{
-          width: '92%',
-          justifyContent: 'center',
-          alignItems: 'flex-start',
+          width: '100%',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
        }}>
        <Text
+          numberOfLines={1}
          style={{
+            color: colors.pri,
            fontSize: SIZE.md,
            fontFamily: WEIGHT.bold,
+            maxWidth: '100%',
          }}>
          {item.title}
        </Text>
+
+        <View
+          style={{
+            width: '20%',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}>
+          <Icon name="md-share-alt" size={SIZE.lg} color={colors.icon} />
+          <Icon name="md-star" size={SIZE.lg} color={colors.icon} />
+          <Icon name="md-more" size={SIZE.lg} color={colors.icon} />
+        </View>
+      </View>
+      <View
+        style={{
+          justifyContent: 'center',
+          alignItems: 'flex-start',
+        }}>
        <Text
          style={{
            fontSize: SIZE.xs + 1,
@@ -74,15 +96,6 @@ const NoteItem = props => {
          {item.timestamp + '  '}
        </Text>
      </View>
-      <TouchableOpacity
-        style={{
-          width: '8%',
-          justifyContent: 'center',
-          alignItems: 'center',
-          minHeight: 60,
-        }}>
-        <Icon name="md-more" size={SIZE.xl} color={colors.accent} />
-      </TouchableOpacity>
    </View>
  );
 };
--- a/apps/mobile/src/components/Recents/index.js
+++ b/apps/mobile/src/components/Recents/index.js
@@ -23,6 +23,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {Reminder} from '../Reminder';
 import {getElevation} from '../../utils/utils';
 import NoteItem from '../NoteItem';
+import NavigationService from '../../services/NavigationService';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;

@@ -72,12 +73,16 @@ export const RecentList = () => {
    {
      name: 'Reminders',
      icon: 'ios-clock',
-      func: () => {},
+      func: () => {
+        NavigationService.navigate('Reminders');
+      },
    },
    {
      name: 'Lists',
      icon: 'ios-list',
-      func: () => {},
+      func: () => {
+        NavigationService.navigate('Lists');
+      },
    },
  ];

--- a/apps/mobile/src/components/Reminder/index.js
+++ b/apps/mobile/src/components/Reminder/index.js
@@ -14,63 +14,89 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {getElevation} from '../../utils/utils';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
-export const Reminder = () => {
+export const Reminder = props => {
  const [colors, setColors] = useState(COLOR_SCHEME);

  return (
-    <TouchableOpacity
-      activeOpacity={opacity}
+    <View
      style={{
        ...getElevation(10),
        width: '90%',
        marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
        alignSelf: 'center',
        borderRadius: br,
-        backgroundColor: colors.accent,
+        backgroundColor: props.invert ? '#f0f0f0' : colors.accent,
        paddingHorizontal: ph,
        marginBottom: 20,
        padding: 5,
      }}>
      <View>
-        <Text
-          numberOfLines={1}
+        <View
          style={{
            width: '100%',
-            maxWidth: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
          }}>
          <Text
            numberOfLines={1}
            style={{
-              color: 'white',
-              fontSize: SIZE.lg,
+              color: props.invert ? colors.pri : 'white',
+              fontSize: SIZE.md,
              fontFamily: WEIGHT.bold,
              maxWidth: '100%',
            }}>
            Pay Utility Bills
          </Text>
-        </Text>
+
+          <View
+            style={{
+              width: '20%',
+              justifyContent: 'space-between',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+            <Icon
+              name="md-share-alt"
+              size={SIZE.lg}
+              color={props.invert ? colors.icon : 'white'}
+            />
+            <Icon
+              name="md-star"
+              size={SIZE.lg}
+              color={props.invert ? colors.icon : 'white'}
+            />
+            <Icon
+              name="md-more"
+              size={SIZE.lg}
+              color={props.invert ? colors.icon : 'white'}
+            />
+          </View>
+        </View>

        <View
          style={{
            width: '100%',
            justifyContent: 'space-between',
            flexDirection: 'row',
-            alignItems: 'flex-end',
+            alignItems: 'center',
          }}>
          <Text
+            numberOfLines={5}
            style={{
              fontFamily: WEIGHT.regular,
              fontSize: SIZE.xs,
-              color: 'white',
+              color: props.invert ? colors.icon : 'white',
              marginBottom: 3,
+              maxWidth: '60%',
            }}>
            {'\n'}
-            Amount 5000 RS
+            Pay all the bills
          </Text>

          <Text
            style={{
-              color: 'white',
+              color: props.invert ? colors.accent : 'white',
              fontSize: SIZE.xxl,
              fontFamily: WEIGHT.light,
            }}>
@@ -90,6 +116,6 @@ export const Reminder = () => {
          </Text>
        </View>
      </View>
-    </TouchableOpacity>
+    </View>
  );
 };
--- a/apps/mobile/src/services/NavigationService.js
+++ b/apps/mobile/src/services/NavigationService.js
@@ -2,6 +2,8 @@ import {createAppContainer, NavigationActions} from 'react-navigation';
 import {createStackNavigator} from 'react-navigation-stack';
 import Home from '../views/Home/index';
 import Editor from '../views/Editor';
+import Reminders from '../views/Reminders';
+import Lists from '../views/Lists';

 const TopLevelNavigator = createStackNavigator(
  {
@@ -11,6 +13,12 @@ const TopLevelNavigator = createStackNavigator(
    Editor: {
      screen: Editor,
    },
+    Reminders: {
+      screen: Reminders,
+    },
+    Lists: {
+      screen: Lists,
+    },
  },
  {
    initialRouteName: 'Home',
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -8,6 +8,7 @@ import {
  Image,
  SafeAreaView,
  Platform,
+  FlatList,
 } from 'react-native';
 import NavigationService from '../../services/NavigationService';
 import {
@@ -28,7 +29,6 @@ import {Search} from '../../components/SearchInput';
 import {Reminder} from '../../components/Reminder';
 import {RecentList} from '../../components/Recents';
 import {getElevation} from '../../utils/utils';
-import {FlatList} from 'react-native-gesture-handler';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;

--- a/apps/mobile/src/views/Lists/index.js
+++ b/apps/mobile/src/views/Lists/index.js
@@ -0,0 +1,64 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../../components/Reminder';
+import {ListItem} from '../../components/ListItem';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Lists = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginBottom: h * 0.04,
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.xxl,
+            color: colors.pri,
+            fontFamily: WEIGHT.bold,
+          }}>
+          Lists
+        </Text>
+        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+      </View>
+
+      <ListItem />
+    </SafeAreaView>
+  );
+};
+
+Lists.navigationOptions = {
+  header: null,
+};
+
+export default Lists;
--- a/apps/mobile/src/views/Reminders/index.js
+++ b/apps/mobile/src/views/Reminders/index.js
@@ -0,0 +1,63 @@
+import React, {useEffect, useState} from 'react';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions,
+  Image,
+  SafeAreaView,
+  Platform,
+} from 'react-native';
+import NavigationService from '../../services/NavigationService';
+import {
+  COLOR_SCHEME,
+  SIZE,
+  br,
+  ph,
+  pv,
+  opacity,
+  FONT,
+  WEIGHT,
+} from '../../common/common';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {Reminder} from '../../components/Reminder';
+
+const w = Dimensions.get('window').width;
+const h = Dimensions.get('window').height;
+
+export const Reminders = ({navigation}) => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+
+  return (
+    <SafeAreaView>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingHorizontal: '5%',
+          marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
+          marginBottom: h * 0.04,
+        }}>
+        <Text
+          style={{
+            fontSize: SIZE.xxl,
+            color: colors.pri,
+            fontFamily: WEIGHT.bold,
+          }}>
+          Reminders
+        </Text>
+        <Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
+      </View>
+
+      <Reminder invert={true} />
+    </SafeAreaView>
+  );
+};
+
+Reminders.navigationOptions = {
+  header: null,
+};
+
+export default Reminders;