From f1c9f1051c7970689d1014603bf9a3adb79aafa9 Mon Sep 17 00:00:00 2001 From: enahum Date: Thu, 8 Jun 2017 15:10:59 -0400 Subject: [PATCH] RN-36 Update status bar color (#606) --- NOTICE.txt | 34 +++++++++++++++++++ .../autocomplete/at_mention/at_mention.js | 2 +- .../channel_mention/channel_mention.js | 2 +- app/components/status_bar/index.js | 17 ++++++++++ app/components/status_bar/status_bar.js | 24 +++++++++++++ app/screens/about/about.js | 2 ++ .../account_notifications.js | 6 ++-- .../account_settings/account_settings.js | 4 +-- app/screens/channel/channel.js | 4 +-- .../channel_add_members.js | 6 ++-- app/screens/channel_info/channel_info.js | 4 +-- .../channel_members/channel_members.js | 6 ++-- app/screens/create_channel/create_channel.js | 6 ++-- app/screens/edit_post/edit_post.js | 6 ++-- app/screens/load_team/load_team.js | 5 +-- app/screens/login/login.js | 4 +-- app/screens/login_options/login_options.js | 4 +-- app/screens/mfa/mfa.js | 2 ++ app/screens/more_channels/more_channels.js | 4 +-- app/screens/more_dms/more_dms.js | 6 ++-- app/screens/select_server/select_server.js | 5 ++- app/screens/select_team/select_team.js | 2 ++ app/screens/settings/settings.js | 2 ++ app/screens/sso/sso.js | 6 ++-- app/screens/thread/thread.js | 5 +-- app/screens/user_profile/user_profile.js | 2 ++ package.json | 1 + yarn.lock | 4 +++ 28 files changed, 133 insertions(+), 42 deletions(-) create mode 100644 app/components/status_bar/index.js create mode 100644 app/components/status_bar/status_bar.js diff --git a/NOTICE.txt b/NOTICE.txt index 5d868a1c7..b6cd29986 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -1022,3 +1022,37 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. --- + +## TinyColor + +This product contains 'tinycolor', a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions + +* HOMEPAGE + * https://github.com/bgrins/TinyColor + +* LICENSE + +MIT License + +Copyright (c), Brian Grinstead, http://briangrinstead.com + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +--- diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js index e23669eec..43e5f9cb5 100644 --- a/app/components/autocomplete/at_mention/at_mention.js +++ b/app/components/autocomplete/at_mention/at_mention.js @@ -124,7 +124,7 @@ export default class AtMention extends Component { defaultMessage: 'Notifies everyone in the channel' }, { completeHandle: 'here', - id: 'suggestions.mention.here', + id: 'suggestion.mention.here', defaultMessage: 'Notifies everyone in the channel and online' }]; }; diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js index 6c834baf1..df35d75d7 100644 --- a/app/components/autocomplete/channel_mention/channel_mention.js +++ b/app/components/autocomplete/channel_mention/channel_mention.js @@ -194,7 +194,7 @@ export default class ChannelMention extends Component { return ( diff --git a/app/components/status_bar/index.js b/app/components/status_bar/index.js new file mode 100644 index 000000000..2f7b93705 --- /dev/null +++ b/app/components/status_bar/index.js @@ -0,0 +1,17 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {connect} from 'react-redux'; + +import {getTheme} from 'app/selectors/preferences'; + +import StatusBar from './status_bar'; + +function mapStateToProps(state, ownProps) { + return { + ...ownProps, + theme: getTheme(state) + }; +} + +export default connect(mapStateToProps)(StatusBar); diff --git a/app/components/status_bar/status_bar.js b/app/components/status_bar/status_bar.js new file mode 100644 index 000000000..28a979c47 --- /dev/null +++ b/app/components/status_bar/status_bar.js @@ -0,0 +1,24 @@ +// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import {StatusBar as NativeStatusBar} from 'react-native'; +import tinyColor from 'tinycolor2'; + +export default class StatusBar extends PureComponent { + static propTypes = { + theme: PropTypes.object.isRequired + }; + + render() { + const {theme} = this.props; + const headerColor = tinyColor(theme.sidebarHeaderBg); + let barStyle = 'light-content'; + if (headerColor.isLight()) { + barStyle = 'dark-content'; + } + + return ; + } +} diff --git a/app/screens/about/about.js b/app/screens/about/about.js index 65af1897d..ad7f533bb 100644 --- a/app/screens/about/about.js +++ b/app/screens/about/about.js @@ -14,6 +14,7 @@ import { import DeviceInfo from 'react-native-device-info'; import FormattedText from 'app/components/formatted_text'; +import StatusBar from 'app/components/status_bar'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; import MattermostIcon from 'app/components/mattermost_icon'; @@ -157,6 +158,7 @@ export default class About extends PureComponent { return ( + - + ); @@ -551,7 +551,7 @@ class AccountNotifications extends PureComponent { return ( - + - + {this.renderItems()} diff --git a/app/screens/channel/channel.js b/app/screens/channel/channel.js index 33019377d..b26e8d559 100644 --- a/app/screens/channel/channel.js +++ b/app/screens/channel/channel.js @@ -8,7 +8,6 @@ import { Dimensions, NetInfo, Platform, - StatusBar, StyleSheet, View } from 'react-native'; @@ -21,6 +20,7 @@ import KeyboardLayout from 'app/components/layout/keyboard_layout'; import Loading from 'app/components/loading'; import OfflineIndicator from 'app/components/offline_indicator'; import PostTextbox from 'app/components/post_textbox'; +import StatusBar from 'app/components/status_bar'; import {preventDoubleTap} from 'app/utils/tap'; import {makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -187,7 +187,7 @@ class Channel extends PureComponent { blurPostTextBox={this.blurPostTextBox} navigator={navigator} > - + - + ); @@ -259,7 +259,7 @@ class ChannelAddMembers extends PureComponent { return ( - + diff --git a/app/screens/channel_info/channel_info.js b/app/screens/channel_info/channel_info.js index 9b4d69035..02f720e1c 100644 --- a/app/screens/channel_info/channel_info.js +++ b/app/screens/channel_info/channel_info.js @@ -7,11 +7,11 @@ import {injectIntl, intlShape} from 'react-intl'; import { Alert, ScrollView, - StatusBar, StyleSheet, View } from 'react-native'; +import StatusBar from 'app/components/status_bar'; import {preventDoubleTap} from 'app/utils/tap'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -221,7 +221,7 @@ class ChannelInfo extends PureComponent { return ( - + diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js index aa7fd43bb..f506b983e 100644 --- a/app/screens/channel_members/channel_members.js +++ b/app/screens/channel_members/channel_members.js @@ -8,7 +8,6 @@ import { Keyboard, Platform, InteractionManager, - StatusBar, StyleSheet, View } from 'react-native'; @@ -17,6 +16,7 @@ import {injectIntl, intlShape} from 'react-intl'; import Loading from 'app/components/loading'; import MemberList from 'app/components/custom_list'; import SearchBar from 'app/components/search_bar'; +import StatusBar from 'app/components/status_bar'; import {createMembersSections, loadingText, markSelectedProfiles} from 'app/utils/member_list'; import MemberListRow from 'app/components/custom_list/member_list_row'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -306,7 +306,7 @@ class ChannelMembers extends PureComponent { if (removing) { return ( - + ); @@ -314,7 +314,7 @@ class ChannelMembers extends PureComponent { return ( - + diff --git a/app/screens/create_channel/create_channel.js b/app/screens/create_channel/create_channel.js index 943ba0849..af5eb42e5 100644 --- a/app/screens/create_channel/create_channel.js +++ b/app/screens/create_channel/create_channel.js @@ -8,7 +8,6 @@ import { Keyboard, InteractionManager, Platform, - StatusBar, StyleSheet, TouchableWithoutFeedback, View, @@ -22,6 +21,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter'; import ErrorText from 'app/components/error_text'; import FormattedText from 'app/components/formatted_text'; import Loading from 'app/components/loading'; +import StatusBar from 'app/components/status_bar'; import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder'; import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme'; @@ -219,7 +219,7 @@ class CreateChannel extends PureComponent { if (creating) { return ( - + ); @@ -238,7 +238,7 @@ class CreateChannel extends PureComponent { return ( - + - + ); @@ -183,7 +183,7 @@ class EditPost extends PureComponent { style={style.container} keyboardVerticalOffset={0} > - + {displayError} diff --git a/app/screens/load_team/load_team.js b/app/screens/load_team/load_team.js index c788e79b4..d59193c42 100644 --- a/app/screens/load_team/load_team.js +++ b/app/screens/load_team/load_team.js @@ -3,11 +3,12 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {StatusBar, View} from 'react-native'; +import {View} from 'react-native'; import {RequestStatus} from 'mattermost-redux/constants'; import ChannelLoader from 'app/components/channel_loader'; +import StatusBar from 'app/components/status_bar'; export default class LoadTeam extends PureComponent { static propTypes = { @@ -81,7 +82,7 @@ export default class LoadTeam extends PureComponent { render() { return ( - + ); diff --git a/app/screens/login/login.js b/app/screens/login/login.js index 97fa9a406..39bbf73c5 100644 --- a/app/screens/login/login.js +++ b/app/screens/login/login.js @@ -11,7 +11,6 @@ import { Keyboard, KeyboardAvoidingView, Platform, - StatusBar, Text, TextInput, TouchableWithoutFeedback, @@ -21,6 +20,7 @@ import Button from 'react-native-button'; import ErrorText from 'app/components/error_text'; import FormattedText from 'app/components/formatted_text'; +import StatusBar from 'app/components/status_bar'; import PushNotifications from 'app/push_notifications'; import {GlobalStyles} from 'app/styles'; @@ -316,7 +316,7 @@ class Login extends PureComponent { style={{flex: 1}} keyboardVerticalOffset={Platform.OS === 'ios' ? 65 : 0} > - + - + diff --git a/app/screens/mfa/mfa.js b/app/screens/mfa/mfa.js index 207d9aeec..6ba50d7a0 100644 --- a/app/screens/mfa/mfa.js +++ b/app/screens/mfa/mfa.js @@ -16,6 +16,7 @@ import Button from 'react-native-button'; import ErrorText from 'app/components/error_text'; import FormattedText from 'app/components/formatted_text'; +import StatusBar from 'app/components/status_bar'; import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder'; import {GlobalStyles} from 'app/styles'; @@ -132,6 +133,7 @@ export default class Mfa extends PureComponent { style={{flex: 1}} keyboardVerticalOffset={5} > + - + {content} ); diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js index aa0f61f77..6079edd29 100644 --- a/app/screens/more_dms/more_dms.js +++ b/app/screens/more_dms/more_dms.js @@ -8,7 +8,6 @@ import { Keyboard, Platform, InteractionManager, - StatusBar, StyleSheet, View } from 'react-native'; @@ -20,6 +19,7 @@ import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils'; import Loading from 'app/components/loading'; import MemberList from 'app/components/custom_list'; import SearchBar from 'app/components/search_bar'; +import StatusBar from 'app/components/status_bar'; import {createMembersSections, loadingText, renderMemberRow} from 'app/utils/member_list'; import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme'; @@ -178,14 +178,14 @@ class MoreDirectMessages extends PureComponent { if (adding) { content = ( - + ); } else { content = ( - + diff --git a/app/screens/select_server/select_server.js b/app/screens/select_server/select_server.js index c03eccf61..ee05bd3c8 100644 --- a/app/screens/select_server/select_server.js +++ b/app/screens/select_server/select_server.js @@ -10,7 +10,6 @@ import { Keyboard, KeyboardAvoidingView, Platform, - StatusBar, TouchableWithoutFeedback, View } from 'react-native'; @@ -22,7 +21,7 @@ import {Client, Client4} from 'mattermost-redux/client'; import ErrorText from 'app/components/error_text'; import FormattedText from 'app/components/formatted_text'; - +import StatusBar from 'app/components/status_bar'; import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder'; import {GlobalStyles} from 'app/styles'; import {isValidUrl, stripTrailingSlashes} from 'app/utils/url'; @@ -187,7 +186,7 @@ class SelectServer extends PureComponent { style={{flex: 1}} keyboardVerticalOffset={0} > - + + + - + ); @@ -119,7 +119,7 @@ class SSO extends PureComponent { return ( - + - + +