From b795a0bba4fd78c07d9298ecf59a3c8525d7cc39 Mon Sep 17 00:00:00 2001 From: Miguel Alatzar Date: Fri, 13 Sep 2019 06:24:36 -0700 Subject: [PATCH] [MM-18361] Style text inputs and post options with theme (#3213) * Style text inputs with theme * Add snapshot test * Use theme for post options background and text colors * Use theme for post options icon color * Use theme for reaction list * Use theme for slide up indicator * Fix post options localization * PM Feedback review * Slideup PM changes and channel edit * fix tests * Fix i18n --- .../edit_channel_info.test.js.snap | 313 +++++++++++ .../edit_channel_info/edit_channel_info.js | 68 +-- .../edit_channel_info.test.js | 8 + .../__snapshots__/post_textbox.test.js.snap | 6 +- .../post_textbox/post_textbox_base.js | 6 +- .../safe_area_view/safe_area_view.ios.js | 17 +- .../slide_up_panel_indicator.test.js.snap | 25 + .../slide_up_panel/slide_up_panel.js | 65 +-- .../slide_up_panel_indicator.test.js | 21 + app/screens/edit_channel/edit_channel.js | 5 +- .../__snapshots__/post_options.test.js.snap | 488 ++++++++++++++++++ app/screens/post_options/post_option.js | 97 ++-- app/screens/post_options/post_options.js | 199 ++++--- .../reaction_header.test.js.snap | 2 +- .../__snapshots__/reaction_list.test.js.snap | 28 + app/screens/reaction_list/reaction_header.js | 43 +- app/screens/reaction_list/reaction_list.js | 4 +- .../__snapshots__/reaction_row.test.js.snap | 3 +- .../reaction_row/reaction_row.js | 73 +-- .../notification_settings_mobile.ios.js | 7 +- assets/base/i18n/en.json | 2 - 21 files changed, 1175 insertions(+), 305 deletions(-) create mode 100644 app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap create mode 100644 app/components/slide_up_panel/__snapshots__/slide_up_panel_indicator.test.js.snap create mode 100644 app/components/slide_up_panel/slide_up_panel_indicator.test.js diff --git a/app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap b/app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap new file mode 100644 index 000000000..e6e917569 --- /dev/null +++ b/app/components/edit_channel_info/__snapshots__/edit_channel_info.test.js.snap @@ -0,0 +1,313 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EditChannelInfo should match snapshot 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/app/components/edit_channel_info/edit_channel_info.js b/app/components/edit_channel_info/edit_channel_info.js index d7e92eda4..7282f35cf 100644 --- a/app/components/edit_channel_info/edit_channel_info.js +++ b/app/components/edit_channel_info/edit_channel_info.js @@ -7,7 +7,6 @@ import { Platform, TouchableWithoutFeedback, View, - Text, findNodeHandle, } from 'react-native'; import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'; @@ -27,7 +26,6 @@ import { getKeyboardAppearanceFromTheme, } from 'app/utils/theme'; -import {getShortenedURL} from 'app/utils/url'; import {t} from 'app/utils/i18n'; import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing'; @@ -138,17 +136,6 @@ export default class EditChannelInfo extends PureComponent { this.props.enableRightButton(displayNameExists); }; - onDisplayURLChangeText = (channelURL) => { - const {editing, onChannelURLChange} = this.props; - onChannelURLChange(channelURL); - - if (editing) { - const {displayName, purpose, header} = this.props; - const canUpdate = this.canUpdate(displayName, channelURL, purpose, header); - this.enableRightButton(canUpdate); - } - }; - onPurposeChangeText = (purpose) => { const {editing, onPurposeChange} = this.props; onPurposeChange(purpose); @@ -180,20 +167,15 @@ export default class EditChannelInfo extends PureComponent { render() { const { theme, - editing, channelType, - currentTeamUrl, deviceWidth, deviceHeight, displayName, - channelURL, header, purpose, isLandscape, } = this.props; const {error, saving} = this.props; - const fullUrl = currentTeamUrl + '/channels'; - const shortUrl = getShortenedURL(fullUrl, 35); const style = getStyleSheet(theme); @@ -221,7 +203,7 @@ export default class EditChannelInfo extends PureComponent { } return ( - + - - - )} - {/*TODO: Hide channel url field until it's added to CreateChannel */} - {false && editing && !displayHeaderOnly && ( - - - - - {shortUrl} - - - - - + ); } } @@ -389,11 +341,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, scrollView: { flex: 1, - backgroundColor: changeOpacity(theme.centerChannelColor, 0.03), - paddingTop: 10, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.06), + paddingTop: 30, }, errorContainer: { - backgroundColor: changeOpacity(theme.centerChannelColor, 0.03), + backgroundColor: changeOpacity(theme.centerChannelColor, 0.06), }, errorWrapper: { justifyContent: 'center', @@ -401,10 +353,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, inputContainer: { marginTop: 10, - backgroundColor: '#fff', + backgroundColor: theme.centerChannelBg, }, input: { - color: '#333', + color: theme.centerChannelColor, fontSize: 14, height: 40, paddingHorizontal: 15, diff --git a/app/components/edit_channel_info/edit_channel_info.test.js b/app/components/edit_channel_info/edit_channel_info.test.js index c7d34a777..3c395f4d1 100644 --- a/app/components/edit_channel_info/edit_channel_info.test.js +++ b/app/components/edit_channel_info/edit_channel_info.test.js @@ -39,6 +39,14 @@ describe('EditChannelInfo', () => { isLandscape: true, }; + test('should match snapshot', () => { + const wrapper = shallow( + + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + }); + test('should have called onHeaderChangeText on text change from Autocomplete', () => { const wrapper = shallow( diff --git a/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap b/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap index afd6e02f3..3eb315032 100644 --- a/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap +++ b/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap @@ -61,7 +61,7 @@ exports[`PostTextBox should match, full snapshot 1`] = ` Array [ Object { "alignItems": "stretch", - "backgroundColor": "#fff", + "backgroundColor": "#ffffff", "flex": 1, "flexDirection": "row", "marginRight": 10, @@ -81,11 +81,11 @@ exports[`PostTextBox should match, full snapshot 1`] = ` onEndEditing={[Function]} onSelectionChange={[Function]} placeholder="Write to Test Channel" - placeholderTextColor="rgba(0,0,0,0.5)" + placeholderTextColor="rgba(61,60,64,0.5)" rejectResponderTermination={true} style={ Object { - "color": "#000", + "color": "#3d3c40", "flex": 1, "fontSize": 14, "maxHeight": 100, diff --git a/app/components/post_textbox/post_textbox_base.js b/app/components/post_textbox/post_textbox_base.js index 9cce692f9..83b6f3841 100644 --- a/app/components/post_textbox/post_textbox_base.js +++ b/app/components/post_textbox/post_textbox_base.js @@ -724,7 +724,7 @@ export default class PostTextBoxBase extends PureComponent { onChangeText={this.handleTextChange} onSelectionChange={this.handlePostDraftSelectionChanged} placeholder={intl.formatMessage(placeholder, {channelDisplayName})} - placeholderTextColor={changeOpacity('#000', 0.5)} + placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)} multiline={true} blurOnSubmit={false} underlineColorAndroid='transparent' @@ -751,7 +751,7 @@ export default class PostTextBoxBase extends PureComponent { const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { input: { - color: '#000', + color: theme.centerChannelColor, flex: 1, fontSize: 14, maxHeight: MAX_CONTENT_HEIGHT, @@ -771,7 +771,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { inputContainer: { flex: 1, flexDirection: 'row', - backgroundColor: '#fff', + backgroundColor: theme.centerChannelBg, alignItems: 'stretch', marginRight: 10, }, diff --git a/app/components/safe_area_view/safe_area_view.ios.js b/app/components/safe_area_view/safe_area_view.ios.js index 9b1c4dc12..3f70d213b 100644 --- a/app/components/safe_area_view/safe_area_view.ios.js +++ b/app/components/safe_area_view/safe_area_view.ios.js @@ -18,6 +18,7 @@ export default class SafeAreaIos extends PureComponent { backgroundColor: PropTypes.string, children: PropTypes.node.isRequired, excludeHeader: PropTypes.bool, + excludeFooter: PropTypes.bool, footerColor: PropTypes.string, footerComponent: PropTypes.node, forceTop: PropTypes.number, @@ -36,12 +37,17 @@ export default class SafeAreaIos extends PureComponent { constructor(props) { super(props); + let insetBottom = 0; + if ((DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets) && props.excludeFooter) { + insetBottom = 20; + } + this.state = { keyboard: false, safeAreaInsets: { top: DeviceTypes.IS_IPHONE_X ? 44 : 20, left: 0, - bottom: DeviceTypes.IS_IPHONE_X || mattermostManaged.hasSafeAreaInsets ? 20 : 0, + bottom: insetBottom, right: 0, }, statusBarHeight: 20, @@ -152,7 +158,7 @@ export default class SafeAreaIos extends PureComponent { }; render() { - const {backgroundColor, children, footerColor, footerComponent, keyboardOffset, theme, useLandscapeMargin} = this.props; + const {backgroundColor, children, excludeFooter, footerColor, footerComponent, keyboardOffset, theme, useLandscapeMargin} = this.props; const {keyboard, safeAreaInsets} = this.state; let bgColor = theme.centerChannelBg; @@ -170,6 +176,11 @@ export default class SafeAreaIos extends PureComponent { offset = keyboardOffset; } + let bottomInset = safeAreaInsets.bottom; + if (excludeFooter) { + bottomInset = 0; + } + return ( {this.renderTopBar()} {children} - + {footerComponent} diff --git a/app/components/slide_up_panel/__snapshots__/slide_up_panel_indicator.test.js.snap b/app/components/slide_up_panel/__snapshots__/slide_up_panel_indicator.test.js.snap new file mode 100644 index 000000000..6288b754a --- /dev/null +++ b/app/components/slide_up_panel/__snapshots__/slide_up_panel_indicator.test.js.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SlideUpPanelIndicator should match snapshot 1`] = ` + + + +`; diff --git a/app/components/slide_up_panel/slide_up_panel.js b/app/components/slide_up_panel/slide_up_panel.js index 111c1d9bf..dc15e2652 100644 --- a/app/components/slide_up_panel/slide_up_panel.js +++ b/app/components/slide_up_panel/slide_up_panel.js @@ -14,6 +14,7 @@ import { import {DeviceTypes} from 'app/constants'; import mattermostManaged from 'app/mattermost_managed'; import {hapticFeedback} from 'app/utils/general'; +import {makeStyleSheetFromTheme} from 'app/utils/theme'; import SlideUpPanelIndicator from './slide_up_panel_indicator'; @@ -43,6 +44,7 @@ export default class SlideUpPanel extends PureComponent { // The space between the top of the panel and the top of the container when the SlideUpPanel is fully open. marginFromTop: PropTypes.number, onRequestClose: PropTypes.func, + theme: PropTypes.object.isRequired, }; static defaultProps = { @@ -232,8 +234,11 @@ export default class SlideUpPanel extends PureComponent { }; render() { - const {children, header} = this.props; + const {children, header, theme} = this.props; const {lastSnap} = this.state; + + const styles = getStyleSheet(theme); + const translateStyle = { transform: [{translateY: this.translateY}], }; @@ -320,32 +325,34 @@ export default class SlideUpPanel extends PureComponent { } } -const styles = StyleSheet.create({ - viewport: { - flex: 1, - }, - container: { - flex: 1, - backgroundColor: 'white', - }, - border: { - ...Platform.select({ - android: { - borderTopRightRadius: 2, - borderTopLeftRadius: 2, - }, - ios: { - borderTopRightRadius: 10, - borderTopLeftRadius: 10, - }, - }), - }, - backdrop: { - backgroundColor: '#000', - position: 'absolute', - top: 0, - bottom: 0, - left: 0, - right: 0, - }, +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return { + viewport: { + flex: 1, + }, + container: { + flex: 1, + backgroundColor: theme.centerChannelBg, + }, + border: { + ...Platform.select({ + android: { + borderTopRightRadius: 2, + borderTopLeftRadius: 2, + }, + ios: { + borderTopRightRadius: 10, + borderTopLeftRadius: 10, + }, + }), + }, + backdrop: { + backgroundColor: '#000', + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + }; }); diff --git a/app/components/slide_up_panel/slide_up_panel_indicator.test.js b/app/components/slide_up_panel/slide_up_panel_indicator.test.js new file mode 100644 index 000000000..0f0cb4cd2 --- /dev/null +++ b/app/components/slide_up_panel/slide_up_panel_indicator.test.js @@ -0,0 +1,21 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {shallow} from 'enzyme'; + +import SlideUpPanelIndicator from './slide_up_panel_indicator'; + +describe('SlideUpPanelIndicator', () => { + const baseProps = { + dragIndicatorColor: '#fff', + }; + + test('should match snapshot', () => { + const wrapper = shallow( + + ); + + expect(wrapper.getElement()).toMatchSnapshot(); + }); +}); diff --git a/app/screens/edit_channel/edit_channel.js b/app/screens/edit_channel/edit_channel.js index 9f10fcedc..667e0ade1 100644 --- a/app/screens/edit_channel/edit_channel.js +++ b/app/screens/edit_channel/edit_channel.js @@ -296,7 +296,10 @@ export default class EditChannel extends PureComponent { } = this.state; return ( - + @@ -55,30 +199,174 @@ exports[`PostOptions should match snapshot, showing Delete option only for syste initialPosition={300} marginFromTop={300} onRequestClose={[Function]} + theme={ + Object { + "awayIndicator": "#ffbc42", + "buttonBg": "#166de0", + "buttonColor": "#ffffff", + "centerChannelBg": "#ffffff", + "centerChannelColor": "#3d3c40", + "codeTheme": "github", + "dndIndicator": "#f74343", + "errorTextColor": "#fd5960", + "linkColor": "#2389d7", + "mentionBj": "#ffffff", + "mentionColor": "#145dbf", + "mentionHighlightBg": "#ffe577", + "mentionHighlightLink": "#166de0", + "newMessageSeparator": "#ff8800", + "onlineIndicator": "#06d6a0", + "sidebarBg": "#145dbf", + "sidebarHeaderBg": "#1153ab", + "sidebarHeaderTextColor": "#ffffff", + "sidebarText": "#ffffff", + "sidebarTextActiveBorder": "#579eff", + "sidebarTextActiveColor": "#ffffff", + "sidebarTextHoverBg": "#4578bf", + "sidebarUnreadText": "#ffffff", + "type": "Mattermost", + } + } > @@ -104,30 +420,174 @@ exports[`PostOptions should match snapshot, showing all possible options 1`] = ` initialPosition={300} marginFromTop={300} onRequestClose={[Function]} + theme={ + Object { + "awayIndicator": "#ffbc42", + "buttonBg": "#166de0", + "buttonColor": "#ffffff", + "centerChannelBg": "#ffffff", + "centerChannelColor": "#3d3c40", + "codeTheme": "github", + "dndIndicator": "#f74343", + "errorTextColor": "#fd5960", + "linkColor": "#2389d7", + "mentionBj": "#ffffff", + "mentionColor": "#145dbf", + "mentionHighlightBg": "#ffe577", + "mentionHighlightLink": "#166de0", + "newMessageSeparator": "#ff8800", + "onlineIndicator": "#06d6a0", + "sidebarBg": "#145dbf", + "sidebarHeaderBg": "#1153ab", + "sidebarHeaderTextColor": "#ffffff", + "sidebarText": "#ffffff", + "sidebarTextActiveBorder": "#579eff", + "sidebarTextActiveColor": "#ffffff", + "sidebarTextHoverBg": "#4578bf", + "sidebarUnreadText": "#ffffff", + "type": "Mattermost", + } + } > diff --git a/app/screens/post_options/post_option.js b/app/screens/post_options/post_option.js index a095db0e9..cc9cc4354 100644 --- a/app/screens/post_options/post_option.js +++ b/app/screens/post_options/post_option.js @@ -5,14 +5,16 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import { Image, - StyleSheet, Text, Platform, TouchableHighlight, TouchableNativeFeedback, View, } from 'react-native'; + import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; + import copy from 'assets/images/post_menu/copy.png'; import edit from 'assets/images/post_menu/edit.png'; import emoji from 'assets/images/post_menu/emoji.png'; @@ -40,6 +42,7 @@ export default class PostOption extends PureComponent { onPress: PropTypes.func.isRequired, text: PropTypes.string.isRequired, isLandscape: PropTypes.bool.isRequired, + theme: PropTypes.object.isRequired, }; handleOnPress = () => { @@ -50,7 +53,8 @@ export default class PostOption extends PureComponent { }; render() { - const {destructive, icon, text, isLandscape} = this.props; + const {destructive, icon, text, isLandscape, theme} = this.props; + const style = getStyleSheet(theme); const image = icons[icon]; const Touchable = Platform.select({ @@ -78,8 +82,11 @@ export default class PostOption extends PureComponent { style={[style.row, padding(isLandscape)]} > - - + + @@ -94,41 +101,49 @@ export default class PostOption extends PureComponent { } } -const style = StyleSheet.create({ - container: { - height: 51, - width: '100%', - }, - destructive: { - color: '#D0021B', - }, - row: { - flex: 1, - flexDirection: 'row', - }, - icon: { - alignItems: 'center', - height: 50, - justifyContent: 'center', - width: 60, - }, - textContainer: { - justifyContent: 'center', - flex: 1, - height: 50, - marginRight: 5, - }, - text: { - color: '#000000', - fontSize: 16, - lineHeight: 19, - opacity: 0.9, - letterSpacing: -0.45, - }, - footer: { - height: 1, - marginLeft: 60, - borderBottomWidth: 1, - borderBottomColor: 'rgba(0, 0, 0 ,0.2)', - }, +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return { + container: { + height: 51, + width: '100%', + }, + destructive: { + color: '#D0021B', + }, + destructiveIconImage: { + tintColor: '#D0021B', + }, + row: { + flex: 1, + flexDirection: 'row', + }, + icon: { + alignItems: 'center', + height: 50, + justifyContent: 'center', + width: 60, + }, + iconImage: { + tintColor: theme.centerChannelColor, + }, + textContainer: { + justifyContent: 'center', + flex: 1, + height: 50, + marginRight: 5, + }, + text: { + color: theme.centerChannelColor, + fontSize: 16, + lineHeight: 19, + opacity: 0.9, + letterSpacing: -0.45, + }, + footer: { + height: 1, + marginLeft: 60, + borderBottomWidth: 1, + borderBottomColor: changeOpacity(theme.centerChannelColor, 0.2), + }, + }; }); diff --git a/app/screens/post_options/post_options.js b/app/screens/post_options/post_options.js index e68b03086..3d623bc32 100644 --- a/app/screens/post_options/post_options.js +++ b/app/screens/post_options/post_options.js @@ -11,6 +11,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter'; import SlideUpPanel from 'app/components/slide_up_panel'; import {BOTTOM_MARGIN} from 'app/components/slide_up_panel/slide_up_panel'; +import {t} from 'app/utils/i18n'; import {OPTION_HEIGHT, getInitialPosition} from './post_options_utils'; import PostOption from './post_option'; @@ -66,181 +67,162 @@ export default class PostOptions extends PureComponent { } }; - getAddReactionOption = () => { + getOption = (key, icon, message, onPress, destructive = false) => { const {formatMessage} = this.context.intl; - const {canAddReaction, isLandscape} = this.props; + const {isLandscape, theme} = this.props; + + return ( + + ); + } + + getAddReactionOption = () => { + const {canAddReaction} = this.props; if (canAddReaction) { - return ( - - ); + const key = 'reaction'; + const icon = 'emoji'; + const message = {id: t('mobile.post_info.add_reaction'), defaultMessage: 'Add Reaction'}; + const onPress = this.handleAddReaction; + + return this.getOption(key, icon, message, onPress); } return null; }; getReplyOption = () => { - const {formatMessage} = this.context.intl; - const {canReply, isLandscape} = this.props; + const {canReply} = this.props; if (canReply) { - return ( - - ); + const key = 'reply'; + const icon = 'reply'; + const message = {id: t('mobile.post_info.reply'), defaultMessage: 'Reply'}; + const onPress = this.handleReply; + + return this.getOption(key, icon, message, onPress); } return null; } getCopyPermalink = () => { - const {formatMessage} = this.context.intl; - const {canCopyPermalink, isLandscape} = this.props; + const {canCopyPermalink} = this.props; if (canCopyPermalink) { - return ( - - ); + const key = 'permalink'; + const icon = 'link'; + const message = {id: t('get_post_link_modal.title'), defaultMessage: 'Copy Permalink'}; + const onPress = this.handleCopyPermalink; + + return this.getOption(key, icon, message, onPress); } return null; }; getCopyText = () => { - const {formatMessage} = this.context.intl; - const {canCopyText, isLandscape} = this.props; + const {canCopyText} = this.props; if (canCopyText) { - return ( - - ); + const key = 'copy'; + const icon = 'copy'; + const message = {id: t('mobile.post_info.copy_text'), defaultMessage: 'Copy Text'}; + const onPress = this.handleCopyText; + + return this.getOption(key, icon, message, onPress); } return null; }; getDeleteOption = () => { - const {formatMessage} = this.context.intl; - const {canDelete, isLandscape} = this.props; + const {canDelete} = this.props; if (canDelete) { - return ( - - ); + const key = 'delete'; + const icon = 'trash'; + const message = {id: t('post_info.del'), defaultMessage: 'Delete'}; + const onPress = this.handlePostDelete; + const destructive = true; + + return this.getOption(key, icon, message, onPress, destructive); } return null; }; getEditOption = () => { - const {formatMessage} = this.context.intl; - const {canEdit, canEditUntil, isLandscape} = this.props; + const {canEdit, canEditUntil} = this.props; if (canEdit && (canEditUntil === -1 || canEditUntil > Date.now())) { - return ( - - ); + const key = 'edit'; + const icon = 'edit'; + const message = {id: t('post_info.edit'), defaultMessage: 'Edit'}; + const onPress = this.handlePostEdit; + + return this.getOption(key, icon, message, onPress); } return null; }; getFlagOption = () => { - const {formatMessage} = this.context.intl; - const {canFlag, isFlagged, isLandscape} = this.props; + const {canFlag, isFlagged} = this.props; if (!canFlag) { return null; } + let key; + let message; + let onPress; + const icon = 'flag'; + if (isFlagged) { - return ( - - ); + key = 'unflag'; + message = {id: t('mobile.post_info.unflag'), defaultMessage: 'Unflag'}; + onPress = this.handleUnflagPost; + } else { + key = 'flagged'; + message = {id: t('mobile.post_info.flag'), defaultMessage: 'Flag'}; + onPress = this.handleFlagPost; } - return ( - - ); + return this.getOption(key, icon, message, onPress); }; getPinOption = () => { - const {formatMessage} = this.context.intl; - const {canPin, post, isLandscape} = this.props; + const {canPin, post} = this.props; if (!canPin) { return null; } + let key; + let message; + let onPress; + const icon = 'pin'; + if (post.is_pinned) { - return ( - - ); + key = 'unpin'; + message = {id: t('mobile.post_info.unpin'), defaultMessage: 'Unpin from Channel'}; + onPress = this.handleUnpinPost; + } else { + key = 'pin'; + message = {id: t('mobile.post_info.pin'), defaultMessage: 'Pin to Channel'}; + onPress = this.handlePinPost; } - return ( - - ); + return this.getOption(key, icon, message, onPress); }; getMyPostOptions = () => { @@ -410,7 +392,7 @@ export default class PostOptions extends PureComponent { }; render() { - const {deviceHeight} = this.props; + const {deviceHeight, theme} = this.props; const options = this.getPostOptions(); if (!options || !options.length) { return null; @@ -428,6 +410,7 @@ export default class PostOptions extends PureComponent { onRequestClose={this.close} initialPosition={initialPosition} key={marginFromTop} + theme={theme} > {options} diff --git a/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap b/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap index a668c3c3f..5215f84b3 100644 --- a/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap +++ b/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap @@ -5,7 +5,7 @@ exports[`ReactionHeader should match snapshot 1`] = ` - + { + return { + container: { + backgroundColor: theme.centerChannelBg, + height: 36.5, + paddingHorizontal: 0, + ...Platform.select({ + android: { + borderTopRightRadius: 2, + borderTopLeftRadius: 2, + }, + ios: { + borderTopRightRadius: 10, + borderTopLeftRadius: 10, + }, + }), + }, + }; }); diff --git a/app/screens/reaction_list/reaction_list.js b/app/screens/reaction_list/reaction_list.js index 338797090..0be0a36d0 100644 --- a/app/screens/reaction_list/reaction_list.js +++ b/app/screens/reaction_list/reaction_list.js @@ -181,7 +181,8 @@ export default class ReactionList extends PureComponent { }; render() { - const style = getStyleSheet(this.props.theme); + const {theme} = this.props; + const style = getStyleSheet(theme); return ( @@ -191,6 +192,7 @@ export default class ReactionList extends PureComponent { initialPosition={0.55} header={this.renderHeader} headerHeight={37.5} + theme={theme} > {this.renderReactionRows()} diff --git a/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap b/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap index 6b15ce349..f3305f4ad 100644 --- a/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap +++ b/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap @@ -55,6 +55,7 @@ exports[`ReactionRow should match snapshot, renderContent 1`] = ` @@ -107,36 +109,39 @@ export default class ReactionRow extends React.PureComponent { } } -const style = StyleSheet.create({ - container: { - flexDirection: 'row', - justifyContent: 'flex-start', - height: 44, - width: '100%', - alignItems: 'center', - }, - profileContainer: { - alignItems: 'center', - width: '13%', - }, - profile: { - paddingTop: 3, - }, - textContainer: { - width: '74%', - flexDirection: 'row', - }, - username: { - fontSize: 14, - paddingRight: 5, - }, - displayName: { - fontSize: 14, - color: changeOpacity('#000', 0.5), - }, - emoji: { - alignItems: 'center', - width: '13%', - justifyContent: 'center', - }, +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return { + container: { + flexDirection: 'row', + justifyContent: 'flex-start', + height: 44, + width: '100%', + alignItems: 'center', + }, + profileContainer: { + alignItems: 'center', + width: '13%', + }, + profile: { + paddingTop: 3, + }, + textContainer: { + width: '74%', + flexDirection: 'row', + }, + username: { + fontSize: 14, + paddingRight: 5, + color: theme.centerChannelColor, + }, + displayName: { + fontSize: 14, + color: changeOpacity(theme.centerChannelColor, 0.5), + }, + emoji: { + alignItems: 'center', + width: '13%', + justifyContent: 'center', + }, + }; }); diff --git a/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js b/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js index 9825058db..a0e13d859 100644 --- a/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js +++ b/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js @@ -157,7 +157,10 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase { const style = getStyleSheet(theme); return ( - + { backgroundColor: changeOpacity(theme.centerChannelColor, 0.06), }, scrollViewContent: { - paddingVertical: 35, + paddingVertical: 30, }, disabled: { color: theme.centerChannelColor, diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json index 245fb2d59..7ed809399 100644 --- a/assets/base/i18n/en.json +++ b/assets/base/i18n/en.json @@ -501,8 +501,6 @@ "post_info.system": "System", "post_message_view.edited": "(edited)", "posts_view.newMsg": "New Messages", - "rename_channel.handleHolder": "lowercase alphanumeric characters", - "rename_channel.url": "URL", "rhs_thread.rootPostDeletedMessage.body": "Part of this thread has been deleted due to a data retention policy. You can no longer reply to this thread.", "search_bar.search": "Search", "search_header.results": "Search Results",