diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js index 8d6c4114e..5c8e5fe6c 100644 --- a/apps/mobile/src/components/NoteItem/index.js +++ b/apps/mobile/src/components/NoteItem/index.js @@ -39,12 +39,13 @@ const NoteItem = props => { { }); }} style={{ - width: '95%', + paddingLeft: ph, + width: '100%', }}> <> { justifyContent: 'center', minHeight: 70, alignItems: 'center', + paddingRight: ph, }}> { +export const RecentList = ({update, onScroll, margin}) => { const [colors, setColors] = useState(COLOR_SCHEME); const [notes, setNotes] = useState([]); const fetchNotes = async () => { @@ -45,9 +45,21 @@ export const RecentList = ({update}) => { <> { + y = event.nativeEvent.contentOffset.y; + onScroll(y); + }} style={{ height: '100%', + width: '100%', }} + ListHeaderComponent={ + + } ListFooterComponent={ { const [colors, setColors] = useState(COLOR_SCHEME); const [focus, setFocus] = useState(false); + const inputRef = createRef(); return ( - { + props.sendHeight(e.nativeEvent.layout.height); + }} + transition="opacity" + duration={300} style={{ - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - width: Platform.isPad ? '95%' : '90%', - alignSelf: 'center', - borderRadius: br, - borderWidth: 1.5, - paddingHorizontal: ph, - paddingVertical: Platform.OS == 'ios' ? pv - 3 : pv - 8, - marginBottom: 10, - borderColor: focus ? colors.navbg : '#f0f0f0', + opacity: props.hide ? 0 : 1, }}> - { - setFocus(true); - props.onFocus; - }} - onBlur={() => { - setFocus(false); - props.onBlur; - }} - numberOfLines={1} - placeholder={props.placeholder} - placeholderTextColor={colors.icon} - /> - { - props.value.length > 0 ? props.clearSearch() : null; - inputRef.current.setNativeProps({ - text: '', - }); - }} - name={ - props.value && props.value.length > 0 ? 'ios-close' : 'ios-search' - } - color={focus ? colors.accent : colors.icon} - size={SIZE.xl} - /> - + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + width: Platform.isPad ? '95%' : '90%', + alignSelf: 'center', + borderRadius: br, + borderWidth: props.hide ? 0 : 1.5, + paddingHorizontal: ph, + backgroundColor: colors.bg, + paddingVertical: props.hide + ? 0 + : Platform.OS == 'ios' + ? pv - 3 + : pv - 8, + marginBottom: props.hide ? 0 : 10, + borderColor: focus ? colors.navbg : '#f0f0f0', + height: props.hide ? 0 : 55, + }}> + { + setFocus(true); + props.onFocus; + }} + onBlur={() => { + setFocus(false); + props.onBlur; + }} + numberOfLines={1} + placeholder={props.placeholder} + placeholderTextColor={colors.icon} + /> + { + props.value.length > 0 ? props.clearSearch() : null; + inputRef.current.setNativeProps({ + text: '', + }); + }} + name={ + props.value && props.value.length > 0 ? 'ios-close' : 'ios-search' + } + color={focus ? colors.accent : colors.icon} + size={SIZE.xl} + /> + + ); }; diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index 9123ba822..55cb962c6 100644 --- a/apps/mobile/src/components/header/index.js +++ b/apps/mobile/src/components/header/index.js @@ -1,42 +1,86 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import {View, TouchableOpacity, Platform, Text} from 'react-native'; import Icon from 'react-native-vector-icons/Feather'; import {SIZE, WEIGHT} from '../../common/common'; import {h} from '../../utils/utils'; +import * as Animatable from 'react-native-animatable'; -export const Header = ({heading, colors, canGoBack = true}) => { +export const Header = ({ + heading, + colors, + canGoBack = true, + hide, + showSearch, + sendHeight = e => {}, +}) => { return ( - { + if (sendHeight) { + sendHeight(e.nativeEvent.layout.height); + } + }} + transition="height" + duration={300} style={{ + height: hide ? 50 : 50, flexDirection: 'row', - justifyContent: 'flex-start', + zIndex: 10, + justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: Platform.isPad ? '2.5%' : '5%', - marginTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.04, - marginBottom: h * 0.04, + paddingTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.06, + marginBottom: h * 0.06, }}> - {canGoBack ? ( + + {canGoBack ? ( + + + + ) : ( + undefined + )} + + + {heading} + + + showSearch()} style={{ justifyContent: 'center', - alignItems: 'center', - - paddingRight: 15, + alignItems: 'flex-end', + height: 40, + width: 60, + paddingRight: 0, + marginTop: 7, }}> - + - ) : ( - undefined - )} - - - {heading} - - + + ); }; diff --git a/apps/mobile/src/views/AccountSettings/index.js b/apps/mobile/src/views/AccountSettings/index.js index 4cf9bffe5..e20931ecc 100644 --- a/apps/mobile/src/views/AccountSettings/index.js +++ b/apps/mobile/src/views/AccountSettings/index.js @@ -80,34 +80,29 @@ export const AccountSettings = ({navigation}) => { - - Backup notes - - - } + data={[ + { + name: 'Backup Notes', + icon: 'database', + }, + { + name: 'My Devices', + icon: 'tablet', + }, + { + name: 'Vault', + icon: 'shield', + }, + + { + name: 'My Subscription', + icon: 'credit-card', + }, + { + name: 'Change Password', + icon: 'key', + }, + ]} renderItem={({item, index}) => ( { style={{ fontSize: SIZE.md, fontFamily: WEIGHT.regular, + textAlignVertical: 'center', }}> - {item} - - - 100/90 + + {' '} {item.name} )} diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 816be35fa..2befc1f6a 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/apps/mobile/src/views/Folders/index.js @@ -32,12 +32,34 @@ import {AddNotebookDialog} from '../../components/AddNotebookDialog'; import {NotebookItem} from '../../components/NotebookItem'; import {Search} from '../../components/SearchInput'; import {storage} from '../../../App'; +import {Header} from '../../components/header'; export const Folders = ({navigation}) => { const [colors, setColors] = useState(COLOR_SCHEME); const [addNotebook, setAddNotebook] = useState(false); const [notebooks, setNotebooks] = useState([]); + const [hideHeader, setHideHeader] = useState(false); + const [margin, setMargin] = useState(150); const params = navigation.state.params; + let offsetY = 0; + let countUp = 0; + let countDown = 0; + let headerHeight = 0; + let searchHeight = 0; + + const setMarginTop = () => { + if (margin !== 150) return; + if (headerHeight == 0 || searchHeight == 0) { + let toAdd = h * 0.06; + + setTimeout(() => { + if (margin > headerHeight + searchHeight + toAdd) return; + setMargin(headerHeight + searchHeight + toAdd); + headerHeight = 0; + searchHeight = 0; + }, 10); + } + }; useEffect(() => { setNotebooks(storage.getNotebooks()); @@ -64,36 +86,59 @@ export const Folders = ({navigation}) => { }}> - - {params.title} - - (headerHeight = height)} + hide={hideHeader} + showSearch={() => { + setHideHeader(false); + countUp = 0; + countDown = 0; }} - name="more-vertical" - color={colors.icon} - size={SIZE.xxl} + colors={colors} + heading={params.title} + canGoBack={false} + /> + { + searchHeight = height; + setMarginTop(); + }} + placeholder="Search your notebook" + hide={hideHeader} /> - { + y = event.nativeEvent.contentOffset.y; + if (y > offsetY) { + if (y - offsetY < 150 || countDown > 0) return; + countDown = 1; + countUp = 0; + setHideHeader(true); + } else { + if (offsetY - y < 150 || countUp > 0) return; + countDown = 0; + countUp = 1; + setHideHeader(false); + } + offsetY = y; + }} + ListHeaderComponent={ + + } data={notebooks} keyExtractor={(item, index) => item.dateCreated.toString()} renderItem={({item, index}) => ( diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index b0a72fdda..2045d3610 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -12,13 +12,14 @@ import {COLOR_SCHEME, opacity, pv, br, SIZE, WEIGHT} from '../../common/common'; import {styles} from './styles'; import {Search} from '../../components/SearchInput'; import {RecentList} from '../../components/Recents'; -import {w} from '../../utils/utils'; +import {w, h} from '../../utils/utils'; import {Header} from '../../components/header'; import {NavigationEvents} from 'react-navigation'; import {NotesList} from '../../components/NotesList'; import {storage} from '../../../App'; import Icon from 'react-native-vector-icons/Feather'; import NavigationService from '../../services/NavigationService'; +import {ScrollView} from 'react-native-gesture-handler'; export const Home = ({navigation}) => { const [loading, setLoading] = useState(true); const [colors, setColors] = useState(COLOR_SCHEME); @@ -26,6 +27,14 @@ export const Home = ({navigation}) => { const [text, setText] = useState(''); const [searchResults, setSearchResults] = useState([]); const [update, setUpdate] = useState(0); + const [hideHeader, setHideHeader] = useState(false); + const [margin, setMargin] = useState(150); + let offsetY = 0; + let countUp = 0; + let countDown = 0; + let headerHeight = 0; + let searchHeight = 0; + useEffect(() => { setTimeout(() => { setLoading(false); @@ -62,6 +71,20 @@ export const Home = ({navigation}) => { setHidden(false); }; + const setMarginTop = () => { + if (margin !== 150) return; + if (headerHeight == 0 || searchHeight == 0) { + let toAdd = h * 0.06; + + setTimeout(() => { + if (margin > headerHeight + searchHeight + toAdd) return; + setMargin(headerHeight + searchHeight + toAdd); + headerHeight = 0; + searchHeight = 0; + }, 10); + } + }; + return Platform.isPad ? ( @@ -103,28 +126,66 @@ export const Home = ({navigation}) => { setUpdate(update + 1); }} /> + +
{ + headerHeight = height; + setMarginTop(); + }} + hide={hideHeader} + showSearch={() => { + setHideHeader(false); + countUp = 0; + countDown = 0; + }} + colors={colors} + heading="Home" + canGoBack={false} + customIcon="menu" + /> -
- - - + { + searchHeight = height; + setMarginTop(); + }} + hide={hideHeader} + onChangeText={onChangeText} + onSubmitEditing={onSubmitEditing} + placeholder="Search your notes" + onBlur={onBlur} + onFocus={onFocus} + clearSearch={clearSearch} + value={text} + /> + {hidden ? ( ) : ( - + { + if (y > offsetY) { + if (y - offsetY < 150 || countDown > 0) return; + countDown = 1; + countUp = 0; + setHideHeader(true); + } else { + if (offsetY - y < 150 || countUp > 0) return; + countDown = 0; + countUp = 1; + setHideHeader(false); + } + offsetY = y; + }} + margin={margin} + update={update} + /> )} { diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index 163f6eda2..0a1bb2d04 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -36,6 +36,27 @@ const h = Dimensions.get('window').height; export const Notebook = ({navigation}) => { const [colors, setColors] = useState(COLOR_SCHEME); const params = navigation.state.params; + const [hideHeader, setHideHeader] = useState(false); + const [margin, setMargin] = useState(150); + let offsetY = 0; + let countUp = 0; + let countDown = 0; + let headerHeight = 0; + let searchHeight = 0; + + const setMarginTop = () => { + if (margin !== 150) return; + if (headerHeight == 0 || searchHeight == 0) { + let toAdd = h * 0.06; + + setTimeout(() => { + if (margin > headerHeight + searchHeight + toAdd) return; + setMargin(headerHeight + searchHeight + toAdd); + headerHeight = 0; + searchHeight = 0; + }, 10); + } + }; return ( { style={{ height: '100%', }}> -
- + +
(headerHeight = height)} + hide={hideHeader} + showSearch={() => { + setHideHeader(false); + countUp = 0; + countDown = 0; + }} + colors={colors} + heading={params.title} + canGoBack={false} + /> + + { + searchHeight = height; + setMarginTop(); + }} + placeholder="Search your notebook" + hide={hideHeader} + /> + + { + y = event.nativeEvent.contentOffset.y; + if (y > offsetY) { + if (y - offsetY < 150 || countDown > 0) return; + countDown = 1; + countUp = 0; + setHideHeader(true); + } else { + if (offsetY - y < 150 || countUp > 0) return; + countDown = 0; + countUp = 1; + setHideHeader(false); + } + offsetY = y; + }} ListHeaderComponent={ <> {params.hideMore ? null : ( @@ -63,6 +127,7 @@ export const Notebook = ({navigation}) => { style={{ borderWidth: 1, borderRadius: 5, + marginTop: margin, width: '90%', marginHorizontal: '5%', paddingHorizontal: ph, diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index f3f9b7f3e..81aece12d 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -37,7 +37,24 @@ export const Settings = ({navigation}) => {
{ activeOpacity={opacity} style={{ borderBottomWidth: 1, - width: '90%', + width: item.step ? '85%' : '90%', marginHorizontal: '5%', borderBottomColor: '#f0f0f0', paddingVertical: pv + 5, @@ -83,15 +100,20 @@ export const Settings = ({navigation}) => { paddingHorizontal: ph, justifyContent: 'space-between', alignItems: 'center', + marginLeft: item.step ? '10%' : '5%', }}> - {item} + + {' '} {item.name} - + {item.switch ? ( + + ) : null} )} />