SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Gekidou - MM-47656] Members List UI Changes (#6698)

Browse Source
This commit is contained in:
Jason Frerich
2022-10-31 09:44:04 -05:00
committed by GitHub
parent bb0322321e
commit b58b425909
4 changed files with 40 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
app/components/user_list_row/index.tsx
View File

@@ -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 (
<View style={style.selectorContainer}>
<View style={iconStyle}>
{selected &&
<CompassIcon
name='check'
size={24}
color={theme.sidebarText}
/>
}
</View>
<View style={style.selector}>
<CompassIcon
name={selected ? 'check-circle' : 'circle-outline'}
size={28}
color={color}
/>
</View>
);
};
}, [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}
>
<View style={style.profileContainer}>
<View style={[style.profileContainer, {opacity}]}>
<ProfilePicture
author={user}
size={32}
size={40}
iconSize={24}
testID={`${userItemTestID}.profile_picture`}
/>
</View>
<View style={style.textContainer}>
<View style={[style.textContainer, {opacity}]}>
<View style={style.indicatorContainer}>
<Text
style={style.username}
style={style.displayName}
ellipsizeMode='tail'
numberOfLines={1}
testID={`${userItemTestID}.display_name`}
>
{usernameDisplay}
{teammateDisplay}
</Text>
<BotTag
show={Boolean(user.is_bot)}
@@ -242,12 +223,12 @@ export default function UserListRow({
{showTeammateDisplay &&
<View>
<Text
style={style.displayName}
style={style.username}
ellipsizeMode='tail'
numberOfLines={1}
testID={`${userItemTestID}.team_display_name`}
>
{teammateDisplay}
{usernameDisplay}
</Text>
</View>
}
@@ -262,9 +243,7 @@ export default function UserListRow({
</View>
}
</View>
{selectable &&
<Icon/>
}
{icon}
</View>
</TouchableWithFeedback>
{showTutorial &&

2
app/constants/general.ts
View File

@@ -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'],

6
app/screens/create_direct_message/create_direct_message.tsx
View File

@@ -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 &&
<SelectedUsers
selectedIds={selectedIds}
warnCount={5}
maxCount={7}
warnCount={General.MAX_USERS_IN_GM - 2}
maxCount={General.MAX_USERS_IN_GM}
onRemove={handleRemoveProfile}
teammateNameDisplay={teammateNameDisplay}
/>

9
app/screens/create_direct_message/user_list.tsx
View File

@@ -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}