Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 19:57:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve design

Browse Source
This commit is contained in:
thewisefarmerr
2019-11-17 16:02:19 +05:00
parent 8e0efddede
commit 3d7285f369
10 changed files with 344 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/mobile/App.js
View File

@@ -1,12 +1,21 @@
import React,{useState} from 'react';
import NavigationService, {AppContainer} from "./src/services/NavigationService"
import React, {useState, useEffect} from 'react';
import NavigationService, {
AppContainer,
} from './src/services/NavigationService';
import {StatusBar} from 'react-native';
const App = () => {
return (<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
useEffect(() => {
StatusBar.setBackgroundColor('transparent');
StatusBar.setTranslucent(true);
StatusBar.setBarStyle('dark-content');
});
return (
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
);
};

90
apps/mobile/src/components/NoteItem/index.js Normal file
View File

@@ -0,0 +1,90 @@
import React, {useState} from 'react';
import {
View,
Text,
TouchableOpacity,
ScrollView,
Dimensions,
FlatList,
} from 'react-native';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../Reminder';
import {getElevation} from '../../utils/utils';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
const NoteItem = props => {
const [colors, setColors] = useState(COLOR_SCHEME);
const item = props.item;
return (
<View
activeOpacity={opacity}
style={{
marginHorizontal: w * 0.05,
backgroundColor: '#f0f0f0',
marginVertical: h * 0.015,
borderRadius: br,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: pv,
}}>
<View
style={{
width: '92%',
justifyContent: 'center',
alignItems: 'flex-start',
}}>
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.bold,
}}>
{item.title}
</Text>
<Text
style={{
fontSize: SIZE.xs + 1,
color: colors.icon,
fontFamily: WEIGHT.regular,
}}>
{item.headline}
</Text>
<Text
style={{
color: colors.accent,
fontSize: SIZE.xxs,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{item.timestamp + ' '}
</Text>
</View>
<TouchableOpacity
style={{
width: '8%',
justifyContent: 'center',
alignItems: 'center',
minHeight: 60,
}}>
<Icon name="md-more" size={SIZE.xl} color={colors.accent} />
</TouchableOpacity>
</View>
);
};
export default NoteItem;

217
apps/mobile/src/components/Recents/index.js
View File

@@ -1,5 +1,12 @@
import React, {useState} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {
View,
Text,
TouchableOpacity,
ScrollView,
Dimensions,
FlatList,
} from 'react-native';
import {
COLOR_SCHEME,
@@ -13,104 +20,150 @@ import {
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {FlatList} from 'react-native-gesture-handler';
import {Reminder} from '../Reminder';
import {getElevation} from '../../utils/utils';
import NoteItem from '../NoteItem';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
// example data
const data = [
{
title: 'One day about',
headline:
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has',
timestamp: '2 hours ago',
type: 'note',
},
{
title: 'Shopping List',
headline:
'It is a long established fact that a reader will be distracted by the readable content of',
timestamp: '5 hours ago',
type: 'list',
},
{
title: 'Reminder',
headline:
'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a ',
timestamp: '2 days ago',
type: 'reminder',
},
{
title: 'Writing Notes for',
headline:
'There are many variations of passages of Lorem Ipsum available, but the majority have ',
timestamp: '2 months ago',
},
];
export const RecentList = () => {
const [colors, setColors] = useState(COLOR_SCHEME);
let blockdata = [
{
name: '',
icon: 'md-add',
func: () => {
NavigationService.navigate('Editor');
},
},
{
name: 'Reminders',
icon: 'ios-clock',
func: () => {},
},
{
name: 'Lists',
icon: 'ios-list',
func: () => {},
},
];
return (
<>
<FlatList
data={[
{
title: 'One day about',
headline:
'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has',
timestamp: '2 hours ago',
type: 'note',
},
{
title: 'Shopping List',
headline:
'It is a long established fact that a reader will be distracted by the readable content of',
timestamp: '5 hours ago',
type: 'list',
},
{
title: 'Reminder',
headline:
'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a ',
timestamp: '2 days ago',
type: 'reminder',
},
{
title: 'Writing Notes for',
headline:
'There are many variations of passages of Lorem Ipsum available, but the majority have ',
timestamp: '2 months ago',
},
]}
renderItem={({item, index}) => (
<TouchableOpacity
activeOpacity={opacity}
data={data}
ListFooterComponent={
<View
style={{
marginHorizontal: '5%',
backgroundColor: '#f0f0f0',
marginVertical: '2.5%',
borderRadius: br,
paddingVertical: pv - 5,
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: SIZE.md,
paddingHorizontal: ph,
paddingTop: pv,
fontFamily: WEIGHT.bold,
}}>
{item.title}
</Text>
<Text
style={{
fontSize: SIZE.xs + 1,
paddingHorizontal: ph,
color: colors.icon,
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
{item.headline}
- End -
</Text>
<View
</View>
}
ListHeaderComponent={
<>
<ScrollView
horizontal={true}
style={{
height: 30,
width: '100%',
borderRadius: 5,
justifyContent: 'space-between',
flexDirection: 'row',
paddingHorizontal: '4%',
}}
showsHorizontalScrollIndicator={false}
contentContainerStyle={{
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
flexDirection: 'row',
}}>
<Text
style={{
color: colors.accent,
fontSize: SIZE.xxs,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
{item.timestamp + ' '}
</Text>
{blockdata.map(item => (
<TouchableOpacity
onPress={item.func}
activeOpacity={opacity}
style={{
...getElevation(5),
width: 100,
height: 100,
borderRadius: br,
backgroundColor:
item.icon === 'md-add' ? colors.accent : '#f0f0f0',
justifyContent: 'center',
alignItems: 'center',
marginRight: 30,
marginLeft: 5,
marginVertical: 20,
marginBottom: 30,
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon
name={item.icon}
color={item.icon === 'md-add' ? 'white' : colors.icon}
size={SIZE.xxl}
/>
{item.name !== '' ? (
<Text
style={{
fontSize: SIZE.sm - 2,
color: colors.icon,
fontFamily: WEIGHT.regular,
}}>
{item.name}
</Text>
) : (
undefined
)}
</View>
</TouchableOpacity>
))}
</ScrollView>
<View
style={{
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
width: '15%',
}}>
<Icon name="ios-share" color={colors.accent} size={SIZE.lg} />
<Icon name="ios-trash" color={colors.accent} size={SIZE.lg} />
</View>
</View>
</TouchableOpacity>
)}
<Reminder />
</>
}
renderItem={({item, index}) => <NoteItem item={item} index={index} />}
/>
</>
);

75
apps/mobile/src/components/Reminder/index.js
View File

@@ -23,73 +23,72 @@ export const Reminder = () => {
style={{
...getElevation(10),
width: '90%',
marginVertical: Platform.OS === 'ios' ? h * 0.02 : '5%',
marginVertical: Platform.OS === 'ios' ? h * 0.01 : '0%',
alignSelf: 'center',
borderRadius: br,
backgroundColor: colors.accent,
paddingHorizontal: ph,
paddingVertical: 5,
marginBottom: 20,
padding: 5,
}}>
<View
style={{
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
}}>
<Icon
style={{
position: 'absolute',
top: 0,
right: 0,
}}
name="ios-clock"
color="white"
size={SIZE.md}
/>
<View>
<Text
numberOfLines={1}
style={{
paddingBottom: 5,
width: '100%',
maxWidth: '100%',
}}>
<Text
numberOfLines={1}
style={{
color: 'white',
fontSize: SIZE.lg,
fontFamily: WEIGHT.bold,
maxWidth: '100%',
}}>
Pay Utility Bills
</Text>
</Text>
<View
style={{
width: '100%',
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'flex-end',
}}>
<Text
style={{
fontFamily: WEIGHT.light,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
color: 'white',
marginBottom: 3,
}}>
{'\n'}
Amount 5000 RS
</Text>
</Text>
<Text
style={{
color: 'white',
fontSize: SIZE.xxl,
fontFamily: WEIGHT.light,
}}>
<Text
style={{
fontSize: SIZE.xs,
color: 'white',
fontSize: SIZE.xxl,
fontFamily: WEIGHT.light,
}}>
in
<Text
style={{
fontSize: SIZE.xs,
}}>
in
</Text>
00:00{''}
<Text
style={{
fontSize: SIZE.xs,
}}>
mins
</Text>
</Text>
00:00{''}
<Text
style={{
fontSize: SIZE.xs,
}}>
mins
</Text>
</Text>
</View>
</View>
</TouchableOpacity>
);

5
apps/mobile/src/components/SearchInput/index.js
View File

@@ -27,9 +27,8 @@ export const Search = () => {
alignSelf: 'center',
borderRadius: br,
paddingHorizontal: ph,
paddingVertical: Platform.OS == 'ios' ? pv : pv - 5,
marginTop: 10,
marginBottom: 25,
paddingVertical: Platform.OS == 'ios' ? pv - 3 : pv - 8,
marginBottom: 10,
}}>
<TextInput
style={{

0
apps/mobile/src/views/Favourites/index.js Normal file
View File

0
apps/mobile/src/views/Folders/index.js Normal file
View File

268
apps/mobile/src/views/Home/index.js
View File

@@ -28,6 +28,7 @@ import {Search} from '../../components/SearchInput';
import {Reminder} from '../../components/Reminder';
import {RecentList} from '../../components/Recents';
import {getElevation} from '../../utils/utils';
import {FlatList} from 'react-native-gesture-handler';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
@@ -35,12 +36,24 @@ export const Home = ({navigation}) => {
const [loading, setLoading] = useState(true);
const [colors, setColors] = useState(COLOR_SCHEME);
const RenderMenu = (
const RenderSideMenu = (
<SafeAreaView
style={{
height: '100%',
backgroundColor: colors.accent,
justifyContent: 'center',
}}>
<View
style={{
backgroundColor: colors.accent,
height: h * 0.5,
width: h * 0.5,
position: 'absolute',
top: h * -0.15,
left: h * -0.2,
transform: [{rotateZ: '340deg'}],
borderRadius: 100,
}}
/>
<View
style={{
height: '25%',
@@ -74,14 +87,13 @@ export const Home = ({navigation}) => {
fontSize: SIZE.xs,
marginTop: 10,
}}>
Usage: 80.45/100 MB
80.45/100 MB
</Text>
<View
style={{
borderRadius: 2.5,
backgroundColor: 'white',
...getElevation(10),
marginTop: 10,
paddingHorizontal: 5,
paddingVertical: 2,
@@ -89,8 +101,8 @@ export const Home = ({navigation}) => {
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
color: colors.accent,
}}>
Basic User
</Text>
@@ -99,133 +111,57 @@ export const Home = ({navigation}) => {
<View
style={{
...getElevation(5),
backgroundColor: 'white',
backgroundColor: colors.navbg,
width: '90%',
alignSelf: 'center',
height: '60%',
marginVertical: 10,
borderRadius: 5,
}}>
<View
style={{
backgroundColor: 'white',
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
marginVertical: 10,
}}>
<Icon
style={{
width: 30,
}}
name="ios-home"
color={colors.icon}
size={SIZE.lg}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm,
marginTop: -5,
}}>
Home
</Text>
</View>
<View
style={{
backgroundColor: 'white',
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
marginVertical: 10,
}}>
<Icon
style={{
width: 30,
}}
name="ios-heart"
color={colors.icon}
size={SIZE.lg}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm,
marginTop: -5,
}}>
Favourites
</Text>
</View>
<View
style={{
backgroundColor: 'white',
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
marginVertical: 10,
}}>
<Icon
style={{
width: 30,
}}
name="ios-settings"
color={colors.icon}
size={SIZE.lg}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm,
marginTop: -5,
}}>
Settings
</Text>
</View>
<View
style={{
backgroundColor: 'white',
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
marginVertical: 10,
}}>
<Icon
style={{
width: 30,
}}
name="ios-sync"
color={colors.icon}
size={SIZE.lg}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm,
marginTop: -5,
}}>
Sync
</Text>
</View>
<FlatList
data={[
{
name: 'Home',
icon: 'ios-home',
},
]}
keyExtractor={(item, index) => item.name}
renderItem={({item, index}) => (
<TouchableOpacity
activeOpacity={opacity}
style={{
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
marginVertical: 10,
}}>
<Icon
style={{
width: 30,
}}
name={item.icon}
color={colors.icon}
size={SIZE.lg}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm,
marginTop: -5,
}}>
{item.name}
</Text>
</TouchableOpacity>
)}
/>
</View>
<View
style={{
...getElevation(5),
backgroundColor: '#F3A712',
width: '90%',
alignSelf: 'center',
borderRadius: 5,
@@ -258,26 +194,6 @@ export const Home = ({navigation}) => {
</SafeAreaView>
);
let data = [
{
name: '',
icon: 'md-add',
func: () => {
NavigationService.navigate('Editor');
},
},
{
name: 'Reminders',
icon: 'ios-clock',
func: () => {},
},
{
name: 'Lists',
icon: 'ios-list',
func: () => {},
},
];
useEffect(() => {
setTimeout(() => {
setLoading(false);
@@ -285,7 +201,10 @@ export const Home = ({navigation}) => {
});
return (
<SideMenu menu={RenderMenu} openMenuOffset={w / 1.5}>
<SideMenu
bounceBackOnOverdraw={false}
menu={RenderSideMenu}
openMenuOffset={w / 1.5}>
<SafeAreaView style={styles.container}>
<View
style={{
@@ -293,8 +212,8 @@ export const Home = ({navigation}) => {
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: '5%',
marginTop: Platform.OS == 'ios' ? h * 0.02 : '7.5%',
marginBottom: h * 0.02,
marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04,
marginBottom: h * 0.04,
}}>
<Text
style={{
@@ -304,69 +223,10 @@ export const Home = ({navigation}) => {
}}>
Notes
</Text>
<Icon name="md-more" color={colors.icon} size={SIZE.xxxl} />
<Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
</View>
<Search />
<ScrollView
horizontal={true}
style={{
paddingHorizontal: '4%',
height: 200,
}}
showsHorizontalScrollIndicator={false}
contentContainerStyle={{
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
}}>
{data.map(item => (
<TouchableOpacity
onPress={item.func}
activeOpacity={opacity}
style={{
...getElevation(5),
width: 100,
height: 100,
borderRadius: br,
backgroundColor:
item.icon === 'md-add' ? colors.accent : '#f0f0f0',
justifyContent: 'center',
alignItems: 'center',
marginRight: 30,
marginLeft: 5,
}}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon
name={item.icon}
color={item.icon === 'md-add' ? 'white' : colors.icon}
size={SIZE.xxl}
/>
{item.name !== '' ? (
<Text
style={{
fontSize: SIZE.sm - 2,
color: colors.icon,
fontFamily: WEIGHT.regular,
}}>
{item.name}
</Text>
) : (
undefined
)}
</View>
</TouchableOpacity>
))}
</ScrollView>
<Reminder />
<RecentList />
</SafeAreaView>
</SideMenu>

0
apps/mobile/src/views/Lists/index.js Normal file
View File

0
apps/mobile/src/views/Reminders/index.js Normal file
View File