sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[IMPROVEMENT] Mentions layout without background (#2559) 

* [IMPROVEMENT] Mentions layout without background

* Fix RoomItem

* Fix tests
This commit is contained in:
Diego Mello 2020-10-30 12:58:48 -03:00 committed by GitHub
parent f7e2388017
commit 7cccd02cb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 482 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

524
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -5291,13 +5291,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#ffe9ec", "color": "#DB0C27",
"color": "#f5455c",
}, },
] ]
} }
@ -5338,13 +5335,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fff6d6", "color": "#DFAC00",
"color": "#b68d00",
}, },
] ]
} }
@ -5384,13 +5378,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fde8d7", "color": "#E26D0E",
"color": "#f38c39",
}, },
] ]
} }
@ -5430,13 +5421,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fde8d7", "color": "#E26D0E",
"color": "#f38c39",
}, },
] ]
} }
@ -5534,13 +5522,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#ffe9ec", "color": "#DB0C27",
"color": "#f5455c",
}, },
] ]
} }
@ -5581,13 +5566,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fff6d6", "color": "#DFAC00",
"color": "#b68d00",
}, },
] ]
} }
@ -5627,13 +5609,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fde8d7", "color": "#E26D0E",
"color": "#f38c39",
}, },
] ]
} }
@ -5673,13 +5652,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fde8d7", "color": "#E26D0E",
"color": "#f38c39",
}, },
] ]
} }
@ -5777,13 +5753,10 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fff6d6", "color": "#DFAC00",
"color": "#b68d00",
}, },
] ]
} }
@ -15971,13 +15944,10 @@ exports[`Storyshots Message list message 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fff6d6", "color": "#DFAC00",
"color": "#b68d00",
}, },
] ]
} }
@ -16019,13 +15989,10 @@ exports[`Storyshots Message list message 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#ffe9ec", "color": "#DB0C27",
"color": "#f5455c",
}, },
] ]
} }
@ -16066,13 +16033,10 @@ exports[`Storyshots Message list message 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fde8d7", "color": "#E26D0E",
"color": "#f38c39",
}, },
] ]
} }
@ -16113,13 +16077,10 @@ exports[`Storyshots Message list message 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fde8d7", "color": "#E26D0E",
"color": "#f38c39",
}, },
] ]
} }
@ -16161,13 +16122,10 @@ exports[`Storyshots Message list message 1`] = `
"backgroundColor": "transparent", "backgroundColor": "transparent",
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 16,
"fontWeight": "500", "fontWeight": "600",
"letterSpacing": 0.5,
"padding": 5,
}, },
Object { Object {
"backgroundColor": "#fff6d6", "color": "#DFAC00",
"color": "#b68d00",
}, },
] ]
} }
@ -16181,6 +16139,432 @@ exports[`Storyshots Message list message 1`] = `
</View> </View>
</View> </View>
</View> </View>
<View
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View>
<View
style={
Array [
Object {
"flexDirection": "column",
"paddingHorizontal": 14,
"paddingVertical": 4,
"width": "100%",
},
undefined,
]
}
>
<View
style={
Object {
"flexDirection": "row",
}
}
>
<View
style={
Array [
Object {
"borderRadius": 4,
"height": 36,
"width": 36,
},
Object {
"marginTop": 4,
},
]
}
>
<View
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {
"overflow": "hidden",
},
Object {
"borderRadius": 4,
"height": 36,
"width": 36,
},
]
}
>
<FastImageView
resizeMode="cover"
source={
Object {
"headers": undefined,
"priority": "high",
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=100",
}
}
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
/>
</View>
</View>
</View>
<View
style={
Array [
Object {
"flex": 1,
"marginLeft": 46,
},
Object {
"marginLeft": 10,
},
]
}
>
<View
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
}
}
>
<View
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"opacity": 1,
}
}
>
<Text
numberOfLines={1}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "500",
"lineHeight": 22,
},
Object {
"color": "#0d0e12",
},
]
}
>
diego.mello
</Text>
</View>
<Text
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 12,
"fontWeight": "300",
"lineHeight": 22,
"paddingLeft": 10,
},
Object {
"color": "#9ca2a8",
},
]
}
>
10:00 AM
</Text>
</View>
<View>
<Text
numberOfLines={0}
style={
Array [
undefined,
Object {
"color": "#2f343d",
},
]
}
>
<Text
onPress={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "600",
},
Object {
"color": "#DFAC00",
},
]
}
>
rocket.cat
</Text>
<Text
accessibilityLabel=" Lorem ipsum dolor "
numberOfLines={0}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
},
Array [
Object {},
Object {
"alignItems": "flex-start",
"flexDirection": "row",
"flexWrap": "wrap",
"justifyContent": "flex-start",
"marginBottom": 0,
"marginTop": 0,
},
],
]
}
>
Lorem ipsum dolor
</Text>
<Text
onPress={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "600",
},
Object {
"color": "#DB0C27",
},
]
}
>
diego.mello
</Text>
<Text
accessibilityLabel=" sit amet, "
numberOfLines={0}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
},
Array [
Object {},
Object {
"alignItems": "flex-start",
"flexDirection": "row",
"flexWrap": "wrap",
"justifyContent": "flex-start",
"marginBottom": 0,
"marginTop": 0,
},
],
]
}
>
sit amet,
</Text>
<Text
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "600",
},
Object {
"color": "#E26D0E",
},
]
}
>
all
</Text>
<Text
accessibilityLabel=" consectetur adipiscing "
numberOfLines={0}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
},
Array [
Object {},
Object {
"alignItems": "flex-start",
"flexDirection": "row",
"flexWrap": "wrap",
"justifyContent": "flex-start",
"marginBottom": 0,
"marginTop": 0,
},
],
]
}
>
consectetur adipiscing
</Text>
<Text
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "600",
},
Object {
"color": "#E26D0E",
},
]
}
>
here
</Text>
<Text
accessibilityLabel=" elit, sed do eiusmod tempor "
numberOfLines={0}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
},
Array [
Object {},
Object {
"alignItems": "flex-start",
"flexDirection": "row",
"flexWrap": "wrap",
"justifyContent": "flex-start",
"marginBottom": 0,
"marginTop": 0,
},
],
]
}
>
elit, sed do eiusmod tempor
</Text>
<Text
onPress={[Function]}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "600",
},
Object {
"color": "#DFAC00",
},
]
}
>
#general
</Text>
<Text
accessibilityLabel=" incididunt ut labore et dolore magna aliqua."
numberOfLines={0}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
},
Array [
Object {},
Object {
"alignItems": "flex-start",
"flexDirection": "row",
"flexWrap": "wrap",
"justifyContent": "flex-start",
"marginBottom": 0,
"marginTop": 0,
},
],
]
}
>
incididunt ut labore et dolore magna aliqua.
</Text>
</Text>
</View>
</View>
</View>
</View>
</View>
</View>
<Text <Text
style={ style={
Array [ Array [

13
app/constants/colors.js
View File

@ -11,13 +11,12 @@ export const SWITCH_TRACK_COLOR = {
}; };
const mentions = { const mentions = {
unreadBackground: '#414852', unreadBackground: '#6C727A',
mentionMeColor: '#f5455c', mentionMeColor: '#DB0C27',
mentionMeBackground: '#ffe9ec', mentionMeBackground: '#F5455C',
mentionGroupColor: '#f38c39', mentionGroupColor: '#E26D0E',
mentionGroupBackground: '#fde8d7', mentionGroupBackground: '#F38C39',
mentionOtherColor: '#b68d00', mentionOtherColor: '#DFAC00'
mentionOtherBackground: '#fff6d6'
}; };
export const themes = { export const themes = {

9
app/containers/markdown/AtMention.js
View File

@ -16,8 +16,7 @@ const AtMention = React.memo(({
style={[ style={[
styles.mention, styles.mention,
{ {
color: themes[theme].mentionGroupColor, color: themes[theme].mentionGroupColor
backgroundColor: themes[theme].mentionGroupBackground
}, },
...style ...style
]} ]}
@ -29,13 +28,11 @@ const AtMention = React.memo(({
let mentionStyle = {}; let mentionStyle = {};
if (mention === username) { if (mention === username) {
mentionStyle = { mentionStyle = {
color: themes[theme].mentionMeColor, color: themes[theme].mentionMeColor
backgroundColor: themes[theme].mentionMeBackground
}; };
} else { } else {
mentionStyle = { mentionStyle = {
color: themes[theme].mentionOtherColor, color: themes[theme].mentionOtherColor
backgroundColor: themes[theme].mentionOtherBackground
}; };
} }

3
app/containers/markdown/Hashtag.js
View File

@ -24,8 +24,7 @@ const Hashtag = React.memo(({
style={[ style={[
styles.mention, styles.mention,
{ {
color: themes[theme].mentionOtherColor, color: themes[theme].mentionOtherColor
backgroundColor: themes[theme].mentionOtherBackground
}, },
...style]} ...style]}
onPress={handlePress} onPress={handlePress}

4
app/containers/markdown/styles.js
View File

@ -54,9 +54,7 @@ export default StyleSheet.create({
temp: { opacity: 0.3 }, temp: { opacity: 0.3 },
mention: { mention: {
fontSize: 16, fontSize: 16,
padding: 5, ...sharedStyles.textSemibold
...sharedStyles.textMedium,
letterSpacing: 0.5
}, },
paragraph: { paragraph: {
marginTop: 0, marginTop: 0,

4
app/presentation/UnreadBadge.js
View File

@ -38,9 +38,9 @@ const UnreadBadge = React.memo(({
let backgroundColor = themes[theme].unreadBackground; let backgroundColor = themes[theme].unreadBackground;
const color = themes[theme].buttonText; const color = themes[theme].buttonText;
if (userMentions > 0) { if (userMentions > 0) {
backgroundColor = themes[theme].mentionMeColor; backgroundColor = themes[theme].mentionMeBackground;
} else if (groupMentions > 0) { } else if (groupMentions > 0) {
backgroundColor = themes[theme].mentionGroupColor; backgroundColor = themes[theme].mentionGroupBackground;
} }
return ( return (

15
storybook/stories/Message.js
View File

@ -210,6 +210,21 @@ export default ({ theme }) => {
name: 'general' name: 'general'
}]} }]}
/> />
<Message
msg='@rocket.cat Lorem ipsum dolor @diego.mello sit amet, @all consectetur adipiscing @here elit, sed do eiusmod tempor #general incididunt ut labore et dolore magna aliqua.'
mentions={[{
username: 'rocket.cat'
}, {
username: 'diego.mello'
}, {
username: 'all'
}, {
username: 'here'
}]}
channels={[{
name: 'general'
}]}
/>
<Separator title='Emojis' theme={theme} /> <Separator title='Emojis' theme={theme} />
<Message msg='👊🤙👏' /> <Message msg='👊🤙👏' />