[FIX] Smaller thread title (#846)
* [FIX] Smaller thread title * Remove markdown notation from thread title * On message press debounce * Align vertical thread title
This commit is contained in:
Diego Mello
GitHub
parent
5744114d7d
commit
ee99001010
|
|
@ -10821,17 +10821,12 @@ exports[`Storyshots Message list 1`] = `
|
|||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 20,
|
||||
"fontSize": 16,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
"marginRight": 2,
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"color": "#fff",
|
||||
"marginRight": 6,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"fontFamily": "custom",
|
||||
"fontStyle": "normal",
|
||||
|
|
@ -10851,9 +10846,10 @@ exports[`Storyshots Message list 1`] = `
|
|||
"color": "#1d74f5",
|
||||
"flex": 1,
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontSize": 14,
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "600",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -11066,17 +11062,12 @@ exports[`Storyshots Message list 1`] = `
|
|||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 20,
|
||||
"fontSize": 16,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
"marginRight": 2,
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"color": "#fff",
|
||||
"marginRight": 6,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"fontFamily": "custom",
|
||||
"fontStyle": "normal",
|
||||
|
|
@ -11096,9 +11087,10 @@ exports[`Storyshots Message list 1`] = `
|
|||
"color": "#1d74f5",
|
||||
"flex": 1,
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontSize": 14,
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "600",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -11230,6 +11222,247 @@ exports[`Storyshots Message list 1`] = `
|
|||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"marginLeft": 46,
|
||||
},
|
||||
Object {
|
||||
"marginLeft": 10,
|
||||
},
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#2F343D",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "500",
|
||||
"lineHeight": 22,
|
||||
}
|
||||
}
|
||||
>
|
||||
diego.mello
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#9ca2a8",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "300",
|
||||
"lineHeight": 22,
|
||||
"paddingLeft": 10,
|
||||
}
|
||||
}
|
||||
>
|
||||
10:00 AM
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
testID="message-thread-replied-on-Markdown: link block code"
|
||||
>
|
||||
<Text
|
||||
allowFontScaling={false}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 16,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
"marginRight": 2,
|
||||
},
|
||||
Object {
|
||||
"fontFamily": "custom",
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "normal",
|
||||
},
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
|
||||
</Text>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#1d74f5",
|
||||
"flex": 1,
|
||||
"fontFamily": "System",
|
||||
"fontSize": 14,
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
}
|
||||
}
|
||||
>
|
||||
Markdown: link block code
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={Object {}}
|
||||
>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "flex-start",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "wrap",
|
||||
"justifyContent": "flex-start",
|
||||
"marginBottom": 0,
|
||||
"marginTop": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "transparent",
|
||||
"color": "#2F343D",
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "400",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
I’m fine!
|
||||
</Text>
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessible={true}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"flexDirection": "column",
|
||||
"paddingHorizontal": 14,
|
||||
"paddingVertical": 4,
|
||||
"width": "100%",
|
||||
},
|
||||
Object {
|
||||
"marginTop": 6,
|
||||
},
|
||||
undefined,
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"height": 36,
|
||||
"width": 36,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 4,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"overflow": "hidden",
|
||||
},
|
||||
Object {
|
||||
"borderRadius": 4,
|
||||
"height": 36,
|
||||
"width": 36,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<FastImageView
|
||||
resizeMode="cover"
|
||||
source={
|
||||
Object {
|
||||
"priority": "high",
|
||||
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
|
|
@ -11311,17 +11544,12 @@ exports[`Storyshots Message list 1`] = `
|
|||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 20,
|
||||
"fontSize": 16,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
"marginRight": 2,
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"color": "#fff",
|
||||
"marginRight": 6,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"fontFamily": "custom",
|
||||
"fontStyle": "normal",
|
||||
|
|
@ -11341,9 +11569,10 @@ exports[`Storyshots Message list 1`] = `
|
|||
"color": "#1d74f5",
|
||||
"flex": 1,
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontSize": 14,
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "600",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -11556,17 +11785,12 @@ exports[`Storyshots Message list 1`] = `
|
|||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 20,
|
||||
"fontSize": 16,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
"marginRight": 2,
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"color": "#fff",
|
||||
"marginRight": 6,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"fontFamily": "custom",
|
||||
"fontStyle": "normal",
|
||||
|
|
@ -11586,9 +11810,10 @@ exports[`Storyshots Message list 1`] = `
|
|||
"color": "#1d74f5",
|
||||
"flex": 1,
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontSize": 14,
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "600",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -11801,17 +12026,12 @@ exports[`Storyshots Message list 1`] = `
|
|||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 20,
|
||||
"fontSize": 16,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
"marginRight": 2,
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"color": "#fff",
|
||||
"marginRight": 6,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"fontFamily": "custom",
|
||||
"fontStyle": "normal",
|
||||
|
|
@ -11831,9 +12051,10 @@ exports[`Storyshots Message list 1`] = `
|
|||
"color": "#1d74f5",
|
||||
"flex": 1,
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontSize": 14,
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "600",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
@ -12046,17 +12267,12 @@ exports[`Storyshots Message list 1`] = `
|
|||
Array [
|
||||
Object {
|
||||
"color": undefined,
|
||||
"fontSize": 20,
|
||||
"fontSize": 16,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
"marginRight": 2,
|
||||
},
|
||||
Array [
|
||||
Object {
|
||||
"color": "#fff",
|
||||
"marginRight": 6,
|
||||
},
|
||||
Object {
|
||||
"color": "#1d74f5",
|
||||
},
|
||||
],
|
||||
Object {
|
||||
"fontFamily": "custom",
|
||||
"fontStyle": "normal",
|
||||
|
|
@ -12076,9 +12292,10 @@ exports[`Storyshots Message list 1`] = `
|
|||
"color": "#1d74f5",
|
||||
"flex": 1,
|
||||
"fontFamily": "System",
|
||||
"fontSize": 16,
|
||||
"fontSize": 14,
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "600",
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import moment from 'moment';
|
|||
import { KeyboardUtils } from 'react-native-keyboard-input';
|
||||
import Touchable from 'react-native-platform-touchable';
|
||||
import { emojify } from 'react-emojione';
|
||||
import removeMarkdown from 'remove-markdown';
|
||||
|
||||
import Image from './Image';
|
||||
import User from './User';
|
||||
|
|
@ -23,6 +24,7 @@ import I18n from '../../i18n';
|
|||
import messagesStatus from '../../constants/messagesStatus';
|
||||
import { CustomIcon } from '../../lib/Icons';
|
||||
import { COLOR_DANGER } from '../../constants/colors';
|
||||
import debounce from '../../utils/debounce';
|
||||
|
||||
const SYSTEM_MESSAGES = [
|
||||
'r',
|
||||
|
|
@ -160,14 +162,14 @@ export default class Message extends PureComponent {
|
|||
onLongPress: () => {}
|
||||
}
|
||||
|
||||
onPress = () => {
|
||||
onPress = debounce(() => {
|
||||
KeyboardUtils.dismiss();
|
||||
|
||||
const { onThreadPress, tlm, tmid } = this.props;
|
||||
if ((tlm || tmid) && onThreadPress) {
|
||||
onThreadPress();
|
||||
}
|
||||
}
|
||||
}, 300, true)
|
||||
|
||||
onLongPress = () => {
|
||||
const { archived, onLongPress } = this.props;
|
||||
|
|
@ -486,11 +488,12 @@ export default class Message extends PureComponent {
|
|||
return null;
|
||||
}
|
||||
|
||||
const msg = emojify(tmsg, { output: 'unicode' });
|
||||
let msg = emojify(tmsg, { output: 'unicode' });
|
||||
msg = removeMarkdown(msg);
|
||||
|
||||
return (
|
||||
<View style={styles.repliedThread} testID={`message-thread-replied-on-${ msg }`}>
|
||||
<CustomIcon name='thread' size={20} style={[styles.buttonIcon, styles.repliedThreadIcon]} />
|
||||
<CustomIcon name='thread' size={16} style={styles.repliedThreadIcon} />
|
||||
<Text style={styles.repliedThreadName} numberOfLines={1}>{msg}</Text>
|
||||
</View>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -220,13 +220,15 @@ export default StyleSheet.create({
|
|||
flex: 1
|
||||
},
|
||||
repliedThreadIcon: {
|
||||
color: COLOR_PRIMARY
|
||||
color: COLOR_PRIMARY,
|
||||
marginRight: 2
|
||||
},
|
||||
repliedThreadName: {
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
lineHeight: 16,
|
||||
fontStyle: 'normal',
|
||||
flex: 1,
|
||||
color: COLOR_PRIMARY,
|
||||
...sharedStyles.textSemibold
|
||||
...sharedStyles.textRegular
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
View, Text, StyleSheet, ScrollView
|
||||
} from 'react-native';
|
||||
import { emojify } from 'react-emojione';
|
||||
import removeMarkdown from 'remove-markdown';
|
||||
|
||||
import I18n from '../../../i18n';
|
||||
import sharedStyles from '../../Styles';
|
||||
|
|
@ -77,6 +78,9 @@ const Header = React.memo(({
|
|||
}
|
||||
if (title) {
|
||||
title = emojify(title, { output: 'unicode' });
|
||||
if (tmid) {
|
||||
title = removeMarkdown(title);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@
|
|||
"redux-enhancer-react-native-appstate": "^0.3.1",
|
||||
"redux-immutable-state-invariant": "^2.1.0",
|
||||
"redux-saga": "^0.16.2",
|
||||
"remove-markdown": "^0.3.0",
|
||||
"rn-fetch-blob": "^0.10.15",
|
||||
"semver": "^5.6.0",
|
||||
"snyk": "^1.122.3",
|
||||
|
|
|
|||
|
|
@ -304,6 +304,11 @@ export default (
|
|||
tmid='1'
|
||||
tmsg='Thread with emoji :) :joy:'
|
||||
/>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
tmid='1'
|
||||
tmsg='Markdown: [link](http://www.google.com/) ```block code```'
|
||||
/>
|
||||
<Message
|
||||
msg="I'm fine!"
|
||||
tmid='1'
|
||||
|
|
|
|||
|
|
@ -11113,6 +11113,11 @@ relateurl@0.2.x:
|
|||
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
|
||||
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
|
||||
|
||||
remove-markdown@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/remove-markdown/-/remove-markdown-0.3.0.tgz#5e4b667493a93579728f3d52ecc1db9ca505dc98"
|
||||
integrity sha1-XktmdJOpNXlyjz1S7MHbnKUF3Jg=
|
||||
|
||||
remove-trailing-separator@^1.0.1:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
|
||||
|
|
|
|||
Loading…
Reference in New Issue