Skip to content

Commit

Permalink
chore: menu adjustments (#805)
Browse files Browse the repository at this point in the history 
* chore: update menu

* chore: translations

* chore: updated menu

* chore: menu doesn't close when tapped outside

* chore: remove unneccesary setting page

* chore:translations

* chore: created custom MenuList

* chore: adds note about usage

* chore: project setting with new list

* chore: full screen menu list

* chore: security menu

* chore: rearrange files

* chore:delete drawer file

* chore: update drawer menu

---------

Co-authored-by: Cindy Green <[email protected]>
  • Loading branch information
@ErikSin @cimigree
ErikSin and cimigree authored Oct 31, 2024
1 parent a117f3b commit d23305b
Show file tree
Hide file tree
Showing 10 changed files with 367 additions and 389 deletions.
46 changes: 7 additions & 39 deletions messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,12 @@
"Navigation.Drawer.createOrJoinDesc": {
"message": "Create a new project or join existing one"
},
"Navigation.Drawer.dataAndPrivacy": {
"message": "Data & Privacy"
},
"Navigation.Drawer.mappingOnOwn": {
"message": "You are currently mapping on your own"
},
"Navigation.Drawer.privacyPolicy": {
"message": "Privacy Policy"
},
"Navigation.Drawer.projName": {
"message": "Project {projectName}"
},
Expand All @@ -98,9 +98,6 @@
"description": "list of avaialable project settings",
"message": "Categories, Config, Team"
},
"Navigation.Drawer.security": {
"message": "Security"
},
"Navigation.Drawer.title": {
"description": "Title of settings screen",
"message": "Settings"
Expand Down Expand Up @@ -135,6 +132,9 @@
"SaveTrack.HeaderLeft.discardTrackDescription": {
"message": "Your Track will not be saved. This cannot be undone."
},
"Screens.Settings.AppSettings.Drawer.security": {
"message": "Security"
},
"Screens.Settings.AppSettings.coordinateSystem": {
"message": "Coordinate System"
},
Expand Down Expand Up @@ -1363,41 +1363,9 @@
"screens.Settings.YourTeam.unableToCancel": {
"message": "Unable to Cancel Invitation"
},
"screens.Settings.aboutCoMapeo": {
"description": "Primary text for 'About CoMapeo' link (version info)",
"message": "About CoMapeo"
},
"screens.Settings.aboutCoMapeoDesc": {
"description": "Description of the 'About CoMapeo' page",
"message": "Version and build number"
},
"screens.Settings.appSettings": {
"message": "App Settings"
},
"screens.Settings.appSettingsDesc": {
"description": "list of avaialable app settings",
"message": "Language, Security, Coordinates"
},
"screens.Settings.config": {
"description": "Primary text for project config settings",
"message": "Project Configuration"
},
"screens.Settings.createOrJoin": {
"message": "Create or Join Project"
},
"screens.Settings.createOrJoinDesc": {
"message": "Create a new project or join existing one"
},
"screens.Settings.projectSettings": {
"message": "Project Settings"
},
"screens.Settings.projectSettingsDesc": {
"description": "list of avaialable project settings",
"message": "Categories, Config, Team"
},
"screens.Settings.title": {
"description": "Title of settings screen",
"message": "Settings"
"message": "Configuration"
},
"screens.SettingsPrivacyPolicy.navTitle": {
"message": "Privacy Policy"
Expand Down
242 changes: 134 additions & 108 deletions src/frontend/Navigation/Drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,9 @@ import {
DrawerContentComponentProps,
DrawerContentScrollView,
} from '@react-navigation/drawer';
import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
import {
List,
ListItem,
ListItemText,
ListItemIcon,
} from '../sharedComponents/List';
import {defineMessages, useIntl} from 'react-intl';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import {NavigatorScreenParams} from '@react-navigation/native';
import {View} from 'react-native';
import {Text} from '../sharedComponents/Text';
Expand All @@ -20,7 +15,8 @@ import {useProjectSettings} from '../hooks/server/projects';
import {AppStackParamsList} from '../sharedTypes/navigation';
import {RootStackNavigator} from './Stack';
import {DrawerMenuIcon} from '../sharedComponents/icons/DrawerMenuIcon';
import {useSecurityContext} from '../contexts/SecurityContext';
import {MenuListItem} from '../sharedComponents/MenuList/MenuListItem';
import {Divider} from '../sharedComponents/Divider';

const m = defineMessages({
settingsTitle: {
Expand Down Expand Up @@ -64,9 +60,9 @@ const m = defineMessages({
defaultMessage: 'Language, Security, Coordinates',
description: 'list of avaialable app settings',
},
dataAndPrivacy: {
id: 'Navigation.Drawer.dataAndPrivacy',
defaultMessage: 'Data & Privacy',
privacyPolicy: {
id: 'Navigation.Drawer.privacyPolicy',
defaultMessage: 'Privacy Policy',
},
projName: {
id: 'Navigation.Drawer.projName',
Expand All @@ -76,10 +72,6 @@ const m = defineMessages({
id: 'Navigation.Drawer.mappingOnOwn',
defaultMessage: 'You are currently mapping on your own',
},
security: {
id: 'Navigation.Drawer.security',
defaultMessage: 'Security',
},
});

export type DrawerScreens = {
Expand All @@ -95,6 +87,8 @@ export const DrawerNavigator = () => {
drawerPosition: 'right',
headerShown: false,
swipeEnabled: false,
// the child (DrawerContent) is setting the background color
drawerStyle: {width: '100%', backgroundColor: 'transparent'},
}}
drawerContent={DrawerContent}
initialRouteName="DrawerHome">
Expand All @@ -107,108 +101,140 @@ const DrawerContent = ({navigation}: DrawerContentComponentProps) => {
const {navigate} = navigation;
const {formatMessage} = useIntl();
const {data} = useProjectSettings();
const {authState} = useSecurityContext();

return (
<DrawerContentScrollView
contentContainerStyle={{flexGrow: 1}}
style={{backgroundColor: VERY_LIGHT_GREY, flex: 1}}>
<View
// By default, the drawer content only takes up some of the screen, if the user clicks outside of the drawer content, it causes the drawer to close. The api does not allow us to stop this behaviour
// As a workaround, I am setting a transparent background that takes up the entire screen, and putting the menu on top of that. This blocks the user from clicking outside of the menu as the transparent background is techincally still the menu.
<View style={{flex: 1, backgroundColor: 'rgba(0, 0, 0, 0)'}}>
<DrawerContentScrollView
contentContainerStyle={{flexGrow: 1}}
style={{
paddingBottom: 40,
backgroundColor: VERY_LIGHT_GREY,
width: '80%',
alignSelf: 'flex-end',
}}>
<DrawerMenuIcon
style={{alignSelf: 'flex-end', marginRight: 20}}
onPress={navigation.closeDrawer}
/>
<Text
testID="MAIN.drawer-create-join-txt"
<View
style={{
alignSelf: 'center',
textAlign: 'center',
paddingHorizontal: 40,
fontSize: 20,
paddingBottom: 40,
}}>
{data?.name
? formatMessage(m.projName, {projectName: data.name})
: formatMessage(m.mappingOnOwn)}
</Text>
</View>
<List
style={{
backgroundColor: WHITE,
height: '100%',
}}>
<ListItem
testID="MAIN.create-join-list-item"
onPress={() => {
navigate('DrawerHome', {screen: 'CreateOrJoinProject'});
}}>
<DrawerListItemIcon
icon={
<MaterialCommunityIcons
name="shape-square-rounded-plus"
size={24}
color="rgba(0, 0, 0, 0.54)"
/>
}
<DrawerMenuIcon
style={{alignSelf: 'flex-end', marginRight: 20}}
onPress={navigation.closeDrawer}
/>
<ListItemText primary={<FormattedMessage {...m.createOrJoin} />} />
</ListItem>
<ListItem
testID="MAIN.project-stg-list-item"
onPress={() => {
navigate('DrawerHome', {screen: 'ProjectSettings'});
}}>
<DrawerListItemIcon iconName="assignment" />
<ListItemText primary={<FormattedMessage {...m.projectSettings} />} />
</ListItem>
<ListItem
onPress={() => {
navigate('DrawerHome', {screen: 'AppSettings'});
}}>
<DrawerListItemIcon iconName="settings-suggest" />
<ListItemText primary={<FormattedMessage {...m.appSettings} />} />
</ListItem>
<ListItem
onPress={() => {
navigate('DataAndPrivacy');
}}>
<DrawerListItemIcon iconName="privacy-tip" />
<ListItemText primary={<FormattedMessage {...m.dataAndPrivacy} />} />
</ListItem>
{authState !== 'obscured' && (
<ListItem
onPress={() => {
navigate('Security');
<Text
testID="MAIN.drawer-create-join-txt"
style={{
alignSelf: 'center',
textAlign: 'center',
paddingHorizontal: 40,
fontSize: 18,
}}>
<DrawerListItemIcon iconName="security" />
<ListItemText primary={<FormattedMessage {...m.security} />} />
</ListItem>
)}
<ListItem
onPress={() => {
navigate('AboutSettings');
}}
testID="settingsAboutButton">
<DrawerListItemIcon iconName="info-outline" />
<ListItemText primary={<FormattedMessage {...m.aboutCoMapeo} />} />
</ListItem>
{process.env.EXPO_PUBLIC_FEATURE_TEST_DATA_UI && (
<ListItem
onPress={() => {
navigate('CreateTestData');
}}
testID="settingsCreateTestDataButton">
<DrawerListItemIcon iconName="auto-fix-high" />
<ListItemText primary="Create Test Data" />
</ListItem>
)}
</List>
</DrawerContentScrollView>
{data?.name
? formatMessage(m.projName, {projectName: data.name})
: formatMessage(m.mappingOnOwn)}
</Text>
</View>
<View
style={{
backgroundColor: WHITE,
justifyContent: 'space-between',
flex: 1,
paddingVertical: 10,
}}>
<View>
<DrawerMenuListItem
item={{
onPress: () => {
navigate('DrawerHome', {screen: 'CreateOrJoinProject'});
},
icon: (
<MaterialCommunityIcons
name="shape-square-rounded-plus"
size={24}
color="rgba(0, 0, 0, 0.54)"
/>
),
primaryText: formatMessage(m.createOrJoin),
testID: 'MAIN.create-join-list-item',
}}
/>
<DrawerMenuListItem
item={{
onPress: () => {
navigate('DrawerHome', {screen: 'ProjectSettings'});
},
materialIconName: 'assignment',
primaryText: formatMessage(m.projectSettings),
testID: 'MAIN.project-stg-list-item',
}}
/>
<DrawerMenuListItem
item={{
onPress: () => {
navigate('DrawerHome', {screen: 'AppSettings'});
},
materialIconName: 'settings-suggest',
primaryText: formatMessage(m.appSettings),
}}
/>
{process.env.EXPO_PUBLIC_FEATURE_TEST_DATA_UI && (
<DrawerMenuListItem
item={{
onPress: () => {
navigate('CreateTestData');
},
materialIconName: 'auto-fix-high',
primaryText: 'Create Test Data',
}}
/>
)}
</View>
<View>
<Divider />
<DrawerMenuListItem
item={{
onPress: () => {
navigate('AboutSettings');
},
materialIconName: 'info-outline',
primaryText: formatMessage(m.aboutCoMapeo),
}}
/>
<DrawerMenuListItem
item={{
onPress: () => {
navigate('DataAndPrivacy');
},
icon: (
<EntypoIcon
name="lock"
size={24}
color="rgba(0, 0, 0, 0.54)"
/>
),
primaryText: formatMessage(m.privacyPolicy),
}}
/>
</View>
</View>
</DrawerContentScrollView>
</View>
);
};

function DrawerListItemIcon(props: React.ComponentProps<typeof ListItemIcon>) {
return <ListItemIcon {...props} style={{minWidth: 0, marginRight: 10}} />;
function DrawerMenuListItem(
props: Omit<
React.ComponentProps<typeof MenuListItem>,
'paddingLeft' | 'paddingRight' | 'columnGap'
>,
) {
return (
<MenuListItem
{...props}
style={{paddingTop: 10, paddingBottom: 10}}
paddingLeft={15}
paddingRight={15}
columnGap={15}
/>
);
}
2 changes: 0 additions & 2 deletions src/frontend/Navigation/Stack/AppScreens.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {TurnOffPasscode} from '../../screens/AppPasscode/TurnOffPasscode';
import {Security} from '../../screens/Security';
import {AuthScreen} from '../../screens/AuthScreen';
import {ObscurePasscode} from '../../screens/ObscurePasscode';
import {Settings} from '../../screens/Settings';
import {PresetChooser} from '../../screens/PresetChooser';
import {ObservationScreen} from '../../screens/Observation';
import {AppSettings} from '../../screens/Settings/AppSettings';
Expand Down Expand Up @@ -171,7 +170,6 @@ export const createDefaultScreenGroup = ({
component={ObscurePasscode}
options={{headerTitle: intl(ObscurePasscode.navTitle)}}
/>
<RootStack.Screen name="Settings" component={Settings} />
<RootStack.Screen
name="PresetChooser"
component={PresetChooser}
Expand Down
Loading

0 comments on commit d23305b

Please sign in to comment.