Merge pull request #364 from appirio-tech/feature/tom-scroll-to-track

Added scrolling to tracks from profile widget

Author: tladendo

app/directives/profile-widget/profile-widget.jade

@@ -19,7 +19,7 @@
 
   .tracks-links
     .tracks
-      .track(ng-repeat="track in (profile.tracks)")
+      .track(ng-repeat="track in (profile.tracks)", ng-click="profileVm.scrollTo(track)")
         div(class="{{profileVm.imgMap[track]}}-icon")
           div
         .text {{track | role}}

app/profile/about/about.jade

@@ -44,7 +44,8 @@
 
       .track(
         ng-repeat="track in profileVm.profile.tracks",
-        ng-if="profileVm.categories[track].length > 0"
+        ng-if="profileVm.categories[track].length > 0",
+        id="{{track}}_TRACK"
       )
 
         div(class="name")

app/profile/profile.controller.js

@@ -5,16 +5,17 @@
 
   ProfileCtrl.$inject = ['CONSTANTS', '$log', '$q',
     'TcAuthService', 'UserService', 'ProfileService', 'ChallengeService', 'ExternalAccountService',
-    'userHandle', 'profile', 'ngDialog'
+    'userHandle', 'profile', 'ngDialog', '$anchorScroll'
   ];
 
-  function ProfileCtrl(CONSTANTS, $log, $q, TcAuthService, UserService, ProfileService, ChallengeService, ExternalAccountService, userHandle, profile, ngDialog) {
+  function ProfileCtrl(CONSTANTS, $log, $q, TcAuthService, UserService, ProfileService, ChallengeService, ExternalAccountService, userHandle, profile, ngDialog, $anchorScroll) {
     var vm = this;
     // set profile to the object that was resolved
     vm.profile = profile;
     vm.userHandle = userHandle;
     vm.showBadges = showBadges;
     vm.closeDialog = closeDialog;
+    vm.scrollTo = scrollTo;
 
     vm.imgMap = {
       'DEVELOP': 'develop',
@@ -97,6 +98,10 @@
     function closeDialog() {
       ngDialog.close();
     }
+
+    function scrollTo(track) {
+      $anchorScroll(track + '_TRACK');
+    }
   }
 
 })();

assets/css/directives/profile-widget.scss

@@ -80,6 +80,7 @@
       justify-content: flex-end;
       width: 100%;
       .track {
+        cursor: pointer;
         display: flex;
         flex-direction: column;
         align-items: center;