fixes ordering of skills

Author: Parth Shah

app/directives/skill-tile/skill-tile.directive.jade

@@ -1,4 +1,4 @@
-a(ng-click="enableHide && toggle()")
+a(ng-click="enableHide && toggle()", ng-class="{'hidden': skill.hidden, 'new': skill.isNew}")
 
   .skill-icon(ng-switch="skill.category")
     img(ng-switch-when="DEVELOP", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-develop.svg")

app/settings/edit-profile/edit-profile.controller.js

@@ -4,9 +4,9 @@
   angular.module('tc.settings').controller('EditProfileController', EditProfileController);
 
 
-  EditProfileController.$inject = ['userData', 'userHandle', 'ProfileService', 'ExternalAccountService', '$log', 'ISO3166', 'ImageService', '$rootScope', 'CONSTANTS', 'TagsService'];
+  EditProfileController.$inject = ['userData', 'userHandle', 'ProfileService', 'ExternalAccountService', '$log', 'ISO3166', 'ImageService', '$rootScope', 'CONSTANTS', 'TagsService', 'toaster'];
 
-  function EditProfileController(userData, userHandle, ProfileService, ExternalAccountService, $log, ISO3166, ImageService, $rootScope, CONSTANTS, TagsService) {
+  function EditProfileController(userData, userHandle, ProfileService, ExternalAccountService, $log, ISO3166, ImageService, $rootScope, CONSTANTS, TagsService, toaster) {
     $log = $log.getInstance("EditProfileCtrl");
     var vm = this;
     vm.toggleTrack    = toggleTrack;
@@ -52,7 +52,9 @@
 
       ProfileService.getUserSkills(vm.userData.handle)
       .then(function(skills) {
-        vm.skills = skills.skills;
+        vm.skills = _.map(skills.skills, function(el) {
+          return _.extend({}, el, {isNew: 0});
+        });
       })
       .catch(function(err) {
         $log.error(JSON.stringify(err));
@@ -66,7 +68,9 @@
           // find the new skill in response object and inject it into our existing list.
           // we dont want to replace the entire object / map  because we will lose hidden tags
           var newSkill = _.find(resp.skills, {tagId: skillTagId});
+          newSkill.isNew = new Date().getTime();
           vm.skills.push(newSkill);
+          toaster.pop("success", "Success!", "Skill added.");
         });
       }
     }

app/settings/edit-profile/edit-profile.jade

@@ -75,7 +75,7 @@
       )
 
       .list
-        .skill(ng-repeat="skill in vm.skills | orderBy:'-score'")
+        .skill(ng-repeat="skill in vm.skills | orderBy:'-score' | orderBy:'-isNew'")
           skill-tile(skill="skill" enable-hide="true")
 
   .settings-section.links

assets/css/directives/skill-tile.scss

@@ -1,11 +1,12 @@
+@import '../partials/combined';
 skill-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   text-align: center;
-  height: 120px;
-  width: 80px;
+  height: 130px;
+  width: 100px;
   .skill-icon {
     display: flex;
     flex-direction: column;
@@ -21,18 +22,21 @@ skill-tile {
       height: 45px;
       width: 45px;
     }
+    &.new {
+      background-color: #85CCFF;
+      border: 1px solid #F2FAFF;
+    }
   }
   .name {
     font-family: 'Sofia Pro';
     font-weight: 300;
     text-align: center;
     margin-top: 10px;
     font-size: 12px;
-  }
-  .hidden {
-    font-family: 'Sofia Pro';
-    font-size: 10px;
-    text-transform: uppercase;
+    &.hidden {
+      @include sofia-pro-light;
+      text-decoration: line-through;
+    }
   }
   @media (min-width: 768px) {
     width: 100px;