toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[Gekidou] Team icon style (#6258)

Browse source 
* Team icon style

* ux review
This commit is contained in:
Elias Nahum 2022-05-11 08:42:12 -04:00 committed by GitHub
parent 67461322a2
commit 4144c9d03e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
app/components/team_sidebar/add_team/index.tsx
View file

@ -17,15 +17,38 @@ import AddTeamSlideUp from './add_team_slide_up';
import type TeamModel from '@typings/database/models/servers/team';
type Props = {
canCreateTeams: boolean;
otherTeams: TeamModel[];
}
const ITEM_HEIGHT = 72;
const CREATE_HEIGHT = 97;
const HEADER_HEIGHT = 66;
const CONTAINER_HEIGHT = 392;
type Props = {
canCreateTeams: boolean;
otherTeams: TeamModel[];
}
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
container: {
flex: 0,
backgroundColor: changeOpacity(theme.sidebarText, 0.08),
borderRadius: 10,
height: 48,
width: 48,
marginTop: 6,
marginBottom: 12,
marginHorizontal: 12,
overflow: 'hidden',
},
touchable: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
};
});
export default function AddTeam({canCreateTeams, otherTeams}: Props) {
const theme = useTheme();
const styles = getStyleSheet(theme);
@ -70,31 +93,9 @@ export default function AddTeam({canCreateTeams, otherTeams}: Props) {
<CompassIcon
size={28}
name='plus'
color={changeOpacity(theme.buttonColor, 0.64)}
color={changeOpacity(theme.sidebarText, 0.64)}
/>
</TouchableWithFeedback>
</View>
);
}
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
container: {
flex: 0,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.64),
borderRadius: 10,
height: 48,
width: 48,
marginTop: 6,
marginBottom: 12,
marginHorizontal: 12,
overflow: 'hidden',
},
touchable: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
};
});

29
app/components/team_sidebar/team_list/team_item/team_icon.tsx
View file

@ -8,7 +8,8 @@ import FastImage from 'react-native-fast-image';
import {useServerUrl} from '@context/server';
import {useTheme} from '@context/theme';
import NetworkManager from '@managers/network_manager';
import {makeStyleSheetFromTheme} from '@utils/theme';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
@ -17,7 +18,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
height: '100%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.centerChannelColor,
backgroundColor: theme.sidebarBg,
borderRadius: 10,
},
containerSelected: {
@ -25,14 +26,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
height: '100%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.centerChannelColor,
backgroundColor: theme.sidebarBg,
borderRadius: 6,
},
text: {
color: theme.sidebarText,
fontFamily: 'OpenSans',
fontWeight: 'bold',
fontSize: 15,
...typography('Heading', 400, 'SemiBold'),
},
image: {
borderRadius: 6,
@ -43,6 +42,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
right: 0,
backgroundColor: 'white',
},
nameOnly: {
backgroundColor: changeOpacity(theme.sidebarText, 0.16),
},
};
});
@ -88,29 +90,32 @@ export default function TeamIcon({
}
}, []);
const nameOnly = imageError || !lastIconUpdate || !client;
const containerStyle = useMemo(() => {
if (selected) {
return backgroundColor ? [styles.containerSelected, {backgroundColor}] : styles.containerSelected;
return backgroundColor ? [styles.containerSelected, {backgroundColor}] : [styles.containerSelected, nameOnly && styles.nameOnly];
}
return backgroundColor ? [styles.container, {backgroundColor}] : styles.container;
}, [styles, backgroundColor, selected]);
return backgroundColor ? [styles.container, {backgroundColor}] : [styles.container, nameOnly && styles.nameOnly];
}, [styles, backgroundColor, selected, nameOnly]);
let teamIconContent;
if (imageError || !lastIconUpdate || !client) {
if (nameOnly) {
const first = displayName[0].toUpperCase();
const second = displayName[1]?.toLowerCase() || '';
teamIconContent = (
<Text
style={textColor ? [styles.text, {color: textColor}] : styles.text}
testID={`${testID}.display_name_abbreviation`}
>
{displayName?.substring(0, 2).toUpperCase()}
{`${first}${second}`}
</Text>
);
} else {
teamIconContent = (
<FastImage
style={styles.image}
source={{uri: `${serverUrl}${client.getTeamIconUrl(id, lastIconUpdate)}`}}
source={{uri: `${serverUrl}${client!.getTeamIconUrl(id, lastIconUpdate)}`}}
onError={handleImageError}
/>
);