diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index 373010d9..c7ed28cb 100644 --- a/app/coffee/app.coffee +++ b/app/coffee/app.coffee @@ -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()}}) diff --git a/app/modules/home/styles/home-project-list b/app/modules/home/styles/home-project-list new file mode 100644 index 00000000..e69de29b diff --git a/app/modules/home/styles/home-watching.scss b/app/modules/home/styles/home-watching.scss new file mode 100644 index 00000000..e4f41429 --- /dev/null +++ b/app/modules/home/styles/home-watching.scss @@ -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; + } +} diff --git a/app/modules/home/styles/home-working.scss b/app/modules/home/styles/home-working.scss new file mode 100644 index 00000000..808bc378 --- /dev/null +++ b/app/modules/home/styles/home-working.scss @@ -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; +} diff --git a/app/modules/home/styles/home.scss b/app/modules/home/styles/home.scss new file mode 100644 index 00000000..0166400b --- /dev/null +++ b/app/modules/home/styles/home.scss @@ -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; + } +} diff --git a/app/partials/home/home.jade b/app/partials/home/home.jade index 2eb47170..5cecaa68 100644 --- a/app/partials/home/home.jade +++ b/app/partials/home/home.jade @@ -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 Follow 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 diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss deleted file mode 100644 index bd805c70..00000000 --- a/app/styles/modules/home-projects-list.scss +++ /dev/null @@ -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; - } -} diff --git a/app/svg/hide.svg b/app/svg/hide.svg new file mode 100644 index 00000000..0abadf8e --- /dev/null +++ b/app/svg/hide.svg @@ -0,0 +1,6 @@ + + + + + +