From b58b425909a0db7b1a0845889d3c370101736bd2 Mon Sep 17 00:00:00 2001 From: Jason Frerich Date: Mon, 31 Oct 2022 09:44:04 -0500 Subject: [PATCH] [Gekidou - MM-47656] Members List UI Changes (#6698) --- app/components/user_list_row/index.tsx | 85 +++++++------------ app/constants/general.ts | 2 +- .../create_direct_message.tsx | 6 +- .../create_direct_message/user_list.tsx | 9 +- 4 files changed, 40 insertions(+), 62 deletions(-) diff --git a/app/components/user_list_row/index.tsx b/app/components/user_list_row/index.tsx index 6a8a0328b6..cd12ee0ae2 100644 --- a/app/components/user_list_row/index.tsx +++ b/app/components/user_list_row/index.tsx @@ -19,6 +19,7 @@ import TutorialLongPress from '@components/tutorial_highlight/long_press'; import {useTheme} from '@context/theme'; import {useIsTablet} from '@hooks/device'; import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme'; +import {typography} from '@utils/typography'; import {displayUsername, isGuest} from '@utils/user'; type Props = { @@ -33,7 +34,6 @@ type Props = { selectable: boolean; selected: boolean; tutorialWatched?: boolean; - enabled: boolean; } const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { @@ -41,7 +41,8 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { container: { flex: 1, flexDirection: 'row', - paddingHorizontal: 15, + paddingHorizontal: 20, + height: 58, overflow: 'hidden', }, profileContainer: { @@ -55,14 +56,15 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { flexDirection: 'column', flex: 1, }, - displayName: { - fontSize: 15, - color: changeOpacity(theme.centerChannelColor, 0.5), - }, username: { - fontSize: 15, + color: changeOpacity(theme.centerChannelColor, 0.64), + ...typography('Body', 75, 'Regular'), + }, + displayName: { + height: 24, color: theme.centerChannelColor, maxWidth: '80%', + ...typography('Body', 200, 'Regular'), }, indicatorContainer: { flexDirection: 'row', @@ -70,34 +72,16 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { deactivated: { marginTop: 2, fontSize: 12, - color: changeOpacity(theme.centerChannelColor, 0.5), + color: changeOpacity(theme.centerChannelColor, 0.64), }, sharedUserIcon: { alignSelf: 'center', opacity: 0.75, }, selector: { - height: 28, - width: 28, - borderRadius: 14, - borderWidth: 3, - borderColor: changeOpacity(theme.centerChannelColor, 0.32), alignItems: 'center', justifyContent: 'center', }, - selectorContainer: { - height: 50, - paddingRight: 10, - alignItems: 'center', - justifyContent: 'center', - }, - selectorDisabled: { - borderColor: changeOpacity(theme.centerChannelColor, 0.16), - }, - selectorFilled: { - backgroundColor: theme.sidebarBg, - borderWidth: 0, - }, tutorial: { top: Platform.select({ios: -74, default: -94}), }, @@ -107,6 +91,9 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { }; }); +const DISABLED_OPACITY = 0.32; +const DEFAULT_ICON_OPACITY = 0.32; + export default function UserListRow({ id, isMyUser, @@ -119,7 +106,6 @@ export default function UserListRow({ tutorialWatched = false, selectable, selected, - enabled, }: Props) { const theme = useTheme(); const intl = useIntl(); @@ -167,25 +153,19 @@ export default function UserListRow({ onLongPress?.(user); }, [onLongPress, user]); - const iconStyle = useMemo(() => { - return [style.selector, (selected && style.selectorFilled), (!enabled && style.selectorDisabled)]; - }, [style, selected, enabled]); - - const Icon = () => { + const icon = useMemo(() => { + const iconOpacity = DEFAULT_ICON_OPACITY * (selectable ? 1 : DISABLED_OPACITY); + const color = selected ? theme.buttonBg : changeOpacity(theme.centerChannelColor, iconOpacity); return ( - - - {selected && - - } - + + ); - }; + }, [selectable, selected, theme]); let usernameDisplay = `@${username}`; if (isMyUser) { @@ -199,6 +179,7 @@ export default function UserListRow({ const showTeammateDisplay = teammateDisplay !== username; const userItemTestID = `${testID}.${id}`; + const opacity = selectable || selected ? 1 : DISABLED_OPACITY; return ( <> @@ -212,23 +193,23 @@ export default function UserListRow({ style={style.container} testID={userItemTestID} > - + - + - {usernameDisplay} + {teammateDisplay} - {teammateDisplay} + {usernameDisplay} } @@ -262,9 +243,7 @@ export default function UserListRow({ } - {selectable && - - } + {icon} {showTutorial && diff --git a/app/constants/general.ts b/app/constants/general.ts index d445b942e6..c201822c06 100644 --- a/app/constants/general.ts +++ b/app/constants/general.ts @@ -27,7 +27,7 @@ export default { SHOW_FULLNAME: 'full_name', }, SPECIAL_MENTIONS: new Set(['all', 'channel', 'here']), - MAX_USERS_IN_GM: 8, + MAX_USERS_IN_GM: 7, MIN_USERS_IN_GM: 3, MAX_GROUP_CHANNELS_FOR_PROFILES: 50, DEFAULT_AUTOLINKED_URL_SCHEMES: ['http', 'https', 'ftp', 'mailto', 'tel', 'mattermost'], diff --git a/app/screens/create_direct_message/create_direct_message.tsx b/app/screens/create_direct_message/create_direct_message.tsx index 001da9ded6..84ae6d50da 100644 --- a/app/screens/create_direct_message/create_direct_message.tsx +++ b/app/screens/create_direct_message/create_direct_message.tsx @@ -226,7 +226,7 @@ export default function CreateDirectMessage({ } else { const wasSelected = selectedIds[user.id]; - if (!wasSelected && selectedCount >= General.MAX_USERS_IN_GM - 1) { + if (!wasSelected && selectedCount >= General.MAX_USERS_IN_GM) { return; } @@ -368,8 +368,8 @@ export default function CreateDirectMessage({ {selectedCount > 0 && diff --git a/app/screens/create_direct_message/user_list.tsx b/app/screens/create_direct_message/user_list.tsx index 1ac63e053a..7459d775cb 100644 --- a/app/screens/create_direct_message/user_list.tsx +++ b/app/screens/create_direct_message/user_list.tsx @@ -91,16 +91,16 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => { }, sectionContainer: { backgroundColor: changeOpacity(theme.centerChannelColor, 0.08), - paddingLeft: 10, - paddingVertical: 2, - height: 28, + paddingLeft: 16, + justifyContent: 'center', + height: 24, }, sectionWrapper: { backgroundColor: theme.centerChannelBg, }, sectionText: { color: theme.centerChannelColor, - ...typography('Body', 300, 'SemiBold'), + ...typography('Body', 75, 'SemiBold'), }, }; }); @@ -181,7 +181,6 @@ export default function UserList({ onLongPress={openUserProfile} selectable={canAdd} selected={selected} - enabled={canAdd} testID='create_direct_message.user_list.user_item' teammateNameDisplay={teammateNameDisplay} tutorialWatched={tutorialWatched}