Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resolved issue in Dashboard and Presentation #4

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Resolved issue in Dashboard and Presentation #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 45 additions & 20 deletions routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Image, StyleSheet, ScrollView, SafeAreaView, Platform,
Image,
StyleSheet,
ScrollView,
SafeAreaView,
Platform,
} from 'react-native';
import {
createDrawerNavigator,
DrawerItems,
} from 'react-navigation';
import { createDrawerNavigator, DrawerItems } from 'react-navigation';

// screens
import { Block, Icon, Text } from 'galio-framework';
import Article from './src/screens/Article';
import ArticleCover from './src/screens/ArticleCover';
import Cards from './src/screens/Cards';
Expand All @@ -23,15 +25,24 @@ import Registerv2 from './src/screens/Registerv2';
import Grid from './src/screens/Grid';

import theme from './src/theme';
import { Block, Icon, Text } from 'galio-framework';

const GalioDrawer = props => (
<SafeAreaView style={styles.drawer} forceInset={{ top: 'always', horizontal: 'never' }}>
<SafeAreaView
style={styles.drawer}
forceInset={{ top: 'always', horizontal: 'never' }}
>
<Block space="between" row style={styles.header}>
<Block flex={0.3}><Image source={{ uri: 'http://i.pravatar.cc/100' }} style={styles.avatar} /></Block>
<Block flex={0.3}>
<Image
source={{ uri: 'http://i.pravatar.cc/100' }}
style={styles.avatar}
/>
</Block>
<Block flex style={styles.middle}>
<Text size={theme.SIZES.FONT * 0.875}>Galio Framework</Text>
<Text muted size={theme.SIZES.FONT * 0.875}>React Native</Text>
<Text muted size={theme.SIZES.FONT * 0.875}>
React Native
</Text>
</Block>
</Block>
<ScrollView>
Expand Down Expand Up @@ -88,61 +99,75 @@ const screens = {
screen: Components,
navigationOptions: {
drawerLabel: 'Components',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
Cards: {
screen: Cards,
navigationOptions: {
drawerLabel: 'Cards',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
Article: {
screen: Article,
navigationOptions: {
drawerLabel: 'Article Screen',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
ArticleCover: {
screen: ArticleCover,
navigationOptions: {
drawerLabel: 'Article Cover',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
/*
Dashboard: {
screen: Dashboard,
navigationOptions: {
drawerLabel: 'Dashboard screen',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
*/
News: {
screen: News,
navigationOptions: {
drawerLabel: 'News Screen',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
OrderConfirmed: {
screen: OrderConfirmed,
navigationOptions: {
drawerLabel: 'Order Confirmed',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
/*
Presentation: {
screen: Presentation,
navigationOptions: {
drawerLabel: 'Presentation Screen',
drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
drawerIcon: props => (
<MenuIcon name="flag" family="font-awesome" focused={props.focused} />
),
},
},
/*
Login: {
screen: Login,
navigationOptions: {
Expand Down
70 changes: 49 additions & 21 deletions src/screens/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react';
import {
StyleSheet, ScrollView, Platform,
} from 'react-native';
import { LinearGradient as Gradient } from 'expo';
import { StyleSheet, ScrollView, Platform } from 'react-native';
import { LinearGradient as Gradient } from 'expo-linear-gradient';
import { Defs, LinearGradient, Stop } from 'react-native-svg';
import { AreaChart } from 'react-native-svg-charts';
import * as shape from 'd3-shape';
Expand Down Expand Up @@ -62,12 +60,17 @@ class Dashboard extends React.Component {
style={styles.settings}
onPress={() => this.props.navigation.openDrawer()}
>
<Icon size={BASE_SIZE} name="heart" family="font-awesome" color={theme.COLORS.MUTED} />
<Icon
size={BASE_SIZE}
name="heart"
family="font-awesome"
color={theme.COLORS.MUTED}
/>
</Button>
)}
style={Platform.OS === 'android' ? { marginTop: theme.SIZES.BASE } : null}
/>
)
);

renderStats = () => {
const GradientStats = () => (
Expand All @@ -91,9 +94,15 @@ class Dashboard extends React.Component {
curve={shape.curveNatural}
style={[StyleSheet.absoluteFill]}
contentInset={{
bottom: -BASE_SIZE * 0.15, right: -BASE_SIZE * 0.15, left: -BASE_SIZE * 0.15,
bottom: -BASE_SIZE * 0.15,
right: -BASE_SIZE * 0.15,
left: -BASE_SIZE * 0.15,
}}
svg={{
strokeWidth: 1,
stroke: 'rgba(0,0,0,0.2)',
strokeDasharray: 4,
}}
svg={{ strokeWidth: 1, stroke: 'rgba(0,0,0,0.2)', strokeDasharray: 4 }}
>
<GradientStats />
</AreaChart>
Expand All @@ -104,27 +113,41 @@ class Dashboard extends React.Component {
curve={shape.curveNatural}
style={{ height: BASE_SIZE * 10 }}
contentInset={{
bottom: -BASE_SIZE * 0.21, right: -BASE_SIZE * 0.21, left: -BASE_SIZE * 0.21,
bottom: -BASE_SIZE * 0.21,
right: -BASE_SIZE * 0.21,
left: -BASE_SIZE * 0.21,
}}
svg={{ strokeWidth: BASE_SIZE * 0.1875, stroke: 'url(#gradient)' }}
>
<GradientStats />
</AreaChart>
<Block row space="evenly" style={{ marginTop: BASE_SIZE }}>
{statsTitles.map(title => <Text key={title} size={theme.SIZES.FONT * 0.85} muted>{title}</Text>)}
{statsTitles.map(title => (
<Text key={title} size={theme.SIZES.FONT * 0.85} muted>
{title}
</Text>
))}
</Block>
</Block>
);
}
};

renderCard = (props, index) => {
const gradientColors = index % 2 ? GRADIENT_BLUE : GRADIENT_PINK;

return (
<Block row center card shadow space="between" style={styles.card} key={props.title}>
<Block
row
center
card
shadow
space="between"
style={styles.card}
key={props.title}
>
<Gradient
start={[0.45, 0.45]}
end={[0.90, 0.90]}
end={[0.9, 0.9]}
colors={gradientColors}
style={[styles.gradient, styles.left]}
>
Expand All @@ -138,16 +161,23 @@ class Dashboard extends React.Component {

<Block flex>
<Text size={BASE_SIZE * 1.125}>{props.title}</Text>
<Text size={BASE_SIZE * 0.875} muted>{props.subtitle}</Text>
<Text size={BASE_SIZE * 0.875} muted>
{props.subtitle}
</Text>
</Block>
<Button style={styles.right}>
<Icon size={BASE_SIZE} name="minimal-right" family="Galio" color={COLOR_GREY} />
<Icon
size={BASE_SIZE}
name="minimal-right"
family="Galio"
color={COLOR_GREY}
/>
</Button>
</Block>
);
}
};

renderCards = () => cards.map((card, index) => this.renderCard(card, index))
renderCards = () => cards.map((card, index) => this.renderCard(card, index));

render() {
return (
Expand All @@ -159,9 +189,7 @@ class Dashboard extends React.Component {
{this.renderStats()}

{/* cards */}
<ScrollView style={{ flex: 1 }}>
{this.renderCards()}
</ScrollView>
<ScrollView style={{ flex: 1 }}>{this.renderCards()}</ScrollView>
</Block>
);
}
Expand All @@ -174,7 +202,7 @@ const styles = StyleSheet.create({
marginVertical: BASE_SIZE / 2,
padding: BASE_SIZE,
backgroundColor: COLOR_WHITE,
shadowOpacity: 0.40,
shadowOpacity: 0.4,
},
menu: {
width: BASE_SIZE * 2,
Expand Down
40 changes: 32 additions & 8 deletions src/screens/Presentation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import {
Dimensions, StyleSheet, StatusBar, Image,
} from 'react-native';
import { LinearGradient } from 'expo';
import { LinearGradient } from 'expo-linear-gradient';
import Constants from 'expo-constants';
// galio components
import {
Expand Down Expand Up @@ -30,16 +30,40 @@ const Presentation = props => (
style={styles.backgroundGradient}
/>
<Block flex center style={styles.container}>
<Block flex middle style={{ justifyContent: 'flex-end', marginBottom: theme.SIZES.BASE * 2.5 }}>
<Text center size={theme.SIZES.FONT * 2.375} color={theme.COLORS.WHITE} style={{ marginBottom: theme.SIZES.BASE }}>
<Block
flex
middle
style={{
justifyContent: 'flex-end',
marginBottom: theme.SIZES.BASE * 2.5,
}}
>
<Text
center
size={theme.SIZES.FONT * 2.375}
color={theme.COLORS.WHITE}
style={{ marginBottom: theme.SIZES.BASE }}
>
Check this out
</Text>
<Text center size={theme.SIZES.FONT * 0.875} color={theme.COLORS.WHITE} style={{ marginBottom: theme.SIZES.BASE * 1.875, paddingHorizontal: theme.SIZES.BASE * 2 }}>
You should totally read this stuf, like
seriously all yo homies love sneak dissing
but at least u’re true, right?
<Text
center
size={theme.SIZES.FONT * 0.875}
color={theme.COLORS.WHITE}
style={{
marginBottom: theme.SIZES.BASE * 1.875,
paddingHorizontal: theme.SIZES.BASE * 2,
}}
>
You should totally read this stuf, like seriously all yo homies love
sneak dissing but at least u’re true, right?
</Text>
<Button size="large" color="transparent" round onPress={() => props.navigation.openDrawer()}>
<Button
size="large"
color="transparent"
round
onPress={() => props.navigation.openDrawer()}
>
Get Started
</Button>
</Block>
Expand Down