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

Dropdown Lists for organizations and users

stable
Xavier Julián 2015-04-17 08:43:07 +02:00 committed by Juanfran
parent 8442cb1d0b
commit 10739b4764
6 changed files with 65 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/partials/includes/modules/navigation-bar/dropdown-organization-list.jade Normal file
View File

@ -0,0 +1,6 @@
div.navbar-dropdown.dropdown-organization-list
ul
- for (var x = 0; x < 4; x++)
li
a(href="#", title="{{ project.title }}") Organization 1
a.create-organization-btn.button-green(href="#", title="Create Organization") Create Organization

7
app/partials/includes/modules/navigation-bar/dropdown-project-list.jade Normal file
View File

@ -0,0 +1,7 @@
div.navbar-dropdown.dropdown-project-list
ul
- for (var x = 0; x < 9; x++)
li
a(href="#", title="{{ project.title }}") Project 1
a.see-more-projects-btn.button-gray(href="#", title="See more projects") See more
a.create-project-btn.button-green(href="#", title="Create project") Create project

19
app/partials/includes/modules/navigation-bar/dropdown-user.jade Normal file
View File

@ -0,0 +1,19 @@
div.navbar-dropdown.dropdown-user
ul
li
a(href="#", title="{{ user.fullname }} profile") View Profile
li
a(href="#", title="Edit your profile") Edit Profile
li
a(href="#", title="Edit your organizations") Edit Organizations
li
a(href="#", title="Edit your settings") Settings
li
a(href="#", title="Edit your notifications") Notifications
li
a(href="#", title="Send feedback") Feedback
li
a(href="#", title="Go to support") Help
li
a(href="#", title="Logout") Logout

26
app/partials/includes/modules/navigation-bar/navbar.jade
View File

@ -7,18 +7,18 @@ nav.navbar
div.nav-right
a(href="", title="Dashboard")
include ../../../../svg/dashboard.svg
div.top-nav-dropdown
div.topnav-dropdown-wrapper
a(href="", title="Projects")
include ../../../../svg/projects.svg
div.dropdown-project-list
ul
- for (var x = 0; x < 9; x++)
li
a(href="#", title="{{ project.title }}") Project 1
a.see-more-projects-btn.button-gray(href="#", title="See more projects") See more
a.create-project-btn.button-green(href="#", title="Create project") Create project
a(href="#", title="Organizations")
include ../../../../svg/organizations.svg
a.user-avatar(href="#", title="{{ user.fullname }} profile")
span Sebastián Sanchís
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture")
include dropdown-project-list
div.topnav-dropdown-wrapper
a(href="#", title="Organizations")
include ../../../../svg/organizations.svg
include dropdown-organization-list
div.topnav-dropdown-wrapper
a.user-avatar(href="#", title="{{ user.fullname }} profile")
span Sebastián Sanchís
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", alt="{{ user.fullname }} picture")
include dropdown-user

2
app/styles/dependencies/colors.scss
View File

@ -33,5 +33,5 @@ $star-fill: #edd400;
// Top menu values
$top-icon-color: #11241f;
$dropdown-width: 500px;
$dropdown-width: 350px;
$dropdown-color: rgba(darken($grayer, 20%), 1);

23
app/styles/modules/common/navbar.scss
View File

@ -42,7 +42,7 @@
a {
padding: .5rem 2rem;
}
.dropdown-project-list {
.navbar-dropdown {
a {
padding: .8rem .5rem;
}
@ -82,10 +82,10 @@
transition: all .2s;
}
}
.top-nav-dropdown {
.topnav-dropdown-wrapper {
position: relative;
&:hover {
.dropdown-project-list {
.navbar-dropdown {
display: block;
}
}
@ -101,11 +101,18 @@
}
}
.dropdown-project-list {
.navbar-dropdown {
@extend %dropdown;
background: $blackish;
border: 1px solid $black;
padding: .3rem;
&.dropdown-user {
left: calc(50% - 230px/2);
min-width: 230px;
ul {
margin-bottom: 0;
}
}
ul {
@include arrow('bottom', $blackish, $blackish, 1, 12);
margin: 0;
@ -120,6 +127,7 @@
color: $fresh-taiga;
}
&.see-more-projects-btn,
&.create-organization-btn,
&.create-project-btn {
color: $white;
padding: .5rem;
@ -133,3 +141,10 @@
}
}
}
// Generated with Bounce.js. Edit at http://goo.gl/yZlDYR
@keyframes dropdownFade {
0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400, 0, 0, 1); }
}