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

update

Browse Source
This commit is contained in:
ammarahm-ed
2019-12-14 16:00:16 +05:00
parent 58071b3605
commit af5cb4ff03
43 changed files with 1182 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
apps/mobile/App.js
View File

@@ -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,12 +140,13 @@ const App = () => {
db.init().then(() => {
setIsInitialized(true);
});
});
}, []);
if (!isIntialized) {
return <View />;
}
return (
<AppProvider>
<View
style={{
width: '100%',
@@ -175,7 +154,7 @@ const App = () => {
flexDirection: 'row',
backgroundColor: colors.bg,
}}>
{Platform.isPad ? (
{DDS.isTab ? (
<>
<Animatable.View
transition="width"
@@ -184,15 +163,16 @@ const App = () => {
width: sidebar,
}}>
<Menu
hide={buttonHide}
colors={colors}
close={() => {
setSidebar('0%');
//setSidebar('0%');
}}
/>{' '}
: undefined
/>
</Animatable.View>
<AppContainer
style={{
width: Platform.isPad ? '70%' : '100%',
width: DDS.isTab ? '70%' : '100%',
height: '100%',
}}
ref={navigatorRef => {
@@ -208,8 +188,17 @@ const App = () => {
contentContainerStyle={{
opacity: 0,
}}
animationFunction={(prop, value) =>
Animated.spring(prop, {
toValue: value,
friction: 8,
useNativeDriver: true,
})
}
onChange={args => {
setTimeout(() => {
setOpen(args);
}, 300);
}}
menu={
<Menu
@@ -221,7 +210,7 @@ const App = () => {
openMenuOffset={w / 1.3}>
<AppContainer
style={{
width: Platform.isPad ? '70%' : '100%',
width: DDS.isTab ? '70%' : '100%',
height: '100%',
}}
ref={navigatorRef => {
@@ -280,6 +269,7 @@ const App = () => {
<Toast />
</View>
</AppProvider>
);
};

BIN
apps/mobile/android/app/src/main/assets/fonts/NotoSans.ttf Executable file
View File

Binary file not shown.

BIN
apps/mobile/android/app/src/main/assets/fonts/NotoSerif-Bold.ttf Executable file
View File

Binary file not shown.

BIN
apps/mobile/android/app/src/main/assets/fonts/NotoSerif.ttf Executable file
View File

Binary file not shown.

2
apps/mobile/android/app/src/main/assets/texteditor.html
View File

@@ -990,8 +990,10 @@
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);

12
apps/mobile/ios/Notes.xcodeproj/project.pbxproj
View File

@@ -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 = "<group>"; };
655394C423888EBE008A1476 /* Quicksand-Light.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "Quicksand-Light.ttf"; sourceTree = "<group>"; };
655E772F2380917B0049D452 /* Ionicons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = Ionicons.ttf; sourceTree = "<group>"; };
656C396923A41CA20060E3AB /* NotoSerif-Bold.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Bold.ttf"; sourceTree = "<group>"; };
656C396A23A41CA20060E3AB /* NotoSans-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSans-Regular.ttf"; sourceTree = "<group>"; };
656C396B23A41CA20060E3AB /* NotoSerif-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "NotoSerif-Regular.ttf"; sourceTree = "<group>"; };
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 = "<group>"; };
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 = "<group>"; };
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 */,

3
apps/mobile/ios/Notes/Info.plist
View File

@@ -41,6 +41,9 @@
<string></string>
<key>UIAppFonts</key>
<array>
<string>NotoSerif-Regular.ttf</string>
<string>NotoSerif-Bold.ttf</string>
<string>NotoSans-Regular.ttf</string>
<string>Feather.ttf</string>
<string>Quicksand-SemiBold.ttf</string>
<string>Quicksand-Medium.ttf</string>

55
apps/mobile/src/common/common.js
View File

@@ -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',
};

19
apps/mobile/src/components/AddNotebookDialog/index.js
View File

@@ -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 = [])}>
<View
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
style={{
width: '100%',
height: '100%',
@@ -134,7 +136,7 @@ export const AddNotebookDialog = ({visible, close}) => {
<View
style={{
...getElevation(5),
width: '80%',
width: DDS.isTab ? '50%' : '80%',
maxHeight: 350,
borderRadius: 5,
@@ -152,10 +154,9 @@ export const AddNotebookDialog = ({visible, close}) => {
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.semibold,
marginLeft: 10,
fontSize: SIZE.lg,
marginTop: -5,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
}}>
New Notebook
</Text>
@@ -184,7 +185,7 @@ export const AddNotebookDialog = ({visible, close}) => {
<Text
style={{
fontSize: SIZE.sm,
fontFamily: WEIGHT.semibold,
fontFamily: WEIGHT.bold,
color: colors.pri,
}}>
Topics:
@@ -276,7 +277,7 @@ export const AddNotebookDialog = ({visible, close}) => {
</TouchableOpacity>
</View>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
);
};

7
apps/mobile/src/components/AddTopicDialog/index.js
View File

@@ -85,10 +85,9 @@ export const AddTopicDialog = ({
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.semibold,
marginLeft: 10,
fontSize: SIZE.lg,
marginTop: -5,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
}}>
{toEdit ? 'Edit Topic' : 'Add New Topic'}
</Text>

9
apps/mobile/src/components/Dialog/index.js
View File

@@ -65,10 +65,9 @@ export const Dialog = ({
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.semibold,
marginLeft: 10,
fontSize: SIZE.lg,
marginTop: -5,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md + 2,
}}>
{title}
</Text>
@@ -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,
}}>

51
apps/mobile/src/components/EditorMenu/index.js
View File

@@ -9,6 +9,7 @@ import {
FlatList,
DeviceEventEmitter,
ActivityIndicator,
KeyboardAvoidingView,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
@@ -59,12 +60,15 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
return (
<AnimatedSafeAreaView
transition={['backgroundColor', 'opacity']}
duration={1000}
duration={300}
style={{
height: '100%',
opacity: hide ? 0 : 1,
backgroundColor: colors.night ? colors.navbg : colors.navbg,
}}>
<KeyboardAvoidingView
style={{height: '100%'}}
behavior={Platform.OS === 'ios' ? 'padding' : null}>
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
@@ -166,12 +170,12 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: '5%',
paddingVertical: 10,
paddingVertical: pv + 5,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'flex-end',
alignItems: 'center',
}}>
<Icon
style={{
@@ -183,8 +187,8 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
fontFamily: WEIGHT.semibold,
fontSize: SIZE.sm - 2,
color: colors.pri,
}}>
{item.name}
@@ -238,7 +242,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-end',
alignItems: 'center',
}}>
<Icon
style={{
@@ -250,7 +254,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontFamily: WEIGHT.semibold,
fontSize: SIZE.sm - 1,
color: colors.pri,
}}>
@@ -295,6 +299,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
style={{
backgroundColor: 'transparent',
minWidth: 100,
fontFamily: WEIGHT.semibold,
color: colors.pri,
paddingHorizontal: 5,
paddingVertical: 2.5,
@@ -302,8 +307,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
}}
ref={ref => (tagsInputRef = ref)}
placeholderTextColor={colors.icon}
placeholder="Add a tag"
defaultValue="#"
placeholder="#hashtag"
onChangeText={value => {
tagToAdd = value;
if (tagToAdd.length > 0) backPressCount = 0;
@@ -377,7 +381,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-end',
alignItems: 'center',
}}>
<Icon
style={{
@@ -389,8 +393,8 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
fontFamily: WEIGHT.semibold,
fontSize: SIZE.sm - 2,
color: colors.pri,
}}>
Add Color
@@ -406,8 +410,15 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
marginBottom: 15,
marginTop: 10,
}}>
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
item => (
{[
'red',
'yellow',
'green',
'blue',
'purple',
'orange',
'gray',
].map(item => (
<TouchableOpacity
onPress={() => {
setSelectedColor(item);
@@ -438,16 +449,13 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
) : null}
</View>
</TouchableOpacity>
),
)}
))}
</ScrollView>
</View>
<View
style={{
paddingHorizontal: '5%',
borderTopColor: colors.icon,
borderTopWidth: 1,
paddingVertical: pv,
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
@@ -455,8 +463,8 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
<Text
style={{
color: colors.icon,
fontFamily: WEIGHT.medium,
fontSize: SIZE.xs + 2,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
Last Synced: 5 secs ago.
</Text>
@@ -464,6 +472,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
<ActivityIndicator color={colors.accent} />
</View>
</ScrollView>
</KeyboardAvoidingView>
</AnimatedSafeAreaView>
);
};

62
apps/mobile/src/components/Menu/index.js
View File

@@ -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 (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
height: '100%',
opacity: hide ? 0 : 1,
@@ -65,6 +66,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
}}
/>
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
@@ -151,14 +153,14 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
alignItems: 'center',
paddingHorizontal: '5%',
paddingVertical: 15,
paddingVertical: pv + 5,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'flex-end',
alignItems: 'center',
}}>
<Icon
style={{
@@ -170,8 +172,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
color: colors.pri,
}}>
{item.name}
@@ -208,7 +210,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-end',
alignItems: 'center',
}}>
<Icon
style={{
@@ -220,21 +222,13 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
color: colors.pri,
}}>
Tags
</Text>
</View>
<Text
style={{
fontSize: SIZE.xs,
fontFamily: WEIGHT.regular,
color: colors.pri,
}}>
View All
</Text>
</TouchableOpacity>
<ScrollView
@@ -264,12 +258,13 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
margin: 5,
padding: 7,
paddingLeft: 3.5,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm - 2,
fontSize: SIZE.xs,
color: colors.icon,
}}>
#{item}
@@ -296,8 +291,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
}}>
<View
style={{
width: 25,
height: 25,
width: 35,
height: 35,
backgroundColor: item,
borderRadius: 100,
}}
@@ -359,22 +354,25 @@ export const Menu = ({close = () => {}, 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,
}}>
<Icon name="log-in" color={colors.accent} size={SIZE.lg} />
<Text
style={{
fontFamily: WEIGHT.medium,
color: 'white',
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
color: colors.accent,
fontSize: SIZE.md,
}}>
Login to Sync
{' '}Login
</Text>
</TouchableOpacity>

