From 9efc8791f76fde9cbc97342c0376c54cffba7710 Mon Sep 17 00:00:00 2001
From: Shuai Zhu <shuai168zhu@gmail.com>
Date: Wed, 24 Sep 2014 13:46:42 -0700
Subject: [PATCH] Added fade animation to Wizard

Change-Id: Ib5297de282166626578be0cb34920cf3c04cb6c2
---
 v2/src/app/wizard/network.tpl.html         |  4 +-
 v2/src/app/wizard/network_mapping.tpl.html |  4 +-
 v2/src/app/wizard/role_assignment.tpl.html |  2 +-
 v2/src/app/wizard/wizard.js                | 45 ++++++++++++++--------
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/v2/src/app/wizard/network.tpl.html b/v2/src/app/wizard/network.tpl.html
index ee14936..99d8ff6 100644
--- a/v2/src/app/wizard/network.tpl.html
+++ b/v2/src/app/wizard/network.tpl.html
@@ -100,7 +100,7 @@
                     <div class="space-10"></div>
 
                     <div class="center">
-                        <button ng-click="autofill(2500)" class="btn btn-sm btn-primary">
+                        <button ng-click="autofill(3000)" class="btn btn-sm btn-primary">
                             Fill Values
                         </button>
                     </div>
@@ -141,7 +141,7 @@
             </button>
         </div>
     </div>
-    <alert ng-repeat="alert in networkAlerts" class="autofill-success" type="success" close="closeNetworkAlert()">{{alert.msg}}</alert>
+    <alert ng-repeat="alert in networkAlerts" class="autofill-success fade-animation" type="success">{{alert.msg}}</alert>
     <div class="row">
         <div class="space-6"></div>
         <table ng-table="tableParams" class="table table-hover table-striped">
diff --git a/v2/src/app/wizard/network_mapping.tpl.html b/v2/src/app/wizard/network_mapping.tpl.html
index d69b8a8..80cfd77 100644
--- a/v2/src/app/wizard/network_mapping.tpl.html
+++ b/v2/src/app/wizard/network_mapping.tpl.html
@@ -16,7 +16,7 @@
                                 (Management)
                             </span>
                             <div ui-on-Drop="onDrop($event, interface_key)" drag-hover-class="drag-enter" drop-channel="{{interface_value.dropChannel}}" class="interface-placeholder interface-placeholder-margin">
-                                <div ng-repeat="(network_key, network_value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, network_key, networking)" drag-channel="{{network_value.dragChannel}}" class="external-event ui-draggable network-draggable margin-right-5" ng-class="{'label-pink': network_key == 'management', 'label-success': network_key =='tenant', 'label-purple': network_key == 'public', 'label-warning': network_key == 'storage'}" ng-if="network_value.mapping_interface==interface_key">
+                                <div ng-repeat="(network_key, network_value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, network_key, networking)" drag-channel="{{network_value.dragChannel}}" class="external-event ui-draggable network-draggable margin-right-5 fade-animation" ng-class="{'label-pink': network_key == 'management', 'label-success': network_key =='tenant', 'label-purple': network_key == 'public', 'label-warning': network_key == 'storage'}" ng-if="network_value.mapping_interface==interface_key">
                                     <i class="ace-icon fa fa-arrows"></i>
                                     <span class="capitalize">{{network_key}}</span>
                                 </div>
@@ -37,7 +37,7 @@
                 <div class="widget-body">
                     <div class="widget-main network-background">
                         <div ui-on-Drop="onDrop($event, '')" drag-hover-class="drag-enter" class="network-placeholder network-margin-border" drop-channel="E">
-                            <div ng-repeat="(key, value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, key, networking);" class="external-event ui-draggable network-draggable network-margin margin-right-20" ng-class="{'label-pink': key == 'management', 'label-success': key =='tenant', 'label-purple': key == 'public', 'label-warning': key == 'storage'}" drag-channel="{{value.dragChannel}}" ng-if="!value.mapping_interface">
+                            <div ng-repeat="(key, value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, key, networking);" class="external-event ui-draggable network-draggable network-margin margin-right-20 fade-animation" ng-class="{'label-pink': key == 'management', 'label-success': key =='tenant', 'label-purple': key == 'public', 'label-warning': key == 'storage'}" drag-channel="{{value.dragChannel}}" ng-if="!value.mapping_interface">
                                 <i class="ace-icon fa fa-arrows"></i>
                                 <span class="capitalize">{{key}}</span>
                             </div>
diff --git a/v2/src/app/wizard/role_assignment.tpl.html b/v2/src/app/wizard/role_assignment.tpl.html
index 785161c..b1e08be 100644
--- a/v2/src/app/wizard/role_assignment.tpl.html
+++ b/v2/src/app/wizard/role_assignment.tpl.html
@@ -127,7 +127,7 @@
                         </td>
                         <td>
                             <div class="role-assign-drop" ui-on-Drop="onDrop($event, key)" drag-hover-class="drag-enter-role" drop-channel="{{value.dropChannel}}">
