SUP-2231, New Empty States for Dashboard and Profile

-- Updated empty states for My Challenges and My SRMs pages.

Author: vikasrohit

app/directives/empty-state-placeholder/empty-state-placeholder.directive.jade

@@ -1,4 +1,4 @@
-.empty-state-placeholder
+.empty-state-placeholder(ng-show="vm.show")
   .title(ng-bind="vm.title")
   .description(ng-bind="vm.description")
   .upsell(ng-transclude)

app/directives/empty-state-placeholder/empty-state-placeholder.directive.js

@@ -11,20 +11,25 @@
       templateUrl: 'directives/empty-state-placeholder/empty-state-placeholder.directive.html',
       scope: {
         title: '@',
-        description: '@'
+        description: '@',
+        show: '='
       },
       controller: ['$scope', 'CONSTANTS', '$attrs',
         function($scope, CONSTANTS, $attrs) {
-        $scope.DOMAIN = CONSTANTS.domain;
-        var vm = this;
-        vm.title = $scope.title;
-        vm.description = $scope.description;
+          $scope.DOMAIN = CONSTANTS.domain;
+          var vm = this;
+          vm.title = $scope.title;
+          vm.description = $scope.description;
+          console.log($scope.show);
+          vm.show = _.get($scope, 'show', false);
 
-        activate();
+          activate();
 
-        function activate() {
-
-        }
+          function activate() {
+            $scope.$watch('show', function (newValue, oldValue) {
+              vm.show = newValue;
+            })
+          }
       }],
       controllerAs: "vm"
     };

app/my-challenges/my-challenges.jade

@@ -24,14 +24,15 @@
 
             button.list(ng-click="vm.changeView('list')", ng-class="{ disabled: vm.view === 'list' }") List
 
-        .noChallenges(ng-show="vm.myChallenges.length === 0 && vm.loading === 'ready'")
-          p(ng-show="vm.statusFilter === 'completed'") You have not participated in any challenges yet.
-          p(ng-if="vm.statusFilter === 'active'")
-            empty-state-placeholder(title="My Challenges", description="There are no active challenges.")
-              .info-links
-                a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
-
-                a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
+        section.noChallenges(ng-show="vm.myChallenges.length === 0 && vm.loading === 'ready'")
+          empty-state-placeholder(title="Past Challenges", description="You have not participated in any challenges yet.", show="vm.statusFilter === 'completed'")
+            .info-links
+              a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
+              a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
+          empty-state-placeholder(title="Active Challenges", description="There are no active challenges.", show="vm.statusFilter === 'active'")
+            .info-links
+              a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
+              a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
 
         tc-section.hasChallenges(ng-show="vm.myChallenges.length", state="vm.loading")
 

app/my-dashboard/my-challenges/my-challenges.jade

@@ -9,7 +9,7 @@ header(ng-hide="vm.loading || !vm.userHasChallenges")
 .section-loading(ng-show="vm.loading")
 
 section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
-  empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills")
+  empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills", show="!vm.userHasChallenges")
     .info-links
       a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
 

app/my-dashboard/programs/programs.jade

@@ -5,7 +5,7 @@ header(ng-hide="vm.loading || !vm.registered")
 
 section.ios(ng-hide="vm.loading")
   .unregistered(ng-hide="vm.registered")
-    empty-state-placeholder(title="iOS COMMUNITY", description="Earn iOS topcoder badges and exclusive access to iOS challenges, prizes and special community-related events.")
+    empty-state-placeholder(title="iOS COMMUNITY", description="Earn iOS topcoder badges and exclusive access to iOS challenges, prizes and special community-related events.", show="!vm.registered")
       .info-links
         a.participate.tc-btn.tc-btn-s(ng-click="vm.registerUser()") Participate
 

app/my-srms/my-srms.jade

@@ -16,8 +16,11 @@
           button.list(ng-click="vm.changeView('list')", ng-class="{ disabled: vm.view === 'list' }") List
 
       .no-srms(ng-if="!vm.srms.length && vm.loading === 'ready'")
-        p(ng-if="vm.statusFilter === 'future'") There are no upcoming SRMs.
-        p(ng-if="vm.statusFilter === 'past'") You have not participated in any SRMs yet.
+        empty-state-placeholder(title="Past SRMs", description="You have not participated in any SRMs yet.", show="vm.statusFilter === 'past'")
+          .info-links
+            a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/data?pageIndex=1") Find SRMs
+            a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
+        empty-state-placeholder(title="Upcoming SRMs", description="There are no upcoming SRMs.", show="vm.statusFilter === 'future'")
 
       .has-srms(ng-show="vm.srms.length")
         .data(ng-class="vm.view + '-view'")

assets/css/my-challenges/my-challenges.scss

@@ -58,9 +58,7 @@
     }
 
     section.noChallenges {
-      text-align: center;
-      margin-top: 10px;
-      font-size: 18px;
+      padding-top: 30px;
     }
 
     .hasChallenges {

assets/css/my-srms/my-srms.scss

@@ -69,6 +69,31 @@
     display: flex;
     flex-direction: inherit;
     align-items: center;
+
+    .info-links {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+
+      a {
+        text-transform: uppercase;
+        @include sofia-pro-medium;
+
+        &:not(:last-child) {
+          margin-bottom: 30px;
+        }
+
+        &.participate {
+          color: $white;
+        }
+
+        &.learn-more {
+          font-size: 12px;
+          line-height: 12px;
+          color: $gray-lighter;
+        }
+      }
+    }
   }
   .has-srms {
     display: flex;