diff --git a/src/assets/estmTags.png b/src/assets/estmTags.png new file mode 100644 index 000000000..0cec033f9 Binary files /dev/null and b/src/assets/estmTags.png differ diff --git a/src/assets/estmTags@2x.png b/src/assets/estmTags@2x.png new file mode 100644 index 000000000..0cec033f9 Binary files /dev/null and b/src/assets/estmTags@2x.png differ diff --git a/src/assets/estmTags@3x.png b/src/assets/estmTags@3x.png new file mode 100644 index 000000000..0cec033f9 Binary files /dev/null and b/src/assets/estmTags@3x.png differ diff --git a/src/components/animations/boostIndicator/boostIndicatorAnimation.js b/src/components/animations/boostIndicator/boostIndicatorAnimation.js index a1f0716f0..6be84838a 100644 --- a/src/components/animations/boostIndicator/boostIndicatorAnimation.js +++ b/src/components/animations/boostIndicator/boostIndicatorAnimation.js @@ -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} /> diff --git a/src/components/animations/spinIndicator/spinIndicator.js b/src/components/animations/spinIndicator/spinIndicator.js index a2945467a..1d89f1430 100644 --- a/src/components/animations/spinIndicator/spinIndicator.js +++ b/src/components/animations/spinIndicator/spinIndicator.js @@ -58,6 +58,7 @@ class SpinIndicator extends PureComponent { const containerStyle = { width: !animating ? 300 : size, height: !animating ? 300 : size / 2, + position: 'absolute', overflow: 'hidden', }; diff --git a/src/screens/freeEstm/screen/freeEstmScreen.js b/src/screens/freeEstm/screen/freeEstmScreen.js index 7ef41deae..ae40a2a6c 100644 --- a/src/screens/freeEstm/screen/freeEstmScreen.js +++ b/src/screens/freeEstm/screen/freeEstmScreen.js @@ -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 { )} - - {!isSpinning && ( - - )} - + {!isSpinning && } + {!isSpinning && ( { - 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 ( - - {item.title} - - ); - }); - } - - 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 ( - - {this.TagCloud} - - ); - } -} - -TagCloud.defaultProps = { - tagList: [], - colorList: ['#357ce6', '#4da1f1', '#357ce6', '#357ce6', '#4da1f1', '#357ce6'], - minFontSize: 10, - tagPaddingLeft: 20, - tagPaddingTop: 20, - tagPaddingRight: 20, - tagPaddingBottom: 20, -};