Merge pull request #281 from appirio-tech/external-links-pending

nlitwin · nlitwin · commit 647a46cc4746 · 2015-09-30T14:23:26.000-07:00
Fix layout of external tiles
diff --git a/app/directives/external-account/external-account.directive.jade b/app/directives/external-account/external-account.directive.jade
@@ -1,9 +1,11 @@
-.ext-tile(ng-repeat="account in accountList | orderBy:'order'")
-  .outer-box(ng-class="{'connected': account.linked, 'disabled': account.disabled}")
-    a(ng-click="!account.disabled && !readOnly && !account.linked && link(account.provider)", ng-class="{'read-only': readOnly}")
-      .external-account-icon-box(ng-class="{'connected': account.linked}")
-        i.fa(ng-class="account.className")
-      .name {{account.displayName}}
-  .status.connected(ng-if="account.linked") connected 
-  .status(ng-if="!account.linked && !account.disabled") connect 
-  .status(ng-if="account.disabled") coming soon 
+.ext-tile(ng-repeat="account in accountList | orderBy:'order'", ng-class="{'connected': account.linked, 'disabled': account.disabled}")
+  .external-account-box(ng-click="!account.disabled && !readOnly && !account.linked && link(account.provider)", ng-class="{'read-only': readOnly}")
+    i.fa(ng-class="account.className")
+
+    .provider {{account.displayName}}
+
+  .status(ng-if="account.linked") Connected
+
+  .status(ng-if="!account.linked && !account.disabled") Connect
+
+  .status(ng-if="account.disabled") Coming Soon
diff --git a/app/directives/external-account/external-account.directive.js b/app/directives/external-account/external-account.directive.js
@@ -73,11 +73,13 @@
      restrict: 'E',
       templateUrl: 'directives/external-account/external-link-data.directive.html',
       scope: {
-        linkedAccountsData: '='
+        linkedAccountsData: '=',
+        externalLinks: '='
       },
       controller: ['$log', '$scope', 'ExternalAccountService',
         function($log, $scope, ExternalAccountService) {
           $log = $log.getInstance('ExternalLinksDataDirective');
+
           $scope.$watch('linkedAccountsData', function(newValue, oldValue) {
             var linkedAccounts = [];
             for (var i=0;i<_supportedAccounts.length;i++) {
@@ -92,6 +94,26 @@
             }
             $scope.linkedAccounts = linkedAccounts;
           });
+
+          $scope.$watchCollection('externalLinks', function(newValue, oldValue) {
+            console.log("WATCH COLLECTION EXTERNAL LINKS: ");
+            console.log("New Value: ", newValue);
+            console.log("Old Value: ", oldValue);
+
+            angular.forEach(newValue, function(link) {
+              var provider = link.providerType;
+
+              if (!$scope.linkedAccountsData[provider]) {
+                $scope.linkedAccounts.push({
+                  provider: provider,
+                  data: {
+                    handle: link.name,
+                    status: 'PENDING'
+                  }
+                });
+              }
+            });
+          });
         }
       ]
     }
diff --git a/app/directives/external-account/external-link-data.directive.jade b/app/directives/external-account/external-link-data.directive.jade
@@ -9,70 +9,94 @@
 
       div(ng-switch-when="github")
         .handle {{account.data.handle}}
-        ul
-          li 
+
+        .pending(ng-show="account.data.status === 'PENDING'")
+          p Loading data. This will take a few minutes.
+
+        ul(ng-hide="account.data.status === 'PENDING'")
+          li
             .value {{(account.data.followers|number:0) || 0}}
             .key followers
-          li 
+          li
             .value {{(account.data.publicRepos|number:0) || 0}}
             .key repositories
 
       div(ng-switch-when="stackoverflow")
         .handle {{account.data.handle}}
-        ul
-          li 
+
+        .pending(ng-show="account.data.status === 'PENDING'")
+          p Loading data. This will take a few minutes.
+
+        ul(ng-hide="account.data.status === 'PENDING'")
+          li
             .value {{(account.data.reputation|number:0) || 0}}
             .key reputation
-          li 
-            .value {{(account.data.answers|number:0) || 0}}  
+          li
+            .value {{(account.data.answers|number:0) || 0}}
             .key answers
 
       div(ng-switch-when="behance")
         .handle {{account.data.name}}
-        ul
-          li 
+
+        .pending(ng-show="account.data.status === 'PENDING'")
+          p Loading data. This will take a few minutes.
+
+        ul(ng-hide="account.data.status === 'PENDING'")
+          li
             .value {{(account.data.projectViews|number:0) || 0}}
             .key views
-          li 
+          li
             .value {{(account.data.projectAppreciations|number:0) || 0}}
             .key likes
 
 
       div(ng-switch-when="dribble")
         .handle {{account.data.handle}}
-        ul
-          li 
+
+        .pending(ng-show="account.data.status === 'PENDING'")
+          p Loading data. This will take a few minutes.
+
+        ul(ng-hide="account.data.status === 'PENDING'")
+          li
             .value {{(account.data.followers|number:0) || 0}}
             .key followers
-          li 
+          li
             .value {{(account.data.likes|number:0) || 0}}
             .key likes
 
       div(ng-switch-when="bitbucket")
         .handle {{account.data.username}}
-        ul
-          li 
+
+        .pending(ng-show="account.data.status === 'PENDING'")
+          p Loading data. This will take a few minutes.
+
+        ul(ng-hide="account.data.status === 'PENDING'")
+          li
             .value {{(account.data.followers|number:0) || 0}}
             .key followers
