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

ui updates

Browse Source
This commit is contained in:
ammarahm-ed
2020-11-10 17:18:19 +05:00
parent 6efcef843d
commit 537005aba5
18 changed files with 503 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,8 +71,6 @@ export const ActionSheetComponent = ({
function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
let newColors = setColorScheme(colors, accent);
StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
dispatch({type: Actions.THEME, colors: newColors});
}

14
apps/mobile/src/components/Button/index.js
View File

@@ -3,7 +3,7 @@ import { ActivityIndicator, StyleSheet, Text } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
import {PressableButton} from '../PressableButton';
import {ph, pv, SIZE, WEIGHT} from "../../utils/SizeUtils";
import {ph, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
export const Button = ({
height = 40,
@@ -14,11 +14,12 @@ export const Button = ({
title = '',
icon,
color = 'accent',
fontSize=SIZE.sm
fontSize = SIZE.sm,
iconColor = 'white',
}) => {
const [state, dispatch] = useTracked();
const {colors} = state;
const usedColor = 'accent' ? colors.accent : color;
const usedColor = color === 'accent' ? colors.accent : colors[color];
return (
<PressableButton
@@ -44,12 +45,15 @@ export const Button = ({
style={{
marginRight: 5,
}}
color={grayed ? colors.icon : 'white'}
color={grayed ? colors.icon : colors[iconColor]}
size={SIZE.lg}
/>
) : null}
<Text
style={[styles.buttonText, {color: grayed ? colors.icon : 'white',fontSize:fontSize}]}>
style={[
styles.buttonText,
{color: grayed ? colors.icon : colors[iconColor], fontSize: fontSize},
]}>
{title}
</Text>
</PressableButton>

2
apps/mobile/src/components/Container/ContainerBottomButton.js
View File

@@ -82,7 +82,7 @@ export const ContainerBottomButton = ({title, onPress, color}) => {
<Icon
name={title === 'Clear all trash' ? 'delete' : 'plus'}
color="white"
size={SIZE.xl}
size={SIZE.xxl}
/>
</View>
</PressableButton>

8
apps/mobile/src/components/Header/HeaderMenu.js
View File

@@ -24,12 +24,12 @@ export const HeaderMenu = () => {
}}>
<Text
style={{
fontSize: SIZE.xs + 1,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
color: colors.pri,
marginRight: 5,
height: 30,
textAlignVertical: 'bottom',
height: 35,
textAlignVertical:'center'
}}>
{settings.sort.slice(0, 1).toUpperCase() +
settings.sort.slice(1, settings.sort.length)}
@@ -40,7 +40,7 @@ export const HeaderMenu = () => {
settings.sortOrder === 'asc' ? 'sort-ascending' : 'sort-descending'
}
style={{
textAlignVertical: 'bottom',
textAlignVertical:'center',
height: 30,
}}
size={SIZE.md}

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

@@ -7,9 +7,10 @@ import {
TAG_SVG,
FAV_SVG,
TRASH_SVG,
SETTINGS_SVG,
} from '../../assets/images/assets';
import {useTracked} from '../../provider';
export const Placeholder = ({type}) => {
export const Placeholder = ({type, w, h}) => {
const [state, dispatch] = useTracked();
const {colors} = state;
const getSVG = () => {
@@ -24,14 +25,16 @@ export const Placeholder = ({type}) => {
return FAV_SVG(colors.accent);
case 'trash':
return TRASH_SVG(colors.accent);
case 'settings':
return SETTINGS_SVG(colors.accent);
}
};
return (
<View
style={{
height: 250,
width: 250,
height: w || 250,
width: h || 250,
}}>
<SvgXml xml={getSVG()} width="100%" height="100%" />
</View>

8
apps/mobile/src/components/Menu/TagsSection.js
View File

@@ -1,11 +1,11 @@
import React, {useEffect} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {Text, View} from 'react-native';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import {eSendEvent} from '../../services/EventManager';
import {refreshNotesPage} from '../../utils/Events';
import NavigationService from '../../services/Navigation';
import {opacity, SIZE, WEIGHT} from '../../utils/SizeUtils';
import {refreshNotesPage} from '../../utils/Events';
import {SIZE, WEIGHT} from '../../utils/SizeUtils';
import {PressableButton} from '../PressableButton';
export const TagsSection = () => {
@@ -33,7 +33,7 @@ export const TagsSection = () => {
heading: item.title,
},
});
NavigationService.navigate('Notes', params);
NavigationService.navigate('NotesPage', params);
eSendEvent(refreshNotesPage, params);
NavigationService.closeDrawer();
};

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

@@ -25,7 +25,6 @@ export const Menu = ({close = () => {}, hide, noTextMode = false}) => {
function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
let newColors = setColorScheme(colors, accent);
StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
dispatch({type: Actions.THEME, colors: newColors});
}

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

@@ -78,7 +78,7 @@ export const NotebookItem = ({
item.topics.slice(1, 3).map((topic) => (
<TouchableOpacity
onPress={() => {
NavigationService.navigate('Notes', {
NavigationService.navigate('NotesPage', {
...topic,
});
}}

100
apps/mobile/src/components/SimpleList/ListHeaderComponent.js Normal file
View File

@@ -0,0 +1,100 @@
import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import {useTracked} from '../../provider';
import {normalize, SIZE} from '../../utils/SizeUtils';
import Heading from '../Typography/Heading';
import {Placeholder} from '../ListPlaceholders';
import {eScrollEvent} from '../../utils/Events';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import Animated from 'react-native-reanimated';
import {dWidth} from '../../utils';
import {MessageCard} from './MessageCard';
import Paragraph from '../Typography/Paragraph';
const opacity = new Animated.Value(1);
export const ListHeaderComponent = ({
type,
data,
messageCard = true,
title,
paragraph,
color
}) => {
const [state] = useTracked();
const {colors, headerTextState} = state;
const onScroll = async (y) => {
if (y > 25) {
let o = y / 125;
o = 1 - o;
console.log(o);
opacity.setValue(o);
} else {
opacity.setValue(1);
}
};
useEffect(() => {
eSubscribeEvent(eScrollEvent, onScroll);
return () => {
eUnSubscribeEvent(eScrollEvent, onScroll);
};
}, []);
return (
<Animated.View
style={{
minHeight: 200,
padding: 12,
backgroundColor:color || colors.shade,
opacity: opacity,
}}>
{messageCard && <MessageCard />}
{/* <Icon style={{
position:'absolute',
right:0,
}} name="home" color={colors.bg} size={SIZE.xxxl * 4} /> */}
<View
style={{
right: 0,
paddingRight: 12,
opacity: 0.5,
bottom: 0,
paddingHorizontal: 12,
position: 'absolute',
}}>
<Placeholder w={normalize(150)} h={normalize(150)} type={type} />
</View>
<View
style={{
position: 'absolute',
bottom: 0,
paddingHorizontal: 12,
paddingBottom: 12,
}}>
<Heading
style={{marginBottom: paragraph ? -10 : 0}}
size={SIZE.xxxl * 1.5}
color={headerTextState.color}>
<Text
style={{
color: colors.accent,
}}>
{headerTextState.heading.slice(0, 1) === '#' ? '#' : null}
</Text>
{title
? title
: headerTextState.heading.slice(0, 1) === '#'
? headerTextState.heading.slice(1)
: headerTextState.heading}
</Heading>
{paragraph && (
<Paragraph color={colors.icon}> {'\n' + paragraph}</Paragraph>
)}
</View>
</Animated.View>
);
};

56
apps/mobile/src/components/SimpleList/MessageCard.js Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTracked } from '../../provider';
import { COLORS_NOTE } from '../../utils/Colors';
import { SIZE } from '../../utils/SizeUtils';
export const MessageCard = ({data}) => {
const [state] = useTracked();
const {colors, selectionMode, currentScreen, messageBoardState} = state;
return (
<View>
{!messageBoardState.visible || selectionMode ? null : (
<TouchableOpacity
activeOpacity={0.7}
onPress={messageBoardState.onPress}
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
position: 'absolute',
right: 0,
top: 0,
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<Text
style={{
color: COLORS_NOTE[currentScreen]
? COLORS_NOTE[currentScreen]
: colors.accent,
fontSize: SIZE.sm,
marginRight: 10,
}}>
{messageBoardState.actionText}
</Text>
<Icon
name="arrow-right"
size={SIZE.sm}
color={
COLORS_NOTE[currentScreen]
? COLORS_NOTE[currentScreen]
: colors.accent
}
/>
</View>
</TouchableOpacity>
)}
</View>
);
};

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

@@ -22,6 +22,11 @@ import {COLORS_NOTE} from '../../utils/Colors';
import {SIZE, WEIGHT} from '../../utils/SizeUtils';
import {db} from '../../utils/DB';
import {HeaderMenu} from '../Header/HeaderMenu';
import Heading from '../Typography/Heading';
import {ListHeaderComponent} from './ListHeaderComponent';
import Paragraph from '../Typography/Paragraph';
import {Button} from '../Button';
import Seperator from '../Seperator';
const header = {
type: 'MAIN_HEADER',
@@ -38,9 +43,10 @@ const SimpleList = ({
sortMenuButton,
scrollRef,
jumpToDialog,
placeholderData,
}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode, messageBoardState} = state;
const {colors, selectionMode} = state;
const searchResults = {...state.searchResults};
const [refreshing, setRefreshing] = useState(false);
const [dataProvider, setDataProvider] = useState(
@@ -53,7 +59,6 @@ const SimpleList = ({
const listData = data;
const dataType = type;
const _onScroll = (event) => {
console.log(event.nativeEvent);
if (!event) return;
let y = event.nativeEvent.contentOffset.y;
eSendEvent(eScrollEvent, y);
@@ -76,7 +81,7 @@ const SimpleList = ({
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: 12,
height: 30,
height: 35,
}}>
<Text
onPress={() => {
@@ -89,9 +94,8 @@ const SimpleList = ({
styles.sectionHeader,
{
color: colors.accent,
height: 30,
height: 35,
minWidth: 60,
textAlignVertical: 'bottom',
},
]}>
{item.title}
@@ -146,10 +150,29 @@ const SimpleList = ({
style={[
{
backgroundColor: colors.bg,
height: '100%',
},
styles.emptyList,
]}>
<>{placeholder}</>
<ListHeaderComponent type={type} />
<View
style={{
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Heading>{placeholderData.heading}</Heading>
<Paragraph color={colors.icon}>{placeholderData.paragraph}</Paragraph>
<Seperator />
{placeholderData.button && <Button
onPress={placeholderData.action}
color="bg"
title={placeholderData.button}
icon="plus"
iconColor="accent"
fontSize={SIZE.md}
/> }
</View>
</View>
);
@@ -181,14 +204,11 @@ const SimpleList = ({
break;
case 'header':
dim.width = width;
dim.height = 30 * fontScale;
dim.height = 35 * fontScale;
break;
case 'MAIN_HEADER':
dim.width = width;
dim.height =
!messageBoardState.visible || !listData[0] || selectionMode
? 0
: 40 * fontScale;
dim.height = 200;
break;
default:
dim.width = width;
@@ -223,6 +243,7 @@ const SimpleList = ({
dataProvider={dataProvider}
rowRenderer={_renderRow}
onScroll={_onScroll}
canChangeSize={true}
renderFooter={() => <View style={{height: 400}} />}
scrollViewProps={{
refreshControl: (
@@ -249,7 +270,6 @@ const SimpleList = ({
height: '100%',
backgroundColor: colors.bg,
width: '100%',
paddingTop: 10,
}}
/>
);
@@ -257,77 +277,7 @@ const SimpleList = ({
export default SimpleList;
const MessageCard = ({data}) => {
const [state] = useTracked();
const {colors, selectionMode, currentScreen, messageBoardState} = state;
return (
<View>
{!messageBoardState.visible || !data[0] || selectionMode ? null : (
<PressableButton
onPress={messageBoardState.onPress}
color={
COLORS_NOTE[currentScreen]
? COLORS_NOTE[currentScreen]
: colors.shade
}
selectedColor={
COLORS_NOTE[currentScreen]
? COLORS_NOTE[currentScreen]
: colors.accent
}
alpha={!colors.night ? -0.02 : 0.1}
opacity={0.12}
customStyle={styles.loginCard}>
<View
style={{
width: 25,
backgroundColor: COLORS_NOTE[currentScreen]
? COLORS_NOTE[currentScreen]
: colors.accent,
height: 25,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
}}>
<Icon
style={styles.loginIcon}
name={messageBoardState.icon}
color="white"
size={SIZE.xs}
/>
</View>
<View
style={{
marginLeft: 10,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
color: colors.icon,
fontSize: SIZE.xxs - 1,
}}>
{messageBoardState.message}
</Text>
<Text
style={{
color: COLORS_NOTE[currentScreen]
? COLORS_NOTE[currentScreen]
: colors.accent,
fontSize: SIZE.xxs,
}}>
{messageBoardState.actionText}
</Text>
</View>
</PressableButton>
)}
</View>
);
};
const ListHeaderComponent = ({type, data}) => {
return <MessageCard type={type} data={data} />;
};
const styles = StyleSheet.create({
loginCard: {
@@ -354,7 +304,7 @@ const styles = StyleSheet.create({
},
sectionHeader: {
fontFamily: WEIGHT.bold,
fontSize: SIZE.xs + 1,
fontSize: SIZE.sm,
alignSelf: 'center',
textAlignVertical: 'center',
},

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

@@ -136,7 +136,7 @@ class SortDialog extends React.Component {
<Seperator/>
{
Object.keys(SORT).map((item, index) => <PressableButton
key={item}
color={this.state.settings.sort === item ? colors.shade : "transparent"}
onPress={async () => {
await setSetting(this.state.settings, 'sort', item);

1
apps/mobile/src/components/Typography/Paragraph.js
View File

@@ -26,6 +26,7 @@ const Paragraph = ({color, size, style, ...restProps}) => {
fontFamily: WEIGHT.regular,
fontSize: size || SIZE.sm,
color: color || colors.pri,
fontWeight:'400'
},
style,
]}></Text>

4
apps/mobile/src/navigation/NavigatorStack.js
View File

@@ -74,7 +74,7 @@ export const NavigatorStack = () => {
headerShown: false,
cardStyleInterpolator: forFade,
}}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Notes" component={Home} />
<Stack.Screen
initialParams={{
title: 'Notebooks',
@@ -86,7 +86,7 @@ export const NavigatorStack = () => {
/>
<Stack.Screen name="Favorites" component={Favorites} />
<Stack.Screen name="Trash" component={Trash} />
<Stack.Screen name="Notes" component={Notes} />
<Stack.Screen name="NotesPage" component={Notes} />
<Stack.Screen name="Tags" component={Tags} />
<Stack.Screen name="Notebook" component={Notebook} />
<Stack.Screen name="Settings" component={Settings} />

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

@@ -103,7 +103,7 @@ export const itemSkus = Platform.select({
export const MenuItemsList = [
{
name: 'Home',
name: 'Notes',
icon: 'home-variant-outline',
close: true,
},

65
apps/mobile/src/views/Editor/EditorHeader.js
View File

@@ -1,13 +1,31 @@
import React, {createRef, useEffect, useState} from 'react';
import {BackHandler, Keyboard, Platform, StatusBar, View,} from 'react-native';
import React, {useEffect, useState} from 'react';
import {BackHandler, Keyboard, Platform, StatusBar, View} from 'react-native';
import {ActionIcon} from '../../components/ActionIcon';
import {ActionSheetEvent, simpleDialogEvent,} from '../../components/DialogManager/recievers';
import {TEMPLATE_EXIT_FULLSCREEN, TEMPLATE_NEW_NOTE,} from '../../components/DialogManager/Templates';
import {
ActionSheetEvent,
simpleDialogEvent,
} from '../../components/DialogManager/recievers';
import {
TEMPLATE_EXIT_FULLSCREEN,
TEMPLATE_NEW_NOTE,
} from '../../components/DialogManager/Templates';
import {useTracked} from '../../provider';
import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent, ToastEvent,} from '../../services/EventManager';
import {eClearEditor, eCloseFullscreenEditor, eOnLoadNote, eOpenFullscreenEditor,} from '../../utils/Events';
import {exitEditorAnimation} from '../../utils/Animations';
import {DDS} from '../../services/DeviceDetection';
import {
eSendEvent,
eSubscribeEvent,
eUnSubscribeEvent,
ToastEvent,
} from '../../services/EventManager';
import {editing} from '../../utils';
import {exitEditorAnimation} from '../../utils/Animations';
import {
eClearEditor,
eCloseFullscreenEditor,
eOnLoadNote,
eOpenFullscreenEditor,
} from '../../utils/Events';
import {normalize} from '../../utils/SizeUtils';
import {
checkNote,
clearEditor,
@@ -19,9 +37,7 @@ import {
post,
textInput,
} from './Functions';
import {normalize} from '../../utils/SizeUtils';
import {DDS} from '../../services/DeviceDetection';
import HistoryComponent from "./HistoryComponent";
import HistoryComponent from './HistoryComponent';
let handleBack;
let tapCount = 0;
@@ -31,8 +47,6 @@ const EditorHeader = ({noMenu}) => {
const {colors, premiumUser} = state;
const [fullscreen, setFullscreen] = useState(false);
useEffect(() => {
let c = {...colors};
c.factor = normalize(1);
@@ -57,7 +71,6 @@ const EditorHeader = ({noMenu}) => {
eUnSubscribeEvent(eClearEditor, onCallClear);
eUnSubscribeEvent(eCloseFullscreenEditor, closeFullscreen);
eUnSubscribeEvent(eOnLoadNote, load);
};
}, []);
@@ -80,9 +93,9 @@ const EditorHeader = ({noMenu}) => {
}, [noMenu]);
const load = async (item) => {
Keyboard.addListener("keyboardDidShow",() => {
post("keyboard")
})
Keyboard.addListener('keyboardDidShow', () => {
post('keyboard');
});
await loadNote(item);
if (item.type === 'new') {
textInput.current?.focus();
@@ -133,14 +146,18 @@ const EditorHeader = ({noMenu}) => {
simpleDialogEvent(TEMPLATE_EXIT_FULLSCREEN());
} else {
exitEditorAnimation();
eSendEvent('historyEvent', {
undo: 0,
redo: 0,
});
if (checkNote() && isNotedEdited()) {
ToastEvent.show('Note Saved!', 'success');
}
await clearEditor();
Keyboard.removeListener("keyboardDidShow",() => {
post("keyboard")
})
Keyboard.removeListener('keyboardDidShow', () => {
post('keyboard');
});
if (handleBack) {
handleBack.remove();
handleBack = null;
@@ -164,8 +181,7 @@ const EditorHeader = ({noMenu}) => {
customStyle={{
marginLeft: -5,
position: 'absolute',
marginTop:
Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 5,
marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 5,
zIndex: 11,
left: 0,
justifyContent: 'center',
@@ -208,14 +224,16 @@ const EditorHeader = ({noMenu}) => {
}}>
<ActionIcon
name="plus"
color={colors.heading}
color={colors.accent}
customStyle={{
marginLeft: 10,
borderRadius: 5,
}}
onPress={() => {
simpleDialogEvent(TEMPLATE_NEW_NOTE);
}}
/>
{DDS.isTab && !DDS.isSmallTab && !fullscreen ? (
<ActionIcon
name="fullscreen"
@@ -256,7 +274,8 @@ const EditorHeader = ({noMenu}) => {
}}
/>
</View>
</View></>
</View>
</>
);
};

2
apps/mobile/src/views/Editor/Functions.js
View File

@@ -166,6 +166,8 @@ export const _onMessage = async (evt) => {
clearTimeout(timer);
timer = null;
if (message === 'loaded') {
} else if (JSON.parse(message).type === 'history') {
eSendEvent('historyEvent', JSON.parse(message));
} else if (message !== '' && message !== 'loaded') {
onChange(message);
timer = setTimeout(() => {

23
apps/mobile/src/views/Editor/HistoryComponent.js
View File

@@ -1,6 +1,7 @@
import React, {useState} from 'react';
import React, {useEffect, useState} from 'react';
import {ActionIcon} from '../../components/ActionIcon';
import {useTracked} from '../../provider';
import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
import {post,} from './Functions';
@@ -12,26 +13,42 @@ const HistoryComponent = () => {
redo:0
});
const onHistoryChange = (data) => {
setHistoryState(data);
}
useEffect(() => {
eSubscribeEvent('historyEvent',onHistoryChange);
return () => {
eUnSubscribeEvent('historyEvent',onHistoryChange);
}
},[])
return (
<>
<ActionIcon
name="undo-variant"
name="undo"
disabled={historyState.undo === 0}
color={colors.heading}
customStyle={{
marginLeft: 10,
}}
onPress={() => {
if (historyState.undo === 0) return;
post('undo');
}}
/>
<ActionIcon
name="redo-variant"
name="redo"
disabled={historyState.redo=== 0}
color={colors.heading}
customStyle={{
marginLeft: 10,
}}
onPress={() => {
if (historyState.redo === 0) return;
post('redo');
}}
/>