summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 12:57:33 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 13:47:13 +0200
commitefa037d34be7b1570efdc767c79fad8d4005f10e (patch)
treecf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
parentf5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff)
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx')
-rw-r--r--openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx96
1 files changed, 96 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
new file mode 100644
index 0000000000..c4ab41841b
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/flows/ImportantLogic.jsx
@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import md5 from 'md5';
+
+class ImportantLogic extends Component {
+
+ state = {
+ whatToDisplay: false
+ };
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({whatToDisplay: md5(nextProps.display) === 'a55899b341525123628776dbf5755d51'});
+ }
+
+ render() {
+ if (this.state.whatToDisplay) {
+ setTimeout(() => this.setState({whatToDisplay: false}), 5000);
+ }
+
+ return (
+ <div>
+ <style>{'\.easter-wrapper {\
+ position: fixed;\
+ width: 70px;\
+ height: 70px;\
+ }\
+ .string, .yo-yo {\
+ position: relative;\
+ display: inline-block;\
+ border-radius: 50%;\
+ }\
+ .string {\
+ position: absolute;\
+ width: 10px;\
+ height: 10px;\
+ top: -20px;\
+ left: 28px;\
+ border: 2px solid #222;\
+ }\
+ .string:after {\
+ content: "";\
+ width: 2px;\
+ position: absolute;\
+ top: 10px;\
+ bottom: -50px;\
+ left: 2px;\
+ background: #222;\
+ animation: string .8s infinite alternate;\
+ }\
+ .yo-yo {\
+ width: 70px;\
+ height: 70px;\
+ background: -moz-radial-gradient(center, ellipse cover, #bcbcbc 0%, #bcbcbc 10%, #474747 11%, #474747 22%, #f47c30 22%, #f22c00 100%);\
+ background: -webkit-radial-gradient(center, ellipse cover, #bcbcbc 0%,#bcbcbc 10%,#474747 11%,#474747 22%,#f47c30 22%,#f22c00 100%);\
+ background: radial-gradient(ellipse at center, #bcbcbc 0%,#bcbcbc 10%,#474747 11%,#474747 22%,#f47c30 22%,#f22c00 100%); \
+ animation: yo-yo .8s infinite alternate;\
+ }\
+ .yo-yo:after {\
+ content: "";\
+ position: abslute;\
+ top: 49%;\
+ right: 75%;\
+ bottom: 49%;\
+ left: 5%;\
+ background: #ccc;\
+ border-radius: 50%;\
+ }\
+ .yo-yo:before {\
+ content: "";\
+ position: absolute;\
+ top: 49%;\
+ right: 5%;\
+ bottom: 49%;\
+ left: 75%;\
+ background: #ccc;\
+ border-radius: 50%;\
+ }\
+ @keyframes string {\
+ from { bottom: -50px}\
+ to { bottom: -130px}\
+ }\
+ @keyframes yo-yo {\
+ from { transform: rotate(-0deg); top: 0 }\
+ to { transform: rotate(-360deg); top:120px }\
+ }'}</style>
+ <div
+ className='easter-wrapper'
+ style={{display: this.state.whatToDisplay ? 'block' : 'none'}}>
+ <span className='string'>{}</span>
+ <span className='yo-yo'>{}</span>
+ </div>
+ </div>
+ );
+ }
+}
+
+export default ImportantLogic;