chore: updated editStatus layout

RocketChat · Nov 18, 2024 · 7c94ae6 · 7c94ae6
1 parent 1abd1b3
commit 7c94ae6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 40 deletions.
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
@@ -510,6 +510,7 @@
   "Notify_active_in_this_room": "Notify active users in this room",
   "Notify_all_in_this_room": "Notify all in this room",
   "Off": "Off",
+  "Offline": "Offline",
   "Omnichannel": "Omnichannel",
   "Omnichannel_enable_alert": "You're not available on Omnichannel. Would you like to be available?",
   "Omnichannel_on_hold_chat_resumed": "On hold chat resumed: {{comment}}",

diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
@@ -308,7 +308,7 @@ const InsideStackNavigator = () => {
 				options={{ headerShown: false }}
 			/>
 			<InsideStack.Screen name='AttachmentView' component={AttachmentView} />
-			<InsideStack.Screen name='StatusView' component={StatusView} />
+			<InsideStack.Screen name='StatusView' component={StatusView} options={{ presentation: 'modal' }} />
 			{/* @ts-ignore */}
 			<InsideStack.Screen name='ShareView' component={ShareView} />
 			{/* @ts-ignore */}

diff --git a/app/views/StatusView/index.tsx b/app/views/StatusView/index.tsx
@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useEffect, useState } from 'react';
-import { FlatList, StyleSheet } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { setUser } from '../../actions/login';
@@ -18,6 +18,8 @@ import { getUserSelector } from '../../selectors/login';
 import { showErrorAlert } from '../../lib/methods/helpers';
 import log, { events, logEvent } from '../../lib/methods/helpers/log';
 import { useTheme } from '../../theme';
+import Button from '../../containers/Button';
+import Check from '../../containers/Check';
 
 interface IStatus {
 	id: TUserStatus;
@@ -39,24 +41,28 @@ const STATUS: IStatus[] = [
 	},
 	{
 		id: 'offline',
-		name: 'Invisible'
+		name: 'Offline'
 	}
 ];
 
 const styles = StyleSheet.create({
 	inputContainer: {
-		marginTop: 16,
-		marginBottom: 16
+		paddingHorizontal: 12,
+		marginTop: 24,
+		marginBottom: 12
 	},
 	inputLeft: {
 		position: 'absolute',
 		left: 12
 	},
 	inputStyle: {
-		paddingLeft: 48,
 		borderRadius: 0,
 		borderTopWidth: 1,
 		borderBottomWidth: 1
+	},
+	footerComponent: {
+		marginTop: 36,
+		paddingHorizontal: 12
 	}
 });
 
@@ -71,18 +77,22 @@ const Status = ({
 }) => {
 	const { id, name } = statusType;
 	return (
-		<List.Item
-			title={name}
-			onPress={() => {
-				const key = `STATUS_${statusType.id.toUpperCase()}` as keyof typeof events;
-				logEvent(events[key]);
-				if (status !== statusType.id) {
-					setStatus(statusType.id);
-				}
-			}}
-			testID={`status-view-${id}`}
-			left={() => <StatusIcon size={24} status={statusType.id} />}
-		/>
+		<>
+			<List.Item
+				title={name}
+				onPress={() => {
+					const key = `STATUS_${statusType.id.toUpperCase()}` as keyof typeof events;
+					logEvent(events[key]);
+					if (status !== statusType.id) {
+						setStatus(statusType.id);
+					}
+				}}
+				testID={`status-view-${id}`}
+				left={() => <StatusIcon size={24} status={statusType.id} />}
+				right={() => (status === id ? <Check /> : null)}
+			/>
+			<List.Separator />
+		</>
 	);
 };
 
@@ -98,31 +108,21 @@ const StatusView = (): React.ReactElement => {
 
 	const dispatch = useDispatch();
 	const { setOptions, goBack } = useNavigation();
-
 	const { colors } = useTheme();
 
+	const submit = async () => {
+		logEvent(events.STATUS_DONE);
+		if (statusText !== user.statusText || status !== user.status) {
+			await setCustomStatus(status, statusText);
+		}
+		goBack();
+	};
+
 	useEffect(() => {
-		const submit = async () => {
-			logEvent(events.STATUS_DONE);
-			if (statusText !== user.statusText || status !== user.status) {
-				await setCustomStatus(status, statusText);
-			}
-			goBack();
-		};
 		const setHeader = () => {
 			setOptions({
 				title: I18n.t('Edit_Status'),
-				headerLeft: isMasterDetail ? undefined : () => <HeaderButton.CancelModal onPress={goBack} />,
-				headerRight: () => (
-					<HeaderButton.Container>
-						<HeaderButton.Item
-							title={I18n.t('Save')}
-							onPress={submit}
-							disabled={status === user.status && statusText === user.statusText}
-							testID='status-view-submit'
-						/>
-					</HeaderButton.Container>
-				)
+				headerLeft: isMasterDetail ? undefined : () => <HeaderButton.CloseModal onPress={goBack} />
 			});
 		};
 		setHeader();
@@ -149,6 +149,19 @@ const StatusView = (): React.ReactElement => {
 
 	const statusType = Accounts_AllowInvisibleStatusOption ? STATUS : STATUS.filter(s => s.id !== 'offline');
 
+	const FooterComponent = () => {
+		return (
+			<View style={styles.footerComponent}>
+				<Button
+					testID='status-view-submit'
+					disabled={status === user.status && user?.statusText === statusText}
+					onPress={submit}
+					title={I18n.t('Save')}
+				/>
+			</View>
+		);
+	};
+
 	return (
 		<SafeAreaView testID='status-view'>
 			<FlatList
@@ -158,18 +171,17 @@ const StatusView = (): React.ReactElement => {
 				ListHeaderComponent={
 					<>
 						<FormTextInput
+							label='Message'
 							value={statusText}
 							containerStyle={styles.inputContainer}
 							onChangeText={text => setStatusText(text)}
-							left={<StatusIcon accessible={false} testID={`status-view-current-${status}`} style={styles.inputLeft} status={status} size={24} />}
 							inputStyle={styles.inputStyle}
-							placeholder={I18n.t('What_are_you_doing_right_now')}
 							testID='status-view-input'
 						/>
 						<List.Separator />
 					</>
 				}
-				ListFooterComponent={List.Separator}
+				ListFooterComponent={FooterComponent}
 				ItemSeparatorComponent={List.Separator}
 				style={{ backgroundColor: colors.surfaceTint }}
 			/>