From bb3d7941be9fe1d0d2a015f1959c00ec892525ea Mon Sep 17 00:00:00 2001 From: Chris Duarte Date: Fri, 24 Feb 2017 18:47:24 -0800 Subject: [PATCH] PLT-5578 Add theming for channel info (#298) --- app/scenes/channel_info/channel_info.js | 169 ++++++++++-------- .../channel_info/channel_info_header.js | 90 +++++----- app/scenes/channel_info/channel_info_row.js | 67 ++++--- 3 files changed, 181 insertions(+), 145 deletions(-) diff --git a/app/scenes/channel_info/channel_info.js b/app/scenes/channel_info/channel_info.js index d351f0aed..cdee15728 100644 --- a/app/scenes/channel_info/channel_info.js +++ b/app/scenes/channel_info/channel_info.js @@ -10,29 +10,42 @@ import { View } from 'react-native'; -import ChannelInfoHeader from './channel_info_header'; -import ChannelInfoRow from './channel_info_row'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import {Constants} from 'service/constants'; -const style = StyleSheet.create({ - container: { - flex: 1 - }, - footer: { - marginTop: 40 - }, - separator: { - flex: 1, - marginHorizontal: 15 - }, - separatorContainer: { - flex: 1, - backgroundColor: '#fff', - height: 1 - }, - scrollView: { - flex: 1 - } +import ChannelInfoHeader from './channel_info_header'; +import ChannelInfoRow from './channel_info_row'; + +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return StyleSheet.create({ + container: { + flex: 1, + backgroundColor: theme.centerChannelBg + }, + footer: { + marginTop: 40, + borderTopWidth: 1, + borderBottomWidth: 1, + borderTopColor: changeOpacity(theme.centerChannelColor, 0.1), + borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1) + }, + rowsContainer: { + borderTopWidth: 1, + borderBottomWidth: 1, + borderTopColor: changeOpacity(theme.centerChannelColor, 0.1), + borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1), + backgroundColor: theme.centerChannelBg + }, + separator: { + marginHorizontal: 15, + height: 1, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.1) + }, + scrollView: { + flex: 1, + backgroundColor: changeOpacity(theme.centerChannelColor, 0.03) + } + }); }); class ChannelInfo extends PureComponent { @@ -42,6 +55,7 @@ class ChannelInfo extends PureComponent { currentChannel: PropTypes.object.isRequired, currentChannelCreatorName: PropTypes.string, currentChannelMemberCount: PropTypes.number, + theme: PropTypes.object.isRequired, isFavorite: PropTypes.bool.isRequired, leaveChannelRequest: PropTypes.object.isRequired, canManageUsers: PropTypes.bool.isRequired, @@ -143,9 +157,12 @@ class ChannelInfo extends PureComponent { currentChannel, currentChannelCreatorName, currentChannelMemberCount, - canManageUsers + canManageUsers, + theme } = this.props; + const style = getStyleSheet(theme); + return ( - - + + - - true} - defaultMessage='Notification Preferences' - icon='bell-o' - textId='channel_header.notificationPreferences' - /> - + true} + defaultMessage='Notification Preferences' + icon='bell-o' + textId='channel_header.notificationPreferences' + theme={theme} + /> - - - - - - {canManageUsers && this.renderLeaveOrDeleteChannelRow() && - - - + + {canManageUsers && this.renderLeaveOrDeleteChannelRow() && + + + - - } - this.handleDeleteOrLeave('leave')} - defaultMessage='Leave Channel' - icon='sign-out' - textId='navbar.leave' - shouldRender={this.renderLeaveOrDeleteChannelRow()} - /> - + } this.handleDeleteOrLeave('delete')} - defaultMessage='Delete Channel' - icon='trash' - iconColor='#DA4A4A' - textId='mobile.routes.channelInfo.delete_channel' - textColor='#DA4A4A' + action={() => this.handleDeleteOrLeave('leave')} + defaultMessage='Leave Channel' + icon='sign-out' + textId='navbar.leave' shouldRender={this.renderLeaveOrDeleteChannelRow()} + theme={theme} /> + {this.renderLeaveOrDeleteChannelRow() && + + this.handleDeleteOrLeave('delete')} + defaultMessage='Delete Channel' + icon='trash' + iconColor='#DA4A4A' + textId='mobile.routes.channelInfo.delete_channel' + textColor='#DA4A4A' + theme={theme} + /> + + } ); diff --git a/app/scenes/channel_info/channel_info_header.js b/app/scenes/channel_info/channel_info_header.js index c9f45b8ec..b2d1016e8 100644 --- a/app/scenes/channel_info/channel_info_header.js +++ b/app/scenes/channel_info/channel_info_header.js @@ -11,56 +11,63 @@ import Icon from 'react-native-vector-icons/FontAwesome'; import FormattedDate from 'app/components/formatted_date'; import FormattedText from 'app/components/formatted_text'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; -const style = StyleSheet.create({ - container: { - backgroundColor: '#fff', - marginBottom: 40, - padding: 15 - }, - channelName: { - marginLeft: 5, - fontSize: 15, - fontWeight: '600' - }, - channelNameContainer: { - flexDirection: 'row', - alignItems: 'center', - paddingBottom: 10 - }, - createdBy: { - flexDirection: 'row', - fontSize: 11, - opacity: 0.5, - marginTop: 5 - }, - detail: { - fontSize: 13 - }, - header: { - fontSize: 12, - opacity: 0.5, - marginBottom: 10 - }, - section: { - marginTop: 15 - }, - url: { - fontSize: 11, - opacity: 0.5, - marginBottom: 10 - } +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return StyleSheet.create({ + container: { + backgroundColor: theme.centerChannelBg, + marginBottom: 40, + padding: 15, + borderBottomWidth: 1, + borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1) + }, + channelName: { + marginLeft: 5, + fontSize: 15, + fontWeight: '600', + color: theme.centerChannelColor + }, + channelNameContainer: { + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 10 + }, + createdBy: { + flexDirection: 'row', + fontSize: 11, + marginTop: 5, + color: changeOpacity(theme.centerChannelColor, 0.5), + backgroundColor: 'transparent' + }, + detail: { + fontSize: 13, + color: theme.centerChannelColor + }, + header: { + fontSize: 12, + marginBottom: 10, + color: theme.centerChannelColor, + backgroundColor: 'transparent' + }, + section: { + marginTop: 15 + } + }); }); function channelInfoHeader(props) { - const {createAt, creator, displayName, header, purpose} = props; + const {createAt, creator, displayName, header, purpose, theme} = props; + + const style = getStyleSheet(theme); + return ( {displayName} @@ -110,7 +117,8 @@ channelInfoHeader.propTypes = { creator: PropTypes.string, displayName: PropTypes.string.isRequired, header: PropTypes.string, - purpose: PropTypes.string + purpose: PropTypes.string, + theme: PropTypes.object.isRequired }; export default channelInfoHeader; diff --git a/app/scenes/channel_info/channel_info_row.js b/app/scenes/channel_info/channel_info_row.js index a37aea9e1..8fa6229b0 100644 --- a/app/scenes/channel_info/channel_info_row.js +++ b/app/scenes/channel_info/channel_info_row.js @@ -12,28 +12,34 @@ import { import Icon from 'react-native-vector-icons/FontAwesome'; import FormattedText from 'app/components/formatted_text'; +import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; -const style = StyleSheet.create({ - container: { - backgroundColor: '#fff', - paddingHorizontal: 15, - flexDirection: 'row', - alignItems: 'center' - }, - detail: { - marginHorizontal: 15, - color: 'rgba(0, 0, 0, 0.5)', - fontSize: 15 - }, - label: { - flex: 1, - marginLeft: 15, - fontSize: 15, - paddingVertical: 15 - }, - leftIcon: { - width: 17 - } +const getStyleSheet = makeStyleSheetFromTheme((theme) => { + return StyleSheet.create({ + container: { + backgroundColor: theme.centerChannelBg, + paddingHorizontal: 15, + flexDirection: 'row', + alignItems: 'center' + }, + detail: { + marginHorizontal: 15, + color: changeOpacity(theme.centerChannelColor, 0.5), + fontSize: 15 + }, + label: { + flex: 1, + marginLeft: 15, + fontSize: 15, + paddingVertical: 15 + }, + leftIcon: { + width: 17 + }, + rightIcon: { + color: changeOpacity(theme.centerChannelColor, 0.5) + } + }); }); function createTouchableComponent(children, action) { @@ -45,21 +51,24 @@ function createTouchableComponent(children, action) { } function channelInfoRow(props) { - const {action, defaultMessage, detail, icon, iconColor, textColor, textId, togglable, shouldRender = true} = props; + const {action, defaultMessage, detail, icon, iconColor, textColor, textId, togglable, theme, shouldRender} = props; if (!shouldRender) { return null; } + + const style = getStyleSheet(theme); + const RowComponent = ( @@ -72,7 +81,7 @@ function channelInfoRow(props) { } @@ -97,13 +106,13 @@ channelInfoRow.propTypes = { iconColor: PropTypes.string, textId: PropTypes.string.isRequired, togglable: PropTypes.bool, - textColor: PropTypes.string + textColor: PropTypes.string, + theme: PropTypes.object.isRequired }; channelInfoRow.defaultProps = { - iconColor: 'rgba(0, 0, 0, 0.7)', - textColor: '#000', - togglable: false + togglable: false, + shouldRender: true }; export default channelInfoRow;