toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add markdown to channel info (#580)

Browse source
This commit is contained in:
enahum 2017-05-29 14:38:55 -04:00 committed by GitHub
parent e43fafae38
commit febc818bbb
3 changed files with 132 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
app/components/post/post.js
View file

@ -29,6 +29,7 @@ import ProfilePicture from 'app/components/profile_picture';
import ReplyIcon from 'app/components/reply_icon';
import SlackAttachments from 'app/components/slack_attachments';
import {preventDoubleTap} from 'app/utils/tap';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
import webhookIcon from 'assets/images/icons/webhook.jpg';
@ -315,13 +316,11 @@ class Post extends PureComponent {
return attachments;
}
renderSlackAttachments = (baseStyle) => {
renderSlackAttachments = (baseStyle, blockStyles, textStyles) => {
const {post, theme} = this.props;
if (post.props) {
const {attachments} = post.props;
const textStyles = getMarkdownTextStyles(theme);
const blockStyles = getMarkdownBlockStyles(theme);
if (attachments && attachments.length) {
return (
@ -339,7 +338,7 @@ class Post extends PureComponent {
return null;
};
renderMessage = (style, messageStyle, replyBar = false) => {
renderMessage = (style, messageStyle, blockStyles, textStyles, replyBar = false) => {
const {formatMessage} = this.props.intl;
const {isFlagged, post, theme} = this.props;
const {flagPost, unflagPost} = this.props.actions;
@ -384,8 +383,8 @@ class Post extends PureComponent {
<View style={[{flex: 1}, (post.failed && style.failedPost)]}>
<Markdown
baseTextStyle={messageStyle}
textStyles={getMarkdownTextStyles(theme)}
blockStyles={getMarkdownBlockStyles(theme)}
textStyles={textStyles}
blockStyles={blockStyles}
value={post.message}
/>
</View>
@ -406,7 +405,7 @@ class Post extends PureComponent {
toggleSelected={this.toggleSelected}
>
{message}
{this.renderSlackAttachments(messageStyle)}
{this.renderSlackAttachments(messageStyle, blockStyles, textStyles)}
{this.renderFileAttachments()}
</OptionsContext>
</View>
@ -445,7 +444,7 @@ class Post extends PureComponent {
actions={actions}
cancelText={formatMessage({id: 'channel_modal.cancel', defaultMessage: 'Cancel'})}
/>
{this.renderSlackAttachments(messageStyle)}
{this.renderSlackAttachments(messageStyle, blockStyles, textStyles)}
{this.renderFileAttachments()}
</View>
{post.failed &&
@ -581,6 +580,9 @@ class Post extends PureComponent {
messageStyle = style.message;
}
const blockStyles = getMarkdownBlockStyles(theme);
const textStyles = getMarkdownTextStyles(theme);
const selected = this.state && this.state.selected ? style.selected : null;
let contents;
if (this.props.commentedOnPost) {
@ -599,7 +601,7 @@ class Post extends PureComponent {
<View>
{this.renderCommentedOnMessage(style)}
</View>
{this.renderMessage(style, messageStyle, true)}
{this.renderMessage(style, messageStyle, blockStyles, textStyles, true)}
</View>
</View>
);
@ -745,99 +747,4 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
});
});
const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
const codeFont = Platform.OS === 'ios' ? 'Courier New' : 'monospace';
return StyleSheet.create({
emph: {
fontStyle: 'italic'
},
strong: {
fontWeight: 'bold'
},
link: {
color: theme.linkColor
},
heading1: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading2: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading3: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading4: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading5: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading6: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
code: {
alignSelf: 'center',
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
fontFamily: codeFont,
paddingHorizontal: 4,
paddingVertical: 2
},
codeBlock: {
fontFamily: codeFont
},
horizontalRule: {
backgroundColor: theme.centerChannelColor,
height: StyleSheet.hairlineWidth,
flex: 1,
marginVertical: 10
},
mention: {
color: theme.linkColor
}
});
});
const getMarkdownBlockStyles = makeStyleSheetFromTheme((theme) => {
return StyleSheet.create({
codeBlock: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
borderRadius: 4,
paddingHorizontal: 4,
paddingVertical: 2
},
horizontalRule: {
backgroundColor: theme.centerChannelColor
},
quoteBlock: {
color: changeOpacity(theme.centerChannelColor, 0.5),
padding: 5
}
});
});
export default injectIntl(Post);

18
app/screens/channel_info/channel_info_header.js
View file

@ -12,12 +12,16 @@ import {
import ChanneIcon from 'app/components/channel_icon';
import FormattedDate from 'app/components/formatted_date';
import FormattedText from 'app/components/formatted_text';
import Markdown from 'app/components/markdown';
import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
function channelInfoHeader(props) {
const {createAt, creator, displayName, header, memberCount, purpose, status, theme, type} = props;
const style = getStyleSheet(theme);
const textStyles = getMarkdownTextStyles(theme);
const blockStyles = getMarkdownBlockStyles(theme);
return (
<View style={style.container}>
@ -45,7 +49,12 @@ function channelInfoHeader(props) {
id='channel_info.purpose'
defaultMessage='Purpose'
/>
<Text style={style.detail}>{purpose}</Text>
<Markdown
baseTextStyle={style.detail}
textStyles={textStyles}
blockStyles={blockStyles}
value={purpose}
/>
</View>
}
{header.length > 0 &&
@ -55,7 +64,12 @@ function channelInfoHeader(props) {
id='channel_info.header'
defaultMessage='Header'
/>
<Text style={style.detail}>{header}</Text>
<Markdown
baseTextStyle={style.detail}
textStyles={textStyles}
blockStyles={blockStyles}
value={header}
/>
</View>
}
{creator &&

105
app/utils/markdown.js Normal file
View file

@ -0,0 +1,105 @@
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {Platform, StyleSheet} from 'react-native';
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme) => {
const codeFont = Platform.OS === 'ios' ? 'Courier New' : 'monospace';
return StyleSheet.create({
emph: {
fontStyle: 'italic'
},
strong: {
fontWeight: 'bold'
},
link: {
color: theme.linkColor
},
heading1: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading2: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading3: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading4: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading5: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
heading6: {
fontSize: 17,
lineHeight: 25,
fontWeight: '700',
marginTop: 10,
marginBottom: 10
},
code: {
alignSelf: 'center',
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
fontFamily: codeFont,
paddingHorizontal: 4,
paddingVertical: 2
},
codeBlock: {
fontFamily: codeFont
},
horizontalRule: {
backgroundColor: theme.centerChannelColor,
height: StyleSheet.hairlineWidth,
flex: 1,
marginVertical: 10
},
mention: {
color: theme.linkColor
}
});
});
export const getMarkdownBlockStyles = makeStyleSheetFromTheme((theme) => {
return StyleSheet.create({
codeBlock: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
borderRadius: 4,
paddingHorizontal: 4,
paddingVertical: 2
},
horizontalRule: {
backgroundColor: theme.centerChannelColor
},
quoteBlock: {
color: changeOpacity(theme.centerChannelColor, 0.5),
padding: 5
}
});
});
export default {
getMarkdownBlockStyles,
getMarkdownTextStyles
};