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

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

@ -1,19 +1,20 @@
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}>
<Placeholder.Media size={25} hasRadius animate="fade" color={color} />
<Placeholder.Line width="30%" lastLineWidth="30%" animate="fade" color={color} />
</View>
<Placeholder.Box animate="fade" height={200} width="100%" radius={5} color={color}/>
<Placeholder.Box animate="fade" height={200} width="100%" radius={5} color={color} />
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
lineNumber={3}
@ -28,9 +29,7 @@ const PostCardPlaceHolder = (props) => {
</View>
</View>
);
}
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,

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

@ -1,36 +1,47 @@
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 = () => (
<View>
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
lineNumber={2}
textSize={16}
lineSpacing={5}
width="100%"
lastLineWidth="70%"
firstLineWidth="50%"
animate="fade"
/>
return (
<View>
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
color={color}
lineNumber={2}
textSize={16}
lineSpacing={5}
width="100%"
lastLineWidth="70%"
firstLineWidth="50%"
animate="fade"
/>
</View>
<View style={styles.paragraphWrapper} />
<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}
width="100%"
lastLineWidth="70%"
firstLineWidth="50%"
animate="fade"
/>
</View>
</View>
<View style={styles.paragraphWrapper} />
<Placeholder.Box animate="fade" height={200} width="100%" radius={5} />
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
lineNumber={18}
textSize={16}
lineSpacing={5}
width="100%"
lastLineWidth="70%"
firstLineWidth="50%"
animate="fade"
/>
</View>
</View>
);
);
};
export default PostPlaceHolder;
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(PostPlaceHolder);

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

@ -1,27 +1,37 @@
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 = () => (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Placeholder.Paragraph lineNumber={1} />
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Placeholder.Paragraph lineNumber={1} color={color} />
</View>
<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}
width="100%"
lastLineWidth="70%"
firstLineWidth="50%"
animate="fade"
/>
</View>
</View>
<Placeholder.Box animate="fade" height={75} width="100%" radius={5} />
<View style={styles.paragraphWrapper}>
<Placeholder.Paragraph
lineNumber={3}
textSize={16}
lineSpacing={5}
width="100%"
lastLineWidth="70%"
firstLineWidth="50%"
animate="fade"
/>
</View>
</View>
);
);
};
export default ProfileSummaryPlaceHolder;
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ProfileSummaryPlaceHolder);

49
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 = () => (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Placeholder.Paragraph lineNumber={1} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
</View>
<View style={styles.textWrapper}>
<Placeholder.Box animate="fade" height={30} width="100%" radius={5} />
</View>
</View>
);
const WalletDetailsPlaceHolder = (props) => {
const color = props.isDarkTheme ? '#2e3d51' : '#f5f5f5';
export default WalletDetailsPlaceHolder;
return (
<View style={styles.container}>
<View style={styles.textWrapper}>
<Placeholder.Paragraph lineNumber={1} color={color} />
</View>
<View style={styles.textWrapper}>
<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} color={color} />
</View>
<View style={styles.textWrapper}>
<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} color={color} />
</View>
</View>
);
};
const mapStateToProps = state => ({
isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(WalletDetailsPlaceHolder);