diff --git a/apps/mobile/App.js b/apps/mobile/App.js index bb809ea9f..96ff418d0 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -8,16 +8,13 @@ import { DeviceEventEmitter, Platform, Keyboard, + Animated, } from 'react-native'; -import AsyncStorage from '@react-native-community/async-storage'; import { COLOR_SCHEME, - COLOR_SCHEME_DARK, - setColorScheme, onThemeUpdate, clearThemeUpdateListener, - COLOR_SCHEME_LIGHT, - setAccentColor, + getColorScheme, } from './src/common/common'; import Icon from 'react-native-vector-icons/Ionicons'; import ActionButton from 'react-native-action-button'; @@ -26,52 +23,33 @@ import {h, w} from './src/utils/utils'; import {Toast} from './src/components/Toast'; import {Menu} from './src/components/Menu'; import SideMenu from 'react-native-side-menu'; -import {useForceUpdate} from './src/views/ListsEditor'; import Storage from 'notes-core/api/database'; import StorageInterface from './src/utils/storage'; +import {AppProvider} from './src/provider'; +import {DeviceDetectionService} from './src/utils/deviceDetection'; +export const DDS = new DeviceDetectionService(); + export const db = new Storage(StorageInterface); const App = () => { const [colors, setColors] = useState(COLOR_SCHEME); const [fab, setFab] = useState(true); - const [sidebar, setSidebar] = useState('30%'); + const [sidebar, setSidebar] = useState(w * 0.3); const [isOpen, setOpen] = useState(false); const [disableGestures, setDisableGesture] = useState(false); const [buttonHide, setButtonHide] = useState(false); const [isIntialized, setIsInitialized] = useState(false); useEffect(() => { - let theme = COLOR_SCHEME_LIGHT; - AsyncStorage.getItem('accentColor').then(accentColor => { - if (typeof accentColor !== 'string') { - AsyncStorage.setItem('accentColor', colors.accent); - } else { - setAccentColor(accentColor); - } - }); - AsyncStorage.getItem('theme').then(t => { - if (typeof t !== 'string') { - AsyncStorage.setItem('theme', JSON.stringify(theme)); - - setColorScheme(COLOR_SCHEME_LIGHT); - } else { - let themeToSet = JSON.parse(t); - themeToSet.night - ? setColorScheme(COLOR_SCHEME_DARK) - : setColorScheme(COLOR_SCHEME_LIGHT); - StatusBar.setBarStyle( - themeToSet.night ? 'light-content' : 'dark-content', - ); - } - }); + getColorScheme(colors); }, []); useEffect(() => { DeviceEventEmitter.addListener('openSidebar', () => { - Platform.isPad ? setSidebar('30%') : setOpen(true); + DDS.isTab ? setSidebar(w * 0.3) : setOpen(true); }); DeviceEventEmitter.addListener('closeSidebar', () => { - Platform.isPad ? setSidebar('0%') : setOpen(false); + DDS.isTab ? setSidebar(0) : setOpen(false); }); DeviceEventEmitter.addListener('disableGesture', () => { setDisableGesture(true); @@ -82,10 +60,10 @@ const App = () => { return () => { DeviceEventEmitter.removeListener('openSidebar', () => { - Platform.isPad ? setSidebar('30%') : setOpen(true); + DDS.isTab ? setSidebar('30%') : setOpen(true); }); DeviceEventEmitter.removeListener('closeSidebar', () => { - Platform.isPad ? setSidebar('0%') : setOpen(false); + DDS.isTab ? setSidebar('0%') : setOpen(false); }); DeviceEventEmitter.removeListener('disableGesture', () => { setDisableGesture(true); @@ -162,76 +140,87 @@ const App = () => { db.init().then(() => { setIsInitialized(true); }); - }); + }, []); if (!isIntialized) { return ; } return ( - - {Platform.isPad ? ( - <> - - { - setSidebar('0%'); + + + {DDS.isTab ? ( + <> + + { + //setSidebar('0%'); + }} + /> + + { + NavigationService.setTopLevelNavigator(navigatorRef); }} - />{' '} - : undefined - - { - NavigationService.setTopLevelNavigator(navigatorRef); - }} - /> - - ) : ( - { - setOpen(args); - }} - menu={ - setOpen(false)} /> - } - openMenuOffset={w / 1.3}> - + ) : ( + { - NavigationService.setTopLevelNavigator(navigatorRef); + animationFunction={(prop, value) => + Animated.spring(prop, { + toValue: value, + friction: 8, + useNativeDriver: true, + }) + } + onChange={args => { + setTimeout(() => { + setOpen(args); + }, 300); }} - /> - - )} + menu={ + setOpen(false)} + /> + } + openMenuOffset={w / 1.3}> + { + NavigationService.setTopLevelNavigator(navigatorRef); + }} + /> + + )} - {/* {fab ? ( + {/* {fab ? ( { undefined )} */} - - + + + ); }; diff --git a/apps/mobile/android/app/src/main/assets/fonts/NotoSans.ttf b/apps/mobile/android/app/src/main/assets/fonts/NotoSans.ttf new file mode 100755 index 000000000..10589e277 Binary files /dev/null and b/apps/mobile/android/app/src/main/assets/fonts/NotoSans.ttf differ diff --git a/apps/mobile/android/app/src/main/assets/fonts/NotoSerif-Bold.ttf b/apps/mobile/android/app/src/main/assets/fonts/NotoSerif-Bold.ttf new file mode 100755 index 000000000..2726b0a00 Binary files /dev/null and b/apps/mobile/android/app/src/main/assets/fonts/NotoSerif-Bold.ttf differ diff --git a/apps/mobile/android/app/src/main/assets/fonts/NotoSerif.ttf b/apps/mobile/android/app/src/main/assets/fonts/NotoSerif.ttf new file mode 100755 index 000000000..0e8752414 Binary files /dev/null and b/apps/mobile/android/app/src/main/assets/fonts/NotoSerif.ttf differ diff --git a/apps/mobile/android/app/src/main/assets/texteditor.html b/apps/mobile/android/app/src/main/assets/texteditor.html index ad43d0c50..d6e392302 100644 --- a/apps/mobile/android/app/src/main/assets/texteditor.html +++ b/apps/mobile/android/app/src/main/assets/texteditor.html @@ -971,7 +971,7 @@ {delete: url.length}, {insert: url, attributes: {link: url}}, ]); - + editor.updateContents({ ops: ops, }); @@ -989,9 +989,11 @@ var Font = Quill.import('formats/font'); Font.whitelist = fontNames; Quill.register(Font, true); + // Receber mensagens do RN document.addEventListener('message', data => { + editor.focus(); if (data.data.substr(0,9) === '{"night":') { pageTheme.colors = JSON.parse(data.data); diff --git a/apps/mobile/ios/Notes.xcodeproj/project.pbxproj b/apps/mobile/ios/Notes.xcodeproj/project.pbxproj index 353b914c5..35acb6fa3 100644 --- a/apps/mobile/ios/Notes.xcodeproj/project.pbxproj +++ b/apps/mobile/ios/Notes.xcodeproj/project.pbxproj @@ -27,6 +27,9 @@ 655394CB23888EBE008A1476 /* Quicksand-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C323888EBE008A1476 /* Quicksand-SemiBold.ttf */; }; 655394CC23888EBE008A1476 /* Quicksand-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655394C423888EBE008A1476 /* Quicksand-Light.ttf */; }; 655E77352380917B0049D452 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 655E772F2380917B0049D452 /* Ionicons.ttf */; }; + 656C396C23A41CA20060E3AB /* NotoSerif-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 656C396923A41CA20060E3AB /* NotoSerif-Bold.ttf */; }; + 656C396D23A41CA20060E3AB /* NotoSans-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 656C396A23A41CA20060E3AB /* NotoSans-Regular.ttf */; }; + 656C396E23A41CA20060E3AB /* NotoSerif-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 656C396B23A41CA20060E3AB /* NotoSerif-Regular.ttf */; }; 773523A6669C9373D8945A06 /* libPods-Notes-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 177E12D91F5B0732079F75AB /* libPods-Notes-tvOSTests.a */; }; /* End PBXBuildFile section */ @@ -73,6 +76,9 @@ 655394C323888EBE008A1476 /* Quicksand-SemiBold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-SemiBold.ttf"; sourceTree = ""; }; 655394C423888EBE008A1476 /* Quicksand-Light.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Light.ttf"; sourceTree = ""; }; 655E772F2380917B0049D452 /* Ionicons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = Ionicons.ttf; sourceTree = ""; }; + 656C396923A41CA20060E3AB /* NotoSerif-Bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Bold.ttf"; sourceTree = ""; }; + 656C396A23A41CA20060E3AB /* NotoSans-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSans-Regular.ttf"; sourceTree = ""; }; + 656C396B23A41CA20060E3AB /* NotoSerif-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Regular.ttf"; sourceTree = ""; }; 6FB6DE7AD66669BE4A951A9E /* Pods-Notes-tvOSTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes-tvOSTests.debug.xcconfig"; path = "Target Support Files/Pods-Notes-tvOSTests/Pods-Notes-tvOSTests.debug.xcconfig"; sourceTree = ""; }; 87D2DFC238DED597B12E218E /* Pods-Notes-tvOSTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Notes-tvOSTests.release.xcconfig"; path = "Target Support Files/Pods-Notes-tvOSTests/Pods-Notes-tvOSTests.release.xcconfig"; sourceTree = ""; }; 89ABD2DB3BB5CC5C08F50BC5 /* libPods-NotesTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-NotesTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; @@ -194,6 +200,9 @@ 655394BF23888EBE008A1476 /* fonts */ = { isa = PBXGroup; children = ( + 656C396A23A41CA20060E3AB /* NotoSans-Regular.ttf */, + 656C396923A41CA20060E3AB /* NotoSerif-Bold.ttf */, + 656C396B23A41CA20060E3AB /* NotoSerif-Regular.ttf */, 655394C023888EBE008A1476 /* Quicksand-Bold.ttf */, 655394C123888EBE008A1476 /* Quicksand-Medium.ttf */, 655394C223888EBE008A1476 /* Quicksand-Regular.ttf */, @@ -386,6 +395,9 @@ isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( + 656C396D23A41CA20060E3AB /* NotoSans-Regular.ttf in Resources */, + 656C396E23A41CA20060E3AB /* NotoSerif-Regular.ttf in Resources */, + 656C396C23A41CA20060E3AB /* NotoSerif-Bold.ttf in Resources */, 655394C723888EBE008A1476 /* fonts.css in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 655394C623888EBE008A1476 /* texteditor.html in Resources */, diff --git a/apps/mobile/ios/Notes/Info.plist b/apps/mobile/ios/Notes/Info.plist index 4af190db7..37b2f3cf1 100644 --- a/apps/mobile/ios/Notes/Info.plist +++ b/apps/mobile/ios/Notes/Info.plist @@ -41,6 +41,9 @@ UIAppFonts + NotoSerif-Regular.ttf + NotoSerif-Bold.ttf + NotoSans-Regular.ttf Feather.ttf Quicksand-SemiBold.ttf Quicksand-Medium.ttf diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js index c1b8faf1f..68e463d06 100755 --- a/apps/mobile/src/common/common.js +++ b/apps/mobile/src/common/common.js @@ -1,4 +1,5 @@ -import {DeviceEventEmitter} from 'react-native'; +import {DeviceEventEmitter, StatusBar, PixelRatio} from 'react-native'; +import AsyncStorage from '@react-native-community/async-storage'; //COLOR SCHEME export const ACCENT = { color: '#0560FF', @@ -18,6 +19,32 @@ export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT.color) { DeviceEventEmitter.emit('onThemeUpdate'); } +export function getColorScheme(colors) { + let theme = colors; + AsyncStorage.getItem('accentColor').then(accentColor => { + if (typeof accentColor !== 'string') { + AsyncStorage.setItem('accentColor', colors.accent); + } else { + setAccentColor(accentColor); + } + }); + AsyncStorage.getItem('theme').then(t => { + if (typeof t !== 'string') { + AsyncStorage.setItem('theme', JSON.stringify(theme)); + + setColorScheme(COLOR_SCHEME_LIGHT); + } else { + let themeToSet = JSON.parse(t); + themeToSet.night + ? setColorScheme(COLOR_SCHEME_DARK) + : setColorScheme(COLOR_SCHEME_LIGHT); + StatusBar.setBarStyle( + themeToSet.night ? 'light-content' : 'dark-content', + ); + } + }); +} + export function setAccentColor(color) { ACCENT.color = color; DeviceEventEmitter.emit('onThemeUpdate'); @@ -93,14 +120,14 @@ export const FONT_BOLD = ''; //FONT SIZE export const SIZE = { - xxs: 10, - xs: 12, - sm: 16, - md: 18, - lg: 22, - xl: 28, - xxl: 32, - xxxl: 40, + xxs: 10 * PixelRatio.getFontScale(), + xs: 12 * PixelRatio.getFontScale(), + sm: 14 * PixelRatio.getFontScale(), + md: 18 * PixelRatio.getFontScale(), + lg: 24 * PixelRatio.getFontScale(), + xl: 28 * PixelRatio.getFontScale(), + xxl: 32 * PixelRatio.getFontScale(), + xxxl: 36 * PixelRatio.getFontScale(), }; export const br = 5; // border radius @@ -111,9 +138,9 @@ export const opacity = 0.85; // active opacity // GLOBAL FONT export const WEIGHT = { - light: 'Quicksand-Light', - regular: 'Quicksand-Regular', - medium: 'Quicksand-Medium', - semibold: 'Quicksand-SemiBold', - bold: 'Quicksand-Bold', + light: 'NotoSans', + regular: 'NotoSans', + medium: 'NotoSans', + semibold: 'NotoSerif', + bold: 'NotoSerif-Bold', }; diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js index 8b95ec83f..6544b5185 100644 --- a/apps/mobile/src/components/AddNotebookDialog/index.js +++ b/apps/mobile/src/components/AddNotebookDialog/index.js @@ -9,6 +9,7 @@ import { SafeAreaView, Platform, Modal, + KeyboardAvoidingView, } from 'react-native'; import NavigationService from '../../services/NavigationService'; import { @@ -26,7 +27,7 @@ import Icon from 'react-native-vector-icons/Feather'; import {getElevation, h, w, timeSince, ToastEvent} from '../../utils/utils'; import {FlatList, TextInput} from 'react-native-gesture-handler'; import {useForceUpdate} from '../../views/ListsEditor'; -import {db} from '../../../App'; +import {db, DDS} from '../../../App'; let refs = []; @@ -123,7 +124,8 @@ export const AddNotebookDialog = ({visible, close}) => { animated animationType="fade" onRequestClose={() => (refs = [])}> - { { New Notebook @@ -184,7 +185,7 @@ export const AddNotebookDialog = ({visible, close}) => { Topics: @@ -276,7 +277,7 @@ export const AddNotebookDialog = ({visible, close}) => { - + ); }; diff --git a/apps/mobile/src/components/AddTopicDialog/index.js b/apps/mobile/src/components/AddTopicDialog/index.js index 2aca6742c..dc5a69abe 100644 --- a/apps/mobile/src/components/AddTopicDialog/index.js +++ b/apps/mobile/src/components/AddTopicDialog/index.js @@ -85,10 +85,9 @@ export const AddTopicDialog = ({ {toEdit ? 'Edit Topic' : 'Add New Topic'} diff --git a/apps/mobile/src/components/Dialog/index.js b/apps/mobile/src/components/Dialog/index.js index b3bee883a..b1bcb7396 100644 --- a/apps/mobile/src/components/Dialog/index.js +++ b/apps/mobile/src/components/Dialog/index.js @@ -65,10 +65,9 @@ export const Dialog = ({ {title} @@ -79,7 +78,7 @@ export const Dialog = ({ style={{ color: colors.icon, fontFamily: WEIGHT.regular, - fontSize: SIZE.sm - 1, + fontSize: SIZE.sm - 2, textAlign: 'center', marginTop: 10, }}> diff --git a/apps/mobile/src/components/EditorMenu/index.js b/apps/mobile/src/components/EditorMenu/index.js index 9be2f4cb8..16ee579a2 100644 --- a/apps/mobile/src/components/EditorMenu/index.js +++ b/apps/mobile/src/components/EditorMenu/index.js @@ -9,6 +9,7 @@ import { FlatList, DeviceEventEmitter, ActivityIndicator, + KeyboardAvoidingView, } from 'react-native'; import NavigationService from '../../services/NavigationService'; import { @@ -59,355 +60,365 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => { return ( - - - - { - if (!colors.night) { - AsyncStorage.setItem( - 'theme', - JSON.stringify(COLOR_SCHEME_DARK), - ); - setColorScheme(COLOR_SCHEME_DARK); - } else { - AsyncStorage.setItem( - 'theme', - JSON.stringify(COLOR_SCHEME_LIGHT), - ); - setColorScheme(COLOR_SCHEME_LIGHT); - } - }, - switch: true, - on: colors.night ? true : false, - close: false, - }, - { - name: 'Pinned', - icon: 'tag', - func: () => NavigationService.push('Home'), - close: true, - check: true, - on: true, - }, - - { - name: 'Add to Favorites', - icon: 'star', - func: () => - NavigationService.push('Folders', { - title: 'Notebooks', - }), - close: true, - check: true, - on: false, - }, - { - name: 'Share ', - icon: 'share', - func: () => NavigationService.push('Lists'), - close: true, - }, - { - name: 'Move to Notebook', - icon: 'arrow-right', - func: () => NavigationService.push('Favorites'), - close: true, - }, - - { - name: 'Delete', - icon: 'trash', - func: () => NavigationService.push('Trash'), - close: true, - }, - { - name: 'Locked', - icon: 'lock', - func: () => NavigationService.push('Settings'), - close: true, - check: true, - on: false, - }, - ]} - keyExtractor={(item, index) => item.name} - renderItem={({item, index}) => ( - { - item.close === false ? null : close(); - item.func(); - }} - style={{ - width: '100%', - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-end', - paddingHorizontal: '5%', - paddingVertical: 10, - }}> - - - - {item.name} - - - {item.switch ? ( - - ) : ( - undefined - )} - {item.check ? ( - - {item.on ? ( - - ) : null} - - ) : null} - - )} - /> - - + + + - - - Add Tags - - - + height: 2, + width: '100%', + marginBottom: 5, + marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03, + }} + /> + { + if (!colors.night) { + AsyncStorage.setItem( + 'theme', + JSON.stringify(COLOR_SCHEME_DARK), + ); + setColorScheme(COLOR_SCHEME_DARK); + } else { + AsyncStorage.setItem( + 'theme', + JSON.stringify(COLOR_SCHEME_LIGHT), + ); + setColorScheme(COLOR_SCHEME_LIGHT); + } + }, + switch: true, + on: colors.night ? true : false, + close: false, + }, + { + name: 'Pinned', + icon: 'tag', + func: () => NavigationService.push('Home'), + close: true, + check: true, + on: true, + }, - - {tags.map(item => ( - + NavigationService.push('Folders', { + title: 'Notebooks', + }), + close: true, + check: true, + on: false, + }, + { + name: 'Share ', + icon: 'share', + func: () => NavigationService.push('Lists'), + close: true, + }, + { + name: 'Move to Notebook', + icon: 'arrow-right', + func: () => NavigationService.push('Favorites'), + close: true, + }, + + { + name: 'Delete', + icon: 'trash', + func: () => NavigationService.push('Trash'), + close: true, + }, + { + name: 'Locked', + icon: 'lock', + func: () => NavigationService.push('Settings'), + close: true, + check: true, + on: false, + }, + ]} + keyExtractor={(item, index) => item.name} + renderItem={({item, index}) => ( + { + item.close === false ? null : close(); + item.func(); + }} + style={{ + width: '100%', + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-end', + paddingHorizontal: '5%', + paddingVertical: pv + 5, + }}> + + + + {item.name} + + + {item.switch ? ( + + ) : ( + undefined + )} + {item.check ? ( + + {item.on ? ( + + ) : null} + + ) : null} + + )} + /> + + + + - {item} + Add Tags - - ))} - (tagsInputRef = ref)} - placeholderTextColor={colors.icon} - placeholder="Add a tag" - defaultValue="#" - onChangeText={value => { - tagToAdd = value; - if (tagToAdd.length > 0) backPressCount = 0; - }} - onKeyPress={event => { - if (event.nativeEvent.key === 'Backspace') { - if (backPressCount === 0 && !tagToAdd) { - backPressCount = 1; + + - return; - } - if (backPressCount === 1 && !tagToAdd) { - backPressCount = 0; - - let tagInputValue = tags[tags.length - 1]; - let allTags = tags; - if (allTags.length === 1) return; - - allTags.splice(allTags.length - 1); - - setTags(allTags); - tagsInputRef.setNativeProps({ - text: tagInputValue, - }); - forceUpdate(); - setTimeout(() => { - tagsInputRef.focus(); - }, 300); - } - } - }} - onSubmitEditing={() => { - if (!tagToAdd || tagToAdd === '#') return; - - let tag = tagToAdd; - if (tag[0] !== '#') { - tag = '#' + tag; - } - if (tag.includes(' ')) { - tag = tag.replace(' ', '_'); - } - let allTags = [...tags]; - allTags.push(tag); - tagsInputRef.setNativeProps({ - text: '#', - }); - setTags(allTags); - tagToAdd = ''; - setTimeout(() => { - tagsInputRef.focus(); - }, 300); - }} - /> - - - { - close(); - NavigationService.navigate('Tags'); - }} - style={{ - width: '100%', - alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'flex-end', - paddingHorizontal: '5%', - marginTop: 15, - }}> - - ( + + + {item} + + + ))} + - - Add Color - - - + paddingHorizontal: 5, + paddingVertical: 2.5, + margin: 5, + }} + ref={ref => (tagsInputRef = ref)} + placeholderTextColor={colors.icon} + placeholder="#hashtag" + onChangeText={value => { + tagToAdd = value; + if (tagToAdd.length > 0) backPressCount = 0; + }} + onKeyPress={event => { + if (event.nativeEvent.key === 'Backspace') { + if (backPressCount === 0 && !tagToAdd) { + backPressCount = 1; - - {['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map( - item => ( + return; + } + if (backPressCount === 1 && !tagToAdd) { + backPressCount = 0; + + let tagInputValue = tags[tags.length - 1]; + let allTags = tags; + if (allTags.length === 1) return; + + allTags.splice(allTags.length - 1); + + setTags(allTags); + tagsInputRef.setNativeProps({ + text: tagInputValue, + }); + forceUpdate(); + setTimeout(() => { + tagsInputRef.focus(); + }, 300); + } + } + }} + onSubmitEditing={() => { + if (!tagToAdd || tagToAdd === '#') return; + + let tag = tagToAdd; + if (tag[0] !== '#') { + tag = '#' + tag; + } + if (tag.includes(' ')) { + tag = tag.replace(' ', '_'); + } + let allTags = [...tags]; + allTags.push(tag); + tagsInputRef.setNativeProps({ + text: '#', + }); + setTags(allTags); + tagToAdd = ''; + setTimeout(() => { + tagsInputRef.focus(); + }, 300); + }} + /> + + + { + close(); + NavigationService.navigate('Tags'); + }} + style={{ + width: '100%', + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-end', + paddingHorizontal: '5%', + marginTop: 15, + }}> + + + + Add Color + + + + + + {[ + 'red', + 'yellow', + 'green', + 'blue', + 'purple', + 'orange', + 'gray', + ].map(item => ( { setSelectedColor(item); @@ -438,32 +449,30 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => { ) : null} - ), - )} - - - - + + - Last Synced: 5 secs ago. - - {} - - - + + Last Synced: 5 secs ago. + + {} + + + + ); }; diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js index 3fe3e6e2f..362c56265 100644 --- a/apps/mobile/src/components/Menu/index.js +++ b/apps/mobile/src/components/Menu/index.js @@ -8,6 +8,7 @@ import { Platform, FlatList, DeviceEventEmitter, + PixelRatio, } from 'react-native'; import NavigationService from '../../services/NavigationService'; import { @@ -51,7 +52,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => { return ( {}, hide, update = () => {}}) => { marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03, }} /> + {}, hide, update = () => {}}) => { alignSelf: 'center', flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'flex-end', + alignItems: 'center', paddingHorizontal: '5%', - paddingVertical: 15, + paddingVertical: pv + 5, }}> {}, hide, update = () => {}}) => { /> {item.name} @@ -208,7 +210,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => { style={{ flexDirection: 'row', justifyContent: 'flex-start', - alignItems: 'flex-end', + alignItems: 'center', }}> {}, hide, update = () => {}}) => { /> Tags - - View All - {}, hide, update = () => {}}) => { flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', - margin: 5, + padding: 7, + paddingLeft: 3.5, }}> #{item} @@ -296,8 +291,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => { }}> {}, hide, update = () => {}}) => { }} activeOpacity={opacity} style={{ - paddingVertical: pv, - paddingHorizontal: ph, - borderRadius: 5, - width: '100%', - justifyContent: 'center', - alignItems: 'center', + paddingVertical: pv + 5, - backgroundColor: colors.accent, + width: '100%', + borderRadius: 5, + justifyContent: 'flex-start', + alignItems: 'center', + flexDirection: 'row', + borderBottomColor: colors.accent, + borderBottomWidth: 1, }}> + + - Login to Sync + {' '}Login diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js index bdad9fd51..063baed06 100644 --- a/apps/mobile/src/components/NoteItem/index.js +++ b/apps/mobile/src/components/NoteItem/index.js @@ -1,35 +1,16 @@ -import React, {useState, createRef} from 'react'; -import { - View, - Text, - TouchableOpacity, - ScrollView, - Dimensions, - FlatList, - TouchableWithoutFeedback, - Platform, -} from 'react-native'; +import React, {useState} from 'react'; +import {View, Text, TouchableOpacity, Dimensions} from 'react-native'; -import { - COLOR_SCHEME, - SIZE, - br, - ph, - pv, - opacity, - FONT, - WEIGHT, -} from '../../common/common'; +import {COLOR_SCHEME, SIZE, br, ph, pv, WEIGHT} from '../../common/common'; import Icon from 'react-native-vector-icons/Feather'; -import {Reminder} from '../Reminder'; -import {getElevation, timeSince, ToastEvent} from '../../utils/utils'; +import {timeSince, ToastEvent} from '../../utils/utils'; import NavigationService from '../../services/NavigationService'; import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu'; import {Dialog} from '../Dialog'; import {VaultDialog} from '../VaultDialog'; import {db} from '../../../App'; - +import {DDS} from '../../../App'; const w = Dimensions.get('window').width; const h = Dimensions.get('window').height; @@ -72,15 +53,14 @@ const NoteItem = props => { return ( { }); }} style={{ - paddingLeft: ph, - width: '100%', + paddingLeft: 0, + width: '95%', }}> <> { color: colors.pri, fontSize: SIZE.md, fontFamily: WEIGHT.bold, - maxWidth: '100%', + maxWidth: '95%', marginBottom: 5, }}> {item.title.replace('\n', '')} @@ -128,14 +108,16 @@ const NoteItem = props => { width: '100%', }}> {item.headline} @@ -149,20 +131,20 @@ const NoteItem = props => { @@ -175,7 +157,7 @@ const NoteItem = props => { { }> - + {' '}Pin { hideMenu(); ToastEvent.show( @@ -225,19 +213,23 @@ const NoteItem = props => { color: colors.pri, fontFamily: WEIGHT.regular, - fontSize: SIZE.sm, + fontSize: SIZE.xs, }}> - + {' '}Favorite - + {' '}Share @@ -246,18 +238,22 @@ const NoteItem = props => { hideMenu(); NavigationService.push('Folders', { note: item, + title: 'Choose Notebook', isMove: true, hideMore: true, }); }} + style={{ + height: 35, + }} textStyle={{ color: colors.pri, fontFamily: WEIGHT.regular, - fontSize: SIZE.sm, + fontSize: SIZE.xs, }}> - + {' '}Move { show = 'vault'; hideMenu(true); }} + style={{ + height: 35, + }} textStyle={{ color: colors.pri, + fontFamily: WEIGHT.regular, - fontSize: SIZE.sm, + fontSize: SIZE.xs, }}> - + {' '}Lock @@ -279,13 +279,15 @@ const NoteItem = props => { show = 'delete'; hideMenu(); }} + style={{ + height: 35, + }} textStyle={{ color: colors.pri, - fontFamily: WEIGHT.regular, - fontSize: SIZE.sm, + fontSize: SIZE.xs, }}> - + {' '}Delete @@ -295,12 +297,12 @@ const NoteItem = props => { color: colors.icon, fontFamily: WEIGHT.regular, - fontSize: SIZE.xs, + fontSize: SIZE.xxs, }} style={{ paddingVertical: 0, margin: 0, - height: 30, + height: 35, }}> Notebook: School Notes @@ -310,12 +312,12 @@ const NoteItem = props => { color: colors.icon, fontFamily: WEIGHT.regular, - fontSize: SIZE.xs, + fontSize: SIZE.xxs, }} style={{ paddingVertical: 0, margin: 0, - height: 30, + height: 35, paddingBottom: 10, }}> {' '}- Topic: Physics @@ -325,14 +327,14 @@ const NoteItem = props => { disabled={true} textStyle={{ color: colors.icon, - + height: 35, fontFamily: WEIGHT.regular, - fontSize: SIZE.xs, + fontSize: SIZE.xxs, }} style={{ paddingVertical: 0, margin: 0, - height: 30, + height: 35, paddingBottom: 10, }}> Created on: {new Date(item.dateCreated).toISOString().slice(0, 10)} diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js index 2b6d39abe..d72257859 100644 --- a/apps/mobile/src/components/NotebookItem/index.js +++ b/apps/mobile/src/components/NotebookItem/index.js @@ -2,7 +2,15 @@ import React, {useState} from 'react'; import {View, Text, TouchableOpacity} from 'react-native'; import NavigationService from '../../services/NavigationService'; import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu'; -import {COLOR_SCHEME, SIZE, ph, pv, opacity, WEIGHT} from '../../common/common'; +import { + COLOR_SCHEME, + SIZE, + ph, + pv, + opacity, + WEIGHT, + br, +} from '../../common/common'; import Icon from 'react-native-vector-icons/Feather'; import {w, ToastEvent} from '../../utils/utils'; import {db} from '../../../App'; @@ -17,6 +25,7 @@ export const NotebookItem = ({ isMove = false, noteToMove = null, notebookID, + numColumns, refresh = () => {}, }) => { const [colors, setColors] = useState(COLOR_SCHEME); @@ -75,11 +84,17 @@ export const NotebookItem = ({ return ( @@ -116,11 +133,15 @@ export const NotebookItem = ({ {isTopic ? null : ( {item.description} @@ -149,7 +170,7 @@ export const NotebookItem = ({ style={{ color: 'white', fontFamily: WEIGHT.regular, - fontSize: SIZE.xxs + 1, + fontSize: SIZE.xxs, maxWidth: '100%', }}> {topic.title} @@ -170,20 +191,20 @@ export const NotebookItem = ({ diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index 7ab0b368e..43bb29f2b 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/apps/mobile/src/components/NotesList/index.js @@ -1,10 +1,11 @@ import React, {useState} from 'react'; -import {View, Text, FlatList, Platform} from 'react-native'; - -import {COLOR_SCHEME, SIZE, WEIGHT} from '../../common/common'; +import {View, Text, FlatList, Platform, TouchableOpacity} from 'react-native'; +import Icon from 'react-native-vector-icons/Feather'; +import {COLOR_SCHEME, SIZE, WEIGHT, ph} from '../../common/common'; import * as Animatable from 'react-native-animatable'; import NoteItem from '../NoteItem'; - +import {DDS} from '../../../App'; +import {w, h} from '../../utils/utils'; export const NotesList = ({ keyword = null, notes, @@ -13,7 +14,7 @@ export const NotesList = ({ isSearch = false, }) => { const [colors, setColors] = useState(COLOR_SCHEME); - + const [numColumns, setNumColumns] = useState(1); return ( - {isSearch ? ( - - Search Results for{' '} + + + {isSearch ? ( - {keyword}{' '} + Search Results for{' '} + + {keyword} + - - ) : ( - - )} - + ) : ( + undefined + )} + + + { + setNumColumns(numColumns === 1 ? 2 : 1); + }} + style={{ + justifyContent: 'center', + alignItems: 'center', + }}> + + + } + numColumns={numColumns} + key={numColumns} + columnWrapperStyle={ + numColumns === 1 + ? null + : { + width: + notes.length === 1 + ? DDS.isTab + ? '95%' + : '90%' + : DDS.isTab + ? '45%' + : '42.5%', + } + } + contentContainerStyle={{ + width: + numColumns === 2 + ? DDS.isTab + ? '100%' + : null + : DDS.isTab + ? '95%' + : '90%', + alignItems: numColumns === 2 ? 'flex-start' : null, + alignSelf: 'center', + }} ListFooterComponent={ } - renderItem={({item, index}) => } + renderItem={({item, index}) => ( + + )} /> ); }; diff --git a/apps/mobile/src/components/Reminder/index.js b/apps/mobile/src/components/Reminder/index.js index 1426c1964..5c9a23d12 100644 --- a/apps/mobile/src/components/Reminder/index.js +++ b/apps/mobile/src/components/Reminder/index.js @@ -97,7 +97,7 @@ export const Reminder = props => { { const [colors, setColors] = useState(COLOR_SCHEME); const [focus, setFocus] = useState(false); @@ -41,7 +41,7 @@ export const Search = props => { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', - width: Platform.isPad ? '95%' : '90%', + width: DDS.isTab ? '95%' : '90%', alignSelf: 'center', borderRadius: br, borderWidth: props.hide ? 0 : 1.5, @@ -61,6 +61,7 @@ export const Search = props => { fontFamily: WEIGHT.regular, color: colors.pri, maxWidth: '90%', + paddingVertical: 10, width: '90%', fontSize: SIZE.md, }} @@ -79,7 +80,7 @@ export const Search = props => { placeholderTextColor={colors.icon} /> { props.clear(); props.value.length > 0 ? props.clearSearch() : null; diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index 00d36f38a..7ae4d59ae 100644 --- a/apps/mobile/src/components/header/index.js +++ b/apps/mobile/src/components/header/index.js @@ -5,7 +5,7 @@ import {SIZE, WEIGHT} from '../../common/common'; import {h, SideMenuEvent} from '../../utils/utils'; import * as Animatable from 'react-native-animatable'; import NavigationService from '../../services/NavigationService'; - +import {DDS} from '../../../App'; export const Header = ({ heading, colors, @@ -15,6 +15,8 @@ export const Header = ({ menu, sendHeight = e => {}, }) => { + const [isOpen, setOpen] = useState(DDS.isTab ? true : false); + return ( { @@ -30,7 +32,7 @@ export const Header = ({ zIndex: 10, justifyContent: 'space-between', alignItems: 'center', - paddingHorizontal: Platform.isPad ? '2.5%' : '5%', + paddingHorizontal: DDS.isTab ? '2.5%' : '5%', paddingTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.06, marginBottom: hide ? h * 0.03 @@ -59,11 +61,10 @@ export const Header = ({ ) : ( @@ -73,22 +74,21 @@ export const Header = ({ { - SideMenuEvent.open(); + if (isOpen) { + SideMenuEvent.close(); + setOpen(false); + } else { + SideMenuEvent.open(); + setOpen(true); + } }} style={{ - justifyContent: 'flex-start', + justifyContent: 'center', alignItems: 'flex-start', height: 40, - width: 42, + width: 45, }}> - + ) : ( undefined @@ -98,7 +98,7 @@ export const Header = ({ transition="fontSize" duration={300} style={{ - fontSize: hide ? SIZE.xl : SIZE.xxl, + fontSize: hide ? SIZE.xl : SIZE.xl, color: colors.pri, fontFamily: WEIGHT.bold, }}> diff --git a/apps/mobile/src/provider/index.js b/apps/mobile/src/provider/index.js new file mode 100644 index 000000000..8e187fd0a --- /dev/null +++ b/apps/mobile/src/provider/index.js @@ -0,0 +1,20 @@ +import React, {createContext} from 'react'; +import {useImmer} from 'use-immer'; + +const AppContext = createContext(); + +const defaultState = { + userLoggedIn: false, +}; + +const AppProvider = ({children}) => { + const [state, dispatch] = useImmer({...defaultState}); + + return ( + + {children} + + ); +}; + +export {AppContext, AppProvider}; diff --git a/apps/mobile/src/provider/useAppContext.js b/apps/mobile/src/provider/useAppContext.js new file mode 100644 index 000000000..5c7c1f325 --- /dev/null +++ b/apps/mobile/src/provider/useAppContext.js @@ -0,0 +1,23 @@ +import {useContext} from 'react'; +import {AppContext} from '.'; + +const useAppContext = () => { + const [state, dispatch] = useContext(AppContext); + + if (dispatch === undefined) { + throw new Error('Must have dispatch defined'); + } + + function logInUser(isLoggedIn) { + dispatch(draft => { + draft.userLoggedIn = true; + }); + } + + return { + ...state, + logInUser, + }; +}; + +export {useAppContext}; diff --git a/apps/mobile/src/services/NavigationService.js b/apps/mobile/src/services/NavigationService.js index 6a16ee31f..74a17bd50 100755 --- a/apps/mobile/src/services/NavigationService.js +++ b/apps/mobile/src/services/NavigationService.js @@ -20,7 +20,6 @@ import Trash from '../views/Trash'; import Notes from '../views/Notes'; import Tags from '../views/Tags'; import Notebook from '../views/Notebook'; -import Move from '../views/Move'; import AccountSettings from '../views/AccountSettings'; const fade = props => { @@ -95,9 +94,7 @@ const TopLevelNavigator = createStackNavigator( Notebook: { screen: Notebook, }, - Move: { - screen: Move, - }, + AccountSettings: { screen: AccountSettings, }, @@ -106,6 +103,11 @@ const TopLevelNavigator = createStackNavigator( initialRouteName: 'Home', defaultNavigationOptions: { gesturesEnabled: false, + headerStyle: { + backgroundColor: 'transparent', + borderBottomWidth: 0, + height: 0, + }, }, transitionConfig: () => ({ screenInterpolator: props => { diff --git a/apps/mobile/src/utils/deviceDetection.js b/apps/mobile/src/utils/deviceDetection.js new file mode 100644 index 000000000..4a73ff009 --- /dev/null +++ b/apps/mobile/src/utils/deviceDetection.js @@ -0,0 +1,62 @@ +import React, {PixelRatio, Platform, Dimensions} from 'react-native'; +const windowSize = Dimensions.get('window'); + +export class DeviceDetectionService { + constructor() { + this.pixelDensity = PixelRatio.get(); + this.width = windowSize.width; + this.height = windowSize.height; + this.adjustedWidth = this.width * this.pixelDensity; + this.adjustedHeight = this.height * this.pixelDensity; + + this.isPhoneOrTablet(); + this.isIosOrAndroid(); + this.detectIphoneX(); + } + + isPhoneOrTablet() { + if (Platform.isPad) { + this.isTab = true; + this.isPhone = false; + } + if ( + this.pixelDensity < 2 && + (this.adjustedWidth >= 1000 || this.adjustedHeight >= 1000) + ) { + this.isTab = true; + this.isPhone = false; + } else if ( + this.pixelDensity === 2 && + (this.adjustedWidth >= 1920 || this.adjustedHeight >= 1920) + ) { + this.isTab = true; + this.isPhone = false; + } else { + this.isTab = false; + this.isPhone = true; + } + } + + isIosOrAndroid() { + if (Platform.OS === 'ios') { + this.isIos = true; + this.isAndroid = false; + } else { + this.isIos = false; + this.isAndroid = true; + } + } + + detectIphoneX() { + if ( + Platform.OS === 'ios' && + !Platform.isTVOS && + !Platform.isTVOS && + (windowSize.height === 812 || windowSize.width === 812) + ) { + this.isIphoneX = true; + } else { + this.isIphoneX = false; + } + } +} diff --git a/apps/mobile/src/views/AccountSettings/index.js b/apps/mobile/src/views/AccountSettings/index.js index 1aa13b9c5..3dbbae648 100644 --- a/apps/mobile/src/views/AccountSettings/index.js +++ b/apps/mobile/src/views/AccountSettings/index.js @@ -50,7 +50,7 @@ export const AccountSettings = ({navigation}) => { return ( { // STATE const [colors, setColors] = useState(COLOR_SCHEME); - const [keyboardHeight, setKeyboardHeight] = useState(0); const [dialog, setDialog] = useState(false); const [resize, setResize] = useState(false); - const [sidebar, setSidebar] = useState('30%'); const [isOpen, setOpen] = useState(false); const [hide, setHide] = useState(true); + const [sidebar, setSidebar] = useState(DDS.isTab ? true : false); // VARIABLES let updateInterval = null; @@ -69,25 +69,23 @@ const Editor = ({navigation}) => { let keyboardDidHideListener = null; let setMenuRef; const forceUpdate = useForceUpdate(); - + const {userLoggedIn, logInUser} = useAppContext(); // FUNCTIONS const _keyboardDidShow = e => { - LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); - setKeyboardHeight(e.endCoordinates.height); if (!isOpen) { - setHide(true); + setTimeout(() => { + setHide(true); + }, 300); } }; const post = value => EditorWebView.postMessage(value); const _keyboardDidHide = () => { - LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); - setKeyboardHeight(0); setTimeout(() => { setHide(false); - }, 2000); + }, 10000); }; const onChange = data => { @@ -125,6 +123,11 @@ const Editor = ({navigation}) => { if (content && content.delta) { post(JSON.stringify(content.delta)); } + + EditorWebView.requestFocus(); + setTimeout(() => { + post(null); + }, 500); }; const onTitleTextChange = value => { title = value; @@ -148,15 +151,13 @@ const Editor = ({navigation}) => { alignSelf: 'center', marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.04, }}> - { setDialog(true); }} - transition={['width', 'height']} - duration={250} style={{ - width: resize ? 35 : 40, - height: resize ? 35 : 40, + width: 40, + height: 40, }}> { }} name="chevron-left" color={colors.icon} - size={resize ? SIZE.xl : SIZE.xxl} + size={SIZE.xl} /> - + { style={{ width: '80%', fontFamily: WEIGHT.bold, - fontSize: SIZE.xxl, + fontSize: SIZE.xl, color: colors.pri, - maxWidth: '90%', + maxWidth: '80%', paddingVertical: 0, }} onChangeText={onTitleTextChange} onSubmitEditing={saveNote} /> - { - setOpen(true); + DDS.isTab ? setSidebar(!sidebar) : setOpen(!isOpen); }} style={{ - width: resize ? 35 : 40, - height: resize ? 35 : 40, + width: 40, + height: 40, justifyContent: 'center', - alignItems: 'center', paddingTop: 3, }}> - + { // EFFECTS useEffect(() => { + console.log(userLoggedIn); let handleBack = BackHandler.addEventListener( 'hardwareBackPress', handleBackEvent, @@ -320,7 +319,7 @@ const Editor = ({navigation}) => { SideMenuEvent.close(); SideMenuEvent.disable(); return () => { - Platform.isPad ? SideMenuEvent.open() : null; + DDS.isTab ? SideMenuEvent.open() : null; SideMenuEvent.enable(); }; @@ -348,7 +347,46 @@ const Editor = ({navigation}) => { }, 1000); }, []); - return ( + return DDS.isTab ? ( + + + { + setDialog(false); + }} + positivePress={() => { + navigation.goBack(); + setDialog(false); + }} + /> + {_renderEditor()} + + + + + + ) : ( { openMenuOffset={w / 1.2} menuPosition="right" onChange={args => { - setOpen(args); + setTimeout(() => { + setOpen(args); + }, 300); }} menu={ { }> { return ( { const [hideHeader, setHideHeader] = useState(false); const [buttonHide, setButtonHide] = useState(false); const [margin, setMargin] = useState(190); + const [numColumns, setNumColumns] = useState(1); const forceUpdate = useForceUpdate(); const params = navigation.state.params; let offsetY = 0; @@ -87,7 +88,7 @@ export const Folders = ({navigation}) => { return ( { }}> { }} ListHeaderComponent={ + marginTop: margin + 20, + flexDirection: 'row', + justifyContent: 'space-between', + width: + numColumns === 2 + ? DDS.isTab + ? w * 0.7 * 0.95 + : w * 0.95 + : w * 0.95, + + alignSelf: 'center', + marginLeft: + numColumns === 2 ? (DDS.isTab ? w * 0.7 * 0.025 : 0) : 0, + paddingHorizontal: ph + 5, + }}> + + + + + + + { + setNumColumns(numColumns === 1 ? 2 : 1); + }} + style={{ + justifyContent: 'center', + alignItems: 'center', + }}> + + + + } + numColumns={numColumns} + key={numColumns} + columnWrapperStyle={ + numColumns === 1 + ? null + : { + width: + notebooks.length === 1 + ? DDS.isTab + ? '95%' + : '90%' + : DDS.isTab + ? '45%' + : '42.5%', + } + } + contentContainerStyle={{ + width: + numColumns === 2 + ? DDS.isTab + ? '100%' + : null + : DDS.isTab + ? '95%' + : '90%', + alignItems: numColumns === 2 ? 'flex-start' : null, + alignSelf: 'center', + }} + ListFooterComponent={ + + + - End - + + } data={notebooks} keyExtractor={(item, index) => item.dateCreated.toString()} @@ -180,6 +266,7 @@ export const Folders = ({navigation}) => { isMove={params.isMove} noteToMove={params.note} item={item} + numColumns={numColumns} refresh={() => setNotebooks(db.getNotebooks())} index={index} colors={colors} @@ -199,18 +286,18 @@ export const Folders = ({navigation}) => { paddingVertical: pv + 5, flexDirection: 'row', - justifyContent: 'space-between', + justifyContent: 'flex-start', alignItems: 'center', marginBottom: 15, backgroundColor: colors.accent, }}> + - {' '} Create a new notebook diff --git a/apps/mobile/src/views/ForgotPassword/index.js b/apps/mobile/src/views/ForgotPassword/index.js index f53f2c0f4..3291f8d79 100644 --- a/apps/mobile/src/views/ForgotPassword/index.js +++ b/apps/mobile/src/views/ForgotPassword/index.js @@ -24,6 +24,7 @@ import { clearThemeUpdateListener, } from '../../common/common'; import Icon from 'react-native-vector-icons/Ionicons'; +import {DDS} from '../../../App'; import {Reminder} from '../../components/Reminder'; import {ListItem} from '../../components/ListItem'; import {getElevation} from '../../utils/utils'; @@ -95,9 +96,9 @@ const renderForgotPassword = colors => { return ( diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index bc790c1bf..2d56eea87 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -31,6 +31,8 @@ import NavigationService from '../../services/NavigationService'; import {useForceUpdate} from '../ListsEditor'; import * as Animatable from 'react-native-animatable'; import {useNavigationEvents, useIsFocused} from 'react-navigation-hooks'; +import {useAppContext} from '../../provider/useAppContext'; +import {DDS} from '../../../App'; export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( SafeAreaView, ); @@ -48,6 +50,7 @@ export const Home = ({navigation}) => { const [keyword, setKeyword] = useState(''); const forceUpdate = useForceUpdate(); const isFocused = useIsFocused(); + const {userLoggedIn, logInUser} = useAppContext(); // Variables let offsetY = 0; let countUp = 1; @@ -59,7 +62,14 @@ export const Home = ({navigation}) => { let allNotes = []; // Effects + useEffect(() => { + console.log('deviceType', DDS.isTab); + console.log(userLoggedIn); + }, [userLoggedIn]); + useEffect(() => { + logInUser(true); + if (!isFocused) return; fetchNotes(); }, [isFocused]); @@ -165,30 +175,10 @@ export const Home = ({navigation}) => { // Render - return Platform.isPad ? ( - - -
- - { - setHidden(false); - setText(''); - }} - /> - - - - - ) : ( + return ( { /> { { if (buttonHide) return; if (y < 30) setHideHeader(false); @@ -276,7 +267,7 @@ export const Home = ({navigation}) => { }} activeOpacity={opacity} style={{ - width: '90%', + width: DDS.isTab ? '95%' : '90%', alignSelf: 'center', borderRadius: br, backgroundColor: colors.accent, @@ -286,21 +277,21 @@ export const Home = ({navigation}) => { }}> + - {' '}Add a new note @@ -313,6 +304,11 @@ export const Home = ({navigation}) => { Home.navigationOptions = { header: null, + headerStyle: { + backgroundColor: 'transparent', + borderBottomWidth: 0, + height: 0, + }, }; export default Home; diff --git a/apps/mobile/src/views/Lists/index.js b/apps/mobile/src/views/Lists/index.js index b61ab52e5..f3be8b65f 100644 --- a/apps/mobile/src/views/Lists/index.js +++ b/apps/mobile/src/views/Lists/index.js @@ -43,13 +43,13 @@ export const Lists = ({navigation}) => { }}> Lists - + diff --git a/apps/mobile/src/views/ListsEditor/index.js b/apps/mobile/src/views/ListsEditor/index.js index 41fe3d9d0..967efbc55 100644 --- a/apps/mobile/src/views/ListsEditor/index.js +++ b/apps/mobile/src/views/ListsEditor/index.js @@ -77,7 +77,7 @@ const ListsEditor = ({navigation}) => { placeholder="Untitled List" placeholderTextColor={colors.icon} /> - + { const [colors, setColors] = useState(COLOR_SCHEME); const forceUpdate = useForceUpdate(); @@ -102,9 +102,9 @@ const renderLogin = colors => { return ( @@ -210,7 +210,7 @@ const renderLogin = colors => { { - const [colors, setColors] = useState(COLOR_SCHEME); - const [addNotebook, setAddNotebook] = useState(false); - - return ( - - setAddNotebook(false)} - /> -
- { - setAddNotebook(true); - }} - style={{ - borderWidth: 1, - borderRadius: 5, - width: '90%', - marginHorizontal: '5%', - paddingHorizontal: ph, - borderColor: colors.nav, - paddingVertical: pv + 5, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 15, - backgroundColor: colors.accent, - }}> - - Create a new notebook - - - - } - renderItem={({item, index}) => ( - - )} - /> - - ); -}; - -Move.navigationOptions = { - header: null, -}; - -export default Move; diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index 51d9105fc..43393fd11 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -36,6 +36,7 @@ import {AddTopicDialog} from '../../components/AddTopicDialog'; import {AnimatedSafeAreaView} from '../Home'; import * as Animatable from 'react-native-animatable'; import {NavigationEvents} from 'react-navigation'; +import {DDS} from '../../../App'; const w = Dimensions.get('window').width; const h = Dimensions.get('window').height; const AnimatedTouchableOpacity = Animatable.createAnimatableComponent( @@ -48,6 +49,7 @@ export const Notebook = ({navigation}) => { const [hideHeader, setHideHeader] = useState(false); const [margin, setMargin] = useState(190); const [buttonHide, setButtonHide] = useState(false); + const [numColumns, setNumColumns] = useState(1); const [addTopic, setAddTopic] = useState(false); const forceUpdate = useForceUpdate(); // Variables @@ -90,7 +92,7 @@ export const Notebook = ({navigation}) => { return ( { /> { )} } + ListHeaderComponent={ + + + + + + + + { + setNumColumns(numColumns === 1 ? 2 : 1); + }} + style={{ + justifyContent: 'center', + alignItems: 'center', + }}> + + + + } + numColumns={numColumns} + key={numColumns} + columnWrapperStyle={ + numColumns === 1 + ? null + : { + width: + params.notebook.topics.length === 1 + ? DDS.isTab + ? '95%' + : '90%' + : DDS.isTab + ? '45%' + : '42.5%', + } + } + contentContainerStyle={{ + width: + numColumns === 2 + ? DDS.isTab + ? '100%' + : null + : DDS.isTab + ? '95%' + : '90%', + alignItems: numColumns === 2 ? 'flex-start' : null, + alignSelf: 'center', + }} + ListFooterComponent={ + + + - End - + + + } renderItem={({item, index}) => ( { paddingHorizontal: ph, paddingVertical: pv + 5, flexDirection: 'row', - justifyContent: 'space-between', + justifyContent: 'flex-start', alignItems: 'center', marginBottom: 15, backgroundColor: colors.accent, }}> + - {' '}Add a new topic diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js index 1e412881e..e7f56c954 100644 --- a/apps/mobile/src/views/Notes/index.js +++ b/apps/mobile/src/views/Notes/index.js @@ -79,7 +79,7 @@ export const Notes = ({navigation}) => { return ( { }}> { }}> Set a Reminder - + { }}> Reminders - + diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 35feb80cc..b0365fd20 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -55,7 +55,7 @@ export const Settings = ({navigation}) => { return ( { const [colors, setColors] = useState(COLOR_SCHEME); const forceUpdate = useForceUpdate(); @@ -95,9 +95,9 @@ const renderSignup = colors => { return ( @@ -184,7 +184,7 @@ const renderSignup = colors => { {
{ width: '90%', marginHorizontal: '5%', paddingHorizontal: ph, - paddingVertical: pv + 5, flexDirection: 'row', - justifyContent: 'space-between', + justifyContent: 'flex-start', alignItems: 'center', - marginBottom: 15, + marginBottom: 20, backgroundColor: colors.accent, }}> + - {' '}Clear all Trash