About us

APSL · Jun 13, 2016 · efd6033 · efd6033
1 parent 73b4681
commit efd6033
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 57 deletions.
diff --git a/app/Meneame.js b/app/Meneame.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import Ionicon from 'react-native-vector-icons/Ionicons'
-
 import { Menu } from 'react-native-section-menu'
+
 import {
   MnmSectionPortada,
   MnmSectionNuevas,
@@ -16,12 +16,13 @@ class Meneame extends React.Component {
   render () {
     const androidIconSize = 18
     const iOSiconSize = 30
+    let itemId = 0
 
     return (
       <Menu barTintColor="black" tintColor="#d35400" initialEntry={0}
         entries={[
           {
-            id: 0,
+            id: itemId++,
             title: 'Portada',
             element: <MnmSectionPortada />,
             androidIcon: <MaterialIcons name="description" size={androidIconSize} />,
@@ -31,7 +32,7 @@ class Meneame extends React.Component {
             iconSize: iOSiconSize,
           },
           {
-            id: 1,
+            id: itemId++,
             title: 'Nuevas',
             element: <MnmSectionNuevas />,
             androidIcon: <MaterialIcons name="access-time" size={androidIconSize} />,
@@ -41,7 +42,7 @@ class Meneame extends React.Component {
             iconSize: iOSiconSize,
           },
           {
-            id: 2,
+            id: itemId++,
             title: 'Populares',
             element: <MnmSectionPopulares />,
             androidIcon: <MaterialIcons name="favorite" size={androidIconSize} />,
@@ -51,7 +52,7 @@ class Meneame extends React.Component {
             iconSize: iOSiconSize,
           },
           {
-            id: 3,
+            id: itemId++,
             title: 'Más visitadas',
             element: <MnmSectionMasVisitadas />,
             androidIcon: <MaterialIcons name="whatshot" size={androidIconSize} />,
@@ -61,7 +62,7 @@ class Meneame extends React.Component {
             iconSize: iOSiconSize,
           },
           {
-            id: 4,
+            id: itemId++,
             title: 'Destacadas',
             element: <MnmSectionDestacadas />,
             androidIcon: <MaterialIcons name="grade" size={androidIconSize} />,

diff --git a/app/MnmAbout.js b/app/MnmAbout.js
@@ -1,67 +1,69 @@
-/*global require, module, fetch*/
-
 import React, { Component } from 'react'
 import {
   Text,
   Image,
   View,
-  LinkingIOS,
+  Linking,
   StyleSheet,
   TouchableHighlight,
 } from 'react-native'
 
 
 class MnmAbout extends Component {
-    render() {
-        return (
-            <View style={styles.container}>
-                <Image source={{uri: 'logo_apsl'}} style={styles.image} />
-                <Text style={styles.madeBy}>Made with ❤️ by APSL</Text>
-                <TouchableHighlight
-                    onPress={() => {
-                        LinkingIOS.openURL('http://publicsource.apple.com/license/apsl/');
-                    }}
-                    underlayColor="#FFFFFF"
-                    style={styles.license}>
-                    <Text style={styles.text}>
-                        Released under APSL license, 2015
-                    </Text>
-                </TouchableHighlight>
-                <Text style={styles.text}>
-                    Thanks to meneame.net and the React Native community
-                </Text>
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableHighlight
+          onPress={() => {Linking.openURL('https://www.apsl.net/')}}
+        >
+          <View style={styles.logoContainer}>
+            <Image source={require('./img/apsl.png')} style={styles.image} />
+            <Text style={styles.madeBy}>Made with ❤️ by APSL</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          onPress={() => {Linking.openURL('http://publicsource.apple.com/license/apsl/')}}
+          underlayColor="#FFFFFF"
+          style={styles.license}
+        >
+          <Text style={styles.text}>Released under APSL license, 2015</Text>
+        </TouchableHighlight>
+        <Text style={styles.text}>Thanks to meneame.net and the React Native community</Text>
+      </View>
+    );
+  }
 }
 
 var styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#FAFAFA',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    madeBy: {
-        textAlign: 'center',
-        fontWeight: '300',
-    },
-    image: {
-        width: 75,
-        height: 75,
-        marginTop: 25,
-    },
-    license: {
-        textAlign: 'center',
-        marginTop: 10,
-    },
-    text: {
-        marginTop: 10,
-        paddingLeft: 20,
-        paddingRight: 20,
-        fontWeight: '300',
-        textAlign: 'center',
-    }
+  container: {
+    flex: 1,
+    backgroundColor: '#FAFAFA',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  madeBy: {
+    fontWeight: '300',
+    textAlign: 'center',
+  },
+  image: {
+    width: 75,
+    height: 75,
+  },
+  license: {
+    marginTop: 10,
+  },
+  text: {
+    marginTop: 20,
+    marginLeft: 20,
+    marginRight: 20,
+    fontWeight: '300',
+    textAlign: 'center',
+  }
 });
 
 module.exports = MnmAbout;
diff --git a/app/MnmRouteMapper.js b/app/MnmRouteMapper.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { View, StyleSheet, Platform, TouchableOpacity, Linking } from 'react-native'
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import FontAwesome from 'react-native-vector-icons/FontAwesome'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
   titleRouteMapperGenerator,
@@ -10,6 +11,9 @@ import {
   defaultRouteMapper
 } from 'react-native-navigator-wrapper'
 
+import MnmAbout from './MnmAbout'
+
+
 export const MenuButton = ({openMenu}) => {
   return (
     <TouchableOpacity style={styles.menuButtonContainer} onPress={openMenu}>
@@ -33,6 +37,26 @@ export const BrowserButton = ({url}) => {
   )
 }
 
+export const AboutUsButton = ({navigator}) => {
+  let icon
+  if (Platform.OS === 'ios') {
+    icon = <Ionicons name="ios-information-circle" size={24} color={navBarColor} />
+  } else {
+    icon = <MaterialIcons name="info" size={24} color={navBarColor} />
+  }
+
+  return (
+    <TouchableOpacity style={styles.browserButtonContainer} onPress={() => {
+      navigator.push({
+        component: MnmAbout,
+        title: 'Acerca de',
+      })
+    }}>
+      {icon}
+    </TouchableOpacity>
+  )
+}
+
 function leftButtonRouteMapperGenerator (openMenu) {
   return {
     LeftButton: (route, navigator, index, navState) => {

diff --git a/app/MnmSections.js b/app/MnmSections.js
@@ -2,7 +2,8 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { NavigatorWrapper } from 'react-native-navigator-wrapper'
 
-import mnmRouteMapper from './MnmRouteMapper'
+
+import mnmRouteMapper, { AboutUsButton } from './MnmRouteMapper'
 import MnmNewsList from './MnmNewsList'
 
 export function MnmSectionPortada({openMenu}) {
@@ -12,6 +13,7 @@ export function MnmSectionPortada({openMenu}) {
         component: MnmNewsList,
         passProps: {url: 'https://www.meneame.net/api/list/'},
         title: 'Portada',
+        rightElement: <AboutUsButton />,
       }}
       navBarStyle={styles.navBarStyle}
       routeMapper={mnmRouteMapper(openMenu)}
@@ -26,6 +28,7 @@ export function MnmSectionNuevas({openMenu}) {
         component: MnmNewsList,
         passProps: {url: 'https://www.meneame.net/api/list/?status=queued'},
         title: 'Nuevas',
+        rightElement: <AboutUsButton />,
       }}
       navBarStyle={styles.navBarStyle}
       routeMapper={mnmRouteMapper(openMenu)}
@@ -40,6 +43,7 @@ export function MnmSectionPopulares({openMenu}) {
         component: MnmNewsList,
         passProps: {url: 'https://www.meneame.net/api/list/?popular'},
         title: 'Populares',
+        rightElement: <AboutUsButton />,
       }}
       navBarStyle={styles.navBarStyle}
       routeMapper={mnmRouteMapper(openMenu)}
@@ -54,6 +58,7 @@ export function MnmSectionMasVisitadas({openMenu}) {
         component: MnmNewsList,
         passProps: {url: 'https://www.meneame.net/api/list/?top_visited'},
         title: 'Más visitadas',
+        rightElement: <AboutUsButton />,
       }}
       navBarStyle={styles.navBarStyle}
       routeMapper={mnmRouteMapper(openMenu)}
@@ -68,6 +73,7 @@ export function MnmSectionDestacadas({openMenu}) {
         component: MnmNewsList,
         passProps: {url: 'https://www.meneame.net/api/list/?active'},
         title: 'Destacadas',
+        rightElement: <AboutUsButton />,
       }}
       navBarStyle={styles.navBarStyle}
       routeMapper={mnmRouteMapper(openMenu)}

diff --git a/app/img/apsl.png b/app/img/apsl.png