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

update items ui in menu

Browse Source
This commit is contained in:
ammarahm-ed
2021-02-20 14:52:12 +05:00
parent e1a6a5f34f
commit 9a6e6b4a61
7 changed files with 73 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mobile/src/components/Header/HeaderLeftMenu.js
View File

@@ -19,7 +19,7 @@ export const HeaderLeftMenu = () => {
const onHeaderStateChange = (event) => { const onHeaderStateChange = (event) => {
if (!event) return; if (!event) return;
setHeaderTextState(event); setHeaderTextState(event);
}; };
useEffect(() => { useEffect(() => {

2
apps/mobile/src/components/Header/HeaderRightMenu.js
View File

@@ -20,7 +20,7 @@ export const HeaderRightMenu = () => {
const onHeaderStateChange = (event) => { const onHeaderStateChange = (event) => {
if (!event) return; if (!event) return;
setHeaderTextState(event); setHeaderTextState(event);
}; };
useEffect(() => { useEffect(() => {

2
apps/mobile/src/components/Header/HeaderTitle.js
View File

@@ -17,7 +17,7 @@ export const HeaderTitle = () => {
const [headerTextState, setHeaderTextState] = useState(Navigation.getHeaderState()); const [headerTextState, setHeaderTextState] = useState(Navigation.getHeaderState());
const onHeaderStateChange = (event) => { const onHeaderStateChange = (event) => {
setHeaderTextState(event); setHeaderTextState(event);
}; };
useEffect(() => { useEffect(() => {
eSubscribeEvent('onHeaderStateChange', onHeaderStateChange); eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);

7
apps/mobile/src/components/Header/index.js
View File

@@ -26,7 +26,7 @@ export const Header = ({root}) => {
const onHeaderStateChange = (event) => { const onHeaderStateChange = (event) => {
if (!event) return; if (!event) return;
setHeaderTextState(event); setHeaderTextState(event);
}; };
useEffect(() => { useEffect(() => {
@@ -36,11 +36,6 @@ export const Header = ({root}) => {
}; };
}, []); }, []);
const onScroll = (y) => { const onScroll = (y) => {
if (y > 150) { if (y > 150) {
setHide(false); setHide(false);

10
apps/mobile/src/components/Menu/ColorSection.js
View File

@@ -25,6 +25,8 @@ export const ColorSection = () => {
dispatch({type: Actions.COLORS}); dispatch({type: Actions.COLORS});
} }
}, [loading]); }, [loading]);
return colorNotes.map((item, index) => ( return colorNotes.map((item, index) => (
<ColorItem key={item.id} item={item} index={index} /> <ColorItem key={item.id} item={item} index={index} />
)); ));
@@ -37,7 +39,7 @@ const ColorItem = ({item, index}) => {
const onHeaderStateChange = (event) => { const onHeaderStateChange = (event) => {
if (event?.id === item.id) { if (event?.id === item.id) {
setHeaderTextState(event); setHeaderTextState(event);
} else { } else {
setHeaderTextState(null); setHeaderTextState(null);
} }
@@ -91,14 +93,14 @@ const ColorItem = ({item, index}) => {
}}> }}>
<View <View
style={{ style={{
width: 30, width: 35,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'flex-start', alignItems: 'flex-start',
}}> }}>
<View <View
style={{ style={{
width: SIZE.md, width: SIZE.lg - 2,
height: SIZE.md, height: SIZE.lg - 2,
backgroundColor: COLORS_NOTE[item.title], backgroundColor: COLORS_NOTE[item.title],
borderRadius: 100, borderRadius: 100,
justifyContent: 'center', justifyContent: 'center',

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

@@ -38,7 +38,7 @@ export const MenuListItem = ({item, index, noTextMode, testID, rightBtn}) => {
const onHeaderStateChange = (event) => { const onHeaderStateChange = (event) => {
if (event.id === item.name.toLowerCase() + '_navigation') { if (event.id === item.name.toLowerCase() + '_navigation') {
setHeaderTextState(event); setHeaderTextState(event);
} else { } else {
setHeaderTextState(null); setHeaderTextState(null);
} }
@@ -74,7 +74,7 @@ export const MenuListItem = ({item, index, noTextMode, testID, rightBtn}) => {
}}> }}>
<Icon <Icon
style={{ style={{
width: 30, width: 35,
textAlignVertical: 'center', textAlignVertical: 'center',
textAlign: 'left', textAlign: 'left',
}} }}
@@ -84,7 +84,7 @@ export const MenuListItem = ({item, index, noTextMode, testID, rightBtn}) => {
? colors.accent ? colors.accent
: colors.pri : colors.pri
} }
size={SIZE.md} size={SIZE.lg - 2}
/> />
{headerTextState?.id === item.name.toLowerCase() + '_navigation' ? ( {headerTextState?.id === item.name.toLowerCase() + '_navigation' ? (
<Heading color={colors.accent} size={SIZE.md}> <Heading color={colors.accent} size={SIZE.md}>

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

@@ -1,9 +1,8 @@
import React, {useEffect, useState} from 'react'; import React, {useEffect, useRef, useState} from 'react';
import {FlatList, InteractionManager, View} from 'react-native'; import {FlatList, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions'; import {Actions} from '../../provider/Actions';
import {DDS} from '../../services/DeviceDetection';
import { import {
eSendEvent, eSendEvent,
eSubscribeEvent, eSubscribeEvent,
@@ -12,12 +11,10 @@ import {
import Navigation from '../../services/Navigation'; import Navigation from '../../services/Navigation';
import {getElevation} from '../../utils'; import {getElevation} from '../../utils';
import {db} from '../../utils/DB'; import {db} from '../../utils/DB';
import {refreshNotesPage} from '../../utils/Events'; import {eOnNewTopicAdded, refreshNotesPage} from '../../utils/Events';
import {rootNavigatorRef} from '../../utils/Refs'; import {normalize, SIZE} from '../../utils/SizeUtils';
import {normalize, ph, pv, SIZE} from '../../utils/SizeUtils'; import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
import BaseDialog from '../Dialog/base-dialog'; import {Button} from '../Button';
import DialogButtons from '../Dialog/dialog-buttons';
import DialogHeader from '../Dialog/dialog-header';
import {PressableButton} from '../PressableButton'; import {PressableButton} from '../PressableButton';
import Heading from '../Typography/Heading'; import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph'; import Paragraph from '../Typography/Paragraph';
@@ -46,7 +43,7 @@ export const TagsSection = () => {
id: item.id, id: item.id,
type: item.type, type: item.type,
}); });
rootNavigatorRef.current?.setParams(params); eSendEvent(eOnNewTopicAdded, params);
} else if (item.type === 'tag') { } else if (item.type === 'tag') {
params = params = { params = params = {
title: item.title, title: item.title,
@@ -85,26 +82,6 @@ export const TagsSection = () => {
contentContainerStyle={{ contentContainerStyle={{
flexGrow: 1, flexGrow: 1,
}} }}
ListEmptyComponent={
<View
style={{
flexGrow: 1,
minHeight: '40%',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: '10%',
}}>
<Heading style={{marginBottom: 2.5}} size={SIZE.md}>
Shortcuts
</Heading>
<Paragraph
style={{textAlign: 'center'}}
color={colors.icon}
size={SIZE.sm}>
You can add shortcuts of notebooks, topics and tags here.
</Paragraph>
</View>
}
keyExtractor={(item, index) => item.id} keyExtractor={(item, index) => item.id}
renderItem={({item, index}) => ( renderItem={({item, index}) => (
<PinItem item={item} index={index} onPress={onPress} /> <PinItem item={item} index={index} onPress={onPress} />
@@ -120,7 +97,7 @@ const PinItem = ({item, index, onPress}) => {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [headerTextState, setHeaderTextState] = useState(null); const [headerTextState, setHeaderTextState] = useState(null);
const color = headerTextState?.id === item.id ? colors.accent : colors.pri; const color = headerTextState?.id === item.id ? colors.accent : colors.pri;
const fwdRef = useRef();
const onHeaderStateChange = (event) => { const onHeaderStateChange = (event) => {
if (event?.id === item.id) { if (event?.id === item.id) {
setHeaderTextState(event); setHeaderTextState(event);
@@ -135,36 +112,45 @@ const PinItem = ({item, index, onPress}) => {
eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange); eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
}; };
}, []); }, []);
const icons = {
topic: 'format-title',
notebook: 'book-outline',
tag: 'pound',
};
return ( return (
<> <>
{visible && ( {visible && (
<BaseDialog visible={true}> <ActionSheetWrapper
<View onClose={() => {
style={{ setVisible(false);
...getElevation(5), }}
width: DDS.isTab ? 350 : '80%', gestureEnabled={false}
maxHeight: 350, fwdRef={fwdRef}
borderRadius: 5, visible={true}>
backgroundColor: colors.bg, <Button
paddingHorizontal: ph, title="Remove Shortcut"
paddingVertical: pv, type="error"
}}> onPress={async () => {
<DialogHeader title="Remove Shortcut" paragraph={`Remove this ${item.type} from menu`} /> await db.settings.unpin(item.id);
<DialogButtons dispatch({type: Actions.MENU_PINS});
positiveTitle="Remove" }}
negativeTitle="Cancel" fontSize={SIZE.md}
onPressNegative={() => setVisible(false)} width="95%"
onPressPositive={async () => { height={50}
await db.settings.unpin(item.id); customStyle={{
dispatch({type: Actions.MENU_PINS}); marginBottom: 30,
}} }}
/> />
</View> </ActionSheetWrapper>
</BaseDialog>
)} )}
<PressableButton <PressableButton
type="transparent" type="transparent"
onLongPress={() => setVisible(true)} onLongPress={() => {
setVisible(true);
fwdRef.current?.show();
}}
onPress={() => onPress(item)} onPress={() => onPress(item)}
customStyle={{ customStyle={{
flexDirection: 'row', flexDirection: 'row',
@@ -180,30 +166,30 @@ const PinItem = ({item, index, onPress}) => {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
flexGrow: 1, flexGrow: 1,
flex: 1,
}}> }}>
<View <View
style={{ style={{
width: 30, width: 35,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'flex-start',
}}> }}>
{item.type === 'notebook' ? ( <Icon color={color} size={SIZE.lg - 2} name={icons[item.type]} />
<Icon color={color} size={SIZE.md} name="book-outline" /> <Icon
) : item.type === 'tag' ? ( style={{
<Icon color={color} size={SIZE.md} name="pound" /> position: 'absolute',
) : ( bottom: -5,
<Heading left: -6,
style={{textAlign: 'center', width: 12}} }}
color={color} color={color}
size={SIZE.md}> size={SIZE.xs}
T name="arrow-top-right-thick"
</Heading> />
)}
</View> </View>
<View <View
style={{ style={{
alignItems: 'flex-start', alignItems: 'flex-start',
width: '75%', flexGrow: 1,
flex: 1,
}}> }}>
{headerTextState?.id === item.id ? ( {headerTextState?.id === item.id ? (
<Heading <Heading
@@ -211,20 +197,18 @@ const PinItem = ({item, index, onPress}) => {
flexWrap: 'wrap', flexWrap: 'wrap',
}} }}
color={colors.heading} color={colors.heading}
size={SIZE.md}> size={SIZE.lg}>
{item.title} {item.title}
</Heading> </Heading>
) : ( ) : (
<Paragraph <Paragraph
style={{ numberOfLines={1}
flexWrap: 'wrap',
}}
color={colors.heading} color={colors.heading}
size={SIZE.md}> size={SIZE.md}>
{item.title} {item.title}
</Paragraph> </Paragraph>
)} )}
<Paragraph {/* <Paragraph
style={{marginTop: 2.5}} style={{marginTop: 2.5}}
size={SIZE.xs} size={SIZE.xs}
color={colors.icon}> color={colors.icon}>
@@ -233,7 +217,7 @@ const PinItem = ({item, index, onPress}) => {
{item.type === 'topic' {item.type === 'topic'
? 'in ' + db.notebooks.notebook(item.notebookId).data.title ? 'in ' + db.notebooks.notebook(item.notebookId).data.title
: null} : null}
</Paragraph> </Paragraph> */}
</View> </View>
</View> </View>