MM-19993 Fix Channel spinner is black on dark theme (#3564)

This commit is contained in:
Mattermost Build
2019-11-18 15:09:09 +01:00
committed by Elias Nahum
parent 0204722627
commit fbf712dc8e
27 changed files with 134 additions and 51 deletions

View File

@@ -34,7 +34,12 @@ export default class AutocompleteSectionHeader extends PureComponent {
defaultMessage={defaultMessage}
style={style.sectionText}
/>
{loading && <ActivityIndicator size='small'/>}
{loading &&
<ActivityIndicator
color={theme.centerChannelColor}
size='small'
/>
}
</View>
</View>
);

View File

@@ -31,6 +31,16 @@ exports[`CustomList should match snapshot with FlatList 1`] = `
onEndReachedThreshold={2}
onLayout={[Function]}
onScroll={[Function]}
refreshControl={
<RefreshControlMock
colors={
Array [
"#3d3c40",
]
}
tintColor="#3d3c40"
/>
}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={60}

View File

@@ -3,7 +3,7 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {FlatList, Keyboard, Platform, SectionList, Text, View} from 'react-native';
import {FlatList, Keyboard, Platform, RefreshControl, SectionList, Text, View} from 'react-native';
import {ListTypes} from 'app/constants';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
@@ -113,6 +113,14 @@ export default class CustomList extends PureComponent {
const {data, extraData, theme, onRefresh, refreshing} = this.props;
const style = getStyleFromTheme(theme);
const refreshControl = (
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={[theme.centerChannelColor]}
tintColor={theme.centerChannelColor}
/>);
return (
<FlatList
contentContainerStyle={style.container}
@@ -128,8 +136,7 @@ export default class CustomList extends PureComponent {
maxToRenderPerBatch={INITIAL_BATCH_TO_RENDER + 1}
onLayout={this.handleLayout}
onScroll={this.handleScroll}
onRefresh={onRefresh}
refreshing={refreshing}
refreshControl={refreshControl}
ref={this.setListRef}
removeClippedSubviews={true}
renderItem={this.renderItem}

View File

@@ -182,7 +182,7 @@ export default class EditChannelInfo extends PureComponent {
return (
<View style={style.container}>
<StatusBar/>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
);
}

View File

@@ -440,7 +440,7 @@ export default class EmojiPicker extends PureComponent {
const styles = getStyleSheetFromTheme(theme);
return (
<View style={styles.loading}>
<ActivityIndicator/>
<ActivityIndicator color={theme.centerChannelColor}/>
</View>
);
};

View File

@@ -46,7 +46,7 @@ export default class LoadMorePosts extends PureComponent {
return (
<View style={{flex: 1, alignItems: 'center'}}>
<ActivityIndicator/>
<ActivityIndicator color={this.props.theme.centerChannelColor}/>
</View>
);
}

View File

@@ -41,7 +41,18 @@ exports[`PostList setting channel deep link 1`] = `
onLayout={[Function]}
onScroll={[Function]}
onScrollToIndexFailed={[Function]}
refreshing={false}
refreshControl={
<RefreshControlMock
colors={
Array [
"#3d3c40",
]
}
onRefresh={null}
refreshing={false}
tintColor="#3d3c40"
/>
}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={60}
@@ -91,7 +102,18 @@ exports[`PostList setting permalink deep link 1`] = `
onLayout={[Function]}
onScroll={[Function]}
onScrollToIndexFailed={[Function]}
refreshing={false}
refreshControl={
<RefreshControlMock
colors={
Array [
"#3d3c40",
]
}
onRefresh={null}
refreshing={false}
tintColor="#3d3c40"
/>
}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={60}
@@ -141,7 +163,18 @@ exports[`PostList should match snapshot 1`] = `
onLayout={[Function]}
onScroll={[Function]}
onScrollToIndexFailed={[Function]}
refreshing={false}
refreshControl={
<RefreshControlMock
colors={
Array [
"#3d3c40",
]
}
onRefresh={null}
refreshing={false}
tintColor="#3d3c40"
/>
}
removeClippedSubviews={true}
renderItem={[Function]}
scrollEventThrottle={60}

View File

@@ -3,7 +3,7 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {FlatList, StyleSheet} from 'react-native';
import {FlatList, RefreshControl, StyleSheet} from 'react-native';
import EventEmitter from 'mattermost-redux/utils/event_emitter';
import * as PostListUtils from 'mattermost-redux/utils/post_list';
@@ -366,13 +366,16 @@ export default class PostList extends PureComponent {
postIds,
refreshing,
scrollViewNativeID,
theme,
} = this.props;
const refreshControl = {refreshing};
if (channelId) {
refreshControl.onRefresh = this.handleRefresh;
}
const refreshControl = (
<RefreshControl
refreshing={refreshing}
onRefresh={channelId ? this.handleRefresh : null}
colors={[theme.centerChannelColor]}
tintColor={theme.centerChannelColor}
/>);
const hasPostsKey = postIds.length ? 'true' : 'false';
@@ -398,7 +401,7 @@ export default class PostList extends PureComponent {
removeClippedSubviews={true}
renderItem={this.renderItem}
scrollEventThrottle={60}
{...refreshControl}
refreshControl={refreshControl}
nativeID={scrollViewNativeID}
/>
);

View File

@@ -292,7 +292,10 @@ export default class ChannelBase extends PureComponent {
theme={theme}
isLandscape={isLandscape}
/>
<Loading channelIsLoading={true}/>
<Loading
channelIsLoading={true}
color={theme.centerChannelColor}
/>
</View>
</SafeAreaView>
);

View File

@@ -303,7 +303,7 @@ export default class ChannelAddMembers extends PureComponent {
return (
<View style={style.container}>
<StatusBar/>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
);
}

View File

@@ -335,7 +335,7 @@ export default class ChannelMembers extends PureComponent {
return (
<View style={style.container}>
<StatusBar/>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
);
}

View File

@@ -173,7 +173,7 @@ export default class EditPost extends PureComponent {
return (
<View style={style.container}>
<StatusBar/>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
);
}

View File

@@ -560,7 +560,7 @@ export default class EditProfile extends PureComponent {
return (
<View style={[style.container, style.flex]}>
<StatusBar/>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
);
}

View File

@@ -78,7 +78,7 @@ export default class ErrorTeamsList extends PureComponent {
const style = getStyleFromTheme(theme);
if (this.state.loading) {
return <Loading/>;
return <Loading color={theme.centerChannelColor}/>;
}
return (

View File

@@ -327,7 +327,7 @@ export default class MoreChannels extends PureComponent {
let content;
if (adding) {
content = (<Loading/>);
content = (<Loading color={theme.centerChannelColor}/>);
} else {
const searchBarInput = {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),

View File

@@ -420,7 +420,7 @@ export default class MoreDirectMessages extends PureComponent {
return (
<View style={style.container}>
<StatusBar/>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
);
}

View File

@@ -124,7 +124,7 @@ exports[`Permalink should match snapshot 1`] = `
}
>
<Loading
color="grey"
color="#3d3c40"
size="large"
style={Object {}}
/>

View File

@@ -370,7 +370,7 @@ export default class Permalink extends PureComponent {
</View>
);
} else if (loading) {
postList = <Loading/>;
postList = <Loading color={theme.centerChannelColor}/>;
} else {
postList = (
<PostList

View File

@@ -333,11 +333,13 @@ export default class Search extends PureComponent {
});
renderFooter = () => {
if (this.props.isSearchGettingMore) {
const style = getStyleFromTheme(this.props.theme);
const {isSearchGettingMore, theme} = this.props;
if (isSearchGettingMore) {
const style = getStyleFromTheme(theme);
return (
<View style={style.loadingMore}>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
);
}
@@ -634,7 +636,7 @@ export default class Search extends PureComponent {
id: SEARCHING,
component: (
<View style={style.searching}>
<Loading/>
<Loading color={theme.centerChannelColor}/>
</View>
),
}];

View File

@@ -97,11 +97,19 @@ exports[`SelectTeam should match snapshot for teams 1`] = `
listType="flat"
loading={false}
loadingComponent={
<Loading
color="grey"
size="large"
style={Object {}}
/>
<View
style={
Object {
"marginVertical": 10,
}
}
>
<Loading
color="#3d3c40"
size="small"
style={Object {}}
/>
</View>
}
onLoadMore={[Function]}
onRefresh={[Function]}

View File

@@ -217,7 +217,7 @@ export default class SelectTeam extends PureComponent {
const style = getStyleFromTheme(theme);
if (this.state.joining) {
return <Loading/>;
return <Loading color={theme.centerChannelColor}/>;
}
if (this.props.teamsRequest.status === RequestStatus.FAILURE) {
@@ -262,7 +262,14 @@ export default class SelectTeam extends PureComponent {
<CustomList
data={teams}
loading={this.state.loading}
loadingComponent={<Loading/>}
loadingComponent={
<View style={style.footer}>
<Loading
color={theme.centerChannelColor}
size='small'
/>
</View>
}
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
onLoadMore={this.getTeams}
@@ -300,6 +307,9 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
width: '100%',
height: 1,
},
footer: {
marginVertical: 10,
},
teamWrapper: {
marginTop: 20,
},

View File

@@ -272,7 +272,7 @@ exports[`TermsOfService should enable/disable navigator buttons on setNavigatorB
exports[`TermsOfService should match snapshot 1`] = `
<Loading
color="grey"
color="#3d3c40"
size="large"
style={Object {}}
/>
@@ -329,7 +329,7 @@ exports[`TermsOfService should match snapshot for fail of get terms 1`] = `
exports[`TermsOfService should match snapshot for get terms 1`] = `
<Loading
color="grey"
color="#3d3c40"
size="large"
style={Object {}}
/>

View File

@@ -231,7 +231,7 @@ export default class TermsOfService extends PureComponent {
const textStyles = getMarkdownTextStyles(theme);
if (this.state.loading) {
return <Loading/>;
return <Loading color={theme.centerChannelColor}/>;
}
if (this.state.getTermsError) {

View File

@@ -32,7 +32,7 @@ exports[`thread should match snapshot, has root post 1`] = `
}
renderFooter={
<Loading
color="grey"
color="#3d3c40"
size="large"
style={Object {}}
/>
@@ -87,7 +87,7 @@ exports[`thread should match snapshot, no root post, loading 1`] = `
/>
<Connect(StatusBar) />
<Loading
color="grey"
color="#3d3c40"
size="large"
style={Object {}}
/>
@@ -112,7 +112,7 @@ exports[`thread should match snapshot, render footer 1`] = `
}
renderFooter={
<Loading
color="grey"
color="#3d3c40"
size="large"
style={Object {}}
/>
@@ -157,7 +157,7 @@ exports[`thread should match snapshot, render footer 3`] = `
/>
<Connect(StatusBar) />
<Loading
color="grey"
color="#3d3c40"
size="large"
style={Object {}}
/>

View File

@@ -53,7 +53,7 @@ export default class ThreadAndroid extends ThreadBase {
);
} else {
content = (
<Loading/>
<Loading color={theme.centerChannelColor}/>
);
}

View File

@@ -85,7 +85,7 @@ export default class ThreadIOS extends ThreadBase {
);
} else {
content = (
<Loading/>
<Loading color={theme.centerChannelColor}/>
);
}

View File

@@ -106,13 +106,15 @@ export default class ThreadBase extends PureComponent {
};
renderFooter = () => {
if (!this.hasRootPost() && this.props.threadLoadingStatus.status !== RequestStatus.STARTED) {
const {theme, threadLoadingStatus} = this.props;
if (!this.hasRootPost() && threadLoadingStatus.status !== RequestStatus.STARTED) {
return (
<DeletedPost theme={this.props.theme}/>
<DeletedPost theme={theme}/>
);
} else if (this.props.threadLoadingStatus.status === RequestStatus.STARTED) {
} else if (threadLoadingStatus.status === RequestStatus.STARTED) {
return (
<Loading/>
<Loading color={theme.centerChannelColor}/>
);
}