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

MM-42790 MM-42791 - UI Polish (#6103)

Browse source 
* polish UI

* update snapshots

* add the '(you)' to the end of the user's own name
This commit is contained in:
Christopher Poile 2022-03-30 17:45:53 -04:00 committed by GitHub
parent 1d995ef91a
commit 2a56b6810b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 180 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

279
app/products/calls/components/__snapshots__/call_avatar.test.js.snap
View file

@ -3,194 +3,155 @@
exports[`CallAvatar should match snapshot muted 1`] = `
<View
style={
Object {
"backgroundColor": "rgba(255,255,255,0.16)",
"borderRadius": 28,
"height": 56,
"marginRight": 4,
"padding": 4,
"width": 56,
}
Array [
Object {
"borderRadius": 20,
"height": 40,
"marginBottom": 5,
"width": 40,
},
Object {
"shadowColor": "rgb(61, 184, 135)",
"shadowOffset": Object {
"height": 0,
"width": 0,
},
"shadowOpacity": 1,
"shadowRadius": 10,
},
]
}
>
<View
<Connect(ProfilePicture)
showStatus={false}
size={40}
userId="user-id"
/>
<CompassIcon
name="microphone-off"
size={12}
style={
Object {
"backgroundColor": "rgba(255,255,255,0.24)",
"borderRadius": 24,
"height": 48,
"padding": 4,
"width": 48,
"backgroundColor": "black",
"borderColor": "black",
"borderRadius": 10,
"borderWidth": 2,
"bottom": -5,
"color": "white",
"height": 20,
"overflow": "hidden",
"padding": 2,
"position": "absolute",
"right": -5,
"textAlign": "center",
"textAlignVertical": "center",
"width": 20,
}
}
>
<View
style={
Object {
"borderRadius": 20,
"height": 40,
"width": 40,
}
}
>
<Connect(ProfilePicture)
showStatus={false}
size={40}
userId="user-id"
/>
<CompassIcon
name="microphone-off"
size={12}
style={
Object {
"backgroundColor": "black",
"borderColor": "black",
"borderRadius": 10,
"borderWidth": 2,
"bottom": -5,
"color": "white",
"height": 20,
"overflow": "hidden",
"padding": 1,
"position": "absolute",
"right": -5,
"textAlign": "center",
"textAlignVertical": "center",
"width": 20,
}
}
/>
</View>
</View>
/>
</View>
`;
exports[`CallAvatar should match snapshot size large 1`] = `
<View
style={
Object {
"backgroundColor": "rgba(255,255,255,0.16)",
"borderRadius": 44,
"height": 88,
"marginRight": 4,
"padding": 4,
"width": 88,
}
Array [
Object {
"borderRadius": 36,
"height": 72,
"marginBottom": 5,
"width": 72,
},
Object {
"shadowColor": "rgb(61, 184, 135)",
"shadowOffset": Object {
"height": 0,
"width": 0,
},
"shadowOpacity": 1,
"shadowRadius": 10,
},
]
}
>
<View
<Connect(ProfilePicture)
showStatus={false}
size={72}
userId="user-id"
/>
<CompassIcon
name="microphone"
size={16}
style={
Object {
"backgroundColor": "rgba(255,255,255,0.24)",
"borderRadius": 40,
"height": 80,
"padding": 4,
"width": 80,
"backgroundColor": "#3DB887",
"borderColor": "black",
"borderRadius": 12,
"borderWidth": 2,
"bottom": -5,
"color": "white",
"height": 24,
"overflow": "hidden",
"padding": 2,
"position": "absolute",
"right": -5,
"textAlign": "center",
"textAlignVertical": "center",
"width": 24,
}
}
>
<View
style={
Object {
"borderRadius": 36,
"height": 72,
"width": 72,
}
}
>
<Connect(ProfilePicture)
showStatus={false}
size={72}
userId="user-id"
/>
<CompassIcon
name="microphone"
size={16}
style={
Object {
"backgroundColor": "#3DB887",
"borderColor": "black",
"borderRadius": 12,
"borderWidth": 2,
"bottom": -5,
"color": "white",
"height": 24,
"overflow": "hidden",
"padding": 2,
"position": "absolute",
"right": -5,
"textAlign": "center",
"textAlignVertical": "center",
"width": 24,
}
}
/>
</View>
</View>
/>
</View>
`;
exports[`CallAvatar should match snapshot unmuted 1`] = `
<View
style={
Object {
"backgroundColor": "rgba(255,255,255,0.16)",
"borderRadius": 28,
"height": 56,
"marginRight": 4,
"padding": 4,
"width": 56,
}
Array [
Object {
"borderRadius": 20,
"height": 40,
"marginBottom": 5,
"width": 40,
},
Object {
"shadowColor": "rgb(61, 184, 135)",
"shadowOffset": Object {
"height": 0,
"width": 0,
},
"shadowOpacity": 1,
"shadowRadius": 10,
},
]
}
>
<View
<Connect(ProfilePicture)
showStatus={false}
size={40}
userId="user-id"
/>
<CompassIcon
name="microphone"
size={12}
style={
Object {
"backgroundColor": "rgba(255,255,255,0.24)",
"borderRadius": 24,
"height": 48,
"padding": 4,
"width": 48,
"backgroundColor": "#3DB887",
"borderColor": "black",
"borderRadius": 10,
"borderWidth": 2,
"bottom": -5,
"color": "white",
"height": 20,
"overflow": "hidden",
"padding": 2,
"position": "absolute",
"right": -5,
"textAlign": "center",
"textAlignVertical": "center",
"width": 20,
}
}
>
<View
style={
Object {
"borderRadius": 20,
"height": 40,
"width": 40,
}
}
>
<Connect(ProfilePicture)
showStatus={false}
size={40}
userId="user-id"
/>
<CompassIcon
name="microphone"
size={12}
style={
Object {
"backgroundColor": "#3DB887",
"borderColor": "black",
"borderRadius": 10,
"borderWidth": 2,
"bottom": -5,
"color": "white",
"height": 20,
"overflow": "hidden",
"padding": 1,
"position": "absolute",
"right": -5,
"textAlign": "center",
"textAlignVertical": "center",
"width": 20,
}
}
/>
</View>
</View>
/>
</View>
`;

86
app/products/calls/components/call_avatar.tsx
View file

@ -25,7 +25,7 @@ const getStyleSheet = (props: Props) => {
return StyleSheet.create({
pictureHalo: {
backgroundColor: 'rgba(255,255,255,' + (0.16 * props.volume) + ')',
backgroundColor: 'rgba(61, 184, 135,' + (0.24 * props.volume) + ')',
height: baseSize + 16,
width: baseSize + 16,
padding: 4,
@ -33,16 +33,23 @@ const getStyleSheet = (props: Props) => {
borderRadius: (baseSize + 16) / 2,
},
pictureHalo2: {
backgroundColor: 'rgba(255,255,255,' + (0.24 * props.volume) + ')',
backgroundColor: 'rgba(61, 184, 135,' + (0.32 * props.volume) + ')',
height: baseSize + 8,
width: baseSize + 8,
padding: 4,
padding: 3,
borderRadius: (baseSize + 8) / 2,
},
picture: {
borderRadius: baseSize / 2,
height: baseSize,
width: baseSize,
marginBottom: 5,
},
voiceShadow: {
shadowColor: 'rgb(61, 184, 135)',
shadowOffset: {width: 0, height: 0},
shadowOpacity: 1,
shadowRadius: 10,
},
mute: {
position: 'absolute',
@ -59,6 +66,13 @@ const getStyleSheet = (props: Props) => {
textAlign: 'center',
textAlignVertical: 'center',
overflow: 'hidden',
...Platform.select(
{
ios: {
padding: 2,
},
},
),
},
raisedHand: {
position: 'absolute',
@ -76,7 +90,8 @@ const getStyleSheet = (props: Props) => {
...Platform.select(
{
android: {
padding: 4,
paddingLeft: 4,
paddingTop: 2,
color: 'rgb(255, 188, 66)',
},
},
@ -105,6 +120,7 @@ const CallAvatar = (props: Props) => {
const style = getStyleSheet(props);
const profileSize = props.size === 'm' || !props.size ? 40 : 72;
const iconSize = props.size === 'm' || !props.size ? 12 : 16;
const styleShadow = props.volume > 0 ? style.voiceShadow : {};
// Only show one or the other.
let topRightIcon: JSX.Element | null = null;
@ -124,34 +140,42 @@ const CallAvatar = (props: Props) => {
);
}
return (
<View style={style.pictureHalo}>
<View style={style.pictureHalo2}>
<View style={style.picture}>
{
props.userId ?
<ProfilePicture
userId={props.userId}
size={profileSize}
showStatus={false}
/> :
<CompassIcon
name='account-outline'
size={profileSize}
/>
}
{
props.muted !== undefined &&
<CompassIcon
name={props.muted ? 'microphone-off' : 'microphone'}
size={iconSize}
style={style.mute}
/>
}
{topRightIcon}
</View>
</View>
const view = (
<View style={[style.picture, styleShadow]}>
{
props.userId ?
<ProfilePicture
userId={props.userId}
size={profileSize}
showStatus={false}
/> :
<CompassIcon
name='account-outline'
size={profileSize}
/>
}
{
props.muted !== undefined &&
<CompassIcon
name={props.muted ? 'microphone-off' : 'microphone'}
size={iconSize}
style={style.mute}
/>
}
{topRightIcon}
</View>
);
if (Platform.OS === 'android') {
return (
<View style={style.pictureHalo}>
<View style={style.pictureHalo2}>
{view}
</View>
</View>
);
}
return view;
};
export default CallAvatar;

4
app/products/calls/screens/call/__snapshots__/call_screen.test.js.snap
View file

@ -149,6 +149,7 @@ exports[`CallScreen Landscape should match snapshot 1`] = `
}
>
User 2
(you)
</Text>
</View>
</Pressable>
@ -870,6 +871,7 @@ exports[`CallScreen Portrait should match snapshot 1`] = `
}
>
User 2
(you)
</Text>
</View>
</Pressable>
@ -1249,6 +1251,7 @@ exports[`CallScreen Portrait should match snapshot with screenshare 1`] = `
}
>
User 2
(you)
</Text>
</View>
</Pressable>
@ -2005,6 +2008,7 @@ exports[`CallScreen should show controls in landscape view on click the users li
}
>
User 2
(you)
</Text>
</View>
</Pressable>

1
app/products/calls/screens/call/call_screen.tsx
View file

@ -374,6 +374,7 @@ const CallScreen = (props: Props) => {
/>
<Text style={style.username}>
{displayUsername(user.profile, props.teammateNameDisplay)}
{user.id === props.currentParticipant?.id && ' (you)'}
</Text>
</View>
);