diff --git a/apps/mobile/src/common/common.js b/apps/mobile/src/common/common.js
index 26b33b78d..c13ee0f6d 100755
--- a/apps/mobile/src/common/common.js
+++ b/apps/mobile/src/common/common.js
@@ -1,23 +1,89 @@
import {DeviceEventEmitter, StatusBar, PixelRatio} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
-import {useAppContext} from '../provider/useAppContext';
+
//COLOR SCHEME
export const ACCENT = {
color: '#0560FF',
shade: '#0560FF12',
};
+
+const fixedColors = {
+ accent: ACCENT.color,
+ shade: ACCENT.shade,
+ fg: ACCENT.color,
+ normal: 'black',
+ icon: 'gray',
+ errorBg: '#FFD2D2',
+ errorText: '#D8000C',
+ successBg: '#DFF2BF',
+ successText: '#4F8A10',
+ warningBg: '#FEEFB3',
+ warningText: '#9F6000',
+};
+
+export var COLOR_SCHEME = {
+ night: false,
+ bg: 'white',
+ navbg: '#f6fbfc',
+ nav: '#f0f0f0',
+ pri: 'black',
+ sec: 'white',
+ ...fixedColors,
+};
+
+export const COLOR_SCHEME_LIGHT = {
+ night: false,
+ bg: 'white',
+ navbg: '#f6fbfc',
+ nav: '#f0f0f0',
+ pri: 'black',
+ sec: 'white',
+ ...fixedColors,
+};
+export const COLOR_SCHEME_DARK = {
+ night: true,
+ bg: '#1f1f1f',
+ navbg: '#1c1c1c',
+ nav: '#2b2b2b',
+ pri: 'white',
+ sec: 'black',
+ ...fixedColors,
+};
+
+//FONT FAMILY
+//export const FONT = '';
+//export const FONT_BOLD = '';
+
+//FONT SIZE
+
+export const SIZE = {
+ 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
+export const ph = 10; // padding horizontal
+export const pv = 10; // padding vertical
+export const opacity = 0.85; // active opacity
+
+// GLOBAL FONT
+
+export const WEIGHT = {
+ light: 'NotoSans',
+ regular: 'NotoSans',
+ medium: 'NotoSans',
+ semibold: 'NotoSerif',
+ bold: 'NotoSerif-Bold',
+};
+
export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
- COLOR_SCHEME.bg = colors.bg;
- COLOR_SCHEME.fg = accent.color;
- COLOR_SCHEME.navbg = colors.navbg;
- COLOR_SCHEME.nav = colors.nav;
- COLOR_SCHEME.pri = colors.pri;
- COLOR_SCHEME.sec = colors.sec;
- COLOR_SCHEME.accent = accent.color;
- COLOR_SCHEME.shade = accent.shade;
- COLOR_SCHEME.normal = colors.normal;
- COLOR_SCHEME.night = colors.night;
- COLOR_SCHEME.icon = colors.icon;
+ COLOR_SCHEME = {...colors, accent: accent.color, shade: accent.shade};
DeviceEventEmitter.emit('onThemeUpdate');
@@ -61,94 +127,3 @@ export const onThemeUpdate = (func = () => {}) => {
export const clearThemeUpdateListener = (func = () => {}) => {
return DeviceEventEmitter.removeListener('onThemeUpdate', func);
};
-
-export const COLOR_SCHEME = {
- night: false,
- bg: 'white',
- fg: ACCENT.color,
- navbg: '#f6fbfc',
- nav: '#f0f0f0',
- pri: 'black',
- sec: 'white',
- accent: ACCENT.color,
- shade: ACCENT.shade,
- normal: 'black',
- icon: 'gray',
- errorBg: '#FFD2D2',
- errorText: '#D8000C',
- successBg: '#DFF2BF',
- successText: '#4F8A10',
- warningBg: '#FEEFB3',
- warningText: '#9F6000',
-};
-
-export const COLOR_SCHEME_LIGHT = {
- night: false,
- bg: 'white',
- fg: ACCENT.color,
- navbg: '#f6fbfc',
- nav: '#f0f0f0',
- pri: 'black',
- sec: 'white',
- accent: ACCENT.color,
- shade: ACCENT.shade,
- normal: 'black',
- icon: 'gray',
- errorBg: '#FFD2D2',
- errorText: '#D8000C',
- successBg: '#DFF2BF',
- successText: '#4F8A10',
- warningBg: '#FEEFB3',
- warningText: '#9F6000',
-};
-export const COLOR_SCHEME_DARK = {
- night: true,
- bg: '#1f1f1f',
- fg: ACCENT.color,
- navbg: '#1c1c1c',
- nav: '#2b2b2b',
- pri: 'white',
- sec: 'black',
- accent: ACCENT.color,
- shade: ACCENT.shade,
- normal: 'black',
- icon: 'gray',
- errorBg: '#FFD2D2',
- errorText: '#D8000C',
- successBg: '#DFF2BF',
- successText: '#4F8A10',
- warningBg: '#FEEFB3',
- warningText: '#9F6000',
-};
-
-//FONT FAMILY
-export const FONT = '';
-export const FONT_BOLD = '';
-
-//FONT SIZE
-
-export const SIZE = {
- 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
-export const ph = 10; // padding horizontal
-export const pv = 10; // padding vertical
-export const opacity = 0.85; // active opacity
-
-// GLOBAL FONT
-
-export const WEIGHT = {
- light: 'NotoSans',
- regular: 'NotoSans',
- medium: 'NotoSans',
- semibold: 'NotoSerif',
- bold: 'NotoSerif-Bold',
-};
diff --git a/apps/mobile/src/components/EditorMenu/index.js b/apps/mobile/src/components/EditorMenu/index.js
index 9df729fed..fe07aac66 100644
--- a/apps/mobile/src/components/EditorMenu/index.js
+++ b/apps/mobile/src/components/EditorMenu/index.js
@@ -1,38 +1,25 @@
-import React, {useEffect, useState, createRef, useRef} from 'react';
+import React from 'react';
import {
ScrollView,
View,
Text,
TouchableOpacity,
- SafeAreaView,
Platform,
FlatList,
- DeviceEventEmitter,
ActivityIndicator,
KeyboardAvoidingView,
} 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 {h} 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';
import {useAppContext} from '../../provider/useAppContext';
@@ -51,6 +38,187 @@ export const EditorMenu = ({
let tagToAdd = null;
let backPressCount = 0;
+ _renderListItem = ({item, index}) => (
+ {
+ item.close === false ? null : close();
+ item.func();
+ }}
+ style={{
+ width: '100%',
+ alignSelf: 'center',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'flex-end',
+ paddingHorizontal: '5%',
+ paddingVertical: pv + 5,
+ }}>
+
+
+
+ {item.name}
+
+
+ {item.switch ? (
+
+ ) : (
+ undefined
+ )}
+ {item.check ? (
+
+ {item.on ? (
+
+ ) : null}
+
+ ) : null}
+
+ );
+
+ _renderTag = item => (
+
+
+ {item}
+
+
+ );
+
+ _renderColor = item => (
+ {
+ let props = {...noteProps};
+ if (props.colors.includes(item)) {
+ props.colors.splice(props.colors.indexOf(item), 1);
+ } else {
+ props.colors.push(item);
+ }
+
+ updateProps(props);
+ }}
+ style={{
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ marginRight: 5,
+ marginBottom: 5,
+ borderWidth: 1.5,
+ borderRadius: 100,
+ padding: 3,
+ borderColor: noteProps.colors.includes(item)
+ ? colors.pri
+ : colors.shade,
+ }}>
+
+ {noteProps.colors.includes(item) ? (
+
+ ) : null}
+
+
+ );
+
+ _onSubmit = () => {
+ if (!tagToAdd || tagToAdd === '#') return;
+
+ let tag = tagToAdd;
+ if (tag[0] !== '#') {
+ tag = '#' + tag;
+ }
+ if (tag.includes(' ')) {
+ tag = tag.replace(' ', '_');
+ }
+ let oldProps = {...noteProps};
+ oldProps.tags.push(tag);
+ tagsInputRef.setNativeProps({
+ text: '#',
+ });
+ updateProps(oldProps);
+ tagToAdd = '';
+ setTimeout(() => {
+ tagsInputRef.focus();
+ }, 300);
+ };
+
+ _onKeyPress = event => {
+ if (event.nativeEvent.key === 'Backspace') {
+ if (backPressCount === 0 && !tagToAdd) {
+ backPressCount = 1;
+
+ return;
+ }
+ if (backPressCount === 1 && !tagToAdd) {
+ backPressCount = 0;
+
+ let tagInputValue = noteProps.tags[noteProps.tags.length - 1];
+ let oldProps = {...noteProps};
+ if (allTags.length === 1) return;
+
+ oldProps.tags.splice(allTags.length - 1);
+
+ updateProps(oldProps);
+ tagsInputRef.setNativeProps({
+ text: tagInputValue,
+ });
+
+ setTimeout(() => {
+ tagsInputRef.focus();
+ }, 300);
+ }
+ }
+ };
+
return (
item.name}
- renderItem={({item, index}) => (
- {
- item.close === false ? null : close();
- item.func();
- }}
- style={{
- width: '100%',
- alignSelf: 'center',
- flexDirection: 'row',
- justifyContent: 'space-between',
- alignItems: 'flex-end',
- paddingHorizontal: '5%',
- paddingVertical: pv + 5,
- }}>
-
-
-
- {item.name}
-
-
- {item.switch ? (
-
- ) : (
- undefined
- )}
- {item.check ? (
-
- {item.on ? (
-
- ) : null}
-
- ) : null}
-
- )}
+ renderItem={_renderListItem}
/>
- {noteProps.tags.map(item => (
-
-
- {item}
-
-
- ))}
+ {noteProps.tags.map(_renderTag)}
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 =
- noteProps.tags[noteProps.tags.length - 1];
- let oldProps = {...noteProps};
- if (allTags.length === 1) return;
-
- oldProps.tags.splice(allTags.length - 1);
-
- updateProps(oldProps);
- tagsInputRef.setNativeProps({
- text: tagInputValue,
- });
-
- setTimeout(() => {
- tagsInputRef.focus();
- }, 300);
- }
- }
- }}
- onSubmitEditing={() => {
- if (!tagToAdd || tagToAdd === '#') return;
-
- let tag = tagToAdd;
- if (tag[0] !== '#') {
- tag = '#' + tag;
- }
- if (tag.includes(' ')) {
- tag = tag.replace(' ', '_');
- }
- let oldProps = {...noteProps};
- oldProps.tags.push(tag);
- tagsInputRef.setNativeProps({
- text: '#',
- });
- updateProps(oldProps);
- tagToAdd = '';
- setTimeout(() => {
- tagsInputRef.focus();
- }, 300);
- }}
+ onKeyPress={_onKeyPress}
+ onSubmitEditing={_onSubmit}
/>
@@ -386,7 +417,7 @@ export const EditorMenu = ({
width: 30,
}}
name="tag"
- color={colors.icon}
+ color={colors.pri}
size={SIZE.md}
/>
- Add to Color
+ Assign Colors
@@ -416,46 +447,7 @@ export const EditorMenu = ({
'purple',
'orange',
'gray',
- ].map(item => (
- {
- let props = {...noteProps};
- if (props.colors.includes(item)) {
- props.colors.splice(props.colors.indexOf(item), 1);
- } else {
- props.colors.push(item);
- }
-
- updateProps(props);
- }}
- style={{
- flexDirection: 'row',
- justifyContent: 'flex-start',
- alignItems: 'center',
- marginRight: 5,
- marginBottom: 5,
- borderWidth: 1.5,
- borderRadius: 100,
- padding: 3,
- borderColor: noteProps.colors.includes(item)
- ? colors.pri
- : colors.navbg,
- }}>
-
- {noteProps.colors.includes(item) ? (
-
- ) : null}
-
-
- ))}
+ ].map(_renderColor)}
{}, hide, update = () => {}}) => {
width: 30,
}}
name="tag"
- color={colors.icon}
+ color={colors.pri}
size={SIZE.md}
/>
{
) : (
- {
- setTimeout(() => {
- setOpen(args);
- }, 500);
- }}
- menu={
- {
- setNoteProps(props);
+
+ {
+ setTimeout(() => {
+ setOpen(args);
+ }, 500);
+ }}
+ menu={
+ {
+ setNoteProps(props);
- console.log(props, noteProps);
- }}
- close={() => {
- setTimeout(() => {
- setOpen(args);
- }, 500);
- }}
- />
- }>
-
-
-
+ console.log(props, noteProps);
+ }}
+ close={() => {
+ setTimeout(() => {
+ setOpen(args);
+ }, 500);
+ }}
+ />
+ }>
+
+
+
+
);
};
diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js
index 4a3a60a72..2777b4532 100755
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState, createRef, useCallback} from 'react';
+import React, {useEffect, useState} from 'react';
import {
SafeAreaView,
TouchableOpacity,
@@ -16,7 +16,6 @@ import {NotesList} from '../../components/NotesList';
import {db} from '../../../App';
import Icon from 'react-native-vector-icons/Feather';
import NavigationService from '../../services/NavigationService';
-import {useForceUpdate} from '../ListsEditor';
import * as Animatable from 'react-native-animatable';
import {useIsFocused} from 'react-navigation-hooks';
import {useAppContext} from '../../provider/useAppContext';
diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js
index 5366862bc..0c31da531 100644
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -158,92 +158,11 @@ export const Notebook = ({navigation}) => {
}
offsetY = y;
}}
- ListHeaderComponent={
- <>
- {params.hideMore ? (
-
- ) : (
- {
- setAddNotebook(true);
- }}
- style={{
- borderWidth: 1,
- borderRadius: 5,
- marginTop: Platform.OS == 'ios' ? 145 : 185,
- width: '90%',
- marginHorizontal: '5%',
- paddingHorizontal: ph,
- borderColor: colors.nav,
- paddingVertical: pv + 5,
- flexDirection: 'row',
- justifyContent: 'space-between',
- alignItems: 'center',
- marginBottom: 15,
- }}>
-
- View All Notes
-
-
- )}
-
- }
ListHeaderComponent={
-
-
-
-
-
-
- {
- setNumColumns(numColumns === 1 ? 2 : 1);
- }}
- style={{
- justifyContent: 'center',
- alignItems: 'center',
- }}>
-
-
-
+ marginTop: Platform.OS == 'ios' ? 145 : 185,
+ }}>
}
numColumns={numColumns}
key={numColumns}
@@ -327,7 +246,7 @@ export const Notebook = ({navigation}) => {
{' '}Add a new topic