118
apps/mobile/src/components/NoteItem/index.js
View File

@@ -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 (
<View
style={{
marginHorizontal: w * 0.05,
marginHorizontal: '5%',
paddingVertical: pv,
borderRadius: br,
justifyContent: 'center',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: ph,
width: Platform.isPad ? '95%' : '90%',
width: '100%',
alignSelf: 'center',
borderBottomWidth: 1,
borderBottomColor: colors.nav,
@@ -106,8 +86,8 @@ const NoteItem = props => {
});
}}
style={{
paddingLeft: ph,
width: '100%',
paddingLeft: 0,
width: '95%',
}}>
<>
<Text
@@ -116,7 +96,7 @@ const NoteItem = props => {
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%',
}}>
<Text
numberOfLines={2}
numberOfLines={props.numColumns === 2 ? 3 : null}
style={{
fontSize: SIZE.xs + 2,
color: colors.icon,
fontSize: SIZE.xs + 1,
lineHeight: SIZE.sm + 2,
color: colors.pri,
fontFamily: WEIGHT.regular,
width: '100%',
maxWidth: '100%',
paddingRight: ph,
height: props.numColumns === 2 ? SIZE.sm * 3.5 : null,
}}>
{item.headline}
</Text>
@@ -149,20 +131,20 @@ const NoteItem = props => {
<Icon
style={{width: 30}}
name="lock"
size={SIZE.sm}
size={SIZE.xs}
color={colors.icon}
/>
<Icon
style={{width: 30}}
name="star"
size={SIZE.sm}
size={SIZE.xs}
color={colors.icon}
/>
<Text
style={{
color: colors.accent,
fontSize: SIZE.xxs + 2,
fontSize: SIZE.xxs,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>
@@ -175,7 +157,7 @@ const NoteItem = props => {
<View
style={{
width: w * 0.05,
width: DDS.isTab ? w * 0.7 * 0.05 : w * 0.05,
justifyContent: 'center',
minHeight: 70,
alignItems: 'center',
@@ -201,16 +183,22 @@ const NoteItem = props => {
</TouchableOpacity>
}>
<MenuItem
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
fontSize: SIZE.xs,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
<Icon name="star" size={SIZE.xs} color={colors.icon} />
{' '}Pin
</MenuItem>
<MenuItem
style={{
height: 35,
}}
onPress={() => {
hideMenu();
ToastEvent.show(
@@ -225,19 +213,23 @@ const NoteItem = props => {
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
fontSize: SIZE.xs,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
<Icon name="star" size={SIZE.xs} color={colors.icon} />
{' '}Favorite
</MenuItem>
<MenuItem
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
fontSize: SIZE.xs,
}}>
<Icon name="share" size={SIZE.sm} color={colors.icon} />
<Icon name="share" size={SIZE.xs} color={colors.icon} />
{' '}Share
</MenuItem>
@@ -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,
}}>
<Icon name="arrow-right" size={SIZE.sm} color={colors.icon} />
<Icon name="arrow-right" size={SIZE.xs} color={colors.icon} />
{' '}Move
</MenuItem>
<MenuItem
@@ -265,12 +261,16 @@ const NoteItem = props => {
show = 'vault';
hideMenu(true);
}}
style={{
height: 35,
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
fontSize: SIZE.xs,
}}>
<Icon name="lock" size={SIZE.sm} color={colors.icon} />
<Icon name="lock" size={SIZE.xs} color={colors.icon} />
{' '}Lock
</MenuItem>
@@ -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,
}}>
<Icon name="trash" size={SIZE.sm} color={colors.icon} />
<Icon name="trash" size={SIZE.xs} color={colors.icon} />
{' '}Delete
</MenuItem>
<MenuDivider />
@@ -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
</MenuItem>
@@ -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)}

41
apps/mobile/src/components/NotebookItem/index.js
View File

@@ -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 (
<View
style={{
paddingHorizontal: ph,
marginHorizontal: '5%',
paddingVertical: pv,
borderRadius: br,
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: ph,
width: '100%',
alignSelf: 'center',
borderBottomWidth: 1,
borderBottomColor: colors.nav,
paddingVertical: pv,
}}>
<Dialog
visible={isVisible}
@@ -103,12 +118,14 @@ export const NotebookItem = ({
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}}>
<TouchableOpacity onPress={navigate}>
<Text
numberOfLines={1}
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.md,
fontSize: SIZE.sm,
color: colors.pri,
maxWidth: '100%',
}}>
@@ -116,11 +133,15 @@ export const NotebookItem = ({
</Text>
{isTopic ? null : (
<Text
numberOfLines={numColumns === 2 ? 3 : 2}
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs + 1,
color: colors.pri,
fontSize: SIZE.xs,
lineHeight: SIZE.sm,
color: colors.icon,
maxWidth: '100%',
paddingVertical: 5,
height: numColumns === 2 ? SIZE.sm * 3.5 : null,
}}>
{item.description}
</Text>
@@ -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 = ({
<Icon
style={{width: 30}}
name="lock"
size={SIZE.sm}
size={SIZE.xs}
color={colors.icon}
/>
<Icon
style={{width: 30}}
name="star"
size={SIZE.sm}
size={SIZE.xs}
color={colors.icon}
/>
<Text
style={{
color: colors.accent,
fontSize: SIZE.xxs + 1,
fontSize: SIZE.xxs,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>

81
apps/mobile/src/components/NotesList/index.js
View File

@@ -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 (
<FlatList
data={notes}
@@ -40,7 +41,23 @@ export const NotesList = ({
onScroll(y);
}}
ListHeaderComponent={
<>
<View
style={{
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,
}}>
<View>
{isSearch ? (
<Text
transition="marginTop"
@@ -51,7 +68,7 @@ export const NotesList = ({
marginTop: margin,
fontFamily: WEIGHT.medium,
color: colors.pri,
paddingHorizontal: Platform.isPad ? '2.5%' : '5%',
paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
maxWidth: '100%',
}}>
Search Results for{' '}
@@ -59,14 +76,54 @@ export const NotesList = ({
style={{
color: colors.accent,
}}>
{keyword}{' '}
{keyword}
</Text>
</Text>
) : (
<View style={{marginTop: margin}}></View>
undefined
)}
</>
</View>
<TouchableOpacity
onPress={() => {
setNumColumns(numColumns === 1 ? 2 : 1);
}}
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name="list" size={SIZE.xl} color={colors.icon} />
</TouchableOpacity>
</View>
}
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={
<View
style={{
@@ -84,7 +141,9 @@ export const NotesList = ({
</Text>
</View>
}
renderItem={({item, index}) => <NoteItem item={item} index={index} />}
renderItem={({item, index}) => (
<NoteItem item={item} numColumns={numColumns} index={index} />
)}
/>
);
};

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

@@ -97,7 +97,7 @@ export const Reminder = props => {
<Text
style={{
color: props.invert ? colors.accent : 'white',
fontSize: SIZE.xxl,
fontSize: SIZE.xl,
fontFamily: WEIGHT.light,
}}>
<Text

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

@@ -13,7 +13,7 @@ import {
import Icon from 'react-native-vector-icons/Ionicons';
import {getElevation} from '../../utils/utils';
import * as Animatable from 'react-native-animatable';
import {DDS} from '../../../App';
export const Search = 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}
/>
<Icon
style={{paddingRight: Platform.isPad ? '1.25%' : '2.5%'}}
style={{paddingRight: DDS.isTab ? '1.25%' : '2.5%'}}
onPress={() => {
props.clear();
props.value.length > 0 ? props.clearSearch() : null;

30
apps/mobile/src/components/header/index.js
View File

@@ -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 (
<Animatable.View
onLayout={e => {
@@ -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 = ({
<Icon
style={{
marginLeft: -10,
marginTop: 5,
}}
color={colors.pri}
name={'chevron-left'}
size={hide ? SIZE.xl : SIZE.xxl}
size={SIZE.xl}
/>
</TouchableOpacity>
) : (
@@ -73,22 +74,21 @@ export const Header = ({
<TouchableOpacity
hitSlop={{top: 20, bottom: 20, left: 50, right: 40}}
onPress={() => {
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,
}}>
<Icon
style={{
marginTop: 6,
}}
color={colors.pri}
name={'menu'}
size={hide ? SIZE.xl : SIZE.xxl - 2}
/>
<Icon color={colors.pri} name={'menu'} size={SIZE.xl} />
</TouchableOpacity>
) : (
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,
}}>

20
apps/mobile/src/provider/index.js Normal file
View File

@@ -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 (
<AppContext.Provider value={[state, dispatch]}>
{children}
</AppContext.Provider>
);
};
export {AppContext, AppProvider};

23
apps/mobile/src/provider/useAppContext.js Normal file
View File

@@ -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};

10
apps/mobile/src/services/NavigationService.js
View File

@@ -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 => {

62
apps/mobile/src/utils/deviceDetection.js Normal file
View File

@@ -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;
}
}
}

2
apps/mobile/src/views/AccountSettings/index.js
View File

@@ -50,7 +50,7 @@ export const AccountSettings = ({navigation}) => {
return (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,

102
apps/mobile/src/views/Editor/index.js
View File

@@ -32,12 +32,13 @@ import {NavigationEvents} from 'react-navigation';
import {db} from '../../../App';
import {SideMenuEvent} from '../../utils/utils';
import {Dialog} from '../../components/Dialog';
import {DDS} from '../../../App';
import * as Animatable from 'react-native-animatable';
import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
import SideMenu from 'react-native-side-menu';
import {EditorMenu} from '../../components/EditorMenu';
import {AnimatedSafeAreaView} from '../Home';
import {useAppContext} from '../../provider/useAppContext';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
@@ -56,12 +57,11 @@ const Editor = ({navigation}) => {
// 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) {
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,
}}>
<AnimatedTouchableOpacity
<TouchableOpacity
onPress={() => {
setDialog(true);
}}
transition={['width', 'height']}
duration={250}
style={{
width: resize ? 35 : 40,
height: resize ? 35 : 40,
width: 40,
height: 40,
}}>
<Icon
style={{
@@ -165,9 +166,9 @@ const Editor = ({navigation}) => {
}}
name="chevron-left"
color={colors.icon}
size={resize ? SIZE.xl : SIZE.xxl}
size={SIZE.xl}
/>
</AnimatedTouchableOpacity>
</TouchableOpacity>
<TextInput
placeholder="Untitled Note"
@@ -177,35 +178,32 @@ const Editor = ({navigation}) => {
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}
/>
<AnimatedTouchableOpacity
transition={['width', 'height']}
duration={250}
<TouchableOpacity
onPress={() => {
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,
}}>
<Icon
name="menu"
name={sidebar || isOpen ? 'x' : 'menu'}
color={colors.icon}
size={resize ? SIZE.xl : SIZE.xxl}
size={SIZE.xl}
/>
</AnimatedTouchableOpacity>
</TouchableOpacity>
</View>
<WebView
@@ -268,6 +266,7 @@ const Editor = ({navigation}) => {
// 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 ? (
<View
style={{
flexDirection: 'row',
width: '100%',
}}>
<AnimatedSafeAreaView
transition={['backgroundColor', 'width']}
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,
width: sidebar ? '70%' : '100%',
}}>
<Dialog
title="Close Editor"
visible={dialog}
icon="x"
paragraph="Are you sure you want to close editor?"
close={() => {
setDialog(false);
}}
positivePress={() => {
navigation.goBack();
setDialog(false);
}}
/>
{_renderEditor()}
</AnimatedSafeAreaView>
<Animatable.View
transition={['width', 'opacity']}
duration={300}
style={{
width: sidebar ? '30%' : '0%',
opacity: sidebar ? 1 : 0,
}}>
<EditorMenu />
</Animatable.View>
</View>
) : (
<SideMenu
isOpen={isOpen}
bounceBackOnOverdraw={false}
@@ -358,7 +396,9 @@ const Editor = ({navigation}) => {
openMenuOffset={w / 1.2}
menuPosition="right"
onChange={args => {
setTimeout(() => {
setOpen(args);
}, 300);
}}
menu={
<EditorMenu
@@ -370,7 +410,7 @@ const Editor = ({navigation}) => {
}>
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{height: '100%', backgroundColor: colors.bg}}>
<Dialog
title="Close Editor"

BIN
apps/mobile/src/views/Editor/web/fonts/NotoSans-Regular.ttf Executable file
View File

Binary file not shown.

BIN
apps/mobile/src/views/Editor/web/fonts/NotoSerif-Bold.ttf Executable file
View File

Binary file not shown.

BIN
apps/mobile/src/views/Editor/web/fonts/NotoSerif-Regular.ttf Executable file
View File

Binary file not shown.

2
apps/mobile/src/views/Favorites/index.js
View File

@@ -49,7 +49,7 @@ export const Favorites = ({navigation}) => {
return (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,

101
apps/mobile/src/views/Folders/index.js
View File

@@ -33,7 +33,7 @@ import {useForceUpdate} from '../ListsEditor';
import {AddNotebookDialog} from '../../components/AddNotebookDialog';
import {NotebookItem} from '../../components/NotebookItem';
import {Search} from '../../components/SearchInput';
import {db} from '../../../App';
import {db, DDS} from '../../../App';
import {Header} from '../../components/header';
import {AnimatedSafeAreaView} from '../Home';
import * as Animatable from 'react-native-animatable';
@@ -45,6 +45,7 @@ export const Folders = ({navigation}) => {
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 (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,
@@ -112,7 +113,7 @@ export const Folders = ({navigation}) => {
}}>
<Animatable.View
transition="backgroundColor"
duration={1000}
duration={300}
style={{
position: 'absolute',
backgroundColor: colors.bg,
@@ -165,12 +166,97 @@ export const Folders = ({navigation}) => {
}}
ListHeaderComponent={
<View
style={{
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,
}}>
<View>
<Text
transition="marginTop"
delay={200}
duration={200}
style={{
marginTop: margin,
fontSize: SIZE.lg,
fontFamily: WEIGHT.medium,
color: colors.pri,
paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
maxWidth: '100%',
}}>
<Text
style={{
color: colors.accent,
}}></Text>
</Text>
</View>
<TouchableOpacity
onPress={() => {
setNumColumns(numColumns === 1 ? 2 : 1);
}}
/>
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name="list" size={SIZE.xl} color={colors.icon} />
</TouchableOpacity>
</View>
}
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={
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
}
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,
}}>
<Icon name="plus" color="white" size={SIZE.lg} />
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.semibold,
color: 'white',
}}>
<Icon name="plus" color="white" size={SIZE.lg} />
{' '} Create a new notebook
</Text>
</TouchableOpacity>

5
apps/mobile/src/views/ForgotPassword/index.js
View File

@@ -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 (
<View
style={{
justifyContent: Platform.isPad ? 'center' : 'space-between',
justifyContent: DDS.isTab ? 'center' : 'space-between',
height: '80%',
width: Platform.isPad ? '60%' : '100%',
width: DDS.isTab ? '60%' : '100%',
alignSelf: 'center',
}}>
<View>

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

@@ -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 ? (
<SafeAreaView style={[styles.container, {backgroundColor: colors.bg}]}>
<KeyboardAvoidingView style={{backgroundColor: colors.bg}}>
<Header colors={colors} heading="Home" canGoBack={false} />
<Search
onChangeText={onChangeText}
onSubmitEditing={onSubmitEditing}
onBlur={onBlur}
onFocus={onFocus}
value={text}
onClose={() => {
setHidden(false);
setText('');
}}
/>
<NotesList keyword={text} />
</KeyboardAvoidingView>
</SafeAreaView>
) : (
return (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
height: '100%',
backgroundColor: colors.night ? colors.bg : colors.bg,
@@ -204,7 +194,7 @@ export const Home = ({navigation}) => {
/>
<Animatable.View
transition="backgroundColor"
duration={1000}
duration={300}
style={{
position: 'absolute',
backgroundColor: colors.night ? colors.bg : colors.bg,
@@ -248,6 +238,7 @@ export const Home = ({navigation}) => {
<NotesList
margin={margin}
numOfColumns={DDS.isTab ? 2 : 1}
onScroll={y => {
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}) => {
}}>
<View
style={{
justifyContent: 'space-between',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
width: '100%',
padding: pv,
paddingVertical: pv + 5,
}}>
<Icon name="plus" color="white" size={SIZE.lg} />
<Text
style={{
fontSize: SIZE.md,
color: 'white',
fontFamily: WEIGHT.bold,
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
}}>
<Icon name="plus" color="white" size={SIZE.lg} />
{' '}Add a new note
</Text>
</View>
@@ -313,6 +304,11 @@ export const Home = ({navigation}) => {
Home.navigationOptions = {
header: null,
headerStyle: {
backgroundColor: 'transparent',
borderBottomWidth: 0,
height: 0,
},
};
export default Home;

4
apps/mobile/src/views/Lists/index.js
View File

@@ -43,13 +43,13 @@ export const Lists = ({navigation}) => {
}}>
<Text
style={{
fontSize: SIZE.xxl,
fontSize: SIZE.xl,
color: colors.pri,
fontFamily: WEIGHT.bold,
}}>
Lists
</Text>
<Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
<Icon name="md-more" color={colors.icon} size={SIZE.xl} />
</View>
<ListItem />

2
apps/mobile/src/views/ListsEditor/index.js
View File

@@ -77,7 +77,7 @@ const ListsEditor = ({navigation}) => {
placeholder="Untitled List"
placeholderTextColor={colors.icon}
/>
<Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
<Icon name="md-more" color={colors.icon} size={SIZE.xl} />
</View>
<TextInput

8
apps/mobile/src/views/Login/index.js
View File

@@ -31,7 +31,7 @@ import {FlatList, TextInput} from 'react-native-gesture-handler';
import {NavigationEvents} from 'react-navigation';
import {Header} from '../../components/header';
import {useForceUpdate} from '../ListsEditor';
import {DDS} from '../../../App';
export const Login = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
@@ -102,9 +102,9 @@ const renderLogin = colors => {
return (
<View
style={{
justifyContent: Platform.isPad ? 'center' : 'space-between',
justifyContent: DDS.isTab ? 'center' : 'space-between',
height: '80%',
width: Platform.isPad ? '60%' : '100%',
width: DDS.isTab ? '60%' : '100%',
alignSelf: 'center',
}}>
<View>
@@ -210,7 +210,7 @@ const renderLogin = colors => {
<View
style={{
width: '100%',
position: Platform.isPad ? 'absolute' : 'relative',
position: DDS.isTab ? 'absolute' : 'relative',
bottom: '0%',
}}>
<TouchableOpacity

112
apps/mobile/src/views/Move/index.js
View File

@@ -1,112 +0,0 @@
import React, {useEffect, useState} from 'react';
import {
ScrollView,
View,
Text,
TouchableOpacity,
Dimensions,
Image,
SafeAreaView,
Platform,
FlatList,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
import {NotebookItem} from '../../components/NotebookItem';
import {AddNotebookDialog} from '../../components/AddNotebookDialog';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Move = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const [addNotebook, setAddNotebook] = useState(false);
return (
<SafeAreaView>
<AddNotebookDialog
visible={addNotebook}
close={() => setAddNotebook(false)}
/>
<Header colors={colors} heading="Move to" canGoBack={false} />
<FlatList
style={{
width: '100%',
}}
data={[
{
name: 'Class Notes',
Qty: '8',
},
{
name: 'Notes of water tabs',
Qty: '3',
},
{
name: 'My Lists',
Qty: '3',
},
]}
ListHeaderComponent={
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
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,
}}>
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.semibold,
color: 'white',
}}>
Create a new notebook
</Text>
<Icon name="plus" color="white" size={SIZE.lg} />
</TouchableOpacity>
}
renderItem={({item, index}) => (
<NotebookItem
hideMore={true}
item={item}
index={index}
colors={colors}
/>
)}
/>
</SafeAreaView>
);
};
Move.navigationOptions = {
header: null,
};
export default Move;

104
apps/mobile/src/views/Notebook/index.js
View File

@@ -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 (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,
@@ -113,7 +115,7 @@ export const Notebook = ({navigation}) => {
/>
<Animatable.View
transition="backgroundColor"
duration={1000}
duration={300}
style={{
position: 'absolute',
backgroundColor: colors.bg,
@@ -203,6 +205,100 @@ export const Notebook = ({navigation}) => {
)}
</>
}
ListHeaderComponent={
<View
style={{
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,
}}>
<View>
<Text
transition="marginTop"
delay={200}
duration={200}
style={{
fontSize: SIZE.lg,
fontFamily: WEIGHT.medium,
color: colors.pri,
paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
maxWidth: '100%',
}}>
<Text
style={{
color: colors.accent,
}}></Text>
</Text>
</View>
<TouchableOpacity
onPress={() => {
setNumColumns(numColumns === 1 ? 2 : 1);
}}
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name="list" size={SIZE.xl} color={colors.icon} />
</TouchableOpacity>
</View>
}
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={
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
}
renderItem={({item, index}) => (
<NotebookItem
hideMore={params.hideMore}
@@ -231,18 +327,18 @@ export const Notebook = ({navigation}) => {
paddingHorizontal: ph,
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
justifyContent: 'flex-start',
alignItems: 'center',
marginBottom: 15,
backgroundColor: colors.accent,
}}>
<Icon name="plus" color="white" size={SIZE.lg} />
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.semibold,
color: 'white',
}}>
<Icon name="plus" color="white" size={SIZE.lg} />
{' '}Add a new topic
</Text>
</TouchableOpacity>

4
apps/mobile/src/views/Notes/index.js
View File

@@ -79,7 +79,7 @@ export const Notes = ({navigation}) => {
return (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
height: '100%',
backgroundColor: colors.bg,
@@ -90,7 +90,7 @@ export const Notes = ({navigation}) => {
}}>
<Animatable.View
transition="backgroundColor"
duration={1000}
duration={300}
style={{
position: 'absolute',
backgroundColor: colors.bg,

2
apps/mobile/src/views/ReminderEditor/index.js
View File

@@ -69,7 +69,7 @@ const ReminderEditor = ({navigation}) => {
}}>
Set a Reminder
</Text>
<Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
<Icon name="md-more" color={colors.icon} size={SIZE.xl} />
</View>
<Text

4
apps/mobile/src/views/Reminders/index.js
View File

@@ -42,13 +42,13 @@ export const Reminders = ({navigation}) => {
}}>
<Text
style={{
fontSize: SIZE.xxl,
fontSize: SIZE.xl,
color: colors.pri,
fontFamily: WEIGHT.bold,
}}>
Reminders
</Text>
<Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
<Icon name="md-more" color={colors.icon} size={SIZE.xl} />
</View>
<Reminder invert={true} />

2
apps/mobile/src/views/Settings/index.js
View File

@@ -55,7 +55,7 @@ export const Settings = ({navigation}) => {
return (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
duration={300}
style={{
backgroundColor: colors.bg,
height: '100%',

8
apps/mobile/src/views/Signup/index.js
View File

@@ -31,7 +31,7 @@ import {FlatList, TextInput} from 'react-native-gesture-handler';
import {NavigationEvents} from 'react-navigation';
import {Header} from '../../components/header';
import {useForceUpdate} from '../ListsEditor';
import {DDS} from '../../../App';
export const Signup = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
@@ -95,9 +95,9 @@ const renderSignup = colors => {
return (
<View
style={{
justifyContent: Platform.isPad ? 'center' : 'space-between',
justifyContent: DDS.isTab ? 'center' : 'space-between',
height: '80%',
width: Platform.isPad ? '60%' : '100%',
width: DDS.isTab ? '60%' : '100%',
alignSelf: 'center',
}}>
<View>
@@ -184,7 +184,7 @@ const renderSignup = colors => {
<View
style={{
width: '100%',
position: Platform.isPad ? 'absolute' : 'relative',
position: DDS.isTab ? 'absolute' : 'relative',
bottom: '0%',
}}>
<TouchableOpacity

11
apps/mobile/src/views/Trash/index.js
View File

@@ -51,15 +51,17 @@ export const Trash = ({navigation}) => {
<SafeAreaView
style={{
backgroundColor: colors.bg,
height: '100%',
}}>
<Header colors={colors} heading="Trash" canGoBack={false} />
<FlatList
numColumns={2}
columnWrapperStyle={{
width: '45%',
marginHorizontal: '2.5%',
}}
style={{
height: '80%',
width: '100%',
}}
data={[
{
@@ -85,21 +87,20 @@ export const Trash = ({navigation}) => {
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,
}}>
<Icon name="trash" color="white" size={SIZE.lg} />
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.semibold,
color: 'white',
}}>
<Icon name="plus" color="white" size={SIZE.lg} />
{' '}Clear all Trash
</Text>
</TouchableOpacity>