taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tabs behavior

stable
Xavier Julián 2015-03-27 12:52:05 +01:00 committed by Juanfran
parent d3a38b9fb5
commit a38f8fcb86
10 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/coffee/modules/profile/main.coffee
View File

@ -28,8 +28,17 @@ module = angular.module("taigaProfile")
#############################################################################
ProfileTabsDirective = () ->
link = ($scope, $el, $attrs) ->
console.log $el
$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}

6
app/partials/home/home-logged-in.jade
View File

@ -6,8 +6,8 @@ div.profile.centered
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-timeline
include ../includes/modules/profile/profile-projects
include ../includes/modules/profile/profile-contacts
//include ../includes/modules/profile/profile-favorites
include ../includes/modules/profile/profile-favorites
include ../includes/modules/profile/profile-sidebar

2
app/partials/includes/modules/profile/profile-contacts.jade
View File

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

8
app/partials/includes/modules/profile/profile-content-tabs.jade
View File

@ -1,13 +1,13 @@
nav.profile-content-tabs
a.tab(href="", title="Activity Tab")
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")
a.tab(href="", title="Projects Tab", ng-click="toggleTab()", data-selected="profile-projects")
span.icon.icon-project
span projects
a.tab.active(href="", title="Contacts Tab")
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")
a.tab(href="", title="Favorites Tab", ng-click="toggleTab()", data-selected="profile-favorites")
span.icon.icon-star-fill
span favorites

2
app/partials/includes/modules/profile/profile-favorites.jade
View File

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

2
app/partials/includes/modules/profile/profile-projects.jade
View File

@ -1,4 +1,4 @@
section.profile-projects
section.profile-projects(ng-show="tabSelected == 'profile-projects'")
- for (var x = 0; x < 3; x++)
div.profile-project-single
div.profile-projects-left

2
app/partials/includes/modules/profile/profile-timeline.jade
View File

@ -1,4 +1,4 @@
section.profile-timeline
section.profile-timeline(ng-show="tabSelected == 'profile-timeline'")
- for (var x = 0; x < 3; x++)
// Simple message for favorites, updates, etc.
div.activity-simple

10
app/styles/layout/profile.scss
View File

@ -26,6 +26,16 @@
flex: 1;
margin-right: 1rem;
max-width: 786px;
section {
opacity: 1;
padding-top: 0;
position: relative;
transition: all .3s cubic-bezier(.09, .43, .35, .95);
&.ng-hide {
opacity: 0;
padding-top: .5vh;
}
}
}
.profile-sidebar {
width: 150px;

12
app/styles/modules/profile/profile-content-tabs.scss
View File

@ -1,22 +1,26 @@
.profile-content-tabs {
border-top: 1px solid $whitish;
z-index: 9;
.tab {
background: $white;
color: $gray-light;
display: inline-block;
padding: .4rem 1rem;
&:hover,
&.active {
color: $grayer;
.icon {
color: $green-taiga;
}
transition: color .2s linear;
}
&.active {
background: $white;
border-left: 1px solid $whitish;
border-right: 1px solid $whitish;
position: relative;
top: 1px;
transition: color .2s linear;
.icon {
color: $green-taiga;
transition: color .2s linear;
}
}
}
.icon {

1
app/styles/modules/profile/profile-timeline.scss
View File

@ -1,4 +1,3 @@
.profile-timeline {
border-top: 1px solid $whitish;
%profile-activity {