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

[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 2019-04-25 14:18:49 -03:00 committed by GitHub
parent 5744114d7d
commit ee99001010
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 316 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10821,17 +10821,12 @@ exports[`Storyshots Message list 1`] = `
Array [ Array [
Object { Object {
"color": undefined, "color": undefined,
"fontSize": 20, "fontSize": 16,
},
Array [
Object {
"color": "#fff",
"marginRight": 6,
}, },
Object { Object {
"color": "#1d74f5", "color": "#1d74f5",
"marginRight": 2,
}, },
],
Object { Object {
"fontFamily": "custom", "fontFamily": "custom",
"fontStyle": "normal", "fontStyle": "normal",
@ -10851,9 +10846,10 @@ exports[`Storyshots Message list 1`] = `
"color": "#1d74f5", "color": "#1d74f5",
"flex": 1, "flex": 1,
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 14,
"fontStyle": "normal", "fontStyle": "normal",
"fontWeight": "600", "fontWeight": "400",
"lineHeight": 16,
} }
} }
> >
@ -11066,17 +11062,12 @@ exports[`Storyshots Message list 1`] = `
Array [ Array [
Object { Object {
"color": undefined, "color": undefined,
"fontSize": 20, "fontSize": 16,
},
Array [
Object {
"color": "#fff",
"marginRight": 6,
}, },
Object { Object {
"color": "#1d74f5", "color": "#1d74f5",
"marginRight": 2,
}, },
],
Object { Object {
"fontFamily": "custom", "fontFamily": "custom",
"fontStyle": "normal", "fontStyle": "normal",
@ -11096,9 +11087,10 @@ exports[`Storyshots Message list 1`] = `
"color": "#1d74f5", "color": "#1d74f5",
"flex": 1, "flex": 1,
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 14,
"fontStyle": "normal", "fontStyle": "normal",
"fontWeight": "600", "fontWeight": "400",
"lineHeight": 16,
} }
} }
> >
@ -11230,6 +11222,247 @@ exports[`Storyshots Message list 1`] = `
/> />
</View> </View>
</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 <View
style={ style={
Array [ Array [
@ -11311,17 +11544,12 @@ exports[`Storyshots Message list 1`] = `
Array [ Array [
Object { Object {
"color": undefined, "color": undefined,
"fontSize": 20, "fontSize": 16,
},
Array [
Object {
"color": "#fff",
"marginRight": 6,
}, },
Object { Object {
"color": "#1d74f5", "color": "#1d74f5",
"marginRight": 2,
}, },
],
Object { Object {
"fontFamily": "custom", "fontFamily": "custom",
"fontStyle": "normal", "fontStyle": "normal",
@ -11341,9 +11569,10 @@ exports[`Storyshots Message list 1`] = `
"color": "#1d74f5", "color": "#1d74f5",
"flex": 1, "flex": 1,
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 14,
"fontStyle": "normal", "fontStyle": "normal",
"fontWeight": "600", "fontWeight": "400",
"lineHeight": 16,
} }
} }
> >
@ -11556,17 +11785,12 @@ exports[`Storyshots Message list 1`] = `
Array [ Array [
Object { Object {
"color": undefined, "color": undefined,
"fontSize": 20, "fontSize": 16,
},
Array [
Object {
"color": "#fff",
"marginRight": 6,
}, },
Object { Object {
"color": "#1d74f5", "color": "#1d74f5",
"marginRight": 2,
}, },
],
Object { Object {
"fontFamily": "custom", "fontFamily": "custom",
"fontStyle": "normal", "fontStyle": "normal",
@ -11586,9 +11810,10 @@ exports[`Storyshots Message list 1`] = `
"color": "#1d74f5", "color": "#1d74f5",
"flex": 1, "flex": 1,
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 14,
"fontStyle": "normal", "fontStyle": "normal",
"fontWeight": "600", "fontWeight": "400",
"lineHeight": 16,
} }
} }
> >
@ -11801,17 +12026,12 @@ exports[`Storyshots Message list 1`] = `
Array [ Array [
Object { Object {
"color": undefined, "color": undefined,
"fontSize": 20, "fontSize": 16,
},
Array [
Object {
"color": "#fff",
"marginRight": 6,
}, },
Object { Object {
"color": "#1d74f5", "color": "#1d74f5",
"marginRight": 2,
}, },
],
Object { Object {
"fontFamily": "custom", "fontFamily": "custom",
"fontStyle": "normal", "fontStyle": "normal",
@ -11831,9 +12051,10 @@ exports[`Storyshots Message list 1`] = `
"color": "#1d74f5", "color": "#1d74f5",
"flex": 1, "flex": 1,
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 14,
"fontStyle": "normal", "fontStyle": "normal",
"fontWeight": "600", "fontWeight": "400",
"lineHeight": 16,
} }
} }
> >
@ -12046,17 +12267,12 @@ exports[`Storyshots Message list 1`] = `
Array [ Array [
Object { Object {
"color": undefined, "color": undefined,
"fontSize": 20, "fontSize": 16,
},
Array [
Object {
"color": "#fff",
"marginRight": 6,
}, },
Object { Object {
"color": "#1d74f5", "color": "#1d74f5",
"marginRight": 2,
}, },
],
Object { Object {
"fontFamily": "custom", "fontFamily": "custom",
"fontStyle": "normal", "fontStyle": "normal",
@ -12076,9 +12292,10 @@ exports[`Storyshots Message list 1`] = `
"color": "#1d74f5", "color": "#1d74f5",
"flex": 1, "flex": 1,
"fontFamily": "System", "fontFamily": "System",
"fontSize": 16, "fontSize": 14,
"fontStyle": "normal", "fontStyle": "normal",
"fontWeight": "600", "fontWeight": "400",
"lineHeight": 16,
} }
} }
> >

11
app/containers/message/Message.js
View File

@ -7,6 +7,7 @@ import moment from 'moment';
import { KeyboardUtils } from 'react-native-keyboard-input'; import { KeyboardUtils } from 'react-native-keyboard-input';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import { emojify } from 'react-emojione'; import { emojify } from 'react-emojione';
import removeMarkdown from 'remove-markdown';
import Image from './Image'; import Image from './Image';
import User from './User'; import User from './User';
@ -23,6 +24,7 @@ import I18n from '../../i18n';
import messagesStatus from '../../constants/messagesStatus'; import messagesStatus from '../../constants/messagesStatus';
import { CustomIcon } from '../../lib/Icons'; import { CustomIcon } from '../../lib/Icons';
import { COLOR_DANGER } from '../../constants/colors'; import { COLOR_DANGER } from '../../constants/colors';
import debounce from '../../utils/debounce';
const SYSTEM_MESSAGES = [ const SYSTEM_MESSAGES = [
'r', 'r',
@ -160,14 +162,14 @@ export default class Message extends PureComponent {
onLongPress: () => {} onLongPress: () => {}
} }
onPress = () => { onPress = debounce(() => {
KeyboardUtils.dismiss(); KeyboardUtils.dismiss();
const { onThreadPress, tlm, tmid } = this.props; const { onThreadPress, tlm, tmid } = this.props;
if ((tlm || tmid) && onThreadPress) { if ((tlm || tmid) && onThreadPress) {
onThreadPress(); onThreadPress();
} }
} }, 300, true)
onLongPress = () => { onLongPress = () => {
const { archived, onLongPress } = this.props; const { archived, onLongPress } = this.props;
@ -486,11 +488,12 @@ export default class Message extends PureComponent {
return null; return null;
} }
const msg = emojify(tmsg, { output: 'unicode' }); let msg = emojify(tmsg, { output: 'unicode' });
msg = removeMarkdown(msg);
return ( return (
<View style={styles.repliedThread} testID={`message-thread-replied-on-${ msg }`}> <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> <Text style={styles.repliedThreadName} numberOfLines={1}>{msg}</Text>
</View> </View>
); );

8
app/containers/message/styles.js
View File

@ -220,13 +220,15 @@ export default StyleSheet.create({
flex: 1 flex: 1
}, },
repliedThreadIcon: { repliedThreadIcon: {
color: COLOR_PRIMARY color: COLOR_PRIMARY,
marginRight: 2
}, },
repliedThreadName: { repliedThreadName: {
fontSize: 16, fontSize: 14,
lineHeight: 16,
fontStyle: 'normal', fontStyle: 'normal',
flex: 1, flex: 1,
color: COLOR_PRIMARY, color: COLOR_PRIMARY,
...sharedStyles.textSemibold ...sharedStyles.textRegular
} }
}); });

4
app/views/RoomView/Header/Header.js
View File

@ -4,6 +4,7 @@ import {
View, Text, StyleSheet, ScrollView View, Text, StyleSheet, ScrollView
} from 'react-native'; } from 'react-native';
import { emojify } from 'react-emojione'; import { emojify } from 'react-emojione';
import removeMarkdown from 'remove-markdown';
import I18n from '../../../i18n'; import I18n from '../../../i18n';
import sharedStyles from '../../Styles'; import sharedStyles from '../../Styles';
@ -77,6 +78,9 @@ const Header = React.memo(({
} }
if (title) { if (title) {
title = emojify(title, { output: 'unicode' }); title = emojify(title, { output: 'unicode' });
if (tmid) {
title = removeMarkdown(title);
}
} }
return ( return (

1
package.json
View File

@ -72,6 +72,7 @@
"redux-enhancer-react-native-appstate": "^0.3.1", "redux-enhancer-react-native-appstate": "^0.3.1",
"redux-immutable-state-invariant": "^2.1.0", "redux-immutable-state-invariant": "^2.1.0",
"redux-saga": "^0.16.2", "redux-saga": "^0.16.2",
"remove-markdown": "^0.3.0",
"rn-fetch-blob": "^0.10.15", "rn-fetch-blob": "^0.10.15",
"semver": "^5.6.0", "semver": "^5.6.0",
"snyk": "^1.122.3", "snyk": "^1.122.3",

5
storybook/stories/Message.js
View File

@ -304,6 +304,11 @@ export default (
tmid='1' tmid='1'
tmsg='Thread with emoji :) :joy:' tmsg='Thread with emoji :) :joy:'
/> />
<Message
msg="I'm fine!"
tmid='1'
tmsg='Markdown: [link](http://www.google.com/) ```block code```'
/>
<Message <Message
msg="I'm fine!" msg="I'm fine!"
tmid='1' tmid='1'

5
yarn.lock
View File

@ -11113,6 +11113,11 @@ relateurl@0.2.x:
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk= 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: remove-trailing-separator@^1.0.1:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef" resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"