diff --git a/app/coffee/modules/profile/main.coffee b/app/coffee/modules/profile/main.coffee index 87b70efa..6a97f450 100644 --- a/app/coffee/modules/profile/main.coffee +++ b/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) diff --git a/app/coffee/modules/profile/profile-tab.directive.coffee b/app/coffee/modules/profile/profile-tab.directive.coffee new file mode 100644 index 00000000..ed6859e1 --- /dev/null +++ b/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: """ +
+ +
+ """ + } + +angular.module("taigaProfile") + .directive("tgProfileTab", ProfileTabDirective) diff --git a/app/coffee/modules/profile/profile-tabs.directive.coffee b/app/coffee/modules/profile/profile-tabs.directive.coffee new file mode 100644 index 00000000..9df742dd --- /dev/null +++ b/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) diff --git a/app/partials/includes/modules/profile/profile-contacts.jade b/app/partials/includes/modules/profile/profile-contacts.jade index 3c647ed9..e3ed4c1f 100644 --- a/app/partials/includes/modules/profile/profile-contacts.jade +++ b/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 diff --git a/app/partials/includes/modules/profile/profile-content-tabs.jade b/app/partials/includes/modules/profile/profile-content-tabs.jade deleted file mode 100644 index f55c1c4d..00000000 --- a/app/partials/includes/modules/profile/profile-content-tabs.jade +++ /dev/null @@ -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 diff --git a/app/partials/includes/modules/profile/profile-favorites.jade b/app/partials/includes/modules/profile/profile-favorites.jade index 4ecae7bd..f0a723c7 100644 --- a/app/partials/includes/modules/profile/profile-favorites.jade +++ b/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 diff --git a/app/partials/includes/modules/profile/profile-projects.jade b/app/partials/includes/modules/profile/profile-projects.jade index dac39552..ab7f3e37 100644 --- a/app/partials/includes/modules/profile/profile-projects.jade +++ b/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 }}") - - diff --git a/app/partials/includes/modules/profile/profile-timeline.jade b/app/partials/includes/modules/profile/profile-timeline.jade index 509569c1..5a051585 100644 --- a/app/partials/includes/modules/profile/profile-timeline.jade +++ b/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. - diff --git a/app/partials/profile/profile-tabs.jade b/app/partials/profile/profile-tabs.jade new file mode 100644 index 00000000..9a4d3674 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/app/partials/profile/public-profile.jade b/app/partials/profile/public-profile.jade index 90037a43..298a6637 100644 --- a/app/partials/profile/public-profile.jade +++ b/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.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 diff --git a/app/styles/layout/profile.scss b/app/styles/layout/profile.scss index 59e64a5b..cb9a6610 100644 --- a/app/styles/layout/profile.scss +++ b/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;