refactor profile tabs

stable
Juanfran 2015-04-06 13:44:31 +02:00
parent ee1ba35b3d
commit 80fa5b7db3
11 changed files with 81 additions and 52 deletions

View File

@ -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)

View File

@ -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)

View File

@ -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)

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 }}")

View File

@ -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.

View File

@ -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

View File

@ -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.content-wrapper
div.content
include ../includes/modules/profile/profile-timeline
include ../includes/modules/profile/profile-projects
include ../includes/modules/profile/profile-contacts
include ../includes/modules/profile/profile-favorites
include ../includes/modules/profile/profile-sidebar
div(tg-profile-tabs)
div.content-wrapper
div.content
div(tg-profile-tab="activity", tab-title="Activity Tab", tab-icon="icon-timeline", tab-active)
include ../includes/modules/profile/profile-timeline
div(tg-profile-tab="projects", tab-title="Projects Tab", tab-icon="icon-project")
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

View File

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