Show more services button on home

components/Home/ActionsDashboardItem.js

@@ -0,0 +1,67 @@
+// @flow
+
+import * as React from 'react';
+import {Button, Card, withTheme} from 'react-native-paper';
+import {StyleSheet} from "react-native";
+
+type Props = {
+    navigation: Object,
+    theme: Object,
+}
+
+class ActionsDashBoardItem extends React.PureComponent<Props> {
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = this.props.theme.colors;
+    }
+
+    openDrawer = () => this.props.navigation.openDrawer();
+
+    render() {
+        return (
+            <Card style={{
+                ...styles.card,
+                borderColor: this.colors.primary,
+            }}>
+                <Card.Content style={styles.content}>
+                    <Button
+                        icon="information"
+                        mode="contained"
+                        onPress={this.openDrawer}
+                        style={styles.button}
+                    >
+                        PLUS DE SERVICES
+                    </Button>
+                </Card.Content>
+            </Card>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    card: {
+        width: 'auto',
+        marginLeft: 10,
+        marginRight: 10,
+        marginTop: 10,
+        overflow: 'hidden',
+        elevation: 4,
+        borderWidth: 1,
+    },
+    avatar: {
+        backgroundColor: 'transparent'
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+    },
+    button: {
+        marginLeft: 'auto',
+        marginRight: 'auto',
+    }
+});
+
+export default withTheme(ActionsDashBoardItem);

components/Home/SmallDashboardItem.js

@@ -8,7 +8,7 @@ import {View} from "react-native";
  * @param props Props to pass to the component
  * @return {*}
  */
-function SquareDashboardItem(props) {
+function SmallDashboardItem(props) {
     const {colors} = props.theme;
     return (
         <View>
@@ -37,4 +37,4 @@ function SquareDashboardItem(props) {
     );
 }
 
-export default withTheme(SquareDashboardItem);
+export default withTheme(SmallDashboardItem);

components/Sidebar/Sidebar.js

@@ -57,6 +57,7 @@ class SideBar extends React.PureComponent<Props, State> {
                 route: "LoginScreen",
                 icon: "login",
                 onlyWhenLoggedOut: true,
+                shouldEmphasis: true,
             },
             {
                 name: i18n.t('screens.profile'),
@@ -206,6 +207,7 @@ class SideBar extends React.PureComponent<Props, State> {
         const onListItemPress = this.onListItemPress.bind(this, item);
         const onlyWhenLoggedOut = item.onlyWhenLoggedOut !== undefined && item.onlyWhenLoggedOut === true;
         const onlyWhenLoggedIn = item.onlyWhenLoggedIn !== undefined && item.onlyWhenLoggedIn === true;
+        const shouldEmphasis = item.shouldEmphasis !== undefined && item.shouldEmphasis === true;
         if (onlyWhenLoggedIn && !this.state.isLoggedIn || onlyWhenLoggedOut && this.state.isLoggedIn)
             return null;
         else if (item.icon !== undefined) {
@@ -214,6 +216,7 @@ class SideBar extends React.PureComponent<Props, State> {
                     title={item.name}
                     icon={item.icon}
                     onPress={onListItemPress}
+                    shouldEmphasis={shouldEmphasis}
                 />
             );
         } else {

components/Sidebar/SidebarItem.js

@@ -17,7 +17,7 @@ function SidebarItem(props) {
             focused={false}
             onPress={props.onPress}
             icon={({color, size}) =>
-                <MaterialCommunityIcons color={color} size={size} name={props.icon}/>}
+                <MaterialCommunityIcons color={props.shouldEmphasis ? colors.primary : color} size={size} name={props.icon}/>}
             style={{
                 marginLeft: 0,
                 marginRight: 0,

screens/HomeScreen.js

@@ -7,10 +7,11 @@ import DashboardItem from "../components/Home/EventDashboardItem";
 import WebSectionList from "../components/Lists/WebSectionList";
 import {Text, withTheme} from 'react-native-paper';
 import FeedItem from "../components/Home/FeedItem";
-import SquareDashboardItem from "../components/Home/SquareDashboardItem";
+import SquareDashboardItem from "../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
 import {stringToDate} from "../utils/Planning";
 import {openBrowser} from "../utils/WebBrowser";
+import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
 // import DATA from "../dashboard_data.json";
 
 
@@ -143,9 +144,13 @@ class HomeScreen extends React.Component<Props, State> {
         let dataset = [
 
             {
-                id: 'middle',
+                id: 'top',
                 content: []
             },
+            {
+                id: 'actions',
+                content: undefined
+            },
             {
                 id: 'event',
                 content: undefined
@@ -154,7 +159,7 @@ class HomeScreen extends React.Component<Props, State> {
         for (let [key, value] of Object.entries(dashboardData)) {
             switch (key) {
                 case 'today_events':
-                    dataset[1]['content'] = value;
+                    dataset[2]['content'] = value;
                     break;
                 case 'available_machines':
                     dataset[0]['content'][0] = {id: key, data: value};
@@ -184,8 +189,14 @@ class HomeScreen extends React.Component<Props, State> {
         let content = item['content'];
         if (item['id'] === 'event')
             return this.getDashboardEventItem(content);
-        else if (item['id'] === 'middle')
+        else if (item['id'] === 'top')
-            return this.getDashboardMiddleItem(content);
+            return this.getDashboardTopItem(content);
+        else if (item['id'] === 'actions')
+            return this.getActionsDashboardItem();
+    }
+
+    getActionsDashboardItem() {
+        return <ActionsDashBoardItem {...this.props}/>;
     }
 
     /**
@@ -359,7 +370,7 @@ class HomeScreen extends React.Component<Props, State> {
      * @param content
      * @return {*}
      */
-    getDashboardMiddleItem(content: Array<Object>) {
+    getDashboardTopItem(content: Array<Object>) {
         let proxiwashData = content[0]['data'];
         let tutorinsaData = content[1]['data'];
         let proximoData = content[2]['data'];