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",