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

update menu

Browse Source
This commit is contained in:
ammarahm-ed
2020-12-19 15:20:41 +05:00
parent 69e3211baf
commit 93a03e0aba
8 changed files with 158 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/mobile/initializer.root.js
View File

@@ -1,5 +1,5 @@
import React, {useEffect, useState} from 'react';
import {Dimensions, Platform, View} from 'react-native';
import {Dimensions, View} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import {notesnook} from './e2e/test.ids';
import ContextMenu from './src/components/ContextMenu';
@@ -190,7 +190,7 @@ const AppStack = React.memo(
});
setWidthHeight(size);
console.log(size,"SIZES")
console.log(size, 'SIZES');
DDS.setSize(size);
if (DDS.isLargeTablet()) {
setDeviceMode('tablet', size);

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

@@ -1,6 +1,7 @@
import React from 'react';
import {notesnook} from '../../../e2e/test.ids';
import {useTracked} from '../../provider';
import { DDS } from '../../services/DeviceDetection';
import Navigation from '../../services/Navigation';
import SettingsService from '../../services/SettingsService';
import {SIZE} from '../../utils/SizeUtils';
@@ -19,7 +20,9 @@ export const HeaderLeftMenu = () => {
};
return (
<>
{deviceMode === 'mobile' || currentScreen === 'search' ? (
{deviceMode === 'mobile' ||
currentScreen === 'search' ||
!headerMenuState ? (
<ActionIcon
testID={notesnook.ids.default.header.buttons.left}
customStyle={{
@@ -29,12 +32,11 @@ export const HeaderLeftMenu = () => {
width: 40,
borderRadius: 100,
marginLeft: -5,
marginRight: 25,
marginRight:DDS.isLargeTablet()? 10 : 25,
}}
onPress={onLeftButtonPress}
onLongPress={() => {
Navigation.popToTop();
}}
name={!headerMenuState ? 'arrow-left' : 'menu'}
size={SIZE.xxxl}

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

@@ -41,7 +41,7 @@ export const HeaderRightMenu = () => {
type="shade"
style={{
marginLeft: 20,
width: 60,
width: 50,
height: 35,
}}
/>

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

@@ -8,16 +8,18 @@ import {
eUnSubscribeEvent,
} from '../../services/EventManager';
import Navigation from '../../services/Navigation';
import {getElevation} from '../../utils';
import {COLORS_NOTE} from '../../utils/Colors';
import {db} from '../../utils/DB';
import {refreshNotesPage} from '../../utils/Events';
import {SIZE} from '../../utils/SizeUtils';
import {PressableButton} from '../PressableButton';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
export const ColorSection = ({noTextMode}) => {
export const ColorSection = () => {
const [state, dispatch] = useTracked();
const {colorNotes,loading} = state;
const {colorNotes, loading} = state;
useEffect(() => {
if (!loading) {
@@ -25,16 +27,9 @@ export const ColorSection = ({noTextMode}) => {
}
}, [loading]);
return (
<View
style={{
width: '100%',
}}>
{colorNotes.map((item, index) => (
<ColorItem key={item.id} item={item} index={index} />
))}
</View>
);
return colorNotes.map((item, index) => (
<ColorItem key={item.id} item={item} index={index} />
));
};
const ColorItem = ({item, index}) => {
@@ -43,7 +38,9 @@ const ColorItem = ({item, index}) => {
const [headerTextState, setHeaderTextState] = useState(null);
const onHeaderStateChange = (event) => {
if (event.id === item.name) {
console.log(event);
if (event.id === item.id) {
console.log('here');
setHeaderTextState(event);
} else {
setHeaderTextState(null);
@@ -75,54 +72,67 @@ const ColorItem = ({item, index}) => {
return (
<PressableButton
customColor={
headerTextState?.id === item.id && item.type === headerTextState?.type
? COLORS_NOTE[item.title]
: 'transparent'
}
customColor="transparent"
customSelectedColor={COLORS_NOTE[item.title]}
customAlpha={!colors.night ? -0.02 : 0.02}
customOpacity={0.12}
onPress={() => onPress(item)}
customStyle={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
width: '100%',
alignSelf: 'center',
borderRadius: 0,
paddingHorizontal: 10,
height: 50,
flexDirection: 'row',
paddingHorizontal: 8,
justifyContent: 'space-between',
alignItems: 'center',
height: 40,
}}>
<View
style={{
width: 35,
height: 35,
justifyContent: 'center',
alignItems: 'flex-start',
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={{
width: SIZE.md,
height: SIZE.md,
backgroundColor: COLORS_NOTE[item.title],
borderRadius: 100,
width: 30,
height: 30,
justifyContent: 'center',
marginRight: 10,
}}
/>
alignItems: 'flex-start',
}}>
<View
style={{
width: SIZE.md,
height: SIZE.md,
backgroundColor: COLORS_NOTE[item.title],
borderRadius: 100,
justifyContent: 'center',
marginRight: 10,
}}
/>
</View>
{headerTextState?.id === item.id ? (
<Heading color={COLORS_NOTE[item.title.toLowerCase()]} size={SIZE.md}>
{item.title.slice(0, 1).toUpperCase() + item.title.slice(1)}
</Heading>
) : (
<Paragraph color={colors.heading} size={SIZE.md}>
{item.title.slice(0, 1).toUpperCase() + item.title.slice(1)}
</Paragraph>
)}
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '85%',
}}>
<Paragraph color={colors.heading} size={SIZE.md}>
{item.title.slice(0, 1).toUpperCase() + item.title.slice(1)}
</Paragraph>
</View>
backgroundColor:
headerTextState?.id === item.id
? COLORS_NOTE[item.title.toLowerCase()]
: 'transparent',
width: 7,
height: 7,
borderRadius: 100,
...getElevation(5),
}}
/>
</PressableButton>
);
};

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

@@ -4,8 +4,10 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import Navigation from '../../services/Navigation';
import {getElevation} from '../../utils';
import {SIZE} from '../../utils/SizeUtils';
import {PressableButton} from '../PressableButton';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
export const MenuListItem = ({item, index, noTextMode, testID}) => {
@@ -53,20 +55,16 @@ export const MenuListItem = ({item, index, noTextMode, testID}) => {
testID={testID}
key={item.name + index}
onPress={_onPress}
type={
headerTextState?.id === item.name.toLowerCase() + '_navigation'
? 'shade'
: 'transparent'
}
type="transparent"
customStyle={{
width: noTextMode ? 50 : '100%',
width: '100%',
alignSelf: 'center',
borderRadius: 0,
flexDirection: 'row',
paddingHorizontal: noTextMode ? 0 : 8,
justifyContent: noTextMode ? 'center' : 'space-between',
paddingHorizontal: 8,
justifyContent: 'space-between',
alignItems: 'center',
height: 50,
height: 40,
}}>
<View
style={{
@@ -75,24 +73,43 @@ export const MenuListItem = ({item, index, noTextMode, testID}) => {
}}>
<Icon
style={{
minWidth: noTextMode ? null : 35,
minWidth: 30,
textAlignVertical: 'center',
textAlign: noTextMode ? 'center' : 'left',
textAlign: 'left',
}}
name={item.icon}
color={colors.accent}
size={SIZE.md}
/>
{noTextMode ? null : <Paragraph size={SIZE.md}>{item.name}</Paragraph>}
{headerTextState?.id === item.name.toLowerCase() + '_navigation' ? (
<Heading color={colors.accent} size={SIZE.md}>
{item.name}
</Heading>
) : (
<Paragraph size={SIZE.md}>{item.name}</Paragraph>
)}
</View>
{item.switch && !noTextMode ? (
{item.switch ? (
<Icon
size={SIZE.lg}
color={item.on ? colors.accent : colors.icon}
name={item.on ? 'toggle-switch' : 'toggle-switch-off'}
/>
) : undefined}
) : (
<View
style={{
backgroundColor:
headerTextState?.id === item.name.toLowerCase() + '_navigation'
? colors.accent
: 'transparent',
width: 7,
height: 7,
borderRadius: 100,
...getElevation(5),
}}
/>
)}
</PressableButton>
);
};

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

@@ -89,7 +89,7 @@ export const TagsSection = () => {
<View
style={{
flexGrow: 1,
minHeight:"40%",
minHeight: '40%',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: '10%',
@@ -101,8 +101,8 @@ export const TagsSection = () => {
style={{textAlign: 'center'}}
color={colors.icon}
size={SIZE.xs}>
You have not pinned anything yet. You can pin notebooks, topics and tags
here.
You have not pinned anything yet. You can pin notebooks, topics
and tags here.
</Paragraph>
</View>
}
@@ -122,7 +122,7 @@ const PinItem = ({item, index, onPress}) => {
const [headerTextState, setHeaderTextState] = useState(null);
const onHeaderStateChange = (event) => {
if (event?.id === item.name) {
if (event?.id === item.id) {
setHeaderTextState(event);
} else {
setHeaderTextState(null);
@@ -163,62 +163,79 @@ const PinItem = ({item, index, onPress}) => {
</BaseDialog>
)}
<PressableButton
type={
headerTextState?.id === item.id && headerTextState?.type === item.type
? 'shade'
: 'transparent'
}
type="transparent"
onLongPress={() => setVisible(true)}
onPress={() => onPress(item)}
customStyle={{
flexDirection: 'row',
justifyContent: 'flex-start',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
borderRadius: 0,
paddingHorizontal: 10,
minHeight: 50,
minHeight: 40,
}}>
<View
style={{
width: 35,
height: 35,
justifyContent: 'center',
alignItems: 'flex-start',
flexDirection: 'row',
alignItems: 'center',
}}>
{item.type === 'notebook' ? (
<Icon color={colors.accent} size={SIZE.md} name="book-outline" />
) : item.type === 'tag' ? (
<Icon color={colors.accent} size={SIZE.md} name="pound" />
) : (
<View
style={{
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'flex-start',
}}>
{item.type === 'notebook' ? (
<Icon color={colors.accent} size={SIZE.md} name="book-outline" />
) : item.type === 'tag' ? (
<Icon color={colors.accent} size={SIZE.md} name="pound" />
) : (
<Paragraph
style={{textAlign: 'center', width: 12}}
color={colors.accent}
size={SIZE.md}>
T
</Paragraph>
)}
</View>
<View
style={{
alignItems: 'flex-start',
}}>
{headerTextState?.id === item.id ? (
<Heading color={colors.heading} size={SIZE.md}>
{item.title}
</Heading>
) : (
<Paragraph color={colors.heading} size={SIZE.md}>
{item.title}
</Paragraph>
)}
<Paragraph
style={{textAlign: 'center', width: 12}}
color={colors.accent}
size={SIZE.md}>
T
style={{marginTop: 2.5}}
size={SIZE.xs}
color={colors.icon}>
{item.type.slice(0, 1).toUpperCase() +
item.type.slice(1, item.type.length)}{' '}
{item.type === 'topic'
? 'in ' + db.notebooks.notebook(item.notebookId).data.title
: null}
</Paragraph>
)}
</View>
</View>
<View
style={{
alignItems: 'flex-start',
width: '85%',
}}>
<Paragraph size={SIZE.md} color={colors.heading}>
{item.title}
</Paragraph>
<Paragraph
style={{marginTop: 2.5}}
size={SIZE.xs}
color={colors.icon}>
{item.type.slice(0, 1).toUpperCase() +
item.type.slice(1, item.type.length)}{' '}
{item.type === 'topic'
? 'in ' + db.notebooks.notebook(item.notebookId).data.title
: null}
</Paragraph>
</View>
backgroundColor:
headerTextState?.id === item.id ? colors.accent : 'transparent',
width: 7,
height: 7,
borderRadius: 100,
...getElevation(5),
}}
/>
</PressableButton>
</>
);

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

@@ -185,7 +185,10 @@ const SimpleList = ({
alignItems: 'center',
}}>
<Heading>{placeholderData.heading}</Heading>
<Paragraph color={colors.icon}>
<Paragraph style={{
textAlign:'center',
width:"80%"
}} color={colors.icon}>
{loading ? placeholderData.loading : placeholderData.paragraph}
</Paragraph>
<Seperator />

2
apps/mobile/src/views/Trash/index.js
View File

@@ -78,7 +78,7 @@ export const Trash = ({route, navigation}) => {
type="trash"
focused={() => navigation.isFocused()}
placeholderData={{
heading: 'Your Trash',
heading: 'Trash',
paragraph:
'Items in the trash will be permanently deleted after 7 days.',
button: null,