refactor profile tabs
parent
ee1ba35b3d
commit
80fa5b7db3
|
@ -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)
|
||||
|
|
|
@ -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)
|
|
@ -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)
|
|
@ -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
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
|
|
|
@ -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 }}")
|
||||
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
flex: 1;
|
||||
margin-right: 1rem;
|
||||
max-width: 786px;
|
||||
section {
|
||||
> div {
|
||||
opacity: 1;
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
|
|
Loading…
Reference in New Issue