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

enhance settings UI

Browse Source
This commit is contained in:
ammarahm-ed
2020-09-12 16:06:39 +05:00
parent ee7e161ee4
commit 593bc26cf0
1 changed files with 204 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
Appearance, Appearance,
Pressable,
} from 'react-native'; } from 'react-native';
import * as Animatable from 'react-native-animatable'; import * as Animatable from 'react-native-animatable';
@@ -259,7 +260,7 @@ export const Settings = ({route, navigation}) => {
<ScrollView <ScrollView
style={{ style={{
paddingHorizontal: 12, paddingHorizontal: 0,
}}> }}>
{user ? ( {user ? (
<> <>
@@ -272,6 +273,7 @@ export const Settings = ({route, navigation}) => {
borderBottomColor: colors.nav, borderBottomColor: colors.nav,
borderBottomWidth: 0.5, borderBottomWidth: 0.5,
paddingBottom: 3, paddingBottom: 3,
paddingHorizontal: 12,
}}> }}>
Account Settings Account Settings
</Text> </Text>
@@ -366,11 +368,11 @@ export const Settings = ({route, navigation}) => {
onPress={item.func} onPress={item.func}
style={{ style={{
width: '100%', width: '100%',
height: 50,
paddingVertical: pv + 5,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 12,
}}> }}>
<Text <Text
style={{ style={{
@@ -386,77 +388,82 @@ export const Settings = ({route, navigation}) => {
</> </>
) : ( ) : (
<> <>
<PressableButton <View
color={colors.shade} style={{
selectedColor={colors.accent} paddingHorizontal: 12,
alpha={!colors.night ? -0.02 : 0.1}
opacity={0.12}
onPress={() => {
DDS.isTab
? eSendEvent(eOpenLoginDialog)
: NavigationService.navigate('Login', {
root: true,
});
}}
activeOpacity={opacity / 2}
customStyle={{
paddingVertical: pv + 5,
marginBottom: pv + 5,
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
borderRadius: 5,
paddingHorizontal: 6,
}}> }}>
<View <PressableButton
style={{ color={colors.shade}
width: 40, selectedColor={colors.accent}
backgroundColor: colors.accent, alpha={!colors.night ? -0.02 : 0.1}
height: 40, opacity={0.12}
borderRadius: 100, onPress={() => {
DDS.isTab
? eSendEvent(eOpenLoginDialog)
: NavigationService.navigate('Login', {
root: true,
});
}}
activeOpacity={opacity / 2}
customStyle={{
paddingVertical: pv + 5,
marginBottom: pv + 5,
width: '100%',
flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'flex-start',
borderRadius: 5,
paddingHorizontal: 6,
}}> }}>
<Icon size={SIZE.lg} color="white" name="account-outline" /> <View
</View>
<View
style={{
marginLeft: 10,
}}>
<Text
style={{ style={{
fontFamily: WEIGHT.regular, width: 40,
color: colors.icon, backgroundColor: colors.accent,
fontSize: SIZE.xs, height: 40,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
}}> }}>
You are not logged in <Icon size={SIZE.lg} color="white" name="account-outline" />
</Text> </View>
<Text
style={{
color: colors.accent,
}}>
Login to sync notes.
</Text>
</View>
<View <View
style={{ style={{
width: 40, marginLeft: 10,
height: 40, }}>
justifyContent: 'center', <Text
alignItems: 'center', style={{
position: 'absolute', fontFamily: WEIGHT.regular,
right: 6, color: colors.icon,
}}> fontSize: SIZE.xs,
<Icon }}>
name="chevron-right" You are not logged in
color={colors.accent} </Text>
size={SIZE.lg} <Text
/> style={{
</View> color: colors.accent,
</PressableButton> }}>
Login to sync notes.
</Text>
</View>
<View
style={{
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
right: 6,
}}>
<Icon
name="chevron-right"
color={colors.accent}
size={SIZE.lg}
/>
</View>
</PressableButton>
</View>
</> </>
)} )}
<Text <Text
@@ -465,7 +472,7 @@ export const Settings = ({route, navigation}) => {
fontFamily: WEIGHT.bold, fontFamily: WEIGHT.bold,
textAlignVertical: 'center', textAlignVertical: 'center',
color: colors.accent, color: colors.accent,
paddingHorizontal: 12,
borderBottomColor: colors.nav, borderBottomColor: colors.nav,
borderBottomWidth: 0.5, borderBottomWidth: 0.5,
paddingBottom: 3, paddingBottom: 3,
@@ -480,6 +487,7 @@ export const Settings = ({route, navigation}) => {
textAlignVertical: 'center', textAlignVertical: 'center',
color: colors.pri, color: colors.pri,
marginTop: pv + 5, marginTop: pv + 5,
paddingHorizontal: 12,
}}> }}>
Accent Color{'\n'} Accent Color{'\n'}
<Text <Text
@@ -505,6 +513,7 @@ export const Settings = ({route, navigation}) => {
alignSelf: 'center', alignSelf: 'center',
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
paddingHorizontal: 12,
}}> }}>
{[ {[
'#e6194b', '#e6194b',
@@ -555,7 +564,10 @@ export const Settings = ({route, navigation}) => {
))} ))}
</View> </View>
<TouchableOpacity <PressableButton
color={colors.bg}
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
onPress={async () => { onPress={async () => {
await setSetting( await setSetting(
settings, settings,
@@ -575,14 +587,14 @@ export const Settings = ({route, navigation}) => {
); );
} }
}} }}
activeOpacity={opacity} customStyle={{
style={{
width: '100%', width: '100%',
marginHorizontal: 0, marginHorizontal: 0,
paddingVertical: pv + 5, height: 50,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 12,
}}> }}>
<Text <Text
style={{ style={{
@@ -609,9 +621,12 @@ export const Settings = ({route, navigation}) => {
settings.useSystemTheme ? 'toggle-switch' : 'toggle-switch-off' settings.useSystemTheme ? 'toggle-switch' : 'toggle-switch-off'
} }
/> />
</TouchableOpacity> </PressableButton>
<TouchableOpacity <PressableButton
color={colors.bg}
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
onPress={() => { onPress={() => {
if (!colors.night) { if (!colors.night) {
MMKV.setStringAsync('theme', JSON.stringify({night: true})); MMKV.setStringAsync('theme', JSON.stringify({night: true}));
@@ -623,13 +638,15 @@ export const Settings = ({route, navigation}) => {
} }
}} }}
activeOpacity={opacity} activeOpacity={opacity}
style={{ customStyle={{
width: '100%', width: '100%',
marginHorizontal: 0, marginHorizontal: 0,
paddingVertical: pv + 5, height: 50,
flexDirection: 'row', flexDirection: 'row',
borderRadius: 0,
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 12,
}}> }}>
<Text <Text
style={{ style={{
@@ -652,9 +669,9 @@ export const Settings = ({route, navigation}) => {
color={colors.night ? colors.accent : colors.icon} color={colors.night ? colors.accent : colors.icon}
name={colors.night ? 'toggle-switch' : 'toggle-switch-off'} name={colors.night ? 'toggle-switch' : 'toggle-switch-off'}
/> />
</TouchableOpacity> </PressableButton>
<TouchableOpacity <View
style={{ style={{
width: '100%', width: '100%',
marginHorizontal: 0, marginHorizontal: 0,
@@ -662,6 +679,7 @@ export const Settings = ({route, navigation}) => {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 12,
}}> }}>
<Text <Text
style={{ style={{
@@ -735,10 +753,13 @@ export const Settings = ({route, navigation}) => {
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
</TouchableOpacity> </View>
{DDS.isTab ? ( {DDS.isTab ? (
<TouchableOpacity <PressableButton
color={colors.bg}
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
onPress={async () => { onPress={async () => {
await setSetting( await setSetting(
settings, settings,
@@ -746,7 +767,6 @@ export const Settings = ({route, navigation}) => {
!settings.forcePortraitOnTablet, !settings.forcePortraitOnTablet,
); );
}} }}
activeOpacity={opacity}
style={{ style={{
width: '100%', width: '100%',
marginHorizontal: 0, marginHorizontal: 0,
@@ -754,6 +774,7 @@ export const Settings = ({route, navigation}) => {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 12,
}}> }}>
<Text <Text
style={{ style={{
@@ -775,7 +796,7 @@ export const Settings = ({route, navigation}) => {
: 'toggle-switch-off' : 'toggle-switch-off'
} }
/> />
</TouchableOpacity> </PressableButton>
) : null} ) : null}
<Text <Text
@@ -787,31 +808,62 @@ export const Settings = ({route, navigation}) => {
borderBottomColor: colors.nav, borderBottomColor: colors.nav,
borderBottomWidth: 0.5, borderBottomWidth: 0.5,
paddingBottom: 3, paddingBottom: 3,
paddingHorizontal: 12,
}}> }}>
Backup & Restore Backup & Restore
</Text> </Text>
<TouchableOpacity {[
onPress={async () => { {
await setSetting( name: 'Backup data',
settings, func: () => {
'useSystemTheme', Linking.openURL('https://www.notesnook.com/privacy.html');
!settings.useSystemTheme, },
); desc: 'Backup all your data to phone storage',
},
{
name: 'Restore data',
func: () => {
Linking.openURL('https://www.notesnook.com');
},
desc: 'Restore backup from your phone.',
},
].map((item) => (
<PressableButton
color={colors.bg}
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
key={item.name}
customStyle={{
height: 50,
justifyContent: 'center',
paddingHorizontal: 12,
width: '100%',
}}
onPress={item.func}>
<Text
style={{
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
color: colors.pri,
width: '100%',
}}>
{item.name}
{'\n'}
<Text
style={{
fontSize: SIZE.xs,
color: colors.icon,
}}>
{item.desc}
</Text>
</Text>
{item.customComponent ? item.customComponent : null}
</PressableButton>
))}
if (!settings.useSystemTheme) { <View
MMKV.setStringAsync(
'theme',
JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
);
changeColorScheme(
Appearance.getColorScheme() === 'dark'
? COLOR_SCHEME_DARK
: COLOR_SCHEME_LIGHT,
);
}
}}
activeOpacity={opacity}
style={{ style={{
width: '100%', width: '100%',
marginHorizontal: 0, marginHorizontal: 0,
@@ -819,6 +871,7 @@ export const Settings = ({route, navigation}) => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
height: 50, height: 50,
paddingHorizontal: 12,
}}> }}>
<Text <Text
style={{ style={{
@@ -856,13 +909,16 @@ export const Settings = ({route, navigation}) => {
}, },
].map((item) => ( ].map((item) => (
<TouchableOpacity <TouchableOpacity
activeOpacity={1}
onPress={async () => { onPress={async () => {
await setSetting(settings, 'reminder', item.value); await setSetting(settings, 'reminder', item.value);
}} }}
key={item.value} key={item.value}
style={{ style={{
backgroundColor: backgroundColor:
settings.reminder === 'daily' ? colors.accent : colors.nav, settings.reminder === item.value
? colors.accent
: colors.nav,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
width: 60, width: 60,
@@ -871,7 +927,7 @@ export const Settings = ({route, navigation}) => {
<Text <Text
style={{ style={{
color: color:
settings.reminder === 'daily' ? 'white' : colors.icon, settings.reminder === item.value ? 'white' : colors.icon,
fontSize: SIZE.xs, fontSize: SIZE.xs,
}}> }}>
{item.title} {item.title}
@@ -879,24 +935,42 @@ export const Settings = ({route, navigation}) => {
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>
</TouchableOpacity> </View>
<TouchableOpacity <PressableButton
color={colors.bg}
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
onPress={async () => { onPress={async () => {
if (!user) {
ToastEvent.show(
'You must login to enable encryption',
'error',
'global',
6000,
() => {
NavigationService.navigate('Login', {
root: true,
});
},
'Login',
);
return;
}
await setSetting( await setSetting(
settings, settings,
'encryptedBackup', 'encryptedBackup',
!settings.encryptedBackup, !settings.encryptedBackup,
); );
}} }}
activeOpacity={opacity} customStyle={{
style={{
width: '100%', width: '100%',
marginHorizontal: 0, marginHorizontal: 0,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
height: 50, height: 50,
paddingHorizontal: 12,
}}> }}>
<Text <Text
style={{ style={{
@@ -916,55 +990,12 @@ export const Settings = ({route, navigation}) => {
</Text> </Text>
<Icon <Icon
size={SIZE.xl} size={SIZE.xl}
color={settings.useSystemTheme ? colors.accent : colors.icon} color={settings.encryptedBackup ? colors.accent : colors.icon}
name={ name={
settings.useSystemTheme ? 'toggle-switch' : 'toggle-switch-off' settings.encryptedBackup ? 'toggle-switch' : 'toggle-switch-off'
} }
/> />
</TouchableOpacity> </PressableButton>
{[
{
name: 'Backup data',
func: () => {
Linking.openURL('https://www.notesnook.com/privacy.html');
},
desc: 'Backup all your data to phone storage',
},
{
name: 'Restore data',
func: () => {
Linking.openURL('https://www.notesnook.com');
},
desc: 'Restore backup from your phone.',
},
].map((item) => (
<TouchableOpacity
key={item.name}
activeOpacity={opacity}
onPress={item.func}>
<Text
style={{
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
color: colors.pri,
height: 50,
justifyContent: 'center',
}}>
{item.name}
{'\n'}
<Text
style={{
fontSize: SIZE.xs,
color: colors.icon,
}}>
{item.desc}
</Text>
</Text>
{item.customComponent ? item.customComponent : null}
</TouchableOpacity>
))}
<Text <Text
style={{ style={{
@@ -975,6 +1006,7 @@ export const Settings = ({route, navigation}) => {
borderBottomColor: colors.nav, borderBottomColor: colors.nav,
borderBottomWidth: 0.5, borderBottomWidth: 0.5,
paddingBottom: 3, paddingBottom: 3,
paddingHorizontal: 12,
}}> }}>
Other Other
</Text> </Text>
@@ -987,21 +1019,32 @@ export const Settings = ({route, navigation}) => {
}, },
desc: 'Read our privacy policy', desc: 'Read our privacy policy',
}, },
{
name: 'Check for updates',
func: () => {
Linking.openURL('https://www.notesnook.com/privacy.html');
},
desc: 'Check for a newer version of app',
},
{ {
name: 'About', name: 'About',
func: () => { func: () => {
Linking.openURL('https://www.notesnook.com'); Linking.openURL('https://www.notesnook.com');
}, },
desc: null, desc: 'You are using the latest version of our app.',
}, },
].map((item) => ( ].map((item) => (
<TouchableOpacity <PressableButton
color={colors.bg}
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
key={item.name} key={item.name}
activeOpacity={opacity}
onPress={item.func} onPress={item.func}
style={{ customStyle={{
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
paddingHorizontal: 12,
width: '100%',
}}> }}>
<Text <Text
style={{ style={{
@@ -1009,6 +1052,7 @@ export const Settings = ({route, navigation}) => {
fontFamily: WEIGHT.regular, fontFamily: WEIGHT.regular,
textAlignVertical: 'center', textAlignVertical: 'center',
color: colors.pri, color: colors.pri,
width: '100%',
}}> }}>
{item.name} {item.name}
{'\n'} {'\n'}
@@ -1021,7 +1065,7 @@ export const Settings = ({route, navigation}) => {
</Text> </Text>
</Text> </Text>
{item.customComponent ? item.customComponent : null} {item.customComponent ? item.customComponent : null}
</TouchableOpacity> </PressableButton>
))} ))}
<Seperator /> <Seperator />
</ScrollView> </ScrollView>