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

optimize editor for dark mode & add side menu

Browse Source
This commit is contained in:
ammarahm-ed
2019-12-10 16:32:04 +05:00
parent 521289df5f
commit b82e6a36a9
7 changed files with 641 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mobile/App.js
View File

@@ -202,7 +202,7 @@ const App = () => {
close={() => setOpen(false)}
/>
}
openMenuOffset={w / 1.5}>
openMenuOffset={w / 1.3}>
<AppContainer
style={{
width: Platform.isPad ? '70%' : '100%',

474
apps/mobile/src/components/EditorMenu/index.js Normal file
View File

@@ -0,0 +1,474 @@
import React, {useEffect, useState, createRef, useRef} from 'react';
import {
ScrollView,
View,
Text,
TouchableOpacity,
SafeAreaView,
Platform,
FlatList,
DeviceEventEmitter,
ActivityIndicator,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
COLOR_SCHEME_DARK,
setColorScheme,
COLOR_SCHEME_LIGHT,
clearThemeUpdateListener,
onThemeUpdate,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {getElevation, w, h, Toast} from '../../utils/utils';
import AsyncStorage from '@react-native-community/async-storage';
import {useForceUpdate} from '../../views/ListsEditor';
import {AnimatedSafeAreaView} from '../../views/Home';
import {TextInput} from 'react-native-gesture-handler';
let tagsInputRef;
export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const forceUpdate = useForceUpdate();
const [tags, setTags] = useState([]);
const [selectedColor, setSelectedColor] = useState([]);
let tagToAdd = null;
let backPressCount = 0;
useEffect(() => {
console.log(tagsInputRef.current);
}, [tagsInputRef]);
useEffect(() => {
onThemeUpdate(() => {
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
return (
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
style={{
height: '100%',
opacity: hide ? 0 : 1,
backgroundColor: colors.night ? colors.navbg : colors.navbg,
}}>
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
height: '100%',
}}>
<View>
<View
style={{
height: 2,
width: '100%',
marginBottom: 5,
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
}}
/>
<FlatList
data={[
{
name: 'Dark Mode',
icon: 'moon',
func: () => {
if (!colors.night) {
AsyncStorage.setItem(
'theme',
JSON.stringify(COLOR_SCHEME_DARK),
);
setColorScheme(COLOR_SCHEME_DARK);
} else {
AsyncStorage.setItem(
'theme',
JSON.stringify(COLOR_SCHEME_LIGHT),
);
setColorScheme(COLOR_SCHEME_LIGHT);
}
},
switch: true,
on: colors.night ? true : false,
close: false,
},
{
name: 'Pinned',
icon: 'tag',
func: () => NavigationService.push('Home'),
close: true,
check: true,
on: true,
},
{
name: 'Add to Favorites',
icon: 'star',
func: () =>
NavigationService.push('Folders', {
title: 'Notebooks',
}),
close: true,
check: true,
on: false,
},
{
name: 'Share ',
icon: 'share',
func: () => NavigationService.push('Lists'),
close: true,
},
{
name: 'Move to Notebook',
icon: 'arrow-right',
func: () => NavigationService.push('Favorites'),
close: true,
},
{
name: 'Delete',
icon: 'trash',
func: () => NavigationService.push('Trash'),
close: true,
},
{
name: 'Locked',
icon: 'lock',
func: () => NavigationService.push('Settings'),
close: true,
check: true,
on: false,
},
]}
keyExtractor={(item, index) => item.name}
renderItem={({item, index}) => (
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
item.close === false ? null : close();
item.func();
}}
style={{
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: '5%',
paddingVertical: 10,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'flex-end',
}}>
<Icon
style={{
width: 30,
}}
name={item.icon}
color={colors.icon}
size={SIZE.md}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
color: colors.pri,
}}>
{item.name}
</Text>
</View>
{item.switch ? (
<Icon
size={SIZE.lg + 2}
color={item.on ? colors.accent : colors.icon}
name={item.on ? 'toggle-right' : 'toggle-left'}
/>
) : (
undefined
)}
{item.check ? (
<TouchableOpacity
style={{
borderWidth: 2,
borderColor: item.on ? colors.accent : colors.icon,
width: 23,
height: 23,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100,
paddingTop: 3,
}}>
{item.on ? (
<Icon
size={SIZE.sm - 2}
color={colors.accent}
name="check"
/>
) : null}
</TouchableOpacity>
) : null}
</TouchableOpacity>
)}
/>
<TouchableOpacity
style={{
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: '5%',
marginTop: 15,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-end',
}}>
<Icon
style={{
width: 30,
}}
name="tag"
color={colors.icon}
size={SIZE.md}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
color: colors.pri,
}}>
Add Tags
</Text>
</View>
</TouchableOpacity>
<ScrollView
contentContainerStyle={{
flexDirection: 'row',
flexWrap: 'wrap',
marginHorizontal: '5%',
marginBottom: 0,
marginTop: 10,
borderRadius: 5,
backgroundColor: colors.nav,
}}>
{tags.map(item => (
<TouchableOpacity
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
margin: 5,
paddingHorizontal: 5,
paddingVertical: 2.5,
backgroundColor: colors.accent,
borderRadius: 5,
}}>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 2,
color: 'white',
}}>
{item}
</Text>
</TouchableOpacity>
))}
<TextInput
style={{
backgroundColor: 'transparent',
minWidth: 100,
color: colors.pri,
paddingHorizontal: 5,
paddingVertical: 2.5,
margin: 5,
}}
ref={ref => (tagsInputRef = ref)}
placeholderTextColor={colors.icon}
placeholder="Add a tag"
defaultValue="#"
onChangeText={value => {
tagToAdd = value;
if (tagToAdd.length > 0) backPressCount = 0;
}}
onKeyPress={event => {
if (event.nativeEvent.key === 'Backspace') {
if (backPressCount === 0 && !tagToAdd) {
backPressCount = 1;
return;
}
if (backPressCount === 1 && !tagToAdd) {
backPressCount = 0;
let tagInputValue = tags[tags.length - 1];
let allTags = tags;
if (allTags.length === 1) return;
allTags.splice(allTags.length - 1);
setTags(allTags);
tagsInputRef.setNativeProps({
text: tagInputValue,
});
forceUpdate();
setTimeout(() => {
tagsInputRef.focus();
}, 300);
}
}
}}
onSubmitEditing={() => {
if (!tagToAdd || tagToAdd === '#') return;
let tag = tagToAdd;
if (tag[0] !== '#') {
tag = '#' + tag;
}
if (tag.includes(' ')) {
tag = tag.replace(' ', '_');
}
let allTags = tags;
allTags.push(tag);
setTags(allTags);
tagsInputRef.setNativeProps({
text: '#',
});
forceUpdate();
tagToAdd = '';
setTimeout(() => {
tagsInputRef.focus();
}, 300);
}}
/>
</ScrollView>
<TouchableOpacity
onPress={() => {
close();
NavigationService.navigate('Tags');
}}
style={{
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: '5%',
marginTop: 15,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-end',
}}>
<Icon
style={{
width: 30,
}}
name="tag"
color={colors.icon}
size={SIZE.md}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
color: colors.pri,
}}>
Add Color
</Text>
</View>
</TouchableOpacity>
<ScrollView
contentContainerStyle={{
flexDirection: 'row',
flexWrap: 'wrap',
paddingHorizontal: '5%',
marginBottom: 15,
marginTop: 10,
}}>
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
item => (
<TouchableOpacity
onPress={() => {
setSelectedColor(item);
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
marginRight: 5,
marginBottom: 5,
borderWidth: 1.5,
borderRadius: 100,
padding: 3,
borderColor:
selectedColor === item ? colors.pri : colors.navbg,
}}>
<View
style={{
width: 40,
height: 40,
backgroundColor: item,
borderRadius: 100,
justifyContent: 'center',
alignItems: 'center',
}}>
{selectedColor === item ? (
<Icon name="check" color="white" size={SIZE.md} />
) : null}
</View>
</TouchableOpacity>
),
)}
</ScrollView>
</View>
<View
style={{
paddingHorizontal: '5%',
borderTopColor: colors.icon,
borderTopWidth: 1,
paddingVertical: pv,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text
style={{
color: colors.icon,
fontFamily: WEIGHT.medium,
fontSize: SIZE.xs + 2,
}}>
Last Synced: 5 secs ago.
</Text>
{}
<ActivityIndicator color={colors.accent} />
</View>
</ScrollView>
</AnimatedSafeAreaView>
);
};

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

