refactor profile tabs

app/coffee/modules/profile/main.coffee

@@ -22,25 +22,3 @@
 taiga = @.taiga
 
 module = angular.module("taigaProfile")
-
-#############################################################################
-## Profile Tabs
-#############################################################################
-
-ProfileTabsDirective = () ->
-
-    link = ($scope, $el, $attrs) ->
-
-        $scope.tabSelected = 'profile-timeline'
-
-        $scope.toggleTab = ->
-            target = angular.element(event.currentTarget)
-            tab = target.data("selected")
-            target.siblings().removeClass('active')
-            target.addClass('active')
-            $scope.tabSelected = tab
-
-    return {link:link}
-
-
-module.directive("tgProfileTabs", ProfileTabsDirective)

app/coffee/modules/profile/profile-tab.directive.coffee

@@ -0,0 +1,26 @@
+ProfileTabDirective = () ->
+    link = ($scope, $el, $attrs, $ctrl) ->
+        $scope.tab = {}
+
+        $scope.tab.name = $attrs.tgProfileTab
+        $scope.tab.title = $attrs.tabTitle
+        $scope.tab.icon = $attrs.tabIcon
+        $scope.tab.active = !!$attrs.tabActive
+
+        $ctrl.addTab($scope.tab)
+
+    return {
+        scope: {}
+        require: "^tgProfileTabs"
+        link: link
+        transclude: true
+        replace: true
+        template: """
+            <div ng-show="tab.active">
+                <ng-transclude></ng-transclude>
+            </div>
+        """
+    }
+
+angular.module("taigaProfile")
+    .directive("tgProfileTab", ProfileTabDirective)

app/coffee/modules/profile/profile-tabs.directive.coffee

@@ -0,0 +1,26 @@
+class ProfileTabsController
+    constructor: (@scope) ->
+        @scope.tabs = []
+
+    addTab: (tab) ->
+        @scope.tabs.push(tab)
+
+ProfileTabsController.$inject = ["$scope"]
+
+ProfileTabsDirective = () ->
+    link = ($scope, $el, $attrs) ->
+        $scope.toggleTab = (tab) ->
+            _.map $scope.tabs, (tab) => tab.active = false
+
+            tab.active = true
+
+    return {
+        scope: {}
+        controller: ProfileTabsController
+        templateUrl: "profile/profile-tabs.html"
+        link: link
+        transclude: true
+    }
+
+angular.module("taigaProfile")
+    .directive("tgProfileTabs", ProfileTabsDirective)

app/partials/includes/modules/profile/profile-contacts.jade

@@ -1,4 +1,4 @@
-section.profile-contacts(ng-show="tabSelected == 'profile-contacts'")
+section.profile-contacts
     nav.profile-contact-filters
         a.active(href="", title="No Filter") all
         a(href="", title="Only show your team") team

app/partials/includes/modules/profile/profile-content-tabs.jade

@@ -1,13 +0,0 @@
-nav.profile-content-tabs
-    a.tab.active(href="", title="Activity Tab", ng-click="toggleTab()", data-selected="profile-timeline")
-        span.icon.icon-timeline
-        span activity
-    a.tab(href="", title="Projects Tab", ng-click="toggleTab()", data-selected="profile-projects")
-        span.icon.icon-project
-        span projects
-    a.tab(href="", title="Contacts Tab", ng-click="toggleTab()", data-selected="profile-contacts")
-        span.icon.icon-team
-        span contacts
-    a.tab(href="", title="Favorites Tab", ng-click="toggleTab()", data-selected="profile-favorites")
-        span.icon.icon-star-fill
-        span favorites

app/partials/includes/modules/profile/profile-favorites.jade

@@ -1,4 +1,4 @@
-section.profile-favorites(ng-show="tabSelected == 'profile-favorites'")
+section.profile-favorites
     nav.profile-favorites-filters
         a.active(href="", title="No Filter") all
         a(href="", title="Only show your team") projects

app/partials/includes/modules/profile/profile-projects.jade

@@ -1,4 +1,4 @@
-section.profile-projects(ng-show="tabSelected == 'profile-projects'")
+section.profile-projects
     - for (var x = 0; x < 3; x++)
     div.profile-project-single
         div.profile-projects-left
@@ -127,5 +127,3 @@ section.profile-projects(ng-show="tabSelected == 'profile-projects'")
                         img(src="https://s3.amazonaws.com/uifaces/faces/twitter/uxceo/128.jpg", alt="{{ user.nickname }}")
                     a(href="", title="View {{ user.nickname }} profile")
                         img(src="https://s3.amazonaws.com/uifaces/faces/twitter/syswarren/128.jpg", alt="{{ user.nickname }}")
-
-

app/partials/includes/modules/profile/profile-timeline.jade

@@ -1,4 +1,4 @@
-section.profile-timeline(ng-show="tabSelected == 'profile-timeline'")
+section.profile-timeline
     - for (var x = 0; x < 3; x++)
         // Simple message for favorites, updates, etc.
         div.activity-simple
@@ -92,4 +92,3 @@ section.profile-timeline(ng-show="tabSelected == 'profile-timeline'")
                     a(href="", title="See {{ project.name }}")  Nanatubos
             div.activity-comment-quote
                 p We plan to build a hundred of so called "telehubs" so people from all over the world can immediately relocate their physical self at any other telehub in microseconds.
-

app/partials/profile/profile-tabs.jade

@@ -0,0 +1,7 @@
+div
+    nav.profile-content-tabs
+        a.tab(ng-repeat="tab in tabs", href="", title="{{::tab.title}}", ng-class="{active: tab.active}" ng-click="toggleTab(tab)")
+            span.icon(ng-class="::tab.icon")
+            span {{::tab.name}}
+
+    ng-transclude

app/partials/profile/public-profile.jade

@@ -1,13 +1,21 @@
 include ../includes/components/beta
 div.profile.centered
     include ../includes/modules/profile/profile-bar
-    div.main(tg-profile-tabs)
+    div.main
         div.hero
-        include ../includes/modules/profile/profile-content-tabs
+        div(tg-profile-tabs)
-        div.content-wrapper
+            div.content-wrapper
-            div.content
+                div.content
-                include ../includes/modules/profile/profile-timeline
+                    div(tg-profile-tab="activity", tab-title="Activity Tab", tab-icon="icon-timeline", tab-active)
-                include ../includes/modules/profile/profile-projects
+                        include ../includes/modules/profile/profile-timeline
-                include ../includes/modules/profile/profile-contacts
+
-                include ../includes/modules/profile/profile-favorites
+                    div(tg-profile-tab="projects", tab-title="Projects Tab", tab-icon="icon-project")
-            include ../includes/modules/profile/profile-sidebar
+                        include ../includes/modules/profile/profile-projects
+
+                    div(tg-profile-tab="contacts", tab-title="Contacts Tab", tab-icon="icon-team")
+                        include ../includes/modules/profile/profile-contacts
+
+                    div(tg-profile-tab="favorities", tab-title="Favorites Tab", tab-icon="icon-star-fill")
+                        include ../includes/modules/profile/profile-favorites
+
+                include ../includes/modules/profile/profile-sidebar

app/styles/layout/profile.scss

@@ -26,7 +26,7 @@
         flex: 1;
         margin-right: 1rem;
         max-width: 786px;
-        section {
+        > div {
             opacity: 1;
             padding-top: 0;
             position: relative;