Skip to content

Instantly share code, notes, and snippets.

@grapho
Last active October 5, 2017 21:33
Show Gist options
  • Save grapho/564751f287d0d1620b58dea3f7197a1d to your computer and use it in GitHub Desktop.
Save grapho/564751f287d0d1620b58dea3f7197a1d to your computer and use it in GitHub Desktop.
Workflow-Success
import Ember from 'ember';
const icons = [
'hand-peace-o',
'thumbs-o-up',
'smile-o',
'trophy',
'star'
];
const phrases = [
'Success!',
'Nice!',
'Good Work!'
];
const getSuccess = function(array) {
let max = array.length;
let random = Math.floor(Math.random() * max);
return array[random];
};
export default Ember.Component.extend({
classNames: ['workflow-success'],
successIcon: Ember.computed(function() {
return getSuccess(icons);
}),
successPhrase: Ember.computed(function() {
return getSuccess(phrases);
})
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Workflow Success'
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.workflow-success {
display: flex;
flex-flow: column nowrap;
}
.workflow-success--icon {
display: flex;
color: green;
margin: 8px auto;
width: 60px;
height: 60px;
position: relative;
}
.workflow-success--icon:after,
.workflow-success--icon:before {
display: block;
content: '';
border-radius: 50%;
position: absolute;
animation: successIconSpinFadeIn .5s forwards;
}
.workflow-success--icon:after {
border: 3px solid green;
width: 60px;
height: 60px;
top: -3px;
left: -3px;
}
.workflow-success--icon:before {
border: 2px dotted green;
width: 68px;
height: 68px;
top: -6px;
left: -6px;
}
.workflow-success--icon > .fa {
margin: auto;
text-align: center;
font-size: 48px;
line-height: 48px;
width: 48px;
height: 48px;
overflow: hidden;
animation: successIconBounceIn .3s forwards;
}
.workflow-success--phrase,
.workflow-success--message {
margin: 8px auto;
text-align: center;
}
@keyframes successIconBounceIn {
0% { font-size: 0px; }
80% { font-size: 52px; }
100 { font-size: 48px; }
}
@keyframes successIconSpinFadeIn {
from {
opacity: 0;
transform: rotate(-90deg);
}
to {
opacity: 1;
transform: rotate(0deg);
}
}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{workflow-success}}
{{#workflow-success}}
You did the thing!
{{/workflow-success}}
<br>
<br>
<div class="workflow-success--icon">
<span class="fa">{{successIcon}}</span>
<!--span class="fa">&#9786;</span-->
</div>
<div class="workflow-success--phrase">
{{successPhrase}}
</div>
<div class="workflow-success--message">
{{yield}}
</div>
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment