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

revert to old ui for user section in menu

Browse Source
This commit is contained in:
ammarahm-ed
2020-11-26 20:56:23 +05:00
parent a1dd11e0ed
commit 2f573a95ee
3 changed files with 56 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,15 @@
import React from 'react'; import React from 'react';
import {View} from 'react-native'; import { 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 {DDS} from '../../services/DeviceDetection';
import Navigation from '../../services/Navigation'; import Navigation from '../../services/Navigation';
import {SIZE} from '../../utils/SizeUtils'; import { SIZE } from '../../utils/SizeUtils';
import {PressableButton} from '../PressableButton'; import { PressableButton } from '../PressableButton';
import Paragraph from '../Typography/Paragraph'; import Paragraph from '../Typography/Paragraph';
export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => { export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {currentScreen, colors} = state; const {headerTextState, colors} = state;
const _onPress = (event) => { const _onPress = (event) => {
if (item.func) { if (item.func) {
@@ -38,13 +37,13 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
key={item.name + index} key={item.name + index}
onPress={_onPress} onPress={_onPress}
color={ color={
currentScreen === item.name.toLowerCase() ? colors.shade : 'transparent' headerTextState.id === item.name.toLowerCase() + "_navigation" ? colors.shade : 'transparent'
} }
selectedColor={colors.accent} selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.02} alpha={!colors.night ? -0.02 : 0.02}
opacity={0.12} opacity={0.12}
customStyle={{ customStyle={{
width: '100%', width: noTextMode ? 50 : '100%',
alignSelf: 'center', alignSelf: 'center',
borderRadius: 0, borderRadius: 0,
flexDirection: 'row', flexDirection: 'row',
@@ -60,13 +59,13 @@ export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
}}> }}>
<Icon <Icon
style={{ style={{
minWidth: noTextMode ? 5 : 35, minWidth: noTextMode ? null : 35,
textAlignVertical: 'center', textAlignVertical: 'center',
textAlign: 'left', textAlign: noTextMode ? 'center' : 'left',
}} }}
name={item.icon} name={item.icon}
color={colors.accent} color={colors.accent}
size={DDS.isTab ? SIZE.md + 5 : SIZE.md + 1} size={SIZE.md}
/> />
{noTextMode ? null : <Paragraph size={SIZE.md}>{item.name}</Paragraph>} {noTextMode ? null : <Paragraph size={SIZE.md}>{item.name}</Paragraph>}
</View> </View>

25
apps/mobile/src/components/Menu/UserSection.js
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import {ActivityIndicator, Text, TouchableOpacity, View} from 'react-native'; import {ActivityIndicator, TouchableOpacity, View} from 'react-native';
import {color} from 'react-native-reanimated';
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';
@@ -8,7 +7,7 @@ import {eSendEvent, ToastEvent} from '../../services/EventManager';
import {showContext, SUBSCRIPTION_STATUS_STRINGS} from '../../utils'; import {showContext, SUBSCRIPTION_STATUS_STRINGS} from '../../utils';
import {db} from '../../utils/DB'; import {db} from '../../utils/DB';
import {eOpenLoginDialog} from '../../utils/Events'; import {eOpenLoginDialog} from '../../utils/Events';
import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils'; import {pv, SIZE} from '../../utils/SizeUtils';
import {PressableButton} from '../PressableButton'; import {PressableButton} from '../PressableButton';
import Paragraph from '../Typography/Paragraph'; import Paragraph from '../Typography/Paragraph';
import {TimeSince} from './TimeSince'; import {TimeSince} from './TimeSince';
@@ -21,7 +20,9 @@ export const UserSection = ({noTextMode}) => {
<View <View
style={{ style={{
width: '100%', width: '100%',
borderRadius: 0, borderRadius: 5,
alignSelf: 'center',
backgroundColor: colors.shade,
}}> }}>
<View <View
style={{ style={{
@@ -30,7 +31,9 @@ export const UserSection = ({noTextMode}) => {
alignItems: 'center', alignItems: 'center',
backgroundColor: colors.accent, backgroundColor: colors.accent,
paddingHorizontal: 6, paddingHorizontal: 6,
paddingVertical: 8, paddingVertical: 6,
borderTopRightRadius: 5,
borderTopLeftRadius: 5,
}}> }}>
<Paragraph color="white"> <Paragraph color="white">
<Icon name="account-outline" /> {user.username} <Icon name="account-outline" /> {user.username}
@@ -41,6 +44,7 @@ export const UserSection = ({noTextMode}) => {
</View> </View>
<TouchableOpacity <TouchableOpacity
activeOpacity={0.8}
onPress={async () => { onPress={async () => {
dispatch({ dispatch({
type: Actions.SYNCING, type: Actions.SYNCING,
@@ -68,7 +72,7 @@ export const UserSection = ({noTextMode}) => {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
paddingHorizontal: 5, paddingRight: 5,
paddingVertical: 12, paddingVertical: 12,
}}> }}>
<View <View
@@ -80,7 +84,7 @@ export const UserSection = ({noTextMode}) => {
style={{ style={{
marginLeft: 5, marginLeft: 5,
}}> }}>
{syncing ? 'Syncing ' : 'Synced '} {syncing ? 'Syncing ' : 'Last synced: '}
{!syncing ? ( {!syncing ? (
user?.lastSynced ? ( user?.lastSynced ? (
<TimeSince time={user.lastSynced} /> <TimeSince time={user.lastSynced} />
@@ -112,10 +116,7 @@ export const UserSection = ({noTextMode}) => {
onPress={() => { onPress={() => {
eSendEvent(eOpenLoginDialog); eSendEvent(eOpenLoginDialog);
}} }}
onLongPress={(event) => { color={colors.accent}
showContext(event, 'Login');
}}
color="transparent"
selectedColor={colors.accent} selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.1} alpha={!colors.night ? -0.02 : 0.1}
opacity={0.12} opacity={0.12}
@@ -123,7 +124,7 @@ export const UserSection = ({noTextMode}) => {
paddingVertical: 12, paddingVertical: 12,
marginVertical: 5, marginVertical: 5,
marginTop: pv + 5, marginTop: pv + 5,
borderRadius: 0, borderRadius: 5,
width: '100%', width: '100%',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',

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

@@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {ScrollView, View} from 'react-native'; import {FlatList, ScrollView, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions'; import {Actions} from '../../provider/Actions';
@@ -13,10 +13,7 @@ import {
} from '../../utils/Colors'; } from '../../utils/Colors';
import {MenuItemsList} from '../../utils/index'; import {MenuItemsList} from '../../utils/index';
import {MMKV} from '../../utils/mmkv'; import {MMKV} from '../../utils/mmkv';
import {SIZE} from '../../utils/SizeUtils';
import Seperator from '../Seperator'; import Seperator from '../Seperator';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
import {ColorSection} from './ColorSection'; import {ColorSection} from './ColorSection';
import {MenuListItem} from './MenuListItem'; import {MenuListItem} from './MenuListItem';
import {TagsSection} from './TagsSection'; import {TagsSection} from './TagsSection';
@@ -65,52 +62,49 @@ export const Menu = React.memo(
backgroundColor: DDS.isLargeTablet() ? colors.nav : colors.bg, backgroundColor: DDS.isLargeTablet() ? colors.nav : colors.bg,
paddingTop: insets.top, paddingTop: insets.top,
}}> }}>
<ScrollView <FlatList
alwaysBounceVertical={false} alwaysBounceVertical={false}
contentContainerStyle={{ contentContainerStyle={{
minHeight: '50%',
flexGrow: 1, flexGrow: 1,
}} }}
showsVerticalScrollIndicator={false}> showsVerticalScrollIndicator={false}
{MenuItemsList.map((item, index) => ( data={[0]}
<MenuListItem keyExtractor={() => 'mainMenuView'}
testID={item.name} renderItem={() => (
key={item.name} <>
item={item} {MenuItemsList.map((item, index) => (
index={index} <MenuListItem
noTextMode={noTextMode} testID={item.name}
/> key={item.name}
))} item={item}
<ColorSection noTextMode={noTextMode} /> index={index}
<TagsSection /> noTextMode={noTextMode}
</ScrollView> />
))}
<ColorSection noTextMode={noTextMode} />
<TagsSection />
</>
)}
/>
{BottomItemsList.map((item, index) => (
<MenuListItem
testID={item.name == 'Night mode' ? 'night_mode' : item.name}
key={item.name}
item={item}
index={index}
ignore={true}
noTextMode={false}
/>
))}
<View <View
style={{ style={{
width: '100%', width: '100%',
justifyContent: noTextMode ? 'center' : 'center', padding: 8,
alignItems: 'center',
alignSelf: 'center',
marginBottom: 15,
}}> }}>
<View
style={{
width: '100%',
}}>
{BottomItemsList.map((item, index) => (
<MenuListItem
testID={item.name == 'Night mode' ? 'night_mode' : item.name}
key={item.name}
item={item}
index={index}
ignore={true}
noTextMode={noTextMode}
/>
))}
</View>
<Seperator half /> <Seperator half />
<UserSection noTextMode={noTextMode} /> <UserSection noTextMode={noTextMode} />
<Seperator />
</View> </View>
</View> </View>
); );