From ee99001010b6cd923c4ed6cf55de8e1c751dc2bb Mon Sep 17 00:00:00 2001 From: Diego Mello 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`] = ` /> + + + + + diego.mello + + + + 10:00 AM + + + + +  + + + Markdown: link block code + + + + + + + I’m fine! + + + + + + + + + + + + + + + + @@ -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 ( - + {msg} ); 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:' /> +