-                                <alert ng-repeat="role in value['roles']" close="removeRole(value, role)" class="role-tag border-radius-4" ng-style="{'background-color': role.color}">
+                                <alert ng-repeat="role in value['roles']" close="removeRole(value, role)" class="role-tag border-radius-4 fade-animation" ng-style="{'background-color': role.color}">
                                     {{role.display_name}}
                                 </alert>
                             </div>
diff --git a/v2/src/app/wizard/wizard.js b/v2/src/app/wizard/wizard.js
index 1a8099c..caaeaba 100644
--- a/v2/src/app/wizard/wizard.js
+++ b/v2/src/app/wizard/wizard.js
@@ -137,7 +137,7 @@ angular.module('compass.wizard', [
                 console.warn("### catch error in wizardCtrl ###", newCommitState, oldCommitState);
                 $scope.openErrMessageModal(newCommitState.message);
 
-            } else if(newCommitState.state == "goToPreviousStep"){
+            } else if (newCommitState.state == "goToPreviousStep") {
                 $scope.stepControl(goToPreviousStep = true);
                 if ($scope.currentStep > $scope.maxStep) {
                     $scope.maxStep = $scope.currentStep;
@@ -162,7 +162,7 @@ angular.module('compass.wizard', [
                 };
                 alert(message.message);
             } else {
-                $scope.updateStepProgress($scope.pendingStep, $scope.currentStep,goToPrevious);
+                $scope.updateStepProgress($scope.pendingStep, $scope.currentStep, goToPrevious);
                 $scope.currentStep = $scope.pendingStep;
             }
         } else {
@@ -190,11 +190,9 @@ angular.module('compass.wizard', [
     $scope.updateStepProgress = function(newStep, oldStep, goToPrevious) {
         $scope.steps[newStep - 1].state = "active";
 
-        if(goToPrevious)
-        {
+        if (goToPrevious) {
             $scope.steps[oldStep - 1].state = "";
-        }
-        else{
+        } else {
             $scope.steps[oldStep - 1].state = "complete";
         }
 
@@ -223,17 +221,16 @@ angular.module('compass.wizard', [
         }
     };
 
-    $scope.triggerCommit = function(stepId,nextStep) {
+    $scope.triggerCommit = function(stepId, nextStep) {
         var sendRequest = false;
-        if(nextStep > stepId)
-        {
+        if (nextStep > stepId) {
             sendRequest = true;
         }
         if ($scope.steps[stepId - 1].name != "review") {
             var commitState = {
                 "name": $scope.steps[stepId - 1].name,
                 "state": "triggered",
-                "sendRequest":sendRequest,
+                "sendRequest": sendRequest,
                 "message": {}
             };
             wizardFactory.setCommitState(commitState);
@@ -275,7 +272,7 @@ angular.module('compass.wizard', [
     $scope.skipForward = function(stepId) {
         if ($scope.currentStep != stepId) {
             $scope.pendingStep = stepId;
-            $scope.triggerCommit($scope.currentStep,stepId);
+            $scope.triggerCommit($scope.currentStep, stepId);
         }
     };
 
@@ -301,6 +298,24 @@ angular.module('compass.wizard', [
     });
 })
 
+.animation('.fade-animation', function() {
+    return {
+        enter: function(element, done) {
+            element.css('display', 'none');
+            element.fadeIn(500, done);
+            return function() {
+                element.stop();
+            }
+        },
+        leave: function(element, done) {
+            element.fadeOut(500, done)
+            return function() {
+                element.stop();
+            }
+        }
+    }
+})
+
 .controller('svSelectCtrl', function($scope, wizardFactory, dataService, $filter, ngTableParams, sortingService) {
     $scope.hideunselected = '';
     $scope.search = {};
@@ -615,7 +630,7 @@ angular.module('compass.wizard', [
     dataService.getClusterHosts(cluster.id).success(function(data) {
         $scope.servers = data;
 
-         // Assume all hosts in the same cluster have same interface settings
+        // Assume all hosts in the same cluster have same interface settings
         if ($scope.servers[0].networks) {
             if (Object.keys($scope.servers[0].networks).length != 0) {
                 $scope.interfaces = $scope.servers[0].networks;
@@ -834,7 +849,7 @@ angular.module('compass.wizard', [
         }];
         if (alertFade) {
             $timeout(function() {
-                $scope.closeNetworkAlert();
+                $scope.networkAlerts = [];
             }, alertFade);
         }
     };
@@ -889,10 +904,6 @@ angular.module('compass.wizard', [
             }
         })
     }
-
-    $scope.closeNetworkAlert = function() {
-        $scope.networkAlerts = [];
-    };
 })
 
 .controller('partitionCtrl', function($scope, wizardFactory, dataService) {