ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-26 06:42:15 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

place holders implemented for dark theme

Browse Source
This commit is contained in:
ue 2018-11-23 14:16:26 +03:00
parent fb3e16747b
commit 2fb5ded517
4 changed files with 103 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/basicUIElements/view/postCardPlaceHolderView.js
View File

@ -1,12 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import { connect } from "react-redux";
import Placeholder from 'rn-placeholder';
import styles from './postCardPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha
const PostCardPlaceHolder = (props) => {
const color = props.isDarkTheme ? "#2e3d51" : "#f6f6f6";
const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
@ -28,9 +29,7 @@ const PostCardPlaceHolder = (props) => {
</View>
</View>
);
}
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,

17
src/components/basicUIElements/view/postPlaceHolderView.js
View File

@ -1,13 +1,18 @@
import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import Placeholder from 'rn-placeholder';
import styles from './postCardPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha
const PostPlaceHolder = (props) => {
const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
const PostPlaceHolder = () => (
return (
<View>
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
color={color}
lineNumber={2}
textSize={16}
lineSpacing={5}
@ -18,9 +23,10 @@ const PostPlaceHolder = () => (
/>
</View>
<View style={styles.paragraphWrapper} />
<Placeholder.Box animate="fade" height={200} width="100%" radius={5} />
<Placeholder.Box animate="fade" height={200} width="100%" radius={5} color={color} />
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
color={color}
lineNumber={18}
textSize={16}
lineSpacing={5}
@ -32,5 +38,10 @@ const PostPlaceHolder = () => (
</View>
</View>
);
};
export default PostPlaceHolder;
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(PostPlaceHolder);

18
src/components/basicUIElements/view/profileSummaryPlaceHolder.js
View File

@ -1,17 +1,22 @@
import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import Placeholder from 'rn-placeholder';
import styles from './profileSummaryPlaceHolderStyles';
// TODO: make container for place holder wrapper after alpha
const ProfileSummaryPlaceHolder = (props) => {
const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
const ProfileSummaryPlaceHolder = () => (
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Placeholder.Paragraph lineNumber={1} />
<Placeholder.Paragraph lineNumber={1} color={color} />
</View>
<Placeholder.Box animate="fade" height={75} width="100%" radius={5} />
<Placeholder.Box animate="fade" height={75} width="100%" radius={5} color={color} />
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
color={color}
lineNumber={3}
textSize={16}
lineSpacing={5}
@ -23,5 +28,10 @@ const ProfileSummaryPlaceHolder = () => (
</View>
</View>
);
};
export default ProfileSummaryPlaceHolder;
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ProfileSummaryPlaceHolder);

23
src/components/basicUIElements/view/walletDetailsPlaceHolder.js
View File

@ -1,27 +1,36 @@
import React from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import Placeholder from 'rn-placeholder';
import styles from './walletDetailsPlaceHolderStyles';
const WalletDetailsPlaceHolder = () => (
const WalletDetailsPlaceHolder = (props) => {
const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Placeholder.Paragraph lineNumber={1} />
<Placeholder.Paragraph lineNumber={1} color={color} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} color={color} />
</View>
</View>
);
};
export default WalletDetailsPlaceHolder;
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(WalletDetailsPlaceHolder);