-          li 
+          li
             //- {{(account.data.repositories|number:0) || 0}}
             .value TBD
             .key repositories
 
       div(ng-switch-when="twitter")
         .handle @{{account.data.handle}}
-        ul
-          li 
+
+        .pending(ng-show="account.data.status === 'PENDING'")
+          p Loading data. This will take a few minutes.
+
+        ul(ng-hide="account.data.status === 'PENDING'")
+          li
             .value {{(account.data.noOfTweets|number:0) || 0}}
             .key tweets
-          li 
+          li
             //- {{(account.data.followers|number:0) || 0}}
-            .value TBD 
-            .key followers      
-      
+            .value TBD
+            .key followers
+
       div(ng-switch-when="linkedin")
         .handle {{account.data.name}}
-        
+
         .title {{account.data.title}}
 
       div(ng-switch-default)
diff --git a/app/settings/edit-profile/edit-profile.jade b/app/settings/edit-profile/edit-profile.jade
@@ -84,10 +84,12 @@
       .description Show off your work and experience outside of Topcoder. Connect accounts from popular services and networks or add a link to any site.
 
     .section-fields
-      .field-label Link your accounts
+      .field-label Link Your Accounts
+
       .external-links
-        external-accounts(linked-accounts="vm.linkedExternalAccounts.length", read-only="false")
+        external-accounts(linked-accounts="vm.linkedExternalAccounts", read-only="false")
+
+      .field-label Linked Accounts
 
-      .field-label(ng-show="vm.hasLinks") your accounts
       .existing-links
-        external-links-data(ng-show="vm.hasLinks" linked-accounts-data="vm.linkedExternalAccountsData")
+        external-links-data(external-links="vm.linkedExternalAccounts", linked-accounts-data="vm.linkedExternalAccountsData")
diff --git a/assets/css/directives/external-account.scss b/assets/css/directives/external-account.scss
@@ -3,81 +3,58 @@
 .ext-tile {
   display: flex;
   flex-direction: column;
-  text-align: center;
   align-items: center;
-  justify-content: flex-start;
-  width: 90px;
-  height: 90px;
-  margin: 5px 5px 10px 5px;
+  margin: 5px 20px 15px 0;
 
-  .outer-box {
-    border: 1px solid #f0f0f0;
+  &.connected {
+
+
+    .status {
+      color: $gray-dark;
+    }
+  }
+
+  &.disabled {
+
+  }
+
+  .external-account-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 90px;
+    height: 90px;
+    border: 1px solid $gray-light;
+    margin-top: 12px;
     cursor: pointer;
-    .read-only{
+
+    &.read-only{
       cursor: default;
       pointer-events: none;
     }
 
-    .external-account-icon-box {
+    i {
       font-size: 45px;
-      margin-top: 12px;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-
-      i {
-        &.inactive {
-          color: #d1d3d4;
-        }
-        &.connected {
-          cursor: default;
-          color: #0096FF;
-        }
-      }
+      color: #D1D3D4;
     }
 
-    .name {
+    .provider {
       margin-top: 8px;
-      width: 90px;
-      font-family: 'Sofia Pro';
+      @include sofia-pro-medium;
       font-size: 10px;
       line-height: 13px;
-      font-weight: 500;
       text-align: center;
       text-transform: uppercase;
-      color: #A3A3AE;
+      color: $system-gray;
     }
-    .disabled {
-      cursor: default;
-      pointer-events: none;
-    }
-    .connected {
-      cursor: default;
-      color: #0096FF;
-    }
-
-
-  }
-  .connected {
-    cursor: default;
-  }
-  .disabled {
-    cursor: default;
-    color: #D1D3D4;
-    pointer-events: none;
   }
 
   .status {
     font-size: 10px;
     @include sofia-pro-medium;
     margin-top: 10px;
     text-transform: uppercase;
-    text-align: center;
-    .connected {
-      font-color: #B7B7B7;
-    }
-    .disconnected {
-      font-color: #3D3D3D;
-    }
+    color: $gray-darkest;
   }
 }
diff --git a/assets/css/directives/external-link-data.scss b/assets/css/directives/external-link-data.scss
@@ -1,25 +1,25 @@
+@import '../partials/combined';
+
 external-accounts {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  flex-flow: row wrap;
 }
+
 .external-link-list {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 5px;
+  margin-top: 10px;
 
   .external-link-tile {
     border: 1px solid #f0f0f0;
     width: 280px;
     height: 90px;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
     text-align: center;
-    margin: 10px;
     font-family: 'Sofia Pro';
+
     &:hover {
       cursor: pointer;
       background-color: #fbfbfb;
@@ -70,6 +70,15 @@ external-accounts {
         font-family: 'Sofia Pro';
       }
 
+      .pending {
+        p {
+          @include sofia-pro-regular;
+          font-size: 16px;
+          color: $gray-darkest;
+          margin-bottom: 15px;
+        }
+      }
+
       ul {
         margin-top: 10px;
         height: 40px;
@@ -104,17 +113,14 @@ external-accounts {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
-    padding: 20px;
 
     .external-link-tile {
       border: 1px solid #f0f0f0;
       width: 200px;
       height: 240px;
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
       text-align: center;
-      margin: 10px;
       padding: 0px;
       font-family: 'Sofia Pro';
       i {
@@ -152,7 +158,8 @@ external-accounts {
 
         .handle {
          font-weight: normal;
-         margin-bottom: 40px;
+         margin-top: 20px;
+         margin-bottom: 20px;
         }
         .title {
           // placeholder
