ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-21 04:11:50 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

added background image for tasg

Browse Source
This commit is contained in:
ue 2019-09-29 14:43:56 +03:00
parent ebb41e42dc
commit 299f910061
8 changed files with 20 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/estmTags.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/estmTags@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/estmTags@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

6
src/components/animations/boostIndicator/boostIndicatorAnimation.js
View File

@ -13,7 +13,7 @@ const BoostIndicatorAnimation = ({ isSpinning }) => {
size={230}
animationDuration={2400}
color={!isSpinning ? '#f2f2f2' : '#1a509a'}
breadth={17}
breadth={12}
animating={isSpinning}
initStart={0}
/>
@ -21,7 +21,7 @@ const BoostIndicatorAnimation = ({ isSpinning }) => {
size={180}
animationDuration={2000}
color={!isSpinning ? '#f2f2f2' : '#357ce6'}
breadth={17}
breadth={12}
animating={isSpinning}
initStart={20}
/>
@ -29,7 +29,7 @@ const BoostIndicatorAnimation = ({ isSpinning }) => {
size={130}
animationDuration={1700}
color={!isSpinning ? '#f2f2f2' : '#4da1f1'}
breadth={17}
breadth={12}
animating={isSpinning}
initStart={40}
/>

1
src/components/animations/spinIndicator/spinIndicator.js
View File

@ -58,6 +58,7 @@ class SpinIndicator extends PureComponent {
const containerStyle = {
width: !animating ? 300 : size,
height: !animating ? 300 : size / 2,
position: 'absolute',
overflow: 'hidden',
};

35
src/screens/freeEstm/screen/freeEstmScreen.js
View File

@ -1,6 +1,6 @@
import React, { PureComponent, Fragment } from 'react';
import { injectIntl } from 'react-intl';
import { TouchableOpacity, Text, View } from 'react-native';
import { Image, ImageBackground, Text, View } from 'react-native';
// Container
import { PointsContainer } from '../../../containers';
@ -8,7 +8,9 @@ import { PointsContainer } from '../../../containers';
// Components
import { BasicHeader } from '../../../components/basicHeader';
import { BoostIndicatorAnimation, MainButton } from '../../../components';
import TagCloud from './tagCloud';
import ESTM_TAGS from '../../../assets/estmTags.png';
// Styles
import styles from './freeEstmStyles';
@ -54,34 +56,9 @@ class FreeEstmScreen extends PureComponent {
)}
</View>
<View style={styles.spinnerWrapper}>
<View style={{ position: 'absolute', left: -110, top: 20 }}>
{!isSpinning && (
<TagCloud
tagList={[
{ title: '110 ESTM', point: 3 },
{ title: '130 ESTM', point: 2 },
{ title: '30 ESTM', point: 1 },
{ title: '1 ESTM', point: 0 },
{ title: '200 ESTM', point: 3 },
{ title: '80 ESTM', point: 1 },
{ title: '1 ESTM', point: 2 },
{ title: '10 ESTM', point: 0 },
{ title: '20 ESTM', point: 0 },
{ title: '110 ESTM', point: 1 },
{ title: '110 ESTM', point: 1 },
{ title: '30 ESTM', point: 2 },
{ title: '50 ESTM', point: 1 },
{ title: '1 ESTM', point: 0 },
{ title: '90 ESTM', point: 2 },
{ title: '120 ESTM', point: 2 },
{ title: '500 ESTM', point: 3 },
{ title: '1000 ESTM', point: 5 },
{ title: '2000 ESTM', point: 4 },
]}
/>
)}
</View>
{!isSpinning && <Image source={ESTM_TAGS} style={styles.backgroundTags} />}
<BoostIndicatorAnimation isSpinning={isSpinning} />
<View style={{ flex: 1 }}>
{!isSpinning && (
<MainButton

10
src/screens/freeEstm/screen/freeEstmStyles.js
View File

@ -23,5 +23,15 @@ export default EStyleSheet.create({
},
spinnerWrapper: {
flex: 1,
marginTop: 10,
},
backgroundTags: {
position: 'absolute',
width: '$deviceWidth',
height: 320,
left: -120,
top: -8,
right: 0,
zIndex: 999,
},
});

103
src/screens/freeEstm/screen/tagCloud.js
View File

@ -1,103 +0,0 @@
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
cloudTagContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'center',
},
});
export default class TagCloud extends Component {
constructor(props) {
super(props);
this.TagCloud = this.orderData().map((item, key) => {
const tagContainerStyle = {
paddingLeft: this.getRandomPaddingLeft(),
paddingTop: this.getRandomPaddingTop(),
paddingRight: this.getRandomPaddingRight(),
paddingBottom: this.getRandomPaddingBottom(),
};
const tagStyle = {
fontSize: this.props.minFontSize + item.point * 4,
color: this.props.colorList[item.point],
};
return (
<View key={key} style={tagContainerStyle}>
<Text style={tagStyle}>{item.title}</Text>
</View>
);
});
}
orderData() {
const result = [];
const { tagList } = this.props;
tagList.sort((a, b) => {
if (a.point === b.point) return 0;
return a.point > b.point ? -1 : 1;
});
const maxPoint = tagList[0].point;
let switchFlag = true;
tagList.map((item, key) => {
if (maxPoint === item.point) {
result.push(item);
return;
}
if (switchFlag) {
result.unshift(item);
switchFlag = false;
} else {
result.push(item);
switchFlag = true;
}
});
return result;
}
getRandomPaddingLeft() {
return Math.floor(Math.random() * this.props.tagPaddingLeft);
}
getRandomPaddingTop() {
return Math.floor(Math.random() * this.props.tagPaddingTop);
}
getRandomPaddingRight() {
return Math.floor(Math.random() * this.props.tagPaddingRight);
}
getRandomPaddingBottom() {
return Math.floor(Math.random() * this.props.tagPaddingBottom);
}
render() {
return (
<View style={[styles.container, this.props.style]}>
<View style={styles.cloudTagContainer}>{this.TagCloud}</View>
</View>
);
}
}
TagCloud.defaultProps = {
tagList: [],
colorList: ['#357ce6', '#4da1f1', '#357ce6', '#357ce6', '#4da1f1', '#357ce6'],
minFontSize: 10,
tagPaddingLeft: 20,
tagPaddingTop: 20,
tagPaddingRight: 20,
tagPaddingBottom: 20,
};