diff --git a/app/components/markdown/index.js b/app/components/markdown/index.js index b95fe3eab..d4d8e33f2 100644 --- a/app/components/markdown/index.js +++ b/app/components/markdown/index.js @@ -7,7 +7,6 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import { Platform, - StyleSheet, Text, View } from 'react-native'; @@ -17,7 +16,7 @@ import ChannelLink from 'app/components/channel_link'; import Emoji from 'app/components/emoji'; import FormattedText from 'app/components/formatted_text'; import CustomPropTypes from 'app/constants/custom_prop_types'; -import {concatStyles} from 'app/utils/theme'; +import {blendColors, concatStyles, makeStyleSheetFromTheme} from 'app/utils/theme'; import MarkdownBlockQuote from './markdown_block_quote'; import MarkdownCodeBlock from './markdown_code_block'; @@ -39,6 +38,7 @@ export default class Markdown extends PureComponent { onLongPress: PropTypes.func, onPostPress: PropTypes.func, textStyles: PropTypes.object, + theme: PropTypes.object.isRequired, value: PropTypes.string.isRequired }; @@ -220,6 +220,7 @@ export default class Markdown extends PureComponent { return null; } + const style = getStyleSheet(this.props.theme); const blockStyle = [style.block]; if (!first) { blockStyle.push(this.props.blockStyles.adjacentParagraph); @@ -235,6 +236,8 @@ export default class Markdown extends PureComponent { } renderHeading = ({children, level}) => { + const style = getStyleSheet(this.props.theme); + return ( @@ -311,6 +314,8 @@ export default class Markdown extends PureComponent { let rendered = this.renderText(props); if (props.isBlock) { + const style = getStyleSheet(this.props.theme); + rendered = ( {rendered} @@ -334,15 +339,16 @@ export default class Markdown extends PureComponent { renderEditedIndicator = ({context}) => { let spacer = ''; - let opacity = Platform.select({ios: 0.7, android: 1}); if (context[0] === 'paragraph') { spacer = ' '; - opacity = Platform.select({ios: 0.5, android: 0.6}); - } - const styles = [style.editedIndicatorText, {opacity}]; - if (Platform.OS === 'ios') { - styles.push(this.computeTextStyle(this.props.baseTextStyle, context)); } + + const style = getStyleSheet(this.props.theme); + const styles = [ + this.props.baseTextStyle, + style.editedIndicatorText + ]; + return ( { + // Android has trouble giving text transparency depending on how it's nested, + // so we calculate the resulting colour manually + const editedOpacity = Platform.select({ + ios: 0.3, + android: 1.0 + }); + const editedColor = Platform.select({ + ios: theme.centerChannelColor, + android: blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.3) + }); + + return { + block: { + alignItems: 'flex-start', + flexDirection: 'row', + flexWrap: 'wrap' + }, + editedIndicatorText: { + color: editedColor, + fontSize: 14, + opacity: editedOpacity + } + }; }); diff --git a/app/utils/theme.js b/app/utils/theme.js index 8a917d7af..99de76a3a 100644 --- a/app/utils/theme.js +++ b/app/utils/theme.js @@ -17,7 +17,7 @@ export function makeStyleSheetFromTheme(getStyleFromTheme) { }; } -export function changeOpacity(oldColor, opacity) { +function normalizeColor(oldColor) { let color = oldColor; if (color.length && color[0] === '#') { color = color.slice(1); @@ -32,11 +32,44 @@ export function changeOpacity(oldColor, opacity) { color += tempColor[2] + tempColor[2]; } + return color; +} + +export function changeOpacity(oldColor, opacity) { + const color = normalizeColor(oldColor); + const r = parseInt(color.substring(0, 2), 16); const g = parseInt(color.substring(2, 4), 16); const b = parseInt(color.substring(4, 6), 16); - return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')'; + return `rgba(${r},${g},${b},${opacity})`; +} + +function blendComponent(background, foreground, opacity) { + return ((1 - opacity) * background) + (opacity * foreground); +} + +export function blendColors(background, foreground, opacity) { + const backgroundNormalized = normalizeColor(background); + const foregroundNormalized = normalizeColor(foreground); + + const r = blendComponent( + parseInt(backgroundNormalized.substring(0, 2), 16), + parseInt(foregroundNormalized.substring(0, 2), 16), + opacity + ); + const g = blendComponent( + parseInt(backgroundNormalized.substring(2, 4), 16), + parseInt(foregroundNormalized.substring(2, 4), 16), + opacity + ); + const b = blendComponent( + parseInt(backgroundNormalized.substring(4, 6), 16), + parseInt(foregroundNormalized.substring(4, 6), 16), + opacity + ); + + return `rgb(${r},${g},${b})`; } export function concatStyles(...styles) {