From 7e7dd5244e8d26485ad7950a89c04c98c4fef83f Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 11 Mar 2019 21:00:02 +0400 Subject: Initial commit/ --- frontend/app/screens/articles/article.js | 94 ++++++++ frontend/app/screens/articles/articles1.js | 74 +++++++ frontend/app/screens/articles/articles2.js | 84 +++++++ frontend/app/screens/articles/articles3.js | 81 +++++++ frontend/app/screens/articles/articles4.js | 78 +++++++ frontend/app/screens/articles/blogposts.js | 88 ++++++++ frontend/app/screens/articles/index.js | 6 + frontend/app/screens/dashboard/dashboard.js | 117 ++++++++++ frontend/app/screens/dashboard/index.js | 1 + frontend/app/screens/eCommerce/addToCardForm.js | 138 ++++++++++++ frontend/app/screens/eCommerce/cards.js | 242 +++++++++++++++++++++ frontend/app/screens/eCommerce/index.js | 2 + frontend/app/screens/index.js | 11 + frontend/app/screens/login/index.js | 4 + frontend/app/screens/login/login1.js | 129 +++++++++++ frontend/app/screens/login/login2.js | 127 +++++++++++ frontend/app/screens/login/passwordRecovery.js | 83 +++++++ frontend/app/screens/login/signUp.js | 110 ++++++++++ frontend/app/screens/menu/categoryMenu.js | 77 +++++++ frontend/app/screens/menu/index.js | 2 + frontend/app/screens/menu/menus.js | 114 ++++++++++ frontend/app/screens/messaging/chat.js | 214 ++++++++++++++++++ frontend/app/screens/messaging/chatList.js | 147 +++++++++++++ frontend/app/screens/messaging/comments.js | 98 +++++++++ frontend/app/screens/messaging/index.js | 3 + frontend/app/screens/navigation/grid.js | 70 ++++++ frontend/app/screens/navigation/grid2.js | 82 +++++++ frontend/app/screens/navigation/index.js | 4 + frontend/app/screens/navigation/list.js | 73 +++++++ frontend/app/screens/navigation/sideMenu.js | 113 ++++++++++ frontend/app/screens/other/index.js | 2 + frontend/app/screens/other/settings.js | 176 +++++++++++++++ frontend/app/screens/other/splash.js | 108 +++++++++ frontend/app/screens/social/contacts.js | 124 +++++++++++ frontend/app/screens/social/feed.js | 73 +++++++ frontend/app/screens/social/index.js | 7 + frontend/app/screens/social/notifications.js | 98 +++++++++ frontend/app/screens/social/profile1.js | 104 +++++++++ frontend/app/screens/social/profile2.js | 108 +++++++++ frontend/app/screens/social/profile3.js | 96 ++++++++ frontend/app/screens/social/profileSettings.js | 200 +++++++++++++++++ frontend/app/screens/theme/index.js | 1 + frontend/app/screens/theme/themes.js | 77 +++++++ frontend/app/screens/walkthroughs/index.js | 1 + frontend/app/screens/walkthroughs/walkthrough1.js | 40 ++++ frontend/app/screens/walkthroughs/walkthrough2.js | 46 ++++ .../app/screens/walkthroughs/walkthroughScreen.js | 61 ++++++ 47 files changed, 3788 insertions(+) create mode 100644 frontend/app/screens/articles/article.js create mode 100644 frontend/app/screens/articles/articles1.js create mode 100644 frontend/app/screens/articles/articles2.js create mode 100644 frontend/app/screens/articles/articles3.js create mode 100644 frontend/app/screens/articles/articles4.js create mode 100644 frontend/app/screens/articles/blogposts.js create mode 100644 frontend/app/screens/articles/index.js create mode 100644 frontend/app/screens/dashboard/dashboard.js create mode 100644 frontend/app/screens/dashboard/index.js create mode 100644 frontend/app/screens/eCommerce/addToCardForm.js create mode 100644 frontend/app/screens/eCommerce/cards.js create mode 100644 frontend/app/screens/eCommerce/index.js create mode 100644 frontend/app/screens/index.js create mode 100644 frontend/app/screens/login/index.js create mode 100644 frontend/app/screens/login/login1.js create mode 100644 frontend/app/screens/login/login2.js create mode 100644 frontend/app/screens/login/passwordRecovery.js create mode 100644 frontend/app/screens/login/signUp.js create mode 100644 frontend/app/screens/menu/categoryMenu.js create mode 100644 frontend/app/screens/menu/index.js create mode 100644 frontend/app/screens/menu/menus.js create mode 100644 frontend/app/screens/messaging/chat.js create mode 100644 frontend/app/screens/messaging/chatList.js create mode 100644 frontend/app/screens/messaging/comments.js create mode 100644 frontend/app/screens/messaging/index.js create mode 100644 frontend/app/screens/navigation/grid.js create mode 100644 frontend/app/screens/navigation/grid2.js create mode 100644 frontend/app/screens/navigation/index.js create mode 100644 frontend/app/screens/navigation/list.js create mode 100644 frontend/app/screens/navigation/sideMenu.js create mode 100644 frontend/app/screens/other/index.js create mode 100644 frontend/app/screens/other/settings.js create mode 100644 frontend/app/screens/other/splash.js create mode 100644 frontend/app/screens/social/contacts.js create mode 100644 frontend/app/screens/social/feed.js create mode 100644 frontend/app/screens/social/index.js create mode 100644 frontend/app/screens/social/notifications.js create mode 100644 frontend/app/screens/social/profile1.js create mode 100644 frontend/app/screens/social/profile2.js create mode 100644 frontend/app/screens/social/profile3.js create mode 100644 frontend/app/screens/social/profileSettings.js create mode 100644 frontend/app/screens/theme/index.js create mode 100644 frontend/app/screens/theme/themes.js create mode 100644 frontend/app/screens/walkthroughs/index.js create mode 100644 frontend/app/screens/walkthroughs/walkthrough1.js create mode 100644 frontend/app/screens/walkthroughs/walkthrough2.js create mode 100644 frontend/app/screens/walkthroughs/walkthroughScreen.js (limited to 'frontend/app/screens') diff --git a/frontend/app/screens/articles/article.js b/frontend/app/screens/articles/article.js new file mode 100644 index 0000000..059ab44 --- /dev/null +++ b/frontend/app/screens/articles/article.js @@ -0,0 +1,94 @@ +import React from 'react'; +import axios from 'axios'; + + +import { + ScrollView, + Image, + View, + TouchableOpacity, +} from 'react-native'; +import { + RkCard, + RkText, + RkStyleSheet, +} from 'react-native-ui-kitten'; +import { + Avatar, + SocialBar, +} from '../../components'; +import NavigationType from '../../config/navigation/propTypes'; + + +export class Article extends React.Component { + state = { + article: {}, + mounted: false, + }; + + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Current problem'.toUpperCase(), + }; + + + componentWillMount() { + const articleId = this.props.navigation.getParam('id', 1); + console.log(articleId); + + axios.get(`http://192.168.1.43:8000/api/articles/${articleId}`) + .then(res => { + this.setState({ + article: res.data, + mounted: true, + }); + console.log(this.state.article); + }); + } + + render() { + if (this.state.mounted) { + return ( + + + + + + {this.state.article.title} + + + + + + + {this.state.article.text} + + + + + + + + + ); + } + return null; + } +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + title: { + marginBottom: 5, + }, +})); diff --git a/frontend/app/screens/articles/articles1.js b/frontend/app/screens/articles/articles1.js new file mode 100644 index 0000000..47049b4 --- /dev/null +++ b/frontend/app/screens/articles/articles1.js @@ -0,0 +1,74 @@ +import React from 'react'; +import { + FlatList, + Image, + View, + TouchableOpacity, +} from 'react-native'; +import { + RkText, + RkCard, RkStyleSheet, +} from 'react-native-ui-kitten'; +import { SocialBar } from '../../components'; +import { data } from '../../data'; +import NavigationType from '../../config/navigation/propTypes'; + +const moment = require('moment'); + +export class Articles1 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Article List'.toUpperCase(), + }; + + state = { + data: data.getArticles(), + }; + + extractItemKey = (item) => `${item.id}`; + + onItemPressed = ({ item }) => { + this.props.navigation.navigate('Article', { id: item.id }); + }; + + renderItem = ({ item }) => ( + this.onItemPressed(item)}> + + + + {item.header} + {moment().add(item.time, 'seconds').fromNow()} + + + + + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + overlay: { + justifyContent: 'flex-end', + }, + footer: { + width: 240, + }, +})); diff --git a/frontend/app/screens/articles/articles2.js b/frontend/app/screens/articles/articles2.js new file mode 100644 index 0000000..0d48812 --- /dev/null +++ b/frontend/app/screens/articles/articles2.js @@ -0,0 +1,84 @@ +import React from 'react'; +import { + FlatList, + Image, + View, + TouchableOpacity, +} from 'react-native'; +import { + RkText, + RkCard, RkStyleSheet, +} from 'react-native-ui-kitten'; +import axios from 'axios'; +import { SocialBar } from '../../components'; +import NavigationType from '../../config/navigation/propTypes'; + + +export class Articles2 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Problems List'.toUpperCase(), + }; + + state = { + articles: [], + }; + + componentDidMount() { + axios.get('http://192.168.1.43:8000/api/articles') + .then(res => { + this.setState({ + articles: res.data, + }); + + }); + } + + extractItemKey = (item) => `${item.id}`; + + onItemPressed = (item) => { + this.props.navigation.navigate('Article', { id: item.id }); + }; + + renderItem = ({ item }) => ( + this.onItemPressed(item)}> + + + + {item.title} + + + + + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + container: { + backgroundColor: theme.colors.screen.scroll, + paddingVertical: 8, + paddingHorizontal: 14, + }, + card: { + marginVertical: 8, + }, + time: { + marginTop: 5, + }, +})); diff --git a/frontend/app/screens/articles/articles3.js b/frontend/app/screens/articles/articles3.js new file mode 100644 index 0000000..e5eda4e --- /dev/null +++ b/frontend/app/screens/articles/articles3.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { + FlatList, + Image, + View, + TouchableOpacity, +} from 'react-native'; +import { + RkText, + RkCard, RkStyleSheet, +} from 'react-native-ui-kitten'; +import { SocialBar } from '../../components'; +import { data } from '../../data'; +import NavigationType from '../../config/navigation/propTypes'; + +const moment = require('moment'); + +export class Articles3 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Article List'.toUpperCase(), + }; + + state = { + data: data.getArticles(), + }; + + extractItemKey = (item) => `${item.id}`; + + onItemPressed = ({ item }) => { + this.props.navigation.navigate('Article', { id: item.id }); + }; + + renderItem = ({ item }) => ( + this.onItemPressed(item)}> + + + + {item.header} + {moment().add(item.time, 'seconds').fromNow()} + + + + + + + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + container: { + backgroundColor: theme.colors.screen.scroll, + paddingHorizontal: 14, + paddingVertical: 8, + }, + card: { + marginVertical: 8, + }, + footer: { + paddingTop: 16, + }, + time: { + marginTop: 5, + }, +})); diff --git a/frontend/app/screens/articles/articles4.js b/frontend/app/screens/articles/articles4.js new file mode 100644 index 0000000..1f08ba1 --- /dev/null +++ b/frontend/app/screens/articles/articles4.js @@ -0,0 +1,78 @@ +import React from 'react'; +import { + FlatList, + Image, + View, + TouchableOpacity, +} from 'react-native'; +import { + RkText, + RkCard, + RkStyleSheet, +} from 'react-native-ui-kitten'; +import { SocialBar } from '../../components'; +import { data } from '../../data'; +import NavigationType from '../../config/navigation/propTypes'; + + +export class Articles4 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Article List'.toUpperCase(), + }; + + state = { + data: data.getArticles(), + }; + + extractItemKey = (item) => `${item.id}`; + + renderItem = ({ item }) => ( + this.props.navigation.navigate('Article', { id: item.id })}> + + + + {item.header} + + {`${item.user.firstName} ${item.user.lastName}`} + + {item.text} + + + + + + + ); + + render = () => ( + + + + ); +} + + +const styles = RkStyleSheet.create(theme => ({ + container: { + backgroundColor: theme.colors.screen.scroll, + paddingVertical: 8, + paddingHorizontal: 14, + }, + card: { + marginVertical: 8, + }, + post: { + marginTop: 13, + }, +})); diff --git a/frontend/app/screens/articles/blogposts.js b/frontend/app/screens/articles/blogposts.js new file mode 100644 index 0000000..3ce4565 --- /dev/null +++ b/frontend/app/screens/articles/blogposts.js @@ -0,0 +1,88 @@ +import React from 'react'; +import { + FlatList, + View, + Image, + TouchableOpacity, +} from 'react-native'; +import { + RkCard, RkStyleSheet, + RkText, +} from 'react-native-ui-kitten'; +import { Avatar } from '../../components'; +import { data } from '../../data'; +import NavigationType from '../../config/navigation/propTypes'; + +const moment = require('moment'); + +export class Blogposts extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Blogposts'.toUpperCase(), + }; + + state = { + data: data.getArticles('post'), + }; + + extractItemKey = (item) => `${item.id}`; + + onItemPressed = (item) => { + this.props.navigation.navigate('Article', { id: item.id }); + }; + + renderItem = ({ item }) => ( + this.onItemPressed(item)}> + + + + {item.title} + + + + {item.text} + + + + + + {`${item.user.firstName} ${item.user.lastName}`} + + {moment().add(item.time, 'seconds').fromNow()} + + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + container: { + backgroundColor: theme.colors.screen.scroll, + paddingVertical: 8, + paddingHorizontal: 14, + }, + card: { + marginVertical: 8, + }, + userInfo: { + flexDirection: 'row', + alignItems: 'center', + }, + avatar: { + marginRight: 17, + }, +})); diff --git a/frontend/app/screens/articles/index.js b/frontend/app/screens/articles/index.js new file mode 100644 index 0000000..115d2ac --- /dev/null +++ b/frontend/app/screens/articles/index.js @@ -0,0 +1,6 @@ +export * from './articles1'; +export * from './articles2'; +export * from './articles3'; +export * from './articles4'; +export * from './blogposts'; +export * from './article'; diff --git a/frontend/app/screens/dashboard/dashboard.js b/frontend/app/screens/dashboard/dashboard.js new file mode 100644 index 0000000..06c8d6a --- /dev/null +++ b/frontend/app/screens/dashboard/dashboard.js @@ -0,0 +1,117 @@ +import React from 'react'; +import { + View, + ScrollView, +} from 'react-native'; +import { + RkText, + RkStyleSheet, + RkTheme, +} from 'react-native-ui-kitten'; +import { FontAwesome } from '../../assets/icons'; +import { + ProgressChart, + DoughnutChart, + AreaChart, + AreaSmoothedChart, +} from '../../components/'; + +export class Dashboard extends React.Component { + static navigationOptions = { + title: 'Dashboard'.toUpperCase(), + }; + + state = { + data: { + statItems: [ + { + name: 'Stars', + value: '4,512', + icon: 'github', + background: RkTheme.current.colors.dashboard.stars, + }, + { + name: 'Tweets', + value: '2,256', + icon: 'twitter', + background: RkTheme.current.colors.dashboard.tweets, + }, + { + name: 'Likes', + value: '1,124', + icon: 'facebook', + background: RkTheme.current.colors.dashboard.likes, + }, + ], + }, + }; + + renderStatItem = (item) => ( + + + {item.value} + {item.name} + + {FontAwesome[item.icon]} + + ); + + render = () => { + const chartBackgroundStyle = { backgroundColor: RkTheme.current.colors.control.background }; + return ( + + + {this.state.data.statItems.map(this.renderStatItem)} + + + + + + + + + + + + + + + ); + }; +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + backgroundColor: theme.colors.screen.scroll, + paddingHorizontal: 15, + }, + statItems: { + flexDirection: 'row', + justifyContent: 'space-between', + marginVertical: 15, + }, + statItemContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + borderRadius: 3, + paddingHorizontal: 10, + paddingVertical: 10, + }, + statItemIcon: { + alignSelf: 'center', + marginLeft: 10, + color: 'white', + }, + statItemValue: { + color: 'white', + }, + statItemName: { + color: 'white', + }, + chartBlock: { + padding: 15, + marginBottom: 15, + justifyContent: 'center', + }, +})); + diff --git a/frontend/app/screens/dashboard/index.js b/frontend/app/screens/dashboard/index.js new file mode 100644 index 0000000..b58b6c9 --- /dev/null +++ b/frontend/app/screens/dashboard/index.js @@ -0,0 +1 @@ +export * from './dashboard'; diff --git a/frontend/app/screens/eCommerce/addToCardForm.js b/frontend/app/screens/eCommerce/addToCardForm.js new file mode 100644 index 0000000..5d41885 --- /dev/null +++ b/frontend/app/screens/eCommerce/addToCardForm.js @@ -0,0 +1,138 @@ +import React from 'react'; +import axios from 'axios'; +import { + View, + Keyboard, +} from 'react-native'; +import { + RkText, + RkTextInput, + RkStyleSheet, + RkAvoidKeyboard, +} from 'react-native-ui-kitten'; +import { GradientButton } from '../../components/'; +import { PasswordTextInput } from '../../components/passwordTextInput'; + +import { scale } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +export class AddToCardForm extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Add Card'.toUpperCase(), + }; + + state = { + name: '', + email: '', + problem: '', + + }; + + + onAddButtonPressed = () => { + axios.post('http://192.168.1.43:8000/api/articles/', { + title: this.state.problem.split(' ').slice(0, 5), + text: this.state.problem, + + }) + this.props.navigation.goBack(); + }; + + render = () => ( + true} + onResponderRelease={() => Keyboard.dismiss()}> + + + + + + + Your name + + this.setState({ name })} + value={this.state.name} + /> + + + + + Your e-mail + + this.setState({ email })} + value={this.state.email} + /> + + + + + Describe eco-problem + + this.setState({ problem })} + value={this.state.problem} + /> + + + + + + + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + padding: 15, + flex: 1, + backgroundColor: theme.colors.screen.base, + }, + content: { + marginTop: 10, + }, + formContent: { + justifyContent: 'space-between', + flexDirection: 'column', + flex: 1, + }, + textRow: { + marginLeft: 20, + }, + expireDateBlock: { + justifyContent: 'space-between', + flexDirection: 'row', + }, + expireDateInput: { + flex: 0.48, + marginVertical: 10, + }, + expireDateInnerInput: { + textAlign: 'center', + }, + expireDateDelimiter: { + flex: 0.04, + }, + balloon: { + maxWidth: scale(250), + padding: 15, + borderRadius: 100, + borderWidth: 0.5, + borderColor: theme.colors.border.solid, + }, +})); diff --git a/frontend/app/screens/eCommerce/cards.js b/frontend/app/screens/eCommerce/cards.js new file mode 100644 index 0000000..c22c30d --- /dev/null +++ b/frontend/app/screens/eCommerce/cards.js @@ -0,0 +1,242 @@ +import React from 'react'; +import { + FlatList, + View, + Image, + TouchableOpacity, + Modal, +} from 'react-native'; +import { + RkText, + RkCard, + RkButton, + RkStyleSheet, + RkTheme, +} from 'react-native-ui-kitten'; +import { LinearGradient } from 'expo'; +import { data } from '../../data'; +import { PasswordTextInput } from '../../components/passwordTextInput'; +import { UIConstants } from '../../config/appConstants'; +import { scaleVertical } from '../../utils/scale'; + +export class Cards extends React.Component { + static navigationOptions = { + title: 'Cards'.toUpperCase(), + }; + + state = { + data: data.getCards(), + modalVisible: false, + }; + + getCardStyle = (type) => { + switch (type) { + case 'visa': + return { + gradient: RkTheme.current.colors.gradients.visa, + icon: require('../../assets/icons/visaIcon.png'), + }; + case 'mastercard': + return { + gradient: RkTheme.current.colors.gradients.mastercard, + icon: require('../../assets/icons/masterCardIcon.png'), + }; + case 'axp': + return { + gradient: RkTheme.current.colors.gradients.axp, + icon: require('../../assets/icons/americanExpressIcon.png'), + }; + default: return {}; + } + }; + + formatCurrency = (amount, currency) => { + switch (currency) { + case 'usd': + return `$${amount}`; + case 'eur': + return `€${amount}`; + default: return ''; + } + }; + + prepareCardNo = (cardNo) => { + const re = /\*+/; + const parts = cardNo.split(re); + return { + firstPart: parts[0], + lastPart: parts[1], + }; + }; + + renderFooter = () => ( + + + + + + ); + + setModalVisible = (visible) => { + this.setState({ modalVisible: visible }); + }; + + onItemPressed = () => { + this.setModalVisible(true); + }; + + extractItemKey = (item) => `${item.id}`; + + renderItem = ({ item }) => { + const { gradient, icon } = this.getCardStyle(item.type); + const { firstPart, lastPart } = this.prepareCardNo(item.cardNo); + + return ( + + + + + {item.bank} + + + + + {firstPart} + * * * * + * * * * + {lastPart} + + {item.date} + + + + {item.currency.toUpperCase()} + {item.name.toUpperCase()} + + {this.formatCurrency(item.amount, item.currency)} + + + + + + ); + }; + + render = () => ( + + + this.setModalVisible(false)} + visible={this.state.modalVisible}> + + + + Enter security code + + + + this.setModalVisible(false)} + style={styles.popupButton} + rkType='clear'> + CANCEL + + + this.setModalVisible(false)} + style={styles.popupButton} + rkType='clear'> + OK + + + + + + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + list: { + marginHorizontal: 16, + }, + card: { + marginVertical: 8, + }, + background: { + borderRadius: 7, + }, + cardNoContainer: { + flexDirection: 'row', + }, + cardNo: { + marginHorizontal: 8, + }, + cardPlaceholder: { + paddingTop: 4, + }, + date: { + marginTop: scaleVertical(20), + }, + footer: { + marginTop: 8, + marginBottom: scaleVertical(16), + alignItems: 'center', + }, + button: { + height: 56, + width: 56, + }, + popup: { + backgroundColor: theme.colors.screen.base, + marginTop: scaleVertical(70), + marginHorizontal: 37, + borderRadius: 7, + }, + popupOverlay: { + backgroundColor: theme.colors.screen.overlay, + flex: 1, + marginTop: UIConstants.HeaderHeight, + }, + popupContent: { + alignItems: 'center', + margin: 16, + }, + popupHeader: { + marginBottom: scaleVertical(45), + }, + popupButtons: { + marginTop: 15, + flexDirection: 'row', + borderTopWidth: 1, + borderColor: theme.colors.border.base, + }, + popupButton: { + flex: 1, + marginVertical: 16, + }, + separator: { + backgroundColor: theme.colors.border.base, + width: 1, + }, +})); diff --git a/frontend/app/screens/eCommerce/index.js b/frontend/app/screens/eCommerce/index.js new file mode 100644 index 0000000..7658d81 --- /dev/null +++ b/frontend/app/screens/eCommerce/index.js @@ -0,0 +1,2 @@ +export * from './cards'; +export * from './addToCardForm'; diff --git a/frontend/app/screens/index.js b/frontend/app/screens/index.js new file mode 100644 index 0000000..b7ce1cb --- /dev/null +++ b/frontend/app/screens/index.js @@ -0,0 +1,11 @@ +export * from './navigation'; +export * from './menu'; +export * from './other'; +export * from './dashboard'; +export * from './social'; +export * from './articles'; +export * from './messaging'; +export * from './login'; +export * from './walkthroughs'; +export * from './eCommerce'; +export * from './theme'; diff --git a/frontend/app/screens/login/index.js b/frontend/app/screens/login/index.js new file mode 100644 index 0000000..b0b1cd1 --- /dev/null +++ b/frontend/app/screens/login/index.js @@ -0,0 +1,4 @@ +export * from './login1'; +export * from './login2'; +export * from './signUp'; +export * from './passwordRecovery'; diff --git a/frontend/app/screens/login/login1.js b/frontend/app/screens/login/login1.js new file mode 100644 index 0000000..73e97d5 --- /dev/null +++ b/frontend/app/screens/login/login1.js @@ -0,0 +1,129 @@ +import React from 'react'; +import { + View, + Image, + Dimensions, + Keyboard, +} from 'react-native'; +import { + RkButton, + RkText, + RkTextInput, + RkAvoidKeyboard, + RkStyleSheet, + RkTheme, +} from 'react-native-ui-kitten'; +import { FontAwesome } from '../../assets/icons'; +import { GradientButton } from '../../components/gradientButton'; +import { scaleModerate, scaleVertical } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +export class LoginV1 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + header: null, + }; + + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/backgroundLoginV1.png') : require('../../assets/images/backgroundLoginV1DarkTheme.png') + ); + + renderImage = () => { + const screenSize = Dimensions.get('window'); + const imageSize = { + width: screenSize.width, + height: screenSize.height - scaleModerate(375, 1), + }; + return ( + + ); + }; + + onLoginButtonPressed = () => { + this.props.navigation.goBack(); + }; + + onSignUpButtonPressed = () => { + this.props.navigation.navigate('SignUp'); + }; + + render = () => ( + true} + onResponderRelease={() => Keyboard.dismiss()} + style={styles.screen}> + {this.renderImage()} + + + + {FontAwesome.twitter} + + + {FontAwesome.google} + + + {FontAwesome.facebook} + + + + + + + + Don’t have an account? + + Sign up now + + + + + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + flex: 1, + alignItems: 'center', + backgroundColor: theme.colors.screen.base, + }, + image: { + resizeMode: 'cover', + marginBottom: scaleVertical(10), + }, + container: { + paddingHorizontal: 17, + paddingBottom: scaleVertical(22), + alignItems: 'center', + flex: -1, + }, + footer: { + justifyContent: 'flex-end', + flex: 1, + }, + buttons: { + flexDirection: 'row', + marginBottom: scaleVertical(24), + }, + button: { + marginHorizontal: 14, + }, + save: { + marginVertical: 9, + }, + textRow: { + justifyContent: 'center', + flexDirection: 'row', + }, +})); diff --git a/frontend/app/screens/login/login2.js b/frontend/app/screens/login/login2.js new file mode 100644 index 0000000..c211190 --- /dev/null +++ b/frontend/app/screens/login/login2.js @@ -0,0 +1,127 @@ +import React from 'react'; +import { + View, + Image, + Keyboard, +} from 'react-native'; +import { + RkButton, + RkText, + RkTextInput, + RkAvoidKeyboard, + RkTheme, + RkStyleSheet, +} from 'react-native-ui-kitten'; +import { FontAwesome } from '../../assets/icons'; +import { GradientButton } from '../../components/gradientButton'; +import { scaleVertical } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +export class LoginV2 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + header: null, + }; + + onLoginButtonPressed = () => { + this.props.navigation.goBack(); + }; + + onSignUpButtonPressed = () => { + this.props.navigation.navigate('SignUp'); + }; + + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/logo.png') : require('../../assets/images/logoDark.png') + ); + + renderImage = () => ( + + ); + + render = () => ( + true} + onResponderRelease={() => Keyboard.dismiss()}> + + {this.renderImage()} + React Native + UI Kitten + + + + + + + + + + {FontAwesome.twitter} + + + {FontAwesome.google} + + + {FontAwesome.facebook} + + + + + Don’t have an account? + + Sign up now + + + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + padding: scaleVertical(16), + flex: 1, + justifyContent: 'space-between', + backgroundColor: theme.colors.screen.base, + }, + image: { + height: scaleVertical(77), + resizeMode: 'contain', + }, + header: { + paddingBottom: scaleVertical(10), + alignItems: 'center', + justifyContent: 'center', + flex: 1, + }, + content: { + justifyContent: 'space-between', + }, + save: { + marginVertical: 20, + }, + buttons: { + flexDirection: 'row', + marginBottom: scaleVertical(24), + marginHorizontal: 24, + justifyContent: 'space-around', + }, + textRow: { + flexDirection: 'row', + justifyContent: 'center', + }, + button: { + borderColor: theme.colors.border.solid, + }, + footer: {}, +})); diff --git a/frontend/app/screens/login/passwordRecovery.js b/frontend/app/screens/login/passwordRecovery.js new file mode 100644 index 0000000..b383e4c --- /dev/null +++ b/frontend/app/screens/login/passwordRecovery.js @@ -0,0 +1,83 @@ +import React from 'react'; +import { + View, + Image, + Keyboard, +} from 'react-native'; +import { + RkStyleSheet, + RkText, + RkTextInput, + RkTheme, +} from 'react-native-ui-kitten'; +import { GradientButton } from '../../components/'; +import { scaleVertical } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +export class PasswordRecovery extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + header: null, + }; + + onSendButtonPressed = () => { + this.props.navigation.goBack(); + }; + + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/logo.png') : require('../../assets/images/logoDark.png') + ); + + renderImage = () => ( + + ); + + render = () => ( + true} + onResponderRelease={() => Keyboard.dismiss()}> + + {this.renderImage()} + Password Recovery + + + + + Enter your email below to receive your password reset instructions + + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + flex: 1, + paddingHorizontal: 16, + paddingVertical: scaleVertical(24), + justifyContent: 'space-between', + backgroundColor: theme.colors.screen.base, + }, + header: { + alignItems: 'center', + }, + image: { + marginVertical: scaleVertical(27), + height: scaleVertical(77), + resizeMode: 'contain', + }, + content: { + alignItems: 'center', + }, +})); diff --git a/frontend/app/screens/login/signUp.js b/frontend/app/screens/login/signUp.js new file mode 100644 index 0000000..5c7965e --- /dev/null +++ b/frontend/app/screens/login/signUp.js @@ -0,0 +1,110 @@ +import React from 'react'; +import { + View, + Image, + Keyboard, +} from 'react-native'; +import { + RkButton, + RkText, + RkTextInput, + RkStyleSheet, + RkTheme, + RkAvoidKeyboard, +} from 'react-native-ui-kitten'; +import { GradientButton } from '../../components/'; +import { scaleVertical } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +export class SignUp extends React.Component { + static navigationOptions = { + header: null, + }; + static propTypes = { + navigation: NavigationType.isRequired, + }; + + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/logo.png') : require('../../assets/images/logoDark.png') + ); + + renderImage = () => ( + + ); + + onSignUpButtonPressed = () => { + this.props.navigation.goBack(); + }; + + onSignInButtonPressed = () => { + this.props.navigation.navigate('Login1'); + }; + + render = () => ( + true} + onResponderRelease={() => Keyboard.dismiss()}> + + {this.renderImage()} + Registration + + + + + + + + + + + + Already have an account? + + Sign in now + + + + + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + padding: 16, + flex: 1, + justifyContent: 'space-around', + backgroundColor: theme.colors.screen.base, + }, + image: { + marginBottom: 10, + height: scaleVertical(77), + resizeMode: 'contain', + }, + content: { + justifyContent: 'space-between', + }, + save: { + marginVertical: 20, + }, + buttons: { + flexDirection: 'row', + marginBottom: 24, + marginHorizontal: 24, + justifyContent: 'space-around', + }, + footer: { + justifyContent: 'flex-end', + }, + textRow: { + flexDirection: 'row', + justifyContent: 'center', + }, +})); diff --git a/frontend/app/screens/menu/categoryMenu.js b/frontend/app/screens/menu/categoryMenu.js new file mode 100644 index 0000000..6ed6400 --- /dev/null +++ b/frontend/app/screens/menu/categoryMenu.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + TouchableHighlight, + View, + FlatList, + StyleSheet, +} from 'react-native'; +import { + RkStyleSheet, + RkTheme, + RkText, +} from 'react-native-ui-kitten'; +import NavigationType from '../../config/navigation/propTypes'; + +export class CategoryMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + items: PropTypes.arrayOf(PropTypes.shape({ + title: PropTypes.string.isRequired, + })).isRequired, + }; + + onItemPressed = (item) => { + const url = item.action || item.id; + this.props.navigation.navigate(url); + }; + + extractItemKey = (item) => item.id; + + renderItem = ({ item }) => ( + this.onItemPressed(item)}> + + {item.title} + + + ); + + renderPlaceholder = () => ( + + Coming Soon... + + ); + + renderList = () => ( + + ); + + render = () => (this.props.items.length === 0 ? this.renderPlaceholder() : this.renderList()); +} + +const styles = RkStyleSheet.create(theme => ({ + item: { + paddingVertical: 32.5, + paddingHorizontal: 16.5, + borderBottomWidth: StyleSheet.hairlineWidth, + borderColor: theme.colors.border.base, + }, + list: { + backgroundColor: theme.colors.screen.base, + }, + emptyContainer: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: theme.colors.screen.base, + }, +})); diff --git a/frontend/app/screens/menu/index.js b/frontend/app/screens/menu/index.js new file mode 100644 index 0000000..4bea133 --- /dev/null +++ b/frontend/app/screens/menu/index.js @@ -0,0 +1,2 @@ +export * from './categoryMenu'; +export * from './menus'; diff --git a/frontend/app/screens/menu/menus.js b/frontend/app/screens/menu/menus.js new file mode 100644 index 0000000..8cd8ff2 --- /dev/null +++ b/frontend/app/screens/menu/menus.js @@ -0,0 +1,114 @@ +/* eslint-disable react/no-multi-comp */ +import React from 'react'; + +import { CategoryMenu } from './categoryMenu'; +import * as Routes from '../../config/navigation/routesBuilder'; +import NavigationType from '../../config/navigation/propTypes'; + +export class LoginMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Login'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class NavigationMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Navigation'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class SocialMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Social'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class ArticleMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Articles'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class MessagingMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Messaging'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class DashboardMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Dashboards'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class WalkthroughMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Walkthrough'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class EcommerceMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Ecommerce'.toUpperCase(), + }; + render = () => ( + + ); +} + +export class OtherMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Other'.toUpperCase(), + }; + render = () => ( + + ); +} diff --git a/frontend/app/screens/messaging/chat.js b/frontend/app/screens/messaging/chat.js new file mode 100644 index 0000000..c6b0b5e --- /dev/null +++ b/frontend/app/screens/messaging/chat.js @@ -0,0 +1,214 @@ +import React from 'react'; +import { + FlatList, + View, + Platform, + Image, + TouchableOpacity, + Keyboard, + InteractionManager, +} from 'react-native'; +import { + RkButton, + RkText, + RkTextInput, + RkAvoidKeyboard, + RkStyleSheet, + RkTheme, +} from 'react-native-ui-kitten'; +import _ from 'lodash'; +import { FontAwesome } from '../../assets/icons'; +import { data } from '../../data'; +import { Avatar } from '../../components/avatar'; +import { scale } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +const moment = require('moment'); + +export class Chat extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = ({ navigation }) => { + const userId = navigation.state.params ? navigation.state.params.userId : undefined; + const user = data.getUser(userId); + return ({ + headerTitle: Chat.renderNavigationTitle(navigation, user), + headerRight: Chat.renderNavigationAvatar(navigation, user), + }); + }; + + constructor(props) { + super(props); + const userId = this.props.navigation.getParam('userId', undefined); + this.state = { + data: data.getConversation(userId), + }; + } + + componentDidMount() { + InteractionManager.runAfterInteractions(() => { + this.listRef.scrollToEnd(); + }); + } + + setListRef = (ref) => { + this.listRef = ref; + }; + + extractItemKey = (item) => `${item.id}`; + + scrollToEnd = () => { + if (Platform.OS === 'ios') { + this.listRef.scrollToEnd(); + } else { + _.delay(this.listRef.scrollToEnd, 100); + } + }; + + onInputChanged = (text) => { + this.setState({ message: text }); + }; + + onSendButtonPressed = () => { + if (!this.state.message) { + return; + } + this.state.data.messages.push({ + id: this.state.data.messages.length, time: 0, type: 'out', text: this.state.message, + }); + this.setState({ message: '' }); + this.scrollToEnd(true); + }; + + static onNavigationTitlePressed = (navigation, user) => { + navigation.navigate('ProfileV1', { id: user.id }); + }; + + static onNavigationAvatarPressed = (navigation, user) => { + navigation.navigate('ProfileV1', { id: user.id }); + }; + + static renderNavigationTitle = (navigation, user) => ( + Chat.onNavigationTitlePressed(navigation, user)}> + + {`${user.firstName} ${user.lastName}`} + Online + + + ); + + static renderNavigationAvatar = (navigation, user) => ( + Chat.onNavigationAvatarPressed(navigation, user)}> + + + ); + + renderDate = (date) => ( + + {moment().add(date, 'seconds').format('LT')} + + ); + + renderItem = ({ item }) => { + const isIncoming = item.type === 'in'; + const backgroundColor = isIncoming + ? RkTheme.current.colors.chat.messageInBackground + : RkTheme.current.colors.chat.messageOutBackground; + const itemStyle = isIncoming ? styles.itemIn : styles.itemOut; + + return ( + + {!isIncoming && this.renderDate(item.time)} + + {item.text} + + {isIncoming && this.renderDate(item.time)} + + ); + }; + + render = () => ( + + + + + {FontAwesome.plus} + + + + + + + + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + header: { + alignItems: 'center', + }, + avatar: { + marginRight: 16, + }, + container: { + flex: 1, + backgroundColor: theme.colors.screen.base, + }, + list: { + paddingHorizontal: 17, + }, + footer: { + flexDirection: 'row', + minHeight: 60, + padding: 10, + backgroundColor: theme.colors.screen.alter, + }, + item: { + marginVertical: 14, + flex: 1, + flexDirection: 'row', + }, + itemIn: {}, + itemOut: { + alignSelf: 'flex-end', + }, + balloon: { + maxWidth: scale(250), + paddingHorizontal: 15, + paddingTop: 10, + paddingBottom: 15, + borderRadius: 20, + }, + time: { + alignSelf: 'flex-end', + margin: 15, + }, + plus: { + paddingVertical: 10, + paddingHorizontal: 10, + marginRight: 7, + }, + send: { + width: 40, + height: 40, + marginLeft: 10, + }, +})); diff --git a/frontend/app/screens/messaging/chatList.js b/frontend/app/screens/messaging/chatList.js new file mode 100644 index 0000000..36cde5c --- /dev/null +++ b/frontend/app/screens/messaging/chatList.js @@ -0,0 +1,147 @@ +import React from 'react'; +import { + FlatList, + View, + StyleSheet, + TouchableOpacity, +} from 'react-native'; +import _ from 'lodash'; +import { + RkStyleSheet, + RkText, + RkTextInput, +} from 'react-native-ui-kitten'; +import { Avatar } from '../../components'; +import { FontAwesome } from '../../assets/icons'; +import { data } from '../../data'; +import NavigationType from '../../config/navigation/propTypes'; + +const moment = require('moment'); + +export class ChatList extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Chats List'.toUpperCase(), + }; + + state = { + data: { + original: data.getChatList(), + filtered: data.getChatList(), + }, + }; + + extractItemKey = (item) => `${item.withUser.id}`; + + onInputChanged = (event) => { + const pattern = new RegExp(event.nativeEvent.text, 'i'); + const chats = _.filter(this.state.data.original, chat => { + const filterResult = { + firstName: chat.withUser.firstName.search(pattern), + lastName: chat.withUser.lastName.search(pattern), + }; + return filterResult.firstName !== -1 || filterResult.lastName !== -1 ? chat : undefined; + }); + this.setState({ + data: { + original: this.state.data.original, + filtered: chats, + }, + }); + }; + + onItemPressed = (item) => { + const navigationParams = { userId: item.withUser.id }; + this.props.navigation.navigate('Chat', navigationParams); + }; + + renderSeparator = () => ( + + ); + + renderInputLabel = () => ( + {FontAwesome.search} + ); + + renderHeader = () => ( + + + + ); + + renderItem = ({ item }) => { + const last = item.messages[item.messages.length - 1]; + return ( + this.onItemPressed(item)}> + + + + + {`${item.withUser.firstName} ${item.withUser.lastName}`} + + {moment().add(last.time, 'seconds').format('LT')} + + + + {last.text} + + + + + ); + }; + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + searchContainer: { + backgroundColor: theme.colors.screen.bold, + paddingHorizontal: 16, + paddingVertical: 10, + height: 60, + alignItems: 'center', + }, + container: { + paddingLeft: 19, + paddingRight: 16, + paddingBottom: 12, + paddingTop: 7, + flexDirection: 'row', + }, + content: { + marginLeft: 16, + flex: 1, + }, + contentHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 6, + }, + separator: { + height: StyleSheet.hairlineWidth, + backgroundColor: theme.colors.border.base, + }, +})); diff --git a/frontend/app/screens/messaging/comments.js b/frontend/app/screens/messaging/comments.js new file mode 100644 index 0000000..3b772c5 --- /dev/null +++ b/frontend/app/screens/messaging/comments.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { + FlatList, + View, + StyleSheet, + TouchableOpacity, +} from 'react-native'; +import { + RkStyleSheet, + RkText, +} from 'react-native-ui-kitten'; +import { Avatar } from '../../components'; +import { data } from '../../data'; +import NavigationType from '../../config/navigation/propTypes'; + +const moment = require('moment'); + +export class Comments extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Comments'.toUpperCase(), + }; + + constructor(props) { + super(props); + const postId = this.props.navigation.getParam('postId', undefined); + this.state = { + data: data.getComments(postId), + }; + } + + extractItemKey = (item) => `${item.id}`; + + onItemPressed = (item) => { + const navigationParams = { id: item.user.id }; + this.props.navigation.navigate('ProfileV1', navigationParams); + }; + + renderSeparator = () => ( + + ); + + renderItem = ({ item }) => ( + + this.onItemPressed(item)}> + + + + + {`${item.user.firstName} ${item.user.lastName}`} + + {moment().add(item.time, 'seconds').format('LT')} + + + {item.text} + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + container: { + paddingLeft: 19, + paddingRight: 16, + paddingVertical: 12, + flexDirection: 'row', + alignItems: 'flex-start', + }, + content: { + marginLeft: 16, + flex: 1, + }, + contentHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + marginBottom: 6, + }, + separator: { + height: StyleSheet.hairlineWidth, + backgroundColor: theme.colors.border.base, + }, +})); diff --git a/frontend/app/screens/messaging/index.js b/frontend/app/screens/messaging/index.js new file mode 100644 index 0000000..0d39244 --- /dev/null +++ b/frontend/app/screens/messaging/index.js @@ -0,0 +1,3 @@ +export * from './chat'; +export * from './chatList'; +export * from './comments'; diff --git a/frontend/app/screens/navigation/grid.js b/frontend/app/screens/navigation/grid.js new file mode 100644 index 0000000..7fbe404 --- /dev/null +++ b/frontend/app/screens/navigation/grid.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { + ScrollView, + Dimensions, +} from 'react-native'; +import { + RkButton, RkStyleSheet, + RkText, +} from 'react-native-ui-kitten'; +import { MainRoutes } from '../../config/navigation/routes'; +import NavigationType from '../../config/navigation/propTypes'; + +const paddingValue = 8; + +export class GridV1 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Grid Menu'.toUpperCase(), + }; + + constructor(props) { + super(props); + const screenWidth = Dimensions.get('window').width; + this.itemSize = { + width: (screenWidth - (paddingValue * 6)) / 2, + height: (screenWidth - (paddingValue * 6)) / 2, + }; + } + + onItemPressed = (item) => { + this.props.navigation.navigate(item.id); + }; + + renderItems = () => MainRoutes.map(route => ( + this.onItemPressed(route)}> + + {route.icon} + + {route.title} + + )); + + render = () => ( + + {this.renderItems()} + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.scroll, + padding: paddingValue, + }, + rootContainer: { + flexDirection: 'row', + flexWrap: 'wrap', + }, + icon: { + marginBottom: 16, + }, +})); diff --git a/frontend/app/screens/navigation/grid2.js b/frontend/app/screens/navigation/grid2.js new file mode 100644 index 0000000..8773e02 --- /dev/null +++ b/frontend/app/screens/navigation/grid2.js @@ -0,0 +1,82 @@ +import React from 'react'; +import { + ScrollView, + View, + StyleSheet, +} from 'react-native'; +import { + RkText, + RkButton, + RkStyleSheet, +} from 'react-native-ui-kitten'; +import { MainRoutes } from '../../config/navigation/routes'; +import NavigationType from '../../config/navigation/propTypes'; + +export class GridV2 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Grid Menu'.toUpperCase(), + }; + + state = { + dimensions: undefined, + }; + + onContainerLayout = (event) => { + if (this.state.height) { + return; + } + const dimensions = event.nativeEvent.layout; + this.setState({ dimensions }); + }; + + renderItems = () => MainRoutes.map(this.renderItem); + + renderItem = (item) => ( + this.onItemPressed(item)}> + + {item.icon} + + {item.title} + + ); + + onItemPressed = (item) => { + this.props.navigation.navigate(item.id); + }; + + render() { + const items = this.state.dimensions === undefined ? : this.renderItems(); + return ( + + {items} + + ); + } +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + rootContainer: { + flexDirection: 'row', + flexWrap: 'wrap', + }, + empty: { + borderWidth: StyleSheet.hairlineWidth, + borderColor: theme.colors.border.base, + }, + icon: { + marginBottom: 16, + }, +})); diff --git a/frontend/app/screens/navigation/index.js b/frontend/app/screens/navigation/index.js new file mode 100644 index 0000000..3f5229f --- /dev/null +++ b/frontend/app/screens/navigation/index.js @@ -0,0 +1,4 @@ +export * from './grid2'; +export * from './grid'; +export * from './sideMenu'; +export * from './list'; diff --git a/frontend/app/screens/navigation/list.js b/frontend/app/screens/navigation/list.js new file mode 100644 index 0000000..33c52ba --- /dev/null +++ b/frontend/app/screens/navigation/list.js @@ -0,0 +1,73 @@ +import React from 'react'; +import { + FlatList, + TouchableOpacity, + View, + StyleSheet, +} from 'react-native'; +import { + RkText, + RkStyleSheet, +} from 'react-native-ui-kitten'; +import { MainRoutes } from '../../config/navigation/routes'; +import NavigationType from '../../config/navigation/propTypes'; + +export class ListMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'List Menu'.toUpperCase(), + }; + + onItemPressed = (item) => { + this.props.navigation.navigate(item.id); + }; + + extractItemKey = (item) => item.id; + + renderItem = ({ item }) => ( + this.onItemPressed(item)}> + + {item.icon} + + {item.title} + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + item: { + height: 80, + justifyContent: 'center', + borderBottomWidth: StyleSheet.hairlineWidth, + borderColor: theme.colors.border.base, + paddingHorizontal: 16, + }, + list: { + backgroundColor: theme.colors.screen.base, + }, + container: { + flexDirection: 'row', + alignItems: 'center', + }, + icon: { + width: 34, + textAlign: 'center', + marginRight: 16, + }, +})); diff --git a/frontend/app/screens/navigation/sideMenu.js b/frontend/app/screens/navigation/sideMenu.js new file mode 100644 index 0000000..7f5c5a1 --- /dev/null +++ b/frontend/app/screens/navigation/sideMenu.js @@ -0,0 +1,113 @@ +import React from 'react'; +import { + TouchableHighlight, + View, + ScrollView, + Image, + Platform, + StyleSheet, +} from 'react-native'; +import { + RkStyleSheet, + RkText, + RkTheme, +} from 'react-native-ui-kitten'; +import { MainRoutes } from '../../config/navigation/routes'; +import { FontAwesome, FontIcons } from '../../assets/icons'; +import NavigationType from '../../config/navigation/propTypes'; +import * as Screens from '../index'; + +export const NavbarRoutes = [ + { + id: 'Articles2', + title: 'Problems', + icon: FontIcons.article, + screen: Screens.Articles2, + + }, { + id: 'Login1', + title: 'Login', + icon: FontIcons.login, + screen: Screens.LoginV1, + + }, { + id: 'AddProblem', + title: 'Add Problem', + icon: FontIcons.article, + screen: Screens.AddToCardForm, + + }]; + +export class SideMenu extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + + onMenuItemPressed = (item) => { + this.props.navigation.navigate(item.id); + }; + + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/smallLogo.png') : require('../../assets/images/smallLogoDark.png') + ); + + renderIcon = () => ( + + ); + + renderMenu = () => NavbarRoutes.map(this.renderMenuItem); + + renderMenuItem = (item) => ( + this.onMenuItemPressed(item)}> + + + {item.icon} + + {item.title} + + {FontAwesome.chevronRight} + + + ); + + render = () => ( + + + + EcoAlerts + + {this.renderMenu()} + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + container: { + height: 80, + paddingHorizontal: 16, + borderTopWidth: StyleSheet.hairlineWidth, + borderColor: theme.colors.border.base, + }, + root: { + paddingTop: Platform.OS === 'ios' ? 20 : 0, + backgroundColor: theme.colors.screen.base, + }, + content: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + }, + icon: { + marginRight: 13, + }, +})); diff --git a/frontend/app/screens/other/index.js b/frontend/app/screens/other/index.js new file mode 100644 index 0000000..9784f88 --- /dev/null +++ b/frontend/app/screens/other/index.js @@ -0,0 +1,2 @@ +export * from './splash'; +export * from './settings'; diff --git a/frontend/app/screens/other/settings.js b/frontend/app/screens/other/settings.js new file mode 100644 index 0000000..910deb0 --- /dev/null +++ b/frontend/app/screens/other/settings.js @@ -0,0 +1,176 @@ +import React from 'react'; +import { + ScrollView, + View, + TouchableOpacity, + StyleSheet, +} from 'react-native'; +import { + RkText, + RkStyleSheet, + RkTheme, +} from 'react-native-ui-kitten'; +import { + RkSwitch, + FindFriends, +} from '../../components'; +import { FontAwesome } from '../../assets/icons'; + +export class Settings extends React.Component { + static navigationOptions = { + title: 'Settings'.toUpperCase(), + }; + + state = { + sendPush: true, + shouldRefresh: false, + twitterEnabled: true, + googleEnabled: false, + facebookEnabled: true, + }; + + onPushNotificationsSettingChanged = (value) => { + this.setState({ sendPush: value }); + }; + + onRefreshAutomaticallySettingChanged = (value) => { + this.setState({ shouldRefresh: value }); + }; + + onFindFriendsTwitterButtonPressed = () => { + this.setState({ twitterEnabled: !this.state.twitterEnabled }); + }; + + onFindFriendsGoogleButtonPressed = () => { + this.setState({ googleEnabled: !this.state.googleEnabled }); + }; + + onFindFriendsFacebookButtonPressed = () => { + this.setState({ facebookEnabled: !this.state.facebookEnabled }); + }; + + render = () => ( + + + + PROFILE SETTINGS + + + + Edit Profile + + + + + Change Password + + + + Send Push Notifications + + + + Refresh Automatically + + + + + + FIND FRIENDS + + + + + + + + + + + + + + SUPPORT + + + + Help + + + + + Privacy Policy + + + + + Terms & Conditions + + + + + Logout + + + + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + container: { + backgroundColor: theme.colors.screen.base, + }, + header: { + paddingVertical: 25, + }, + section: { + marginVertical: 25, + }, + heading: { + paddingBottom: 12.5, + }, + row: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingHorizontal: 17.5, + borderBottomWidth: StyleSheet.hairlineWidth, + borderColor: theme.colors.border.base, + alignItems: 'center', + }, + rowButton: { + flex: 1, + paddingVertical: 24, + }, + switch: { + marginVertical: 14, + }, +})); diff --git a/frontend/app/screens/other/splash.js b/frontend/app/screens/other/splash.js new file mode 100644 index 0000000..33e7abe --- /dev/null +++ b/frontend/app/screens/other/splash.js @@ -0,0 +1,108 @@ +import React from 'react'; +import { + StyleSheet, + Image, + View, + Dimensions, + StatusBar, +} from 'react-native'; +import { + RkText, + RkTheme, +} from 'react-native-ui-kitten'; +import { + StackActions, + NavigationActions, +} from 'react-navigation'; +import { ProgressBar } from '../../components'; +import { KittenTheme } from '../../config/theme'; +import { scale, scaleVertical } from '../../utils/scale'; +import NavigationType from '../../config/navigation/propTypes'; + +const delay = 800; + +export class SplashScreen extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + state = { + progress: 0, + }; + + componentDidMount() { + StatusBar.setHidden(true, 'none'); + RkTheme.setTheme(KittenTheme); + this.timer = setInterval(this.updateProgress, delay); + } + + componentWillUnmount() { + clearInterval(this.timer); + } + + updateProgress = () => { + if (this.state.progress === 1) { + clearInterval(this.timer); + setTimeout(this.onLoaded, delay); + } else { + const randProgress = this.state.progress + (Math.random() * 0.5); + this.setState({ progress: randProgress > 1 ? 1 : randProgress }); + } + }; + + onLoaded = () => { + StatusBar.setHidden(false, 'slide'); + const toHome = StackActions.reset({ + index: 0, + actions: [NavigationActions.navigate({ routeName: 'Home' })], + }); + this.props.navigation.dispatch(toHome); + }; + + render = () => ( + + + + + EcoAlerts + The best ecological problems coordinator + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: KittenTheme.colors.screen.base, + justifyContent: 'space-between', + flex: 1, + }, + image: { + resizeMode: 'cover', + height: scaleVertical(430), + }, + text: { + alignItems: 'center', + }, + hero: { + fontSize: 37, + }, + appName: { + textAlign: 'center', + fontSize: 33, + }, + progress: { + alignSelf: 'center', + marginBottom: 35, + backgroundColor: '#e5e5e5', + }, +}); diff --git a/frontend/app/screens/social/contacts.js b/frontend/app/screens/social/contacts.js new file mode 100644 index 0000000..8eaacae --- /dev/null +++ b/frontend/app/screens/social/contacts.js @@ -0,0 +1,124 @@ +import React from 'react'; +import { + FlatList, + View, + StyleSheet, + TouchableOpacity, +} from 'react-native'; +import _ from 'lodash'; +import { + RkStyleSheet, + RkText, + RkTextInput, +} from 'react-native-ui-kitten'; +import { data } from '../../data'; +import { Avatar } from '../../components/avatar'; +import { FontAwesome } from '../../assets/icons'; +import NavigationType from '../../config/navigation/propTypes'; + +export class Contacts extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'Contacts'.toUpperCase(), + }; + + state = { + data: { + original: data.getUsers(), + filtered: data.getUsers(), + }, + }; + + extractItemKey = (item) => `${item.id}`; + + onSearchInputChanged = (event) => { + const pattern = new RegExp(event.nativeEvent.text, 'i'); + const contacts = _.filter(this.state.data.original, contact => { + const filterResult = { + firstName: contact.firstName.search(pattern), + lastName: contact.lastName.search(pattern), + }; + return filterResult.firstName !== -1 || filterResult.lastName !== -1 ? contact : undefined; + }); + this.setState({ + data: { + original: this.state.data.original, + filtered: contacts, + }, + }); + }; + + onItemPressed = (item) => { + this.props.navigation.navigate('ProfileV1', { id: item.id }); + }; + + renderItem = ({ item }) => ( + this.onItemPressed(item)}> + + + {`${item.firstName} ${item.lastName}`} + + + ); + + renderSeparator = () => ( + + ); + + renderHeaderLabel = () => ( + {FontAwesome.search} + ); + + renderHeader = () => ( + + + + ); + + render = () => ( + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + searchContainer: { + backgroundColor: theme.colors.screen.bold, + paddingHorizontal: 16, + paddingVertical: 10, + height: 60, + alignItems: 'center', + }, + container: { + flexDirection: 'row', + padding: 16, + alignItems: 'center', + }, + avatar: { + marginRight: 16, + }, + separator: { + flex: 1, + height: StyleSheet.hairlineWidth, + backgroundColor: theme.colors.border.base, + }, +})); diff --git a/frontend/app/screens/social/feed.js b/frontend/app/screens/social/feed.js new file mode 100644 index 0000000..3de46f2 --- /dev/null +++ b/frontend/app/screens/social/feed.js @@ -0,0 +1,73 @@ +import React from 'react'; +import { + FlatList, + View, + Image, +} from 'react-native'; +import { + RkCard, + RkText, RkStyleSheet, +} from 'react-native-ui-kitten'; +import { Avatar } from '../../components/avatar'; +import { SocialBar } from '../../components/socialBar'; +import { data } from '../../data'; + +const moment = require('moment'); + +export class Feed extends React.Component { + static navigationOptions = { + title: 'Feed'.toUpperCase(), + }; + + state = { + data: data.getArticles('post'), + }; + + extractItemKey = (item) => `${item.id}`; + + renderItem = ({ item }) => ( + + + + + {`${item.user.firstName} ${item.user.lastName}`} + {moment().add(item.time, 'seconds').fromNow()} + + + + + {item.text} + + + + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + container: { + backgroundColor: theme.colors.screen.scroll, + paddingVertical: 8, + paddingHorizontal: 10, + }, + card: { + marginVertical: 8, + }, + avatar: { + marginRight: 16, + }, +})); diff --git a/frontend/app/screens/social/index.js b/frontend/app/screens/social/index.js new file mode 100644 index 0000000..bd66176 --- /dev/null +++ b/frontend/app/screens/social/index.js @@ -0,0 +1,7 @@ +export * from './profile1'; +export * from './profile2'; +export * from './profile3'; +export * from './profileSettings'; +export * from './notifications'; +export * from './contacts'; +export * from './feed'; diff --git a/frontend/app/screens/social/notifications.js b/frontend/app/screens/social/notifications.js new file mode 100644 index 0000000..c397d17 --- /dev/null +++ b/frontend/app/screens/social/notifications.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { + FlatList, + View, + Image, +} from 'react-native'; +import { RkStyleSheet, RkText } from 'react-native-ui-kitten'; +import { Avatar } from '../../components'; +import { data } from '../../data'; + +const moment = require('moment'); + +export class Notifications extends React.Component { + static navigationOptions = { + title: 'Notifications', + }; + + state = { + data: data.getNotifications(), + }; + + extractItemKey = (item) => `${item.id}`; + + renderAttachment = (item) => { + const hasAttachment = item.attach !== undefined; + return hasAttachment ? : ; + }; + + renderItem = ({ item }) => ( + + + + + + + {`${item.user.firstName} ${item.user.lastName}`} + {item.description} + + + {moment().add(item.time, 'seconds').fromNow()} + + + {this.renderAttachment(item)} + + + ); + + render = () => ( + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + container: { + padding: 16, + flexDirection: 'row', + borderBottomWidth: 1, + borderColor: theme.colors.border.base, + alignItems: 'flex-start', + }, + avatar: {}, + text: { + marginBottom: 5, + }, + content: { + flex: 1, + marginLeft: 16, + marginRight: 0, + }, + mainContent: { + marginRight: 60, + }, + img: { + height: 50, + width: 50, + margin: 0, + }, + attachment: { + position: 'absolute', + right: 0, + height: 50, + width: 50, + }, +})); diff --git a/frontend/app/screens/social/profile1.js b/frontend/app/screens/social/profile1.js new file mode 100644 index 0000000..1f3ec09 --- /dev/null +++ b/frontend/app/screens/social/profile1.js @@ -0,0 +1,104 @@ +import React from 'react'; +import { + View, + ScrollView, +} from 'react-native'; +import { + RkText, + RkButton, RkStyleSheet, +} from 'react-native-ui-kitten'; +import { Avatar } from '../../components/avatar'; +import { Gallery } from '../../components/gallery'; +import { data } from '../../data/'; +import formatNumber from '../../utils/textUtils'; +import NavigationType from '../../config/navigation/propTypes'; + +export class ProfileV1 extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + title: 'User Profile'.toUpperCase(), + }; + + state = { + data: undefined, + }; + + constructor(props) { + super(props); + const id = this.props.navigation.getParam('id', 1); + this.state.data = data.getUser(id); + } + + render = () => ( + + + + {`${this.state.data.firstName} ${this.state.data.lastName}`} + + + + {this.state.data.postCount} + Posts + + + {formatNumber(this.state.data.followersCount)} + Followers + + + {this.state.data.followingCount} + Following + + + + FOLLOW + + MESSAGE + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + header: { + alignItems: 'center', + paddingTop: 25, + paddingBottom: 17, + }, + userInfo: { + flexDirection: 'row', + paddingVertical: 18, + }, + bordered: { + borderBottomWidth: 1, + borderColor: theme.colors.border.base, + }, + section: { + flex: 1, + alignItems: 'center', + }, + space: { + marginBottom: 3, + }, + separator: { + backgroundColor: theme.colors.border.base, + alignSelf: 'center', + flexDirection: 'row', + flex: 0, + width: 1, + height: 42, + }, + buttons: { + flexDirection: 'row', + paddingVertical: 8, + }, + button: { + flex: 1, + alignSelf: 'center', + }, +})); diff --git a/frontend/app/screens/social/profile2.js b/frontend/app/screens/social/profile2.js new file mode 100644 index 0000000..1636910 --- /dev/null +++ b/frontend/app/screens/social/profile2.js @@ -0,0 +1,108 @@ +import React from 'react'; +import { + View, + ScrollView, +} from 'react-native'; +import { + RkText, + RkButton, RkStyleSheet, +} from 'react-native-ui-kitten'; +import { + Avatar, + Gallery, +} from '../../components'; +import { data } from '../../data'; +import { FontIcons } from '../../assets/icons'; +import formatNumber from '../../utils/textUtils'; + +export class ProfileV2 extends React.Component { + static navigationOptions = { + title: 'User Profile'.toUpperCase(), + }; + + state = { + data: data.getUser(), + }; + + render = () => ( + + + + + + {FontIcons.profile} + + + + + + {FontIcons.mail} + + + + + {`${this.state.data.firstName} ${this.state.data.lastName}`} + + + + + {this.state.data.postCount} + Posts + + + {formatNumber(this.state.data.followersCount)} + Followers + + + {this.state.data.followingCount} + Following + + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + header: { + paddingTop: 25, + paddingBottom: 17, + }, + row: { + flexDirection: 'row', + + }, + userInfo: { + flexDirection: 'row', + paddingVertical: 18, + }, + bordered: { + borderBottomWidth: 1, + borderColor: theme.colors.border.base, + }, + section: { + flex: 1, + alignItems: 'center', + }, + space: { + marginBottom: 3, + }, + separator: { + backgroundColor: theme.colors.border.base, + alignSelf: 'center', + flexDirection: 'row', + flex: 0, + width: 1, + height: 42, + }, + buttons: { + flex: 1, + }, + button: { + marginTop: 27.5, + alignSelf: 'center', + }, +})); diff --git a/frontend/app/screens/social/profile3.js b/frontend/app/screens/social/profile3.js new file mode 100644 index 0000000..985dc1e --- /dev/null +++ b/frontend/app/screens/social/profile3.js @@ -0,0 +1,96 @@ +import React from 'react'; +import { + View, + ScrollView, +} from 'react-native'; +import { + RkStyleSheet, + RkText, +} from 'react-native-ui-kitten'; +import { + Avatar, + Gallery, + GradientButton, +} from '../../components'; +import { data } from '../../data'; +import formatNumber from '../../utils/textUtils'; + +export class ProfileV3 extends React.Component { + static navigationOptions = { + title: 'User Profile'.toUpperCase(), + }; + + state = { + data: data.getUser(), + }; + + render = () => ( + + + + {`${this.state.data.firstName} ${this.state.data.lastName}`} + + + + + + {this.state.data.postCount} + Posts + + + {formatNumber(this.state.data.followersCount)} + Followers + + + {this.state.data.followingCount} + Following + + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + header: { + alignItems: 'center', + paddingTop: 25, + paddingBottom: 17, + }, + userInfo: { + flexDirection: 'row', + paddingVertical: 18, + }, + bordered: { + borderBottomWidth: 1, + borderColor: theme.colors.border.base, + }, + section: { + flex: 1, + alignItems: 'center', + }, + space: { + marginBottom: 3, + }, + separator: { + backgroundColor: theme.colors.border.base, + alignSelf: 'center', + flexDirection: 'row', + flex: 0, + width: 1, + height: 42, + }, + buttons: { + flexDirection: 'row', + paddingVertical: 8, + }, + button: { + marginTop: 18, + alignSelf: 'center', + width: 140, + }, + +})); diff --git a/frontend/app/screens/social/profileSettings.js b/frontend/app/screens/social/profileSettings.js new file mode 100644 index 0000000..0be1b94 --- /dev/null +++ b/frontend/app/screens/social/profileSettings.js @@ -0,0 +1,200 @@ +import React from 'react'; +import { + ScrollView, + View, + StyleSheet, +} from 'react-native'; +import { + RkText, + RkTextInput, + RkAvoidKeyboard, + RkTheme, + RkStyleSheet, +} from 'react-native-ui-kitten'; +import { data } from '../../data'; +import { + Avatar, + SocialSetting, + GradientButton, +} from '../../components'; +import { FontAwesome } from '../../assets/icons'; + +export class ProfileSettings extends React.Component { + static navigationOptions = { + title: 'Profile Settings'.toUpperCase(), + }; + + user = data.getUser(); + + state = { + firstName: this.user.firstName, + lastName: this.user.lastName, + email: this.user.email, + country: this.user.country, + phone: this.user.phone, + password: this.user.password, + newPassword: this.user.newPassword, + confirmPassword: this.user.confirmPassword, + }; + + onFirstNameInputChanged = (text) => { + this.setState({ firstName: text }); + }; + + onLastNameInputChanged = (text) => { + this.setState({ lastName: text }); + }; + + onEmailInputChanged = (text) => { + this.setState({ email: text }); + }; + + onCountryInputChanged = (text) => { + this.setState({ country: text }); + }; + + onPhoneInputChanged = (text) => { + this.setState({ phone: text }); + }; + + onPasswordInputChanged = (text) => { + this.setState({ password: text }); + }; + + onNewPasswordInputChanged = (text) => { + this.setState({ newPassword: text }); + }; + + onConfirmPasswordInputChanged = (text) => { + this.setState({ confirmPassword: text }); + }; + + render = () => ( + + + + + + + + INFO + + + + + + + + + + + + + + + + + + + + CHANGE PASSWORD + + + + + + + + + + + + + + CONNECT YOUR ACCOUNT + + + + + + + + + + + + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + }, + header: { + backgroundColor: theme.colors.screen.neutral, + paddingVertical: 25, + }, + section: { + marginVertical: 25, + }, + heading: { + paddingBottom: 12.5, + }, + row: { + flexDirection: 'row', + paddingHorizontal: 17.5, + borderBottomWidth: StyleSheet.hairlineWidth, + borderColor: theme.colors.border.base, + alignItems: 'center', + }, + button: { + marginHorizontal: 16, + marginBottom: 32, + }, +})); diff --git a/frontend/app/screens/theme/index.js b/frontend/app/screens/theme/index.js new file mode 100644 index 0000000..22cacb2 --- /dev/null +++ b/frontend/app/screens/theme/index.js @@ -0,0 +1 @@ +export * from './themes'; diff --git a/frontend/app/screens/theme/themes.js b/frontend/app/screens/theme/themes.js new file mode 100644 index 0000000..82f4165 --- /dev/null +++ b/frontend/app/screens/theme/themes.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { + View, + Image, + StatusBar, + Platform, +} from 'react-native'; +import { + RkText, + RkTheme, + RkStyleSheet, +} from 'react-native-ui-kitten'; +import { DarkKittenTheme } from '../../config/darkTheme'; +import { KittenTheme } from '../../config/theme'; +import { GradientButton } from '../../components/gradientButton'; +import { scale, scaleVertical } from '../../utils/scale'; + +export class Themes extends React.Component { + static navigationOptions = { + title: 'Theme'.toUpperCase(), + }; + + onLightThemeApplyButtonPressed = () => { + StatusBar.setBarStyle('dark-content', true); + if (Platform.OS === 'android') { + StatusBar.setBackgroundColor(KittenTheme.colors.screen.base); + } + RkTheme.setTheme(KittenTheme); + }; + + onDarkThemeApplyButtonPressed = () => { + StatusBar.setBarStyle('light-content', true); + if (Platform.OS === 'android') { + StatusBar.setBackgroundColor(DarkKittenTheme.colors.screen.base); + } + RkTheme.setTheme(DarkKittenTheme); + }; + + render = () => ( + + + Light Theme + + + + + Dark Theme + + + + + ); +} + +const styles = RkStyleSheet.create(theme => ({ + root: { + backgroundColor: theme.colors.screen.base, + flex: 1, + paddingHorizontal: scale(72), + + }, + image: { + height: scaleVertical(160), + }, + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'space-between', + paddingVertical: scaleVertical(20), + }, +})); diff --git a/frontend/app/screens/walkthroughs/index.js b/frontend/app/screens/walkthroughs/index.js new file mode 100644 index 0000000..e7f1eb0 --- /dev/null +++ b/frontend/app/screens/walkthroughs/index.js @@ -0,0 +1 @@ +export * from './walkthroughScreen'; diff --git a/frontend/app/screens/walkthroughs/walkthrough1.js b/frontend/app/screens/walkthroughs/walkthrough1.js new file mode 100644 index 0000000..2f08f97 --- /dev/null +++ b/frontend/app/screens/walkthroughs/walkthrough1.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { + View, + Image, +} from 'react-native'; +import { + RkText, + RkStyleSheet, + RkTheme, +} from 'react-native-ui-kitten'; + +export class Walkthrough1 extends React.Component { + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/kittenImage.png') : require('../../assets/images/kittenImageDark.png') + ); + + renderImage = () => ( + + ); + + render = () => ( + + {this.renderImage()} + Welcome to EcoAlerts + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + backgroundColor: theme.colors.screen.base, + alignItems: 'center', + justifyContent: 'center', + flex: 1, + }, + text: { + marginTop: 20, + }, +})); diff --git a/frontend/app/screens/walkthroughs/walkthrough2.js b/frontend/app/screens/walkthroughs/walkthrough2.js new file mode 100644 index 0000000..6e387b8 --- /dev/null +++ b/frontend/app/screens/walkthroughs/walkthrough2.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { + View, + Image, + Dimensions, +} from 'react-native'; +import { + RkText, + RkStyleSheet, + RkTheme, +} from 'react-native-ui-kitten'; + +export class Walkthrough2 extends React.Component { + getThemeImageSource = (theme) => ( + theme.name === 'light' ? + require('../../assets/images/screensImage.png') : require('../../assets/images/screensImageDark.png') + ); + + renderImage = () => ( + + ); + + render = () => ( + + {this.renderImage()} + Share info about ecological problems around! + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + backgroundColor: theme.colors.screen.base, + alignItems: 'center', + justifyContent: 'center', + flex: 1, + }, + text: { + textAlign: 'center', + marginTop: 20, + marginHorizontal: 30, + }, +})); diff --git a/frontend/app/screens/walkthroughs/walkthroughScreen.js b/frontend/app/screens/walkthroughs/walkthroughScreen.js new file mode 100644 index 0000000..f0c21b5 --- /dev/null +++ b/frontend/app/screens/walkthroughs/walkthroughScreen.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { View } from 'react-native'; +import { RkStyleSheet } from 'react-native-ui-kitten'; +import { + GradientButton, + PaginationIndicator, +} from '../../components/'; +import { Walkthrough } from '../../components/walkthrough'; +import { Walkthrough1 } from './walkthrough1'; +import { Walkthrough2 } from './walkthrough2'; +import NavigationType from '../../config/navigation/propTypes'; + +export class WalkthroughScreen extends React.Component { + static propTypes = { + navigation: NavigationType.isRequired, + }; + static navigationOptions = { + header: null, + }; + + state = { + index: 0, + }; + + onWalkThroughIndexChanged = (index) => { + this.setState({ index }); + }; + + onStartButtonPressed = () => { + this.props.navigation.navigate('Articles2'); + }; + + render = () => ( + + + + + + + + + ) +} + +const styles = RkStyleSheet.create(theme => ({ + screen: { + backgroundColor: theme.colors.screen.base, + paddingVertical: 28, + alignItems: 'center', + flex: 1, + }, + button: { + marginTop: 25, + marginHorizontal: 16, + }, +})); -- cgit v1.2.3