SUP-2754, [Edit Profile] Allow user to hide external links

-- Added Edit header to the external data cards

Author: vikasrohit

app/directives/external-account/external-link-data.directive.jade

@@ -1,5 +1,9 @@
 .external-link-list
-  div.external-link-tile(ng-repeat="account in linkedAccountsData")
+  div.external-link-tile(ng-repeat="account in linkedAccountsData", ng-class="{'external-link-tile--editable' : editable}")
+    .ext-link-tile_edit-header(ng-show="editable")
+      .ext-link-tile_edit-header_show-on-profile
+        span.show-on-profile_label Show on Profile
+        onoff-switch(model="account.hide", unique-id="account.provider + '_' + (account.key || account.data.handle)")
     .top
       div.logo
         i.fa(ng-class="(account|providerData:'className') || 'fa-globe'")
@@ -98,7 +102,7 @@
 
         .title {{account.data.title}}
 
-      div(ng-switch-when="weblink")
+      div(ng-switch-when="weblink", key="{{account.key}}")
         p.link-title(data-ellipsis, ng-bind="account.title", ng-hide="account.status === 'PENDING'")
         p.link-title(ng-show="account.status === 'PENDING'") Loading data. This will take a few minutes.
 

app/directives/external-account/external-links-data.directive.js

@@ -14,7 +14,8 @@
      restrict: 'E',
       templateUrl: 'directives/external-account/external-link-data.directive.html',
       scope: {
-        linkedAccountsData: '='
+        linkedAccountsData: '=',
+        editable: '='
       }
     };
     return directive;

app/directives/onoffswitch/onoffswitch.directive.jade

@@ -0,0 +1,5 @@
+.onoffswitch
+  input.onoffswitch-checkbox(type='checkbox', name='onoffswitch', checked='', ng-model="model", id="{{uniqueId}}-onoffswitch")
+  label.onoffswitch-label(for='{{uniqueId}}-onoffswitch')
+    span.onoffswitch-inner
+    span.onoffswitch-switch

app/directives/onoffswitch/onoffswitch.directive.js

@@ -0,0 +1,19 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('onoffSwitch', onoffSwitch);
+
+  function onoffSwitch() {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/onoffswitch/onoffswitch.directive.html',
+      scope: {
+        model: '=',
+        uniqueId: '='
+      },
+      link: function(scope, element, attrs) {
+
+      }
+    };
+  }
+})();

app/index.jade

@@ -201,6 +201,7 @@ html
     script(src="directives/input-sticky-placeholder/input-sticky-placeholder.directive.js")
     script(src="directives/ios-card/ios-card.directive.js")
     script(src="directives/on-file-change.directive.js")
+    script(src="directives/onoffswitch/onoffswitch.directive.js")
     script(src="directives/page-state-header/page-state-header.directive.js")
     script(src="directives/profile-widget/profile-widget.directive.js")
     script(src="directives/responsive-carousel/responsive-carousel.directive.js")

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

@@ -108,4 +108,4 @@
       .field-label Linked Accounts
 
       .existing-links
-        external-links-data(linked-accounts-data="vm.linkedExternalAccountsData")
+        external-links-data(linked-accounts-data="vm.linkedExternalAccountsData", editable="true")

assets/css/directives/external-link-data.scss

@@ -5,14 +5,44 @@ external-accounts {
   flex-flow: row wrap;
 }
 
+.ext-link-tile_edit-header {
+  border-bottom: 1px solid $gray-light;
+
+  &:hover {
+    .show-on-profile_label {
+      color: $accent-gray-dark;
+    }
+  }
+}
+
+.ext-link-tile_edit-header_show-on-profile {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 10px;
+
+  .show-on-profile_label {
+    @include sofia-pro-medium;
+    font-size: 10px;
+    line-height: 13px;
+    color: $accent-gray;
+    text-transform: uppercase;
+    align-self: center;
+  }
+
+  // TODO remove this and handle in onoffswitch directive's css
+  .onoffswitch {
+    margin: 0px;
+  }
+}
+
 .external-link-list {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin-top: 10px;
 
   .external-link-tile {
-    border: 1px solid #f0f0f0;
+    border: 1px solid $gray-light;
     width: 280px;
     height: 90px;
     display: flex;
@@ -252,5 +282,9 @@ external-accounts {
         }
       }
     }
+
+    .external-link-tile--editable {
+      height: 285px;
+    }
   }
 }