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 = () -> ProfileTabsDirective = () ->
link = ($scope, $el, $attrs) -> 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} 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 include ../includes/modules/profile/profile-content-tabs
div.content-wrapper div.content-wrapper
div.content div.content
//include ../includes/modules/profile/profile-timeline include ../includes/modules/profile/profile-timeline
//include ../includes/modules/profile/profile-projects include ../includes/modules/profile/profile-projects
include ../includes/modules/profile/profile-contacts include ../includes/modules/profile/profile-contacts
//include ../includes/modules/profile/profile-favorites include ../includes/modules/profile/profile-favorites
include ../includes/modules/profile/profile-sidebar 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 nav.profile-contact-filters
a.active(href="", title="No Filter") all a.active(href="", title="No Filter") all
a(href="", title="Only show your team") team 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 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.icon.icon-timeline
span activity 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.icon.icon-project
span projects 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.icon.icon-team
span contacts 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.icon.icon-star-fill
span favorites 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 nav.profile-favorites-filters
a.active(href="", title="No Filter") all a.active(href="", title="No Filter") all
a(href="", title="Only show your team") projects 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++) - for (var x = 0; x < 3; x++)
div.profile-project-single div.profile-project-single
div.profile-projects-left 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++) - for (var x = 0; x < 3; x++)
// Simple message for favorites, updates, etc. // Simple message for favorites, updates, etc.
div.activity-simple div.activity-simple

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

@ -26,6 +26,16 @@
flex: 1; flex: 1;
margin-right: 1rem; margin-right: 1rem;
max-width: 786px; 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 { .profile-sidebar {
width: 150px; width: 150px;

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

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

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

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