@@ -77,7 +77,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
{
name: 'Home',
icon: 'home',
func: () => NavigationService.navigate('Home'),
func: () => NavigationService.push('Home'),
close: true,
},
@@ -85,7 +85,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
name: 'Notebooks',
icon: 'book',
func: () =>
NavigationService.navigate('Folders', {
NavigationService.push('Folders', {
title: 'Notebooks',
}),
close: true,
@@ -93,13 +93,13 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
{
name: 'Lists',
icon: 'list',
func: () => NavigationService.navigate('Lists'),
func: () => NavigationService.push('Lists'),
close: true,
},
{
name: 'Favorites',
icon: 'star',
func: () => NavigationService.navigate('Favorites'),
func: () => NavigationService.push('Favorites'),
close: true,
},
@@ -128,13 +128,13 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
{
name: 'Trash',
icon: 'trash',
func: () => NavigationService.navigate('Trash'),
func: () => NavigationService.push('Trash'),
close: true,
},
{
name: 'Settings',
icon: 'settings',
func: () => NavigationService.navigate('Settings'),
func: () => NavigationService.push('Settings'),
close: true,
},
]}
@@ -152,7 +152,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: ph,
paddingHorizontal: '5%',
paddingVertical: 15,
}}>
<View
@@ -201,7 +201,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: ph,
paddingHorizontal: '5%',
marginTop: 15,
}}>
<View
@@ -237,14 +237,6 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
</Text>
</TouchableOpacity>
<View
style={{
height: 2,
backgroundColor: colors.navbg,
width: '100%',
marginBottom: 5,
}}
/>
<ScrollView
contentContainerStyle={{
flexDirection: 'row',
@@ -286,14 +278,6 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
))}
</ScrollView>
<View
style={{
height: 2,
backgroundColor: colors.navbg,
width: '100%',
marginBottom: 5,
}}
/>
<ScrollView
contentContainerStyle={{
flexDirection: 'row',

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

@@ -139,19 +139,24 @@ export const NotebookItem = ({
marginTop: 5,
}}>
{item.topics.slice(0, 4).map(topic => (
<Text
<View
style={{
borderRadius: 5,
backgroundColor: colors.accent,
color: 'white',
marginRight: 5,
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs,
paddingHorizontal: ph / 2,
paddingHorizontal: ph / 1.5,
paddingVertical: pv / 4,
marginRight: 10,
}}>
{topic.title}
</Text>
<Text
style={{
color: 'white',
fontFamily: WEIGHT.regular,
fontSize: SIZE.xxs + 1,
}}>
{topic.title}
</Text>
</View>
))}
</View>
)}
@@ -180,7 +185,7 @@ export const NotebookItem = ({
<Text
style={{
color: colors.accent,
fontSize: SIZE.xxs + 2,
fontSize: SIZE.xxs + 1,
textAlignVertical: 'center',
fontFamily: WEIGHT.regular,
}}>

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

@@ -21,6 +21,8 @@ import {
opacity,
FONT,
WEIGHT,
onThemeUpdate,
clearThemeUpdateListener,
} from '../../common/common';
import WebView from 'react-native-webview';
import Icon from 'react-native-vector-icons/Feather';
@@ -32,17 +34,23 @@ import {Dialog} from '../../components/Dialog';
import {TouchableOpacity} from 'react-native-gesture-handler';
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';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
var timestamp = null;
var content = null;
var title = null;
let titleRef;
let EditorWebView;
let animatedViewRef;
const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
TouchableOpacity,
);
const AnimatedTextInput = Animatable.createAnimatableComponent(TextInput);
const Editor = ({navigation}) => {
// STATE
@@ -50,16 +58,16 @@ const Editor = ({navigation}) => {
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);
// VARIABLES
let updateInterval = null;
let keyboardDidShowListener = null;
let keyboardDidHideListener = null;
let setMenuRef;
// REFS
let EditorWebView = createRef();
const _textRender = createRef();
const forceUpdate = useForceUpdate();
// FUNCTIONS
@@ -68,7 +76,7 @@ const Editor = ({navigation}) => {
setKeyboardHeight(e.endCoordinates.height);
};
const post = value => EditorWebView.current.postMessage(value);
const post = value => EditorWebView.postMessage(value);
const _keyboardDidHide = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
@@ -92,11 +100,35 @@ const Editor = ({navigation}) => {
}
};
const onWebViewLoad = () => {
post(JSON.stringify(colors));
if (navigation.state.params && navigation.state.params.note) {
let note = navigation.state.params.note;
titleRef.setNativeProps({
text: note.title,
});
title = note.title;
timestamp = note.dateCreated;
post(JSON.stringify(note.content.delta));
}
if (content && content.delta) {
post(JSON.stringify(content.delta));
}
};
const onTitleTextChange = value => {
title = value;
if (title.length > 12) {
setResize(true);
} else if (title.length < 12) {
setResize(false);
}
};
const _renderEditor = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : null}
style={{height: '100%', backgroundColor: colors.bg}}>
style={{height: '100%'}}>
<View
style={{
height: '100%',
@@ -134,6 +166,7 @@ const Editor = ({navigation}) => {
<AnimatedTextInput
transition="fontSize"
placeholder="Untitled Note"
ref={ref => (titleRef = ref)}
placeholderTextColor={colors.icon}
style={{
width: '80%',
@@ -143,153 +176,36 @@ const Editor = ({navigation}) => {
maxWidth: '90%',
paddingVertical: 0,
}}
onChangeText={value => {
title = value;
if (title.length > 12) {
setResize(true);
} else if (title.length < 12) {
setResize(false);
}
}}
onSubmitEditing={async () => await saveNote()}
onChangeText={onTitleTextChange}
onSubmitEditing={saveNote}
/>
<Menu
style={{
borderRadius: 5,
backgroundColor: colors.nav,
<AnimatedTouchableOpacity
transition={['width', 'height']}
duration={250}
onPress={() => {
setOpen(true);
}}
ref={ref => (setMenuRef = ref)}
button={
<AnimatedTouchableOpacity
transition={['width', 'height']}
duration={250}
onPress={() => setMenuRef.show()}
style={{
width: resize ? 35 : 40,
height: resize ? 35 : 40,
}}>
<Icon
style={{
paddingRight: 10,
marginTop: 5,
}}
name="more-vertical"
color={colors.icon}
size={resize ? SIZE.xl : SIZE.xxl}
/>
</AnimatedTouchableOpacity>
}>
<MenuItem
textStyle={{
color: colors.pri,
style={{
width: resize ? 35 : 40,
height: resize ? 35 : 40,
justifyContent: 'center',
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
{' '}Pin
</MenuItem>
<MenuItem
onPress={() => {
setMenuRef.hide();
ToastEvent.show(
'Note added to favorites.',
'success',
3000,
() => {},
'Ok',
);
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="star" size={SIZE.sm} color={colors.icon} />
{' '}Favorite
</MenuItem>
<MenuItem
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="tag" size={SIZE.sm} color={colors.icon} />
{' '}Add Tags
</MenuItem>
<MenuItem
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="share" size={SIZE.sm} color={colors.icon} />
{' '}Share
</MenuItem>
<MenuItem
onPress={() => {
setMenuRef.hide();
NavigationService.navigate('Folders', {
note: item,
title: 'Choose Notebook',
isMove: true,
hideMore: true,
});
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="arrow-right" size={SIZE.sm} color={colors.icon} />
{' '}Move
</MenuItem>
<MenuItem
onPress={() => {
setMenuRef.hide();
setVaultDialog(true);
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="lock" size={SIZE.sm} color={colors.icon} />
{' '}Lock
</MenuItem>
<MenuItem
onPress={() => {
setVisible(true);
setMenuRef.hide();
}}
textStyle={{
color: colors.pri,
fontFamily: WEIGHT.regular,
fontSize: SIZE.sm,
}}>
<Icon name="trash" size={SIZE.sm} color={colors.icon} />
{' '}Delete
</MenuItem>
</Menu>
alignItems: 'center',
paddingTop: 3,
}}>
<Icon
name="menu"
color="white"
size={resize ? SIZE.xl : SIZE.xxl}
/>
</AnimatedTouchableOpacity>
</View>
<WebView
ref={EditorWebView}
ref={ref => (EditorWebView = ref)}
onError={error => console.log(error)}
onLoad={() => {
post(JSON.stringify(colors));
if (navigation.state.params && navigation.state.params.note) {
let note = navigation.state.params.note;
post(JSON.stringify(note.content.delta));
}
}}
onLoad={onWebViewLoad}
javaScriptEnabled
onShouldStartLoadWithRequest={request => {
if (request.url.includes('https')) {
@@ -299,6 +215,15 @@ const Editor = ({navigation}) => {
return true;
}
}}
renderLoading={() => (
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'transparent',
}}
/>
)}
cacheEnabled={true}
cacheMode="LOAD_CACHE_ELSE_NETWORK"
domStorageEnabled
@@ -316,7 +241,7 @@ const Editor = ({navigation}) => {
style={{
height: '100%',
maxHeight: '100%',
backgroundColor: colors.bg,
backgroundColor: 'transparent',
}}
onMessage={evt => {
if (evt.nativeEvent.data !== '') {
@@ -338,22 +263,10 @@ const Editor = ({navigation}) => {
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', () => {
setDialog(true);
return true;
});
});
useEffect(() => {
if (navigation.state.params && navigation.state.params.note) {
let note = navigation.state.params.note;
titleRef.current.setNativeProps({
text: note.title,
});
title = note.title;
timestamp = note.dateCreated;
}
}, []);
useEffect(() => {
keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
@@ -397,23 +310,62 @@ const Editor = ({navigation}) => {
};
}, []);
useEffect(() => {
onThemeUpdate(() => {
shouldFade = true;
forceUpdate();
});
return () => {
clearThemeUpdateListener(() => {
forceUpdate();
});
};
}, []);
useEffect(() => {
EditorWebView.reload();
}, [colors.bg]);
return (
<SafeAreaView style={{height: '100%', backgroundColor: colors.bg}}>
<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()}
</SafeAreaView>
<SideMenu
isOpen={isOpen}
bounceBackOnOverdraw={false}
contentContainerStyle={{
opacity: 0,
}}
openMenuOffset={w / 1.2}
menuPosition="right"
onChange={args => {
setOpen(args);
}}
menu={
<EditorMenu
hide={false}
close={() => {
setOpen(false);
}}
/>
}>
<AnimatedSafeAreaView
transition="backgroundColor"
duration={1000}
style={{height: '100%', backgroundColor: colors.bg}}>
<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>
</SideMenu>
);
};

20
apps/mobile/src/views/Editor/web/texteditor.html
View File

@@ -16,17 +16,19 @@
<style>
.app-body {
margin: 0px;
background-color:transparent
}
.floating-toolbar {
position: fixed;
bottom: 0;
width: 100%;
background-color: white;
background-color: transparent;
}
#editor {
border: hidden !important;
background-color:transparent
}
</style>
@@ -808,6 +810,13 @@
.ql-snow .ql-tooltip[data-mode='video']::before {
content: 'Enter video:';
}
#toolbar {
background-color: transparent;
}
.ql-container {
background-color:transparent;
}
</style>
</head>
@@ -1228,12 +1237,11 @@
bottom: 0px;
height: 50px;
left: 0px;
background-color: white;
border-top: 1px solid ${pageTheme.colors.nav};
}
#toolbar {
background-color: ${pageTheme.colors.bg};
}
`
document.body.appendChild(node);
@@ -1242,7 +1250,7 @@
$('.ql-toolbar').css('border-top',`1px solid ${pageTheme.colors.nav}`);
$('.ql-picker-options').css('background-color',pageTheme.colors.nav);
$('.ql-picker-options').css('border-color',pageTheme.colors.nav);
$('.ql-container').css('background-color',pageTheme.colors.bg);
$('.ql-container').css('color',pageTheme.colors.pri );
$('.ql-editor.ql-blank').before(function() {
$(this).css('color',pageTheme.colors.icon);

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

@@ -52,6 +52,7 @@ export const Folders = ({navigation}) => {
let countDown = 0;
let headerHeight = 0;
let searchHeight = 0;
let marginSet = false;
const setMarginTop = () => {
if (margin !== 150) return;
@@ -59,10 +60,11 @@ export const Folders = ({navigation}) => {
let toAdd = h * 0.06;
setTimeout(() => {
if (margin > headerHeight + searchHeight + toAdd) return;
if (marginSet) return;
setMargin(headerHeight + searchHeight + toAdd);
headerHeight = 0;
searchHeight = 0;
marginSet = true;
}, 10);
}
};