forked from Ivasoft/mattermost-mobile
MM-19993 Fix Channel spinner is black on dark theme (#3564)
This commit is contained in:
committed by
Elias Nahum
parent
0204722627
commit
fbf712dc8e
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -182,7 +182,7 @@ export default class EditChannelInfo extends PureComponent {
|
||||
return (
|
||||
<View style={style.container}>
|
||||
<StatusBar/>
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -303,7 +303,7 @@ export default class ChannelAddMembers extends PureComponent {
|
||||
return (
|
||||
<View style={style.container}>
|
||||
<StatusBar/>
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -335,7 +335,7 @@ export default class ChannelMembers extends PureComponent {
|
||||
return (
|
||||
<View style={style.container}>
|
||||
<StatusBar/>
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -173,7 +173,7 @@ export default class EditPost extends PureComponent {
|
||||
return (
|
||||
<View style={style.container}>
|
||||
<StatusBar/>
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -560,7 +560,7 @@ export default class EditProfile extends PureComponent {
|
||||
return (
|
||||
<View style={[style.container, style.flex]}>
|
||||
<StatusBar/>
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -420,7 +420,7 @@ export default class MoreDirectMessages extends PureComponent {
|
||||
return (
|
||||
<View style={style.container}>
|
||||
<StatusBar/>
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -124,7 +124,7 @@ exports[`Permalink should match snapshot 1`] = `
|
||||
}
|
||||
>
|
||||
<Loading
|
||||
color="grey"
|
||||
color="#3d3c40"
|
||||
size="large"
|
||||
style={Object {}}
|
||||
/>
|
||||
|
||||
@@ -370,7 +370,7 @@ export default class Permalink extends PureComponent {
|
||||
</View>
|
||||
);
|
||||
} else if (loading) {
|
||||
postList = <Loading/>;
|
||||
postList = <Loading color={theme.centerChannelColor}/>;
|
||||
} else {
|
||||
postList = (
|
||||
<PostList
|
||||
|
||||
@@ -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>
|
||||
),
|
||||
}];
|
||||
|
||||
@@ -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]}
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
|
||||
@@ -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 {}}
|
||||
/>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 {}}
|
||||
/>
|
||||
|
||||
@@ -53,7 +53,7 @@ export default class ThreadAndroid extends ThreadBase {
|
||||
);
|
||||
} else {
|
||||
content = (
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ export default class ThreadIOS extends ThreadBase {
|
||||
);
|
||||
} else {
|
||||
content = (
|
||||
<Loading/>
|
||||
<Loading color={theme.centerChannelColor}/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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}/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user