From ee99001010b6cd923c4ed6cf55de8e1c751dc2bb Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 25 Apr 2019 14:18:49 -0300
Subject: [PATCH] [FIX] Smaller thread title (#846)
* [FIX] Smaller thread title
* Remove markdown notation from thread title
* On message press debounce
* Align vertical thread title
---
.../__snapshots__/Storyshots.test.js.snap | 361 ++++++++++++++----
app/containers/message/Message.js | 11 +-
app/containers/message/styles.js | 8 +-
app/views/RoomView/Header/Header.js | 4 +
package.json | 1 +
storybook/stories/Message.js | 5 +
yarn.lock | 5 +
7 files changed, 316 insertions(+), 79 deletions(-)
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 4b04375be..24b85d696 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -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,
}
}
>
diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js
index 4e0ab42d5..d5c1a9fc5 100644
--- a/app/containers/message/Message.js
+++ b/app/containers/message/Message.js
@@ -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>
);
diff --git a/app/containers/message/styles.js b/app/containers/message/styles.js
index 954b8ed06..00bed3d95 100644
--- a/app/containers/message/styles.js
+++ b/app/containers/message/styles.js
@@ -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
}
});
diff --git a/app/views/RoomView/Header/Header.js b/app/views/RoomView/Header/Header.js
index daa9ea4db..2a6b9b5a0 100644
--- a/app/views/RoomView/Header/Header.js
+++ b/app/views/RoomView/Header/Header.js
@@ -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 (
diff --git a/package.json b/package.json
index 716a818b4..4aa83ef2b 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index a07f4765a..2f36229a0 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -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'
diff --git a/yarn.lock b/yarn.lock
index 16eb4eac9..62f088666 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
--
GitLab