User Home Main area

stable
Xavier Julián 2015-04-24 13:28:57 +02:00 committed by Juanfran
parent 4b215c7283
commit e46d384d92
8 changed files with 163 additions and 220 deletions

View File

@ -39,7 +39,7 @@ taiga.sessionId = taiga.generateUniqueSessionIdentifier()
configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEventsProvider, tgLoaderProvider,
$compileProvider, $translateProvider) ->
$routeProvider.when("/",
{templateUrl: "home/home.html", resolve: {loader: tgLoaderProvider.add()}})
{templateUrl: "home/home.html"})
$routeProvider.when("/projects/",
{templateUrl: "projects/projects.html", resolve: {loader: tgLoaderProvider.add()}})

View File

@ -0,0 +1,15 @@
.watching-empty {
padding: 5vh;
text-align: center;
svg {
margin: 2rem auto;
max-width: 160px;
text-align: center;
path {
fill: $whitish;
}
}
p {
@extend %small;
}
}

View File

@ -0,0 +1,61 @@
.working-on,
.watching {
.duty-single {
align-items: center;
border-bottom: 1px solid $whitish;
cursor: pointer;
display: flex;
flex-direction: row;
padding: .5rem;
&:last-child {
border: 0;
}
&.blocked {
background: rgba($red-light, .2);
.duty-type,
.duty-status {
color: $red;
}
}
}
.avatar {
flex-basis: 47px;
height: 47px;
margin-right: .5rem;
width: 47px;
}
.duty-data {
flex: 1;
margin-right: .5rem;
}
.duty-type,
.duty-status {
@extend %small;
color: $gray;
margin-right: .3rem;
}
.duty-title {
display: block;
margin-top: .25rem;
}
.duty-id {
color: $gray-light;
margin-right: .3rem;
}
.duty-project {
@extend %small;
align-self: flex-start;
color: $gray-light;
margin-left: auto;
text-align: right;
width: 120px;
}
.see-more {
display: block;
margin: 2rem 30%;
}
}
.watching {
margin-bottom: 2rem;
}

View File

@ -0,0 +1,18 @@
.home-wrapper {
display: flex;
.main {
flex: 1;
}
.project-list {
width: 250px;
}
.title-bar {
@extend %title;
@extend %larger;
align-content: center;
background: $whitish;
display: flex;
margin: 2rem 0 .5rem;
padding: .9rem 1rem;
}
}

View File

@ -1,34 +1,68 @@
doctype html
include ../includes/components/beta
div.home-projects-list(ng-controller="ProjectsController as ctrl")
.home-projects-wrapper
div.welcome-user
div.info
p(translate="PROJECT.WELCOME")
span(tg-bo-bind="ctrl.user.full_name_display")
a.logout(ng-click="ctrl.logout()" href="", title="{{'COMMON.LOGOUT' | translate}}", translate="COMMON.LOGOUT")
div.home-wrapper.centered
div.main
// TODO Hide if ASSIGNED TO ==== false
div.title-bar.working-on-title Working on
// TODO Hide if ASSIGNED TO ==== false
section.working-on
// TODO Remove and replace for an angular repeat
- for (var x = 0; x < 2; x++)
div.duty-single
img.avatar(src="https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg", title="{{ user.fullname }}")
div.duty-data
div
// TODO, ADD THEIR COLOR TO THE DUTY TYPE AND STATUS
span.duty-type User Story
span.duty-status New
a.duty-title(href="")
span.duty-id #1504
span.duty-name Documentación III: (notificaciones asíncronas + plugins front/back)
div.duty-project Taiga
div.duty-single.blocked
img.avatar(src="https://s3.amazonaws.com/uifaces/faces/twitter/rem/128.jpg", title="{{ user.fullname }}")
div.duty-data
div
// TODO, ADD THEIR COLOR TO THE DUTY TYPE AND STATUS
span.duty-type User Story
span.duty-status Blocked
a.duty-title(href="")
span.duty-id #1504
span.duty-name Documentación III: (notificaciones asíncronas + plugins front/back) Documentación III: (notificaciones asíncronas + plugins front/back)
div.duty-project Whatever
.avatar
img(tg-bo-src="ctrl.user.photo", tg-bo-alt="ctrl.user.full_name_display")
div.title-bar.watching-title Watching
.home-projects-list-inner
div.recent-projects
ul
li(ng-repeat="project in ctrl.projects.recents")
.project-content
a(href="{{ project.url }}")
h2(tg-bo-bind="project.name")
p(tg-bo-bind="project.description")
// TODO Show if WATCHERS ==== false
section.watching-empty.hidden
include ../../svg/hide.svg
p <strong>Follow</strong> the projects, User Stories, Tasks, Issues... that you want to know about :)
div.all-projects
h1(translate="PROJECT.SECTION_PROJECTS")
div(tg-projects-list)
.create-project-button-wrapper
a.button-green.create-project-button(href="", ng-click="ctrl.newProject()", title="{{'PROJECT.NAVIGATION.ACTION_CREATE_PROJECT' | translate}}")
span(translate="PROJECT.NAVIGATION.ACTION_CREATE_PROJECT")
div(tg-import-project-button)
a.button-blackish.import-project-button(href="", title="{{'PROJECT.NAVIGATION.TITLE_ACTION_IMPORT' | translate}}")
span.icon.icon-upload
input.import-file.hidden(type="file")
// TODO Show if WATCHERS ==== true
section.watching
- for (var x = 0; x < 20; x++)
div.duty-single
img.avatar(src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg", title="{{ user.fullname }}")
div.duty-data
div
// TODO, ADD THEIR COLOR TO THE DUTY TYPE AND STATUS
span.duty-type User Story
span.duty-status New
a.duty-title(href="")
span.duty-id #1504
span.duty-name Documentación III: (notificaciones asíncronas + plugins front/back)
div.duty-project Taiga
div.duty-single
img.avatar(src="https://s3.amazonaws.com/uifaces/faces/twitter/sircookieface/128.jpg", title="{{ user.fullname }}")
div.duty-data
div
// TODO, ADD THEIR COLOR TO THE DUTY TYPE AND STATUS
span.duty-type Bug
span.duty-status Ready for test
a.duty-title(href="")
span.duty-id #28
span.duty-name It is not possible to re-order stories in the sprint view .
div.duty-project Teletransportation hubs
a.button-gray.see-more(href="#", title="See more Watching US") See more
aside.project-list

View File

@ -1,191 +0,0 @@
.home-projects-list,
.home-project {
@extend %background-taiga;
align-content: center;
align-items: center;
background-color: $black;
background-position: center center;
background-size: cover;
display: flex;
height: 100%;
justify-content: center;
left: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
.welcome-user {
display: flex;
position: absolute;
right: 1rem;
top: 1rem;
p {
color: $whitish;
margin-bottom: 0;
span:before {
content: ' ';
}
}
.logout {
@extend %small;
float: right;
&:hover {
color: $red-light;
}
}
.info {
padding-right: 1rem;
}
img {
width: 40px;
}
}
}
.home-projects-wrapper {
width: 1200px;
}
.home-projects-list-inner {
display: flex;
}
.recent-projects {
flex-grow: 8;
max-width: 800px;
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
a {
height: 100%;
left: 0;
padding: 1rem;
position: absolute;
top: 0;
width: 100%;
}
li {
background-color: rgba($white, .5);
color: $whitish;
flex-basis: 230px;
flex-grow: 1;
flex-shrink: 0;
height: 130px;
margin-bottom: 1rem;
margin-right: 1rem;
overflow: hidden;
position: relative;
transition: background-color .3s linear;
width: 23.5%;
&:hover {
background-color: rgba($fresh-taiga, .5);
cursor: pointer;
transition: background-color .3s linear;
p {
color: $gray-light;
transition: color .3s linear;
}
}
}
h2 {
color: $whitish;
line-height: 2rem;
}
p {
color: $grayer;
transition: color .3s linear;
}
}
.project-content {
h2 {
margin-bottom: .5rem;
}
p {
@extend %small;
line-height: 1rem;
}
}
.all-projects {
background-color: rgba(0, 0, 0, .5);
display: flex;
flex-direction: column;
flex-grow: 1;
margin-left: 1rem;
max-height: 422px;
padding: 1rem;
width: 285px;
h1 {
color: $whitish;
flex-shrink: 0;
line-height: 1;
text-align: center;
}
.v-pagination-list {
max-height: 221px;
}
ul {
left: 0;
margin-bottom: 0;
position: relative;
top: 0;
width: 100%;
}
li {
border-bottom: 2px solid $gray;
a {
@extend %large;
@extend %title;
color: $whitish;
display: block;
line-height: 1.2rem;
padding: 1rem;
text-transform: uppercase;
width: 100%;
&:hover {
background-color: $gray;
transition: background-color .3s linear;
}
}
.active {
background-color: $gray;
transition: background-color .3s linear;
}
}
.projects-pagination {
width: 100%;
}
.create-project-button-wrapper {
display: flex;
flex-shrink: 0;
.create-project-button {
flex-grow: 8;
margin-right: .2rem;
text-align: center;
}
.import-project-button {
flex-grow: 1;
padding-left: .5rem;
padding-right: .5rem;
text-align: center;
.icon {
color: $grayer;
margin: 0;
}
}
}
.button-green {
color: $whitish;
text-align: center;
width: 100%;
&:hover {
color: $whitish;
}
}
.v-pagination-next {
margin-bottom: 1rem;
}
}

6
app/svg/hide.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="38.9mm" width="46.15mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 163.53744 137.83166">
<g transform="translate(-380.2 -247.3)">
<path d="m418.3 247.3-10.6 7.583 18.15 25.36c-7.263 4.439-13.94 9.867-19.79 15.15-13.38 12.08-22.55 24.14-22.55 24.14l-3.282 4.311 3.64 4.013s32.55 37.09 74.69 37.09c8.514 0 16.8-1.763 24.64-4.556l17.71 24.75 10.6-7.582-93.21-130.2zm38.03 23.17c-2.47 0-4.912 0.2145-7.324 0.6089l8.889 12.44c31.54 0.7498 58.2 23.91 67.98 33.53-3.958 3.792-10.25 9.469-18.55 15.44-3.071 2.209-6.362 4.397-9.807 6.464l7.622 10.67c3.458-2.136 6.735-4.353 9.793-6.553 14.9-10.72 24.9-21.5 24.9-21.5l3.947-4.254-3.772-4.411s-35.36-42.43-83.67-42.43zm-22.72 20.61 5.5 7.685c-4.822 4.603-7.667 11.04-7.668 17.91 0.00019 13.68 11.09 24.77 24.77 24.77 4.017-0.001 7.935-0.9793 11.44-2.804l7.558 10.56c-5.565 1.704-11.18 2.716-16.63 2.716-27.08 0-51.8-20.38-61.02-28.94 3.586-4.258 9.506-10.92 17.25-17.91 5.695-5.14 12.19-10.11 18.82-13.98z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB