Merge pull request #250 from plondon/security-center-success-animations

Security center success animations
blockchain · Jan 21, 2016 · ab1e273 · ab1e273
2 parents 4f66d75 + 8c95d75
commit ab1e273
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 76 deletions.
diff --git a/app/partials/security-center.jade b/app/partials/security-center.jade
@@ -12,7 +12,7 @@
             .flex-center.flex-column
               img(src="img/badge-verifyemail.png")
             p(translate="ADD_VERIFY_EMAIL")
-          .level-complete-animation.flex-center.flex-colum(ng-show="user.isEmailVerified")
+          .level-complete-animation.flex-center.flex-column(ng-show="user.isEmailVerified")
             .flex-center.flex-column
               .level-complete.flex-center.flex-justify
                 i.ti-check.bright-green
@@ -24,7 +24,7 @@
             .flex-center.flex-column
               img(src="img/badge-securityphrase.png")
             p(translate="ADD_WALLET_RECOVERY")
-          .level-complete-animation.flex-center.flex-colum(ng-show="status.didConfirmRecoveryPhrase")
+          .level-complete-animation.flex-center.flex-column(ng-show="status.didConfirmRecoveryPhrase")
             .flex-center.flex-column
               .level-complete.flex-center.flex-justify
                 i.ti-check.bright-green
@@ -36,7 +36,7 @@
             .flex-center.flex-column
               img(src="img/badge-passwordhint.png")
             p(translate="ADD_PASSWORD_HINT")
-          .level-complete-animation.flex-center.flex-colum(ng-show="user.passwordHint")
+          .level-complete-animation.flex-center.flex-column(ng-show="user.passwordHint")
             .flex-center.flex-column
               .level-complete.flex-center.flex-justify
                 i.ti-check.bright-green
@@ -65,7 +65,7 @@
           confirm-recovery-phrase(button-class="button-success button-lg", ng-hide="status.didConfirmRecoveryPhrase")
 
       div(ng-show="display.action == 'passwordhint'")       
-        bc-async-input(custom inline placeholder="'CHANGE' | translate" ng-model="user.passwordHint" on-save="changePasswordHint" action-title="'CHANGE' | translate")
+        bc-async-input(custom inline placeholder="'ADD_PASSWORD_HINT' | translate" ng-model="user.passwordHint" on-save="changePasswordHint" action-title="'CHANGE' | translate")
           .flex-center
             .form-group.width-50.flex-column(ng-class="{'has-error': !validate()}")
               p(translate="CHANGE")
@@ -88,7 +88,7 @@
             .flex-center.flex-column
               img(src="img/badge-addmobile.png")
             p(TRANSLATE="ADD_MOBILE_NUMBER")
-          .level-complete-animation.flex-center.flex-colum(ng-show="user.isMobileVerified")
+          .level-complete-animation.flex-center.flex-column(ng-show="user.isMobileVerified")
             .flex-center.flex-column
               .level-complete.flex-center.flex-justify
                 i.ti-check.bright-green
@@ -100,7 +100,7 @@
             .flex-column.flex-center
               img(src="img/badge-add2FA.png")
             p(translate="ENABLE_TWO_STEP")
-          .level-complete-animation.flex-center.flex-colum(ng-show="settings.needs2FA")
+          .level-complete-animation.flex-center.flex-column(ng-show="settings.needs2FA")
             .flex-center.flex-column
               .level-complete.flex-center.flex-justify
                 i.ti-check.bright-green
@@ -131,7 +131,7 @@
             .flex-column.flex-center
               img(src="img/badge-blockTOR.png")
             p(TRANSLATE="ADD_BLOCK_TOR")
-          .level-complete-animation.flex-center.flex-colum(ng-show="settings.blockTOR")
+          .level-complete-animation.flex-center.flex-column(ng-show="settings.blockTOR")
             .flex-center.flex-column
               .level-complete.flex-center.flex-justify
                 i.ti-check.bright-green

diff --git a/assets/css/_bootstrap-blockchain.scss b/assets/css/_bootstrap-blockchain.scss
@@ -43,7 +43,7 @@
 // @import "bootstrap/modals";
 @import "bootstrap/tooltip";
 @import "bootstrap/popovers";
-// @import "bootstrap/carousel";
+@import "bootstrap/carousel";
 
 // Utility classes
 @import "bootstrap/utilities";

diff --git a/assets/css/modules/_security-center.scss b/assets/css/modules/_security-center.scss
@@ -55,20 +55,8 @@
   }
   section.level {
     margin-bottom: 30px;
-    @media (min-width: 769px) {
-      .level-badge {
-        height: auto;
-      }
-      &.level_one {
-        .level-badge {
-          width: 33.333%;
-          &:last-child {
-            &.active {
-              border-right: 0px;
-            }
-          }
-        }
-      }
+    .level-badge {
+      height: auto;
     }
   }
   header {

diff --git a/assets/css/utilities/_animations.scss b/assets/css/utilities/_animations.scss
@@ -148,66 +148,57 @@
 ////////                        ////////
 ////////////////////////////////////////
 
-@-webkit-keyframes image-fade {
-  0% {
-    opacity: .3;
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
+@mixin transform-center-horizontal {
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  position: absolute;
+  width: 100%;
+  left: 50%;
 }
 
-@keyframes image-fade {
-  0% {
-    opacity: .5;
+.security-center-ui {
+  .level-incomplete-container,
+  .level-complete-animation, 
+  .level-complete-container {
+    top: 20px;
+    display: block !important;
+    @include transform-center-horizontal;
+    &.ng-hide {
+      opacity: 0;
+      z-index: 1;
+    }
   }
-  100% {
-    opacity: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-  }
-}
 
-.level-incomplete-container.ng-hide-add {
-  -webkit-filter: grayscale(100%);
-  filter: grayscale(100%);
-  display: block !important;
-  -webkit-transition: all .5s linear !important;
-  transition: all .5s linear !important;
-}
-
-.level-incomplete-container.ng-hide-add.ng-hide-add-active {
-  -webkit-animation: image-fade 1s ease-in-out;
-  animation: image-fade 1s ease-in-out;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-}
-// level complete animation
-.level-complete-animation {
-  display: none !important;
-}
-.level-complete-animation.ng-hide-remove {
-  opacity: 0;
-  display: block !important;
-  -webkit-transition: all 2s linear .9s !important;
-  transition: all 2s linear .9s !important;
-}
-.level-complete-animation.ng-hide-remove.ng-hide-remove-active {
-  opacity: 1;
-}
+  // step 1
+  .level-incomplete-container {
+    top: 0px;
+    opacity: 1;
+    z-index: 3;
+    position: relative;
+    @include transition(opacity .4s, transform .4s);
+    &.ng-hide-add-active {
+      -webkit-transform: translate3d(-80%, 0, 0);
+      transform: translate3d(-80%, 0, 0);
+    }
+  }
 
+  // step 2
+  .level-complete-animation {
+    z-index: 2;
+    opacity: 0;
+    @include transition(opacity .2s .6s);
+    &.ng-hide-remove.ng-hide-remove-active {
+      opacity: 1;
+    }
+  }
 
-// after animation done, bring back full image
-.level-complete-container.ng-hide-remove {
-  opacity: 0;
-  display: block !important;
-  -webkit-transition: opacity .5s linear 3.2s !important;
-  transition: opacity .5s linear 3.2s !important;
-}
-.level-complete-container.ng-hide-remove.ng-hide-remove-active {
-  opacity: 1;
+  // step 3
+  .level-complete-container {
+    @include transition(all .4s 1.6s);
+    height: auto !important;
+    opacity: 1;
+    z-index: 3;
+  }
 }
 
 // progress bar animation