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

fixes and improvements in ui while on a tablet

Browse Source
This commit is contained in:
ammarahm-ed
2020-10-01 17:23:04 +05:00
parent c05ae7fbdc
commit 40ca59d18d
19 changed files with 271 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mobile/index.mobile.js
View File

@@ -38,7 +38,7 @@ export const Initialize = () => {
return (
<>
<Animatable.View
testID={"mobile_main_view"}
testID={'mobile_main_view'}
transition="backgroundColor"
duration={300}
style={{

3
apps/mobile/src/components/Dialog/DialogButtons.js
View File

@@ -13,8 +13,9 @@ const DialogButtons = ({
return (
<View
style={styles.container}>
<Button onPress={onPressNegative} grayed title={negativeTitle} />
<Button onPress={onPressPositive} title={positiveTitle} />
<Button onPress={onPressNegative} title={negativeTitle} />
</View>
);
};

2
apps/mobile/src/components/Dialog/DialogHeader.js
View File

@@ -24,7 +24,7 @@ const DialogHeader = ({icon, title, paragraph}) => {
color: colors.heading,
fontFamily: WEIGHT.bold,
marginLeft: 5,
fontSize: SIZE.md,
fontSize: SIZE.lg,
}}>
{title}
</Text>

3
apps/mobile/src/components/DialogManager/index.js
View File

@@ -282,8 +282,7 @@ export class DialogManager extends Component {
containerStyle={{
backgroundColor: colors.bg,
width: DDS.isTab ? 500 : '100%',
alignSelf: DDS.isTab ? 'flex-end' : 'center',
marginRight: DDS.isTab ? 12 : null,
alignSelf:'center',
borderRadius: 10,
marginBottom: DDS.isTab ? 50 : 0,
}}

3
apps/mobile/src/components/Loading/index.js
View File

@@ -22,7 +22,7 @@ export const Loading = ({
style={[
{color: colors.icon},
styles.activityText,
{fontSize: SIZE.xs},
{fontSize: SIZE.xs,fontFamily:WEIGHT.regular},
]}>
{doneText}
</Text>
@@ -67,5 +67,6 @@ const styles = StyleSheet.create({
fontFamily: WEIGHT.medium,
color: 'white',
fontSize: SIZE.sm,
},
});

56
apps/mobile/src/components/LoginDialog/index.js
View File

@@ -74,7 +74,7 @@ const LoginDialog = () => {
_pass.current?.clear();
_passConfirm.current?.clear();
_username.current?.clear();
setVisible(false);
setUsername(null);
setPassword(null);
@@ -85,7 +85,6 @@ const LoginDialog = () => {
setUserConsent(false);
setEmail(false);
setLoggingIn(false);
};
const loginUser = async () => {
@@ -135,7 +134,6 @@ const LoginDialog = () => {
setLoggingIn(false);
}
};
const validateInfo = () => {
if (!password || !email || !username || !passwordReEnter) {
@@ -203,7 +201,7 @@ const LoginDialog = () => {
return (
<Modal
animated={true}
animationType="slide"
animationType={DDS.isTab ? 'fade' : 'slide'}
statusBarTranslucent={true}
onRequestClose={close}
visible={visible}
@@ -212,7 +210,7 @@ const LoginDialog = () => {
style={{
opacity: 1,
flex: 1,
paddingTop: insets.top,
paddingTop: DDS.isTab ? 0 : insets.top,
backgroundColor: DDS.isTab ? 'rgba(0,0,0,0.3)' : colors.bg,
width: '100%',
height: '100%',
@@ -233,10 +231,12 @@ const LoginDialog = () => {
) : null}
<View
style={{
height: '100%',
width: '100%',
height: DDS.isTab ? (login ? '70%' : '80%') : '100%',
width: DDS.isTab ? 500 : '100%',
backgroundColor: colors.bg,
justifyContent: 'center',
borderRadius: DDS.isTab ? 5 : 0,
zIndex: 10,
}}>
<Toast context="local" />
{loggingIn || signingIn ? (
@@ -355,23 +355,26 @@ const LoginDialog = () => {
)
) : (
<>
<Icon
name="arrow-left"
size={SIZE.xxxl}
onPress={() => {
close();
}}
style={{
width: 50,
height: 50,
marginLeft: 12,
position: 'absolute',
textAlignVertical: 'center',
top: 0,
marginBottom: 15,
}}
color={colors.heading}
/>
{DDS.isTab ? null : (
<Icon
name="arrow-left"
size={SIZE.xxxl}
onPress={() => {
close();
}}
style={{
width: 50,
height: 50,
marginLeft: 12,
position: 'absolute',
textAlignVertical: 'center',
top: 0,
marginBottom: 15,
}}
color={colors.heading}
/>
)}
<View
style={{
justifyContent: 'center',
@@ -781,6 +784,7 @@ const LoginDialog = () => {
style={{
flexDirection: 'row',
width: '100%',
alignItems: 'center',
}}>
<CheckBox
onValueChange={(value) => {
@@ -837,8 +841,8 @@ const LoginDialog = () => {
activeOpacity={opacity}
style={{
alignSelf: 'center',
marginTop: 70,
height: 50,
marginTop: DDS.isTab ? 35 : 70,
height: DDS.isTab ? null : 50,
}}>
<Text
style={{

27
apps/mobile/src/components/Menu/MenuListItem.js
View File

@@ -1,19 +1,20 @@
import React from 'react';
import { Text, View } from 'react-native';
import {Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { SIZE, WEIGHT } from '../../common/common';
import { useTracked } from '../../provider';
import { ACTIONS } from '../../provider/actions';
import { eSendEvent } from '../../services/eventManager';
import { eClearSearch } from '../../services/events';
import {SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {eClearSearch} from '../../services/events';
import NavigationService from '../../services/NavigationService';
import { PressableButton } from '../PressableButton';
import {DDS, showContext} from '../../utils/utils';
import {PressableButton} from '../PressableButton';
export const MenuListItem = ({item, index, noTextMode, ignore,testID}) => {
export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
const [state, dispatch] = useTracked();
const {currentScreen, colors} = state;
const _onPress = () => {
const _onPress = (event) => {
if (!ignore) {
dispatch({
type: ACTIONS.HEADER_TEXT_STATE,
@@ -35,6 +36,10 @@ export const MenuListItem = ({item, index, noTextMode, ignore,testID}) => {
testID={testID}
key={item.name + index}
onPress={_onPress}
onLongPress={(event) => {
console.log(event.nativeEvent);
showContext(event, item.name);
}}
color={
currentScreen === item.name.toLowerCase() ? colors.shade : 'transparent'
}
@@ -49,7 +54,7 @@ export const MenuListItem = ({item, index, noTextMode, ignore,testID}) => {
paddingHorizontal: noTextMode ? 0 : 8,
justifyContent: noTextMode ? 'center' : 'space-between',
alignItems: 'center',
height:50
height: 50,
}}>
<View
style={{
@@ -64,7 +69,7 @@ export const MenuListItem = ({item, index, noTextMode, ignore,testID}) => {
}}
name={item.icon}
color={colors.accent}
size={SIZE.md + 1}
size={DDS.isTab ? SIZE.md + 5 : SIZE.md + 1}
/>
{noTextMode ? null : (
<Text

25
apps/mobile/src/components/Menu/UserSection.js
View File

@@ -7,16 +7,14 @@ import {
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
import {pv, SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {eOpenLoginDialog} from '../../services/events';
import NavigationService from '../../services/NavigationService';
import {db, DDS, hexToRGBA, ToastEvent} from '../../utils/utils';
import {TimeSince} from './TimeSince';
import {sideMenuRef} from '../../utils/refs';
import {db, hexToRGBA, showContext, ToastEvent} from '../../utils/utils';
import {PressableButton} from '../PressableButton';
import {TimeSince} from './TimeSince';
export const UserSection = ({noTextMode}) => {
const [state, dispatch] = useTracked();
@@ -143,7 +141,10 @@ export const UserSection = ({noTextMode}) => {
onPress={() => {
eSendEvent(eOpenLoginDialog);
}}
color={colors.shade}
onLongPress={(event) => {
showContext(event, 'Login');
}}
color={noTextMode ? 'transparent' : colors.shade}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.1}
opacity={0.12}
@@ -151,8 +152,8 @@ export const UserSection = ({noTextMode}) => {
paddingVertical: 12,
marginVertical: 5,
marginTop: pv + 5,
borderRadius: 5,
width: '93%',
borderRadius: noTextMode ? 0 : 5,
width: noTextMode ? '100%' : '93%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: noTextMode ? 'center' : 'flex-start',
@@ -161,7 +162,7 @@ export const UserSection = ({noTextMode}) => {
<View
style={{
width: 30,
backgroundColor: colors.accent,
backgroundColor: noTextMode ? 'transparent' : colors.accent,
height: 30,
borderRadius: 100,
alignItems: 'center',
@@ -172,9 +173,9 @@ export const UserSection = ({noTextMode}) => {
textAlign: 'center',
textAlignVertical: 'center',
}}
name="account-outline"
color="white"
size={SIZE.md}
name={noTextMode ? 'login-variant' : 'account-outline'}
color={noTextMode ? colors.accent : 'white'}
size={noTextMode ? SIZE.md + 5 : SIZE.md + 1}
/>
</View>
{noTextMode ? null : (

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

@@ -23,15 +23,14 @@ import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import NavigationService from '../../services/NavigationService';
import {sideMenuRef} from '../../utils/refs';
import {DDS} from '../../utils/utils';
import {DDS, w} from '../../utils/utils';
import {ColorSection} from './ColorSection';
import {MenuListItem} from './MenuListItem';
import {TagsSection} from './TagsSection';
import {UserSection} from './UserSection';
import {MMKV} from '../../utils/storage';
import Seperator from '../Seperator';
const AnimatedSafeAreaView = createAnimatableComponent(SafeAreaView);
import {useSafeAreaInsets} from 'react-native-safe-area-context';
export const Menu = ({
close = () => {},
@@ -42,6 +41,7 @@ export const Menu = ({
}) => {
const [state, dispatch] = useTracked();
const {colors} = state;
const insets = useSafeAreaInsets();
function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
let newColors = setColorScheme(colors, accent);
@@ -104,61 +104,19 @@ export const Menu = ({
];
return (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={300}
<View
style={{
height: '100%',
opacity: hide ? 0 : 1,
width: '100%',
backgroundColor: colors.bg,
borderRightWidth: noTextMode ? 1 : 0,
borderRightColor: noTextMode ? colors.nav : 'transparent',
paddingTop:insets.top
}}>
<View
style={{
minHeight: 2,
width: '100%',
paddingHorizontal: noTextMode ? 0 : ph,
height: DDS.isTab && noTextMode ? 50 : 0,
marginBottom: 0,
alignItems: 'center',
flexDirection: 'row',
justifyContent: noTextMode ? 'center' : 'space-between',
marginTop:
Platform.OS == 'ios'
? 0
: DDS.isTab
? noTextMode
? StatusBar.currentHeight
: 0
: StatusBar.currentHeight,
}}>
{DDS.isTab && noTextMode ? (
<TouchableOpacity
onPress={() => {
sideMenuRef.current?.openDrawer();
}}
style={{
alignItems: 'center',
height: 35,
justifyContent: 'center',
}}>
<Icon
style={{
marginTop: noTextMode ? 0 : 7.5,
}}
name="menu"
size={SIZE.lg}
color={colors.pri}
/>
</TouchableOpacity>
) : null}
</View>
<ScrollView
alwaysBounceVertical={false}
contentContainerStyle={{minHeight: '50%'}}
contentContainerStyle={{
minHeight: '50%',
}}
showsVerticalScrollIndicator={false}>
{listItems.map((item, index) => (
<MenuListItem
@@ -203,7 +161,7 @@ export const Menu = ({
}}>
{listItems2.map((item, index) => (
<MenuListItem
testID={item.name == "Night mode" ? "night_mode" : item.name}
testID={item.name == 'Night mode' ? 'night_mode' : item.name}
key={item.name}
item={item}
index={index}
@@ -216,6 +174,6 @@ export const Menu = ({
<UserSection noTextMode={noTextMode} />
</View>
</AnimatedSafeAreaView>
</View>
);
};

18
apps/mobile/src/components/Premium/PendingDialog.js
View File

@@ -3,7 +3,7 @@ import {Text, View} from 'react-native';
import {SIZE, WEIGHT} from '../../common/common';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
import {eClosePendingDialog, eOpenPendingDialog} from '../../services/events';
import {db, w} from '../../utils/utils';
import {db, DDS, w} from '../../utils/utils';
import ActionSheet from '../ActionSheet';
import Seperator from '../Seperator';
@@ -54,13 +54,27 @@ class PendingDialog extends React.Component {
width: '100%',
alignSelf: 'center',
borderRadius: 10,
width: DDS.isTab? 500 : '100%',
borderRadius: 10,
marginBottom: DDS.isTab ? 50 : 0,
}}
extraScroll={DDS.isTab ? 50 : 0}
gestureEnabled={true}
footerAlwaysVisible={DDS.isTab}
footerHeight={DDS.isTab ? 20 : 10}
footerStyle={
DDS.isTab
? {
borderRadius: 10,
backgroundColor: colors.bg,
}
: null
}
ref={actionSheet}
initialOffsetFromBottom={1}>
<View
style={{
width: w,
width: DDS.isTab? 500 : w,
backgroundColor: colors.bg,
justifyContent: 'space-between',
paddingHorizontal: 12,

22
apps/mobile/src/components/Premium/PremiumDialog.js
View File

@@ -5,7 +5,7 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {SIZE, WEIGHT} from '../../common/common';
import {eSendEvent} from '../../services/eventManager';
import {eOpenLoginDialog, eOpenPendingDialog} from '../../services/events';
import {db, h, itemSkus, ToastEvent, w} from '../../utils/utils';
import {db, DDS, h, itemSkus, ToastEvent, w} from '../../utils/utils';
import ActionSheet from '../ActionSheet';
import {Button} from '../Button';
import Seperator from '../Seperator';
@@ -66,16 +66,30 @@ class PremiumDialog extends React.Component {
<ActionSheet
containerStyle={{
backgroundColor: colors.bg,
width: '100%',
width: DDS.isTab ? 500 : '100%',
alignSelf: 'center',
borderRadius: 10,
marginBottom: DDS.isTab ? 50 : 0,
}}
extraScroll={DDS.isTab ? 50 : 0}
gestureEnabled={true}
footerAlwaysVisible={DDS.isTab}
footerHeight={DDS.isTab ? 20 : 10}
footerStyle={
DDS.isTab
? {
borderRadius: 10,
backgroundColor: colors.bg,
}
: null
}
gestureEnabled={true}
ref={this.actionSheetRef}
initialOffsetFromBottom={1}>
<View
style={{
width: w,
width: DDS.isTab ? 500 : w,
backgroundColor: colors.bg,
justifyContent: 'space-between',
paddingHorizontal: 12,
@@ -97,7 +111,7 @@ class PremiumDialog extends React.Component {
<ScrollView
style={{
width: '100%',
maxHeight: h * 0.5,
maxHeight:DDS.isTab? h * 0.35 : h * 0.5,
}}
nestedScrollEnabled={true}
showsVerticalScrollIndicator={false}>

37
apps/mobile/src/components/RestoreDialog/index.js
View File

@@ -1,14 +1,14 @@
import React, {useEffect, useState} from 'react';
import {Dimensions, Text, View, FlatList} from 'react-native';
import {FlatList, Text, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import RNFetchBlob from 'rn-fetch-blob';
import {ph, SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
import {
eCloseProgressDialog,
eCloseRestoreDialog,
eOpenProgressDialog,
eOpenRestoreDialog,
} from '../../services/events';
import {eCloseRestoreDialog, eOpenRestoreDialog} from '../../services/events';
import storage from '../../utils/storage';
import {
db,
getElevation,
@@ -16,23 +16,18 @@ import {
sleep,
ToastEvent,
} from '../../utils/utils';
import BaseDialog from '../Dialog/base-dialog';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import RNFetchBlob from 'rn-fetch-blob';
import storage from '../../utils/storage';
import {PressableButton} from '../PressableButton';
import {Button} from '../Button';
import BaseDialog from '../Dialog/base-dialog';
import {Loading} from '../Loading';
import {ACTIONS} from '../../provider/actions';
const RestoreDialog = () => {
const [state, dispatch] = useTracked();
const {colors, tags, premiumUser} = state;
const [visible, setVisible] = useState(true);
const [visible, setVisible] = useState(false);
const [files, setFiles] = useState([]);
const [restoring, setRestoring] = useState(false);
const insets = useSafeAreaInsets();
useEffect(() => {
eSubscribeEvent(eOpenRestoreDialog, open);
eSubscribeEvent(eCloseRestoreDialog, close);
@@ -55,6 +50,11 @@ const RestoreDialog = () => {
animation="slide"
visible={visible}
onShow={async () => {
let granted = await requestStoragePermission();
if (!granted) {
ToastEvent.show('Storage permission required to check for backups.');
return;
}
await storage.checkAndCreateDir(
RNFetchBlob.fs.dirs.SDCardDir + '/Notesnook/backups',
);
@@ -74,7 +74,7 @@ const RestoreDialog = () => {
backgroundColor: colors.bg,
paddingHorizontal: 12,
paddingVertical: 20,
paddingTop: insets.top,
paddingTop: 0,
}}>
<BaseDialog visible={restoring}>
<View
@@ -107,6 +107,7 @@ const RestoreDialog = () => {
justifyContent: 'center',
alignItems: 'center',
height: 50,
marginTop: insets.top,
}}>
<Icon
name="close"
@@ -230,8 +231,8 @@ const RestoreDialog = () => {
await sleep(2000);
setRestoring(false);
dispatch({type: ACTIONS.ALL});
ToastEvent.show('Restore Complete!', 'success');
setVisible(false);
ToastEvent.show('Restore Complete!', 'success');
setVisible(false);
}}
/>
</View>

21
apps/mobile/src/components/SimpleList/index.js
View File

@@ -42,6 +42,7 @@ const SimpleList = ({
);
const insets = useSafeAreaInsets();
const listData = data;
const dataType = type;
const _onScroll = (event) => {
if (!event) return;
let y = event.nativeEvent.contentOffset.y;
@@ -65,24 +66,6 @@ const SimpleList = ({
);
}, [listData]);
const _ListFooterComponent = listData[0] ? (
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.nav,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
) : null;
const RenderSectionHeader = ({item}) => (
<Text
style={[
@@ -191,7 +174,7 @@ const SimpleList = ({
case 'note':
return <RenderItem item={data} pinned={data.pinned} index={index} />;
case 'MAIN_HEADER':
return <ListHeaderComponent type={type} data={listData} />;
return <ListHeaderComponent type={dataType} data={listData} />;
case 'header':
return <RenderSectionHeader item={data} />;

17
apps/mobile/src/components/Toast/index.js
View File

@@ -6,7 +6,7 @@ import {SIZE} from '../../common/common';
import {useTracked} from '../../provider';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
import {eHideToast, eShowToast} from '../../services/events';
import {getElevation} from '../../utils/utils';
import {DDS, getElevation, sleep} from '../../utils/utils';
const {spring, timing} = Animated;
const toastMessages = [];
@@ -91,7 +91,9 @@ export const Toast = ({context = 'global'}) => {
toValue: 300,
duration: 200,
easing: Easing.inOut(Easing.ease),
}).start(() => {
}).start(async () => {
await sleep(300);
console.log(toastMessages);
toastMessages.shift();
setData({});
});
@@ -99,11 +101,11 @@ export const Toast = ({context = 'global'}) => {
};
const _onKeyboardShow = () => {
//setKeyboard(true);
setKeyboard(true);
};
const _onKeyboardHide = () => {
//setKeyboard(false);
setKeyboard(false);
};
useEffect(() => {
@@ -115,16 +117,17 @@ export const Toast = ({context = 'global'}) => {
return () => {
Keyboard.removeListener('keyboardDidShow', _onKeyboardShow);
Keyboard.removeListener('keyboardDidHide', _onKeyboardHide);
eUnSubscribeEvent('showToast', showToastFunc);
eUnSubscribeEvent('hideToast', hideToastFunc);
eUnSubscribeEvent(eShowToast, showToastFunc);
eUnSubscribeEvent(eHideToast, hideToastFunc);
};
}, []);
return (
<Animated.View
style={{
width: '100%',
width: DDS.isTab ? '30%' : '100%',
alignItems: 'center',
alignSelf:'center',
minHeight: 30,
bottom: keyboard ? 30 : 100,
position: 'absolute',

8
apps/mobile/src/services/Navigator.js
View File

@@ -5,6 +5,7 @@ import * as React from 'react';
import Container from '../components/Container';
import {Menu} from '../components/Menu';
import {rootNavigatorRef, sideMenuRef} from '../utils/refs';
import {DDS, w} from '../utils/utils';
import Favorites from '../views/Favorites';
import Folders from '../views/Folders';
import Home from '../views/Home/index';
@@ -60,6 +61,7 @@ const DrawerComponent = (props) => {
<Menu
menuProps={props}
hide={false}
noTextMode={DDS.isTab}
close={() => NavigationService.closeDrawer()}
/>
);
@@ -91,8 +93,12 @@ export const NavigationStack = ({component = MainComponent}) => {
screenOptions={{
swipeEnabled: locked ? false : true,
}}
drawerStyle={{
width:DDS.isTab? w *0.04 : null,
borderRightColor:'#f0f0f0'
}}
edgeWidth={200}
drawerType="slide"
drawerType={DDS.isTab ? 'permanent' : 'slide'}
drawerContent={DrawerComponent}
initialRouteName="Main">
<Drawer.Screen name="Main" component={component} />

10
apps/mobile/src/utils/utils.js
View File

@@ -57,6 +57,16 @@ export const history = {
selectedItemsList: [],
};
export async function showContext(event, title) {
eSendEvent('showContextMenu', {
location: {
x: event.nativeEvent.pageX + 50,
y: event.nativeEvent.pageY - 10,
},
title: title,
});
}
export async function requestStoragePermission() {
let granted = false;
try {

7
apps/mobile/src/views/Editor/func.js
View File

@@ -262,13 +262,12 @@ export async function onWebViewLoad(noMenu, premium, colors) {
}
const loadNoteInEditor = async () => {
title = note.title;
id = note.id;
saveCounter = 0;
content = {};
content.text = '';
if (note.id) {
if (note?.id) {
title = note.title;
id = note.id;
content.text = await db.notes.note(id).text();
post('dateEdited', timeConverter(note.dateEdited));
await sleep(50);

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

@@ -62,6 +62,15 @@ const Editor = ({noMenu}) => {
post('theme', colors);
}, [colors.bg]);
useEffect(() => {
if (!DDS.isTab) return;
if (noMenu) {
post('nomenu', true);
} else {
post('nomenu', false);
}
}, [noMenu]);
useEffect(() => {
eSubscribeEvent(eOnLoadNote, load);
eSubscribeEvent(eCloseFullscreenEditor, closeFullscreen);
@@ -166,17 +175,46 @@ const Editor = ({noMenu}) => {
height: '100%',
width: '100%',
}}>
{noMenu ? (
<View />
) : (
<ActionIcon
name="arrow-left"
color={colors.heading}
onPress={_onBackPress}
iconStyle={{
textVerticalAlign: 'center',
}}
customStyle={{
marginLeft: -5,
position: 'absolute',
marginTop:
Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 5,
zIndex: 11,
left: 0,
justifyContent: 'center',
alignItems: 'center',
}}
/>
)}
<View
style={{
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
flexDirection: 'row',
width: '100%',
width: DDS.isTab ? '30%' : '100%',
height: 50,
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 12,
position: DDS.isTab ? 'absolute' : 'relative',
backgroundColor: colors.bg,
right: 0,
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
zIndex: 10,
}}>
{noMenu ? null : (
{DDS.isTab ? (
<View />
) : (
<ActionIcon
name="arrow-left"
color={colors.heading}
@@ -303,6 +341,7 @@ const Editor = ({noMenu}) => {
maxHeight: '100%',
width: '100%',
backgroundColor: 'transparent',
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
}}
onMessage={_onMessage}
/>

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

@@ -12,6 +12,7 @@ import {
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import RNFetchBlob from 'rn-fetch-blob';
import {
ACCENT,
COLOR_SCHEME,
@@ -30,19 +31,24 @@ import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {
eCloseProgressDialog,
eOpenLoginDialog,
eOpenPremiumDialog,
eOpenProgressDialog,
eOpenRecoveryKeyDialog,
eOpenRestoreDialog,
eResetApp,
} from '../../services/events';
import NavigationService from '../../services/NavigationService';
import {MMKV} from '../../utils/storage';
import storage, {MMKV} from '../../utils/storage';
import {
db,
DDS,
hexToRGBA,
requestStoragePermission,
RGB_Linear_Shade,
setSetting,
sleep,
ToastEvent,
w,
} from '../../utils/utils';
@@ -132,6 +138,60 @@ export const Settings = ({route, navigation}) => {
</Text>
);
const backupItemsList = [
{
name: 'Backup data',
func: async () => {
let granted = requestStoragePermission();
if (!granted) {
ToastEvent.show('Backup failed! Storage access was denied.');
return;
}
eSendEvent(eOpenProgressDialog, {
title: 'Backing up your data',
paragraph:
"All your backups are stored in 'Phone Storage/Notesnook/backups' folder",
});
let backup = await db.backup.export();
let backupName =
'notesnook_backup_' + new Date().toString() + '.nnbackup';
let path = RNFetchBlob.fs.dirs.SDCardDir + '/Notesnook/backups/';
await storage.checkAndCreateDir(path);
await RNFetchBlob.fs.writeFile(path + backupName, backup, 'utf8');
await sleep(2000);
eSendEvent(eCloseProgressDialog);
ToastEvent.show('Backup complete!', 'success');
//Linking.openURL('https://www.notesnook.com/privacy.html');
},
desc: 'Backup all your data to phone storage',
},
{
name: 'Restore backup',
func: () => {
eSendEvent(eOpenRestoreDialog);
},
desc: 'Restore backup from your phone.',
},
];
const switchTheme = async () => {
await setSetting(settings, 'useSystemTheme', !settings.useSystemTheme);
if (!settings.useSystemTheme) {
MMKV.setStringAsync(
'theme',
JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
);
changeColorScheme(
Appearance.getColorScheme() === 'dark'
? COLOR_SCHEME_DARK
: COLOR_SCHEME_LIGHT,
);
}
};
const CustomButton = ({title, tagline, customComponent, onPress}) => (
<PressableButton
color="transparent"
@@ -462,8 +522,8 @@ export const Settings = ({route, navigation}) => {
alignItems: 'center',
marginHorizontal: 5,
marginVertical: 5,
width: w / 5 - 35,
height: w / 5 - 35,
width: DDS.isTab ? (w * 0.28) / 5 - 35 : w / 5 - 35,
height: DDS.isTab ? (w * 0.28) / 5 - 35 : w / 5 - 35,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
@@ -482,25 +542,7 @@ export const Settings = ({route, navigation}) => {
? 'Switch to dark theme based on system settings'
: 'Keep the app theme independent from system settings'
}
onPress={async () => {
await setSetting(
settings,
'useSystemTheme',
!settings.useSystemTheme,
);
if (!settings.useSystemTheme) {
MMKV.setStringAsync(
'theme',
JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
);
changeColorScheme(
Appearance.getColorScheme() === 'dark'
? COLOR_SCHEME_DARK
: COLOR_SCHEME_LIGHT,
);
}
}}
onPress={switchTheme}
customComponent={
<Icon
size={SIZE.xl}
@@ -645,22 +687,7 @@ export const Settings = ({route, navigation}) => {
<SectionHeader title="Backup & Restore" />
{[
{
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) => (
{backupItemsList.map((item) => (
<CustomButton
key={item.name}
title={item.name}
@@ -686,13 +713,13 @@ export const Settings = ({route, navigation}) => {
textAlignVertical: 'center',
color: colors.pri,
}}>
Backup reminder{'\n'}
Auto Backup{'\n'}
<Text
style={{
fontSize: SIZE.xs,
color: colors.icon,
}}>
Remind you to backup data.
Backup your data automatically.
</Text>
</Text>
@@ -747,7 +774,7 @@ export const Settings = ({route, navigation}) => {
title="Encrypted Backups"
tagline="Encrypt your data before backup"
onPress={async () => {
if (!user) {
if (!user || !user.id) {
ToastEvent.show(
'You must login to enable encryption',
'error',