verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

mention background

This commit is contained in:
Diego Mello 2023-05-11 18:17:24 -03:00
parent 2d07b1682c
commit bcf70efc2e
4 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot
View File

File diff suppressed because one or more lines are too long

14
__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot
View File

File diff suppressed because one or more lines are too long

43
app/containers/markdown/AtMention.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { StyleProp, Text, TextStyle } from 'react-native'; import { StyleProp, Text, TextStyle, View } from 'react-native';
import { transparentize } from 'color2k';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import { themes } from '../../lib/constants'; import { themes } from '../../lib/constants';
@ -20,28 +21,33 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
const { theme } = useTheme(); const { theme } = useTheme();
if (mention === 'all' || mention === 'here') { if (mention === 'all' || mention === 'here') {
return ( return (
<Text <View style={{ marginBottom: -3 }}>
style={[ <Text
styles.mention, style={[
{ styles.mention,
color: themes[theme].mentionGroupColor {
}, color: themes[theme].mentionGroupColor,
...style backgroundColor: transparentize(themes[theme].mentionGroupColor, 0.8)
]} },
> ...style
{mention} ]}
</Text> >
{`${mention}`}
</Text>
</View>
); );
} }
let mentionStyle = {}; let mentionStyle = {};
if (mention === username) { if (mention === username) {
mentionStyle = { mentionStyle = {
color: themes[theme].mentionMeColor color: themes[theme].mentionMeColor,
backgroundColor: transparentize(themes[theme].mentionMeColor, 0.8)
}; };
} else { } else {
mentionStyle = { mentionStyle = {
color: themes[theme].mentionOtherColor color: themes[theme].mentionOtherColor,
backgroundColor: transparentize(themes[theme].mentionOtherColor, 0.8)
}; };
} }
@ -59,10 +65,13 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
}; };
if (user) { if (user) {
const m = useRealName && user.name ? user.name : user.username;
return ( return (
<Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}> <View style={{ marginBottom: -3 }}>
{useRealName && user.name ? user.name : user.username} <Text style={[styles.mention, mentionStyle, ...style]} onPress={handlePress}>
</Text> {`${m}`}
</Text>
</View>
); );
} }

7
app/containers/markdown/styles.ts
View File

@ -32,7 +32,8 @@ export default StyleSheet.create({
}, },
plainText: { plainText: {
fontSize: 16, fontSize: 16,
flexShrink: 1 flexShrink: 1,
lineHeight: 22
}, },
text: { text: {
fontSize: 16, fontSize: 16,
@ -58,7 +59,9 @@ export default StyleSheet.create({
temp: { opacity: 0.3 }, temp: { opacity: 0.3 },
mention: { mention: {
fontSize: 16, fontSize: 16,
...sharedStyles.textSemibold ...sharedStyles.textSemibold,
borderRadius: 4,
overflow: 'hidden'
}, },
paragraph: { paragraph: {
marginTop: 0, marginTop: 0,