From e27f9c0cda227ecf9fdcbc3987865d7975dd1f52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 11 Jun 2014 12:47:51 +0200 Subject: [PATCH 01/10] Us-detail basic structure --- app/partials/us-detail.jade | 31 ++++++++++++ app/partials/views/modules/attachments.jade | 20 ++++++++ app/styles/dependencies/typography.scss | 52 ++++++++++----------- app/styles/layout/us-detail.scss | 32 +++++++++++++ app/styles/main.scss | 2 + app/styles/modules/attachments.scss | 1 + app/us-detail.jade | 31 ------------ app/views/modules/attachments.jade | 9 ---- 8 files changed, 112 insertions(+), 66 deletions(-) create mode 100644 app/partials/us-detail.jade create mode 100644 app/partials/views/modules/attachments.jade create mode 100644 app/styles/layout/us-detail.scss create mode 100644 app/styles/modules/attachments.scss delete mode 100644 app/us-detail.jade delete mode 100644 app/views/modules/attachments.jade diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade new file mode 100644 index 00000000..139f34c3 --- /dev/null +++ b/app/partials/us-detail.jade @@ -0,0 +1,31 @@ +extends layout + +block head + title Taiga Project management web application with scrum in mind! + +block content + div.main.us-detail + div.us-detail-header + h1 + span ProjectName + span.green User Story + a.button.button-green(href="", title="Edit") Edit + section.us-story-main-data + h2.us-title + span.us-number 125 + span.us-name Tagear contenido dentro de las catas privadas + div.user-story-tags + - for(var y = 0; y < 6; y++) + include views/components/tag + input(type="text", placeholder="Add Tag") + section.us-content + p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%" + p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión + p Test de aceptación + ul + li Entro en la aplicación + li Compruebo que el indicador crece + p Prototipos
share.axure.com/lalala + p Prototipos
share.axure.com/lalala + include views/modules/attachments + sidebar.menu-secondary.sidebar diff --git a/app/partials/views/modules/attachments.jade b/app/partials/views/modules/attachments.jade new file mode 100644 index 00000000..030860d7 --- /dev/null +++ b/app/partials/views/modules/attachments.jade @@ -0,0 +1,20 @@ +section.attachments + div.attachments-header + div.attachments-inner + h3.attachments-title + span.icon.icon-attachment + span.attachments-num {{5}} + span.attachemnts-text attachments + a.button.button-gray(href="", title="Add new attachment") + span +new file + div.attachment-body + div.attachments-inner + div.attachment-single + div.attachment-name + span.icon.icon-document + span pefildeusuario.png + div.attachment-comment + span Comentario sobre el contenido + span.attachment-size (125kb.) + a.icon.icon-edit(href="","Edit") + a.icon.icon-drag-v(href="","Drag") diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index 71a47cd8..e390eeab 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -115,80 +115,80 @@ a:visited { } .icon-backlog:before { - content: 'a'; + content: 'a'; } .icon-issues:before { - content: 'b'; + content: 'b'; } .icon-kanban:before { - content: 'c'; + content: 'c'; } .icon-search:before { - content: 'd'; + content: 'd'; } .icon-video:before { - content: 'e'; + content: 'e'; } .icon-wiki:before { - content: 'f'; + content: 'f'; } .icon-settings:before { - content: 'g'; + content: 'g'; } .icon-move:before { - content: 'i'; + content: 'i'; } .icon-filter:before { - content: 'j'; + content: 'j'; } .icon-tag:before { - content: 'k'; + content: 'k'; } .icon-bulk:before { - content: 'l'; + content: 'l'; } .icon-arrow-up:before { - content: 'h'; + content: 'h'; } .icon-arrow-right:before { - content: 'm'; + content: 'm'; } .icon-arrow-left:before { - content: 'n'; + content: 'n'; } .icon-arrow-bottom:before { - content: 'o'; + content: 'o'; } .icon-edit:before { - content: 'p'; + content: 'p'; } .icon-delete:before { - content: 'q'; + content: 'q'; } .icon-iocaine:before { - content: 'r'; + content: 'r'; } .icon-drag-h:before { - content: 's'; + content: 's'; } .icon-drag-v:before { - content: 't'; + content: 't'; } .icon-fontawesome-webfont:before { - content: 'u'; + content: 'u'; } .icon-fontawesome-webfont-1:before { - content: 'v'; + content: 'v'; } .icon-clipboard-notes:before { - content: 'w'; + content: 'w'; } .icon-male:before { - content: 'x'; + content: 'x'; } .icon-plus:before { - content: 'y'; + content: 'y'; } .icon-attachment:before { - content: 'A'; + content: 'A'; } diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss new file mode 100644 index 00000000..7e9b9471 --- /dev/null +++ b/app/styles/layout/us-detail.scss @@ -0,0 +1,32 @@ +.us-detail-header { + position: relative; + .button { + color: $white; + position: absolute; + right: 0; + top: 0; + } +} +.us-story-main-data { + margin-bottom: 2rem; + .us-title { + @extend %xlarge; + background: $whitish; + font-family: 'DroidSans'; + padding: 2rem 1rem; + .us-number { + color: $gray-light; + margin-right: .5rem; + } + .us-name { + color: $grayer; + } + } +} + +.user-story-tags { + input { + display: inline-block; + width: 14rem; + } +} diff --git a/app/styles/main.scss b/app/styles/main.scss index a4d2d3bf..d5d64ae8 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -29,6 +29,7 @@ $prefix-for-spec: true; @import 'layout/base'; @import 'layout/backlog'; @import 'layout/taskboard'; +@import 'layout/us-detail'; //Modules @import 'modules/nav'; @@ -39,6 +40,7 @@ $prefix-for-spec: true; @import 'modules/filters'; @import 'modules/lightbox'; @import 'modules/taskboard-table'; +@import 'modules/attachments'; @import 'modules/search-filter'; @import 'modules/search-result-table'; diff --git a/app/styles/modules/attachments.scss b/app/styles/modules/attachments.scss new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/app/styles/modules/attachments.scss @@ -0,0 +1 @@ + diff --git a/app/us-detail.jade b/app/us-detail.jade deleted file mode 100644 index 62b6aaa6..00000000 --- a/app/us-detail.jade +++ /dev/null @@ -1,31 +0,0 @@ -extends layout - -block head - title Taiga Project management web application with scrum in mind! - -block content - div.main.us-detail - header - h1 - span ProjectName - span.green User Story - a.button.button-green(href="", title="Edit") Edit - section.us-story-main-data - h2.us-title - span.us-number 125 - span-us-name Tagear contenido dentro de las catas privadas - div.user-story-tags - - for(var y = 0; y < 6; y++) - include views/components/tag - input(type="text", placeholder="Add Tag") - div.us-description - p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%" - p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión - p Test de aceptación - ul - li Entro en la aplicación - li Compruebo que el indicador crece - p Prototipos
share.axure.com/lalala - p Prototipos
share.axure.com/lalala - include views/modules/attachments - sidebar.menu-secondary.sidebar diff --git a/app/views/modules/attachments.jade b/app/views/modules/attachments.jade deleted file mode 100644 index d9dbaae8..00000000 --- a/app/views/modules/attachments.jade +++ /dev/null @@ -1,9 +0,0 @@ -section.attachments - div.attachments-header - div.attachments-inner - h3.attachments-title - span.icon.icon-attachment - span.attachments-num {{5}} - span.attachemnts-text attachments - a(href="", title="Add new attachment") - span.icon.icon-plus From 4cb150c2d6d4ae53dcce021de4b1186b2dca9a20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 11 Jun 2014 14:12:09 +0200 Subject: [PATCH 02/10] Attachments table --- app/partials/views/modules/attachments.jade | 15 ++++---- app/styles/dependencies/mixins.scss | 10 ++++- app/styles/layout/us-detail.scss | 12 ++++++ app/styles/modules/attachments.scss | 41 +++++++++++++++++++++ 4 files changed, 69 insertions(+), 9 deletions(-) diff --git a/app/partials/views/modules/attachments.jade b/app/partials/views/modules/attachments.jade index 030860d7..f7a4cd08 100644 --- a/app/partials/views/modules/attachments.jade +++ b/app/partials/views/modules/attachments.jade @@ -1,18 +1,17 @@ section.attachments div.attachments-header - div.attachments-inner - h3.attachments-title - span.icon.icon-attachment - span.attachments-num {{5}} - span.attachemnts-text attachments + h3.attachments-title + span.icon.icon-attachment + span.attachments-num 5 + span.attachments-text attachments a.button.button-gray(href="", title="Add new attachment") span +new file div.attachment-body - div.attachments-inner - div.attachment-single + - for(var x = 0; x < 3; x++) + div.single-attachment div.attachment-name span.icon.icon-document - span pefildeusuario.png + a(href="", title="Attachment pefildeusuario.png") pefildeusuario.png div.attachment-comment span Comentario sobre el contenido span.attachment-size (125kb.) diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index be90c214..eb10e249 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -10,7 +10,7 @@ } // Table Flex - http://devbryce.com/site/flexbox/ -@mixin table-flex() { +@mixin table-flex { align-content: stretch; align-items: stretch; display: flex; @@ -32,3 +32,11 @@ @mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) { box-shadow: $h-shadow $v-shadow $blur $spread $color; } + +@mixin clearfix { + &:after { + clear: both; + content: ''; + display: table; + } +} diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index 7e9b9471..bf2fd2d2 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -24,6 +24,18 @@ } } +.us-content { + ul { + margin-left: 1rem; + } + li { + list-style-type: disc; + } + a { + color: $green-taiga; + } +} + .user-story-tags { input { display: inline-block; diff --git a/app/styles/modules/attachments.scss b/app/styles/modules/attachments.scss index 8b137891..3fb65111 100644 --- a/app/styles/modules/attachments.scss +++ b/app/styles/modules/attachments.scss @@ -1 +1,42 @@ +.attachments-header { + background: $whitish; + @include clearfix; + padding: .5rem 1rem; + .button { + float: right; + padding: .2rem 6rem; + } + .icon, + .attachments-num, + .attachments-text { + @extend %medium; + margin-right: .5rem; + position: relative; + top: 2px; + } +} +.single-attachment { + @include table-flex(); + @extend %small; + border-bottom: 1px solid #cdcdcd; + padding: 1rem 0 1rem 1rem; + &:last-child { + border: 0; + } + .attachment-name { + @include table-flex-child(1, 200px); + } + .attachment-comment { + @include table-flex-child(3, 300px); + .attachment-size { + color: $gray-light; + margin-left: .5rem; + } + } + .icon { + @extend %large; + color: $gray-light; + display: none; + } +} From 507747be7ca421ac50741acde6c599fa1e631807 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 11 Jun 2014 14:12:26 +0200 Subject: [PATCH 03/10] Minor backlog fixes --- app/partials/views/modules/backlog-table.jade | 1 + app/styles/modules/backlog-table.scss | 27 +++++++++++++++---- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/app/partials/views/modules/backlog-table.jade b/app/partials/views/modules/backlog-table.jade index b0ade700..66806915 100644 --- a/app/partials/views/modules/backlog-table.jade +++ b/app/partials/views/modules/backlog-table.jade @@ -65,6 +65,7 @@ section.backlog-table a(href="", title="Status 2") Status 2 li a(href="", title="Status 3") Status 3 + a.icon.icon-drag-v(href="", title="Drag") hr.doom-line - for (var x = 0; x < 50; x++) div.row.table-main diff --git a/app/styles/modules/backlog-table.scss b/app/styles/modules/backlog-table.scss index 78e6389d..9f3392de 100644 --- a/app/styles/modules/backlog-table.scss +++ b/app/styles/modules/backlog-table.scss @@ -4,12 +4,12 @@ .row { @include table-flex(); padding: 1rem 0 1rem 1rem; + position: relative; text-align: left; width: 100%; &:hover { background: lighten($green-taiga, 60%); @include transition (background .2s ease-in); - cursor: move; .us-settings { opacity: 1; @include transition (opacity .2s ease-in); @@ -33,6 +33,7 @@ white-space: nowrap; } .icon { + @extend %medium; color: $gray-light; &:hover { color: $grayer; @@ -51,9 +52,6 @@ .backlog-table-header, .sub-title, .table-main { - &:hover { - background: transparent; - } .user-stories { @include table-flex-child(20, 100px, 0, 0); } @@ -64,6 +62,12 @@ @include table-flex-child(1, 100px, 0, 0); } } + .backlog-table-header, + .sub-title { + &:hover { + background: transparent; + } + } .sub-title { @extend %small; background: $whitish; @@ -87,7 +91,6 @@ &:hover { background: $red; @include transition (background .2s ease-in); - cursor: move; } a { color: $white; @@ -96,6 +99,7 @@ } } .icon { + @extend %medium; color: $white; &:hover { color: $white; @@ -137,4 +141,17 @@ opacity: 0; @include transition (opacity .2s ease-in); } + .icon-drag-v { + @include transition(color .2s linear); + @extend %large; + color: $gray-light; + position: absolute; + right: .5rem; + top: 30%; + &:hover { + @include transition(color .2s linear); + color: $grayer; + cursor: move; + } + } } From 711074eed98294bd3b7c341cf0ec6e1bedb200aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 11 Jun 2014 16:17:58 +0200 Subject: [PATCH 04/10] Attachments module --- app/fonts/taiga.eot | Bin 5432 -> 5432 bytes app/fonts/taiga.ttf | Bin 5276 -> 5276 bytes app/fonts/taiga.woff | Bin 3652 -> 3652 bytes app/partials/views/modules/attachments.jade | 9 ++-- app/styles/dependencies/typography.scss | 2 +- app/styles/modules/attachments.scss | 43 +++++++++++++++++++- 6 files changed, 48 insertions(+), 6 deletions(-) diff --git a/app/fonts/taiga.eot b/app/fonts/taiga.eot index 775eee9d0b86b82eb569555832ca692bc8e12c4e..50000c398ba6dc7e03bae93708534dd1deab800f 100644 GIT binary patch delta 72 zcmdm?wL@!y4fBT|dK2yQnQm)N+z`t=J5+PB0Ar!F-j5IQ{5D@1xS1G0;QT%=aTvXM L4&y{&ZX^K!rXCi9 delta 72 zcmdm?wL@!y4YNX(;Y9mH^ef}+H!ZY0Ar!FVUSm&CI+xL2ZRCu{W=J$v-b>50cPnQi2wiq delta 74 zcmV-Q0JZnv-b>50mVrmjsO4v diff --git a/app/partials/views/modules/attachments.jade b/app/partials/views/modules/attachments.jade index f7a4cd08..4dac8daa 100644 --- a/app/partials/views/modules/attachments.jade +++ b/app/partials/views/modules/attachments.jade @@ -11,9 +11,12 @@ section.attachments div.single-attachment div.attachment-name span.icon.icon-document - a(href="", title="Attachment pefildeusuario.png") pefildeusuario.png + a(href="", title="Attachment pefildeusuario.png") pefildeusuariopefildeusuariopefildeusuario.png div.attachment-comment span Comentario sobre el contenido span.attachment-size (125kb.) - a.icon.icon-edit(href="","Edit") - a.icon.icon-drag-v(href="","Drag") + a.settings.icon.icon-edit(href="","Edit") + a.settings.icon.icon-drag-v(href="","Drag") + a.more-attachments(href="", title="show atachments history") + span + show atachments history + span.more-attachments-num (3 more) diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index e390eeab..547435f0 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -177,7 +177,7 @@ a:visited { .icon-fontawesome-webfont:before { content: 'u'; } -.icon-fontawesome-webfont-1:before { +.icon-document:before { content: 'v'; } .icon-clipboard-notes:before { diff --git a/app/styles/modules/attachments.scss b/app/styles/modules/attachments.scss index 3fb65111..cb4e44b6 100644 --- a/app/styles/modules/attachments.scss +++ b/app/styles/modules/attachments.scss @@ -1,3 +1,7 @@ +.attachments { + margin-bottom: 2rem; +} + .attachments-header { background: $whitish; @include clearfix; @@ -21,22 +25,57 @@ @extend %small; border-bottom: 1px solid #cdcdcd; padding: 1rem 0 1rem 1rem; + position: relative; &:last-child { border: 0; } .attachment-name { + @include ellipsis(200px); @include table-flex-child(1, 200px); + padding-right: 1rem; + .icon { + margin-right: .5rem; + } } .attachment-comment { - @include table-flex-child(3, 300px); + @include table-flex-child(10, 300px); .attachment-size { color: $gray-light; margin-left: .5rem; } } - .icon { + .settings { @extend %large; color: $gray-light; display: none; } + &:hover { + @include transition (background .2s ease-in); + background: lighten($green-taiga, 60%); + .settings { + @include transition (opacity .2s ease-in); + display: block; + position: absolute; + top: 1rem; + } + .icon-edit { + right: 4rem; + } + .icon-drag-v { + cursor: move; + right: 1rem; + } + } +} + +.more-attachments { + @extend %small; + border-bottom: 1px solid $gray-light; + color: $gray-light; + display: block; + padding: 1rem 0 1rem 1rem; + .more-attachments-num { + color: $green-taiga; + margin-left: .5rem; + } } From 998bd17732fd3c8072e1530301072513e1060b9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 11 Jun 2014 17:57:00 +0200 Subject: [PATCH 05/10] Us detail comments --- app/partials/us-detail.jade | 13 ++++++ app/partials/views/modules/activity.jade | 15 +++++++ app/partials/views/modules/comments.jade | 16 +++++++ app/partials/views/modules/nav.jade | 2 +- app/styles/layout/us-detail.scss | 32 ++++++++++++++ app/styles/main.scss | 2 + app/styles/modules/activity.scss | 41 ++++++++++++++++++ app/styles/modules/comments.scss | 55 ++++++++++++++++++++++++ 8 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 app/partials/views/modules/activity.jade create mode 100644 app/partials/views/modules/comments.jade create mode 100644 app/styles/modules/activity.scss create mode 100644 app/styles/modules/comments.scss diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index 139f34c3..1a4a893d 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -28,4 +28,17 @@ block content p Prototipos
share.axure.com/lalala p Prototipos
share.axure.com/lalala include views/modules/attachments + section.us-activity + ul.us-activity-tabs + li + a.active(href="#") + span.icon.icon-bulk + span.tab-title Comments + + li + a(href="#") + span.icon.icon-issues + span.tab-title Activity + include views/modules/comments + //include views/modules/activity sidebar.menu-secondary.sidebar diff --git a/app/partials/views/modules/activity.jade b/app/partials/views/modules/activity.jade new file mode 100644 index 00000000..2a146327 --- /dev/null +++ b/app/partials/views/modules/activity.jade @@ -0,0 +1,15 @@ +div.us-activity + a.activity-title(href="", title="Show activity") + span made 3 changes + span.icon.icon-arrow-up + - for(var y = 0; y < 2; y++) + div.activity-inner + div.activity-changed + span US status + div.activity-fromto + p + strong from
+ Este es el título que tenía la historia + p + strong to
+ Este es el título que tenía la historia modificado diff --git a/app/partials/views/modules/comments.jade b/app/partials/views/modules/comments.jade new file mode 100644 index 00000000..0f0cfac1 --- /dev/null +++ b/app/partials/views/modules/comments.jade @@ -0,0 +1,16 @@ +section.us-comments + div.add-comment + textarea(placeholder="Write here a new commet") + a.button.button-green(href="", title="Comment") Comment + div.comment-list + - for(var x = 0; x < 6; x++) + div.comment-single + div.comment-user + a.avatar(href="", title="User preferences") + img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username") + div.comment-content + a.username(href="", title="User name") User Name + include activity + p.comment + Para un escenario en el cual ya están cargados en la DB la lista de usuarios para un Grupo o varios, tenemos que tener la posibilidad de lanzar a todos los miembros de un grupo y/o a un individuo en concreto, un mail. El mail lleva un bloque de texto (pendiende de que os lo pasemos) y también llevará un link que llevará a una pantalla donde ponga la pw que usará a partir de ese momento. Si elige su PW dentro de las reglas de PW establecidas (pendientes de decidir), el sistema le logará automáticamente. + p.date 15 junio 2014 15:30h diff --git a/app/partials/views/modules/nav.jade b/app/partials/views/modules/nav.jade index edb2b024..bffc7f62 100644 --- a/app/partials/views/modules/nav.jade +++ b/app/partials/views/modules/nav.jade @@ -37,7 +37,7 @@ nav.menu li a(href="", title="Logout") Logout a.avatar(href="", title="User preferences") - img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username") + img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username") div.settings a(href="", title="User preferences") Pilar a(href="", title="Site preferences") diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index bf2fd2d2..ffab73b0 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -42,3 +42,35 @@ width: 14rem; } } + +.us-activity-tabs { + border-bottom: 3px solid $gray-light; + font-family: 'ostrichSans'; + padding: .5rem 0; + li { + @extend %large; + display: inline-block; + &:first-child { + border-right: 1px solid $gray-light; + } + } + a { + @include transition(color .2s ease-in); + color: $gray-light; + padding: 0 2rem; + &.active { + color: $grayer; + } + &:hover { + @include transition(color .2s ease-in); + color: $green-taiga; + } + } + .icon { + margin-right: .5rem; + } +} + +.comment-list { + padding: 1rem 2rem; +} diff --git a/app/styles/main.scss b/app/styles/main.scss index d5d64ae8..b5a4f2b0 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -43,6 +43,8 @@ $prefix-for-spec: true; @import 'modules/attachments'; @import 'modules/search-filter'; @import 'modules/search-result-table'; +@import 'modules/comments'; +@import 'modules/activity'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/activity.scss b/app/styles/modules/activity.scss new file mode 100644 index 00000000..ff658130 --- /dev/null +++ b/app/styles/modules/activity.scss @@ -0,0 +1,41 @@ +.us-activity { + margin-bottom: 1rem; + padding: 0 1rem; +} + +.activity-title { + display: block; + padding: .5rem; + &:hover { + .icon { + @include transform(rotate(180deg)); + @include transition(all.2s linear); + color: $green-taiga; + } + } + .icon { + @include transform(rotate(0)); + @include transition(all.2s linear); + color: $grayer; + float: right; + } +} + +.activity-inner { + @include table-flex; + border-bottom: 1px solid $gray-light; + padding: 1rem 0; + &:last-child { + border-bottom: 0; + } + .activity-changed, + .activity-fromto { + @include table-flex-child(1, 50px, 0); + } + .activity-changed { + font-family: 'DroidSans-Bold'; + } + .activity-fromto { + @extend %small; + } +} diff --git a/app/styles/modules/comments.scss b/app/styles/modules/comments.scss new file mode 100644 index 00000000..e6918bc5 --- /dev/null +++ b/app/styles/modules/comments.scss @@ -0,0 +1,55 @@ +.add-comment { + @include clearfix; + textarea { + @include transition(height .3s ease-in); + &:focus { + @include transition(height .3s ease-in); + height: 150px; + +a { + display: inline-block; + } + } + } + a { + color: $white; + display: none; + float: right; + } +} + +.comment-single { + @include table-flex; + border-bottom: 2px solid $gray-light; + padding: 1rem 0; + &:first-child { + margin-top: 0; + } + &:last-child { + border-bottom: 0; + } + .username { + color: $green-taiga; + display: block; + margin-bottom: 1rem; + } + .comment-user { + @include table-flex-child(1, 50px, 0); + img { + max-width: 70px; + width: 100%; + } + } + .comment-content { + @include table-flex-child(20, 150px, 0); + } + .us-activity { + background: $whitish; + .activity-inner { + display: none; + } + } + .date { + @extend %small; + color: $gray-light; + } +} From ca92b6e14fc980b257ac9988b146af585055bdde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Thu, 12 Jun 2014 13:43:54 +0200 Subject: [PATCH 06/10] Activity + comments in Us detail --- app/partials/us-detail.jade | 2 +- app/partials/views/modules/activity.jade | 37 ++++++++------ .../views/modules/comment-activity.jade | 15 ++++++ app/partials/views/modules/comments.jade | 7 ++- app/styles/main.scss | 1 + app/styles/modules/activity.scss | 49 +++++++++++++++++++ app/styles/modules/comment-activity.scss | 41 ++++++++++++++++ app/styles/modules/comments.scss | 35 +++++++++++-- 8 files changed, 168 insertions(+), 19 deletions(-) create mode 100644 app/partials/views/modules/comment-activity.jade create mode 100644 app/styles/modules/comment-activity.scss diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index 1a4a893d..7fe56c70 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -40,5 +40,5 @@ block content span.icon.icon-issues span.tab-title Activity include views/modules/comments - //include views/modules/activity + //-include views/modules/activity sidebar.menu-secondary.sidebar diff --git a/app/partials/views/modules/activity.jade b/app/partials/views/modules/activity.jade index 2a146327..e60d3cda 100644 --- a/app/partials/views/modules/activity.jade +++ b/app/partials/views/modules/activity.jade @@ -1,15 +1,24 @@ div.us-activity - a.activity-title(href="", title="Show activity") - span made 3 changes - span.icon.icon-arrow-up - - for(var y = 0; y < 2; y++) - div.activity-inner - div.activity-changed - span US status - div.activity-fromto - p - strong from
- Este es el título que tenía la historia - p - strong to
- Este es el título que tenía la historia modificado + - for(var x = 0; x < 6; x++) + div.activity-single + div.activity-user + a.avatar(href="", title="User preferences") + img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username") + div.activity-content + div.activity-username + a.username(href="", title="User name") User Name + span.date 15 junio 2014 15:30h + - for(var y = 0; y < 2; y++) + div.activity-inner + div.activity-changed + span US status + div.activity-fromto + p + strong from
+ Este es el título que tenía la historia + p + strong to
+ Este es el título que tenía la historia modificado + a.more-activity(href="", title="show more comments") + span show previous activity + span.prev-activity-num (3 more) diff --git a/app/partials/views/modules/comment-activity.jade b/app/partials/views/modules/comment-activity.jade new file mode 100644 index 00000000..2a146327 --- /dev/null +++ b/app/partials/views/modules/comment-activity.jade @@ -0,0 +1,15 @@ +div.us-activity + a.activity-title(href="", title="Show activity") + span made 3 changes + span.icon.icon-arrow-up + - for(var y = 0; y < 2; y++) + div.activity-inner + div.activity-changed + span US status + div.activity-fromto + p + strong from
+ Este es el título que tenía la historia + p + strong to
+ Este es el título que tenía la historia modificado diff --git a/app/partials/views/modules/comments.jade b/app/partials/views/modules/comments.jade index 0f0cfac1..787e945a 100644 --- a/app/partials/views/modules/comments.jade +++ b/app/partials/views/modules/comments.jade @@ -10,7 +10,12 @@ section.us-comments img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username") div.comment-content a.username(href="", title="User name") User Name - include activity + //- includes module activity + include comment-activity p.comment Para un escenario en el cual ya están cargados en la DB la lista de usuarios para un Grupo o varios, tenemos que tener la posibilidad de lanzar a todos los miembros de un grupo y/o a un individuo en concreto, un mail. El mail lleva un bloque de texto (pendiende de que os lo pasemos) y también llevará un link que llevará a una pantalla donde ponga la pw que usará a partir de ese momento. Si elige su PW dentro de las reglas de PW establecidas (pendientes de decidir), el sistema le logará automáticamente. p.date 15 junio 2014 15:30h + a.delete-comment.icon.icon-delete(href="", title="delete comment") + a.more-comments(href="", title="show more comments") + span show previous comments + span.prev-comments-num (3 more) diff --git a/app/styles/main.scss b/app/styles/main.scss index b5a4f2b0..342b0fc0 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -44,6 +44,7 @@ $prefix-for-spec: true; @import 'modules/search-filter'; @import 'modules/search-result-table'; @import 'modules/comments'; +@import 'modules/comment-activity'; @import 'modules/activity'; // Responsive diff --git a/app/styles/modules/activity.scss b/app/styles/modules/activity.scss index ff658130..8b7e986f 100644 --- a/app/styles/modules/activity.scss +++ b/app/styles/modules/activity.scss @@ -39,3 +39,52 @@ @extend %small; } } + +.activity-single { + @include table-flex; + border-bottom: 2px solid $gray-light; + padding: 2rem 0; + &:first-child { + margin-top: 0; + } + .username { + color: $green-taiga; + margin-bottom: 1rem; + } + .activity-user { + @include table-flex-child(1, 50px, 0); + img { + max-width: 70px; + width: 100%; + } + } + .activity-username { + border-bottom: 1px dotted $gray-light; + padding-bottom: 1rem; + } + .activity-content { + @include table-flex-child(20, 150px, 0); + } + .us-activity { + background: $whitish; + .activity-inner { + display: none; + } + } + .date { + color: $gray-light; + margin-left: 1rem; + } +} + +.more-activity { + @extend %small; + border-bottom: 1px solid $gray-light; + color: $gray-light; + display: block; + padding: 1rem; + .prev-activity-num { + color: $green-taiga; + margin-left: .5rem; + } +} diff --git a/app/styles/modules/comment-activity.scss b/app/styles/modules/comment-activity.scss new file mode 100644 index 00000000..ff658130 --- /dev/null +++ b/app/styles/modules/comment-activity.scss @@ -0,0 +1,41 @@ +.us-activity { + margin-bottom: 1rem; + padding: 0 1rem; +} + +.activity-title { + display: block; + padding: .5rem; + &:hover { + .icon { + @include transform(rotate(180deg)); + @include transition(all.2s linear); + color: $green-taiga; + } + } + .icon { + @include transform(rotate(0)); + @include transition(all.2s linear); + color: $grayer; + float: right; + } +} + +.activity-inner { + @include table-flex; + border-bottom: 1px solid $gray-light; + padding: 1rem 0; + &:last-child { + border-bottom: 0; + } + .activity-changed, + .activity-fromto { + @include table-flex-child(1, 50px, 0); + } + .activity-changed { + font-family: 'DroidSans-Bold'; + } + .activity-fromto { + @extend %small; + } +} diff --git a/app/styles/modules/comments.scss b/app/styles/modules/comments.scss index e6918bc5..059509ca 100644 --- a/app/styles/modules/comments.scss +++ b/app/styles/modules/comments.scss @@ -21,12 +21,16 @@ @include table-flex; border-bottom: 2px solid $gray-light; padding: 1rem 0; + position: relative; + &:hover { + .delete-comment { + opacity: 1; + @include transition(opacity .2s linear); + } + } &:first-child { margin-top: 0; } - &:last-child { - border-bottom: 0; - } .username { color: $green-taiga; display: block; @@ -52,4 +56,29 @@ @extend %small; color: $gray-light; } + .delete-comment { + @include transition(all .2s linear); + bottom: 2rem; + color: $grayer; + opacity: 0; + position: absolute; + right: 1.5rem; + &:hover { + @include transition(color .2s linear); + color: $red; + + } + } +} + +.more-comments { + @extend %small; + border-bottom: 1px solid $gray-light; + color: $gray-light; + display: block; + padding: 1rem; + .prev-comments-num { + color: $green-taiga; + margin-left: .5rem; + } } From 2891e8836569ad04677ef0171c60d4f40038fc63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 23 Jun 2014 09:38:45 +0200 Subject: [PATCH 07/10] Fixed merge from master and updated files --- app/partials/us-detail.jade | 75 +++++++++++++------------ app/styles/components/buttons.scss | 2 +- app/styles/dependencies/typography.scss | 2 +- app/styles/layout/base.scss | 2 +- app/styles/layout/us-detail.scss | 28 +++++++++ app/styles/main.scss | 4 ++ app/styles/modules/lightbox.scss | 8 +-- 7 files changed, 77 insertions(+), 44 deletions(-) diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index 7fe56c70..bf320e83 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -4,41 +4,42 @@ block head title Taiga Project management web application with scrum in mind! block content - div.main.us-detail - div.us-detail-header - h1 - span ProjectName - span.green User Story - a.button.button-green(href="", title="Edit") Edit - section.us-story-main-data - h2.us-title - span.us-number 125 - span.us-name Tagear contenido dentro de las catas privadas - div.user-story-tags - - for(var y = 0; y < 6; y++) - include views/components/tag - input(type="text", placeholder="Add Tag") - section.us-content - p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%" - p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión - p Test de aceptación - ul - li Entro en la aplicación - li Compruebo que el indicador crece - p Prototipos
share.axure.com/lalala - p Prototipos
share.axure.com/lalala - include views/modules/attachments - section.us-activity - ul.us-activity-tabs - li - a.active(href="#") - span.icon.icon-bulk - span.tab-title Comments + div.wrapper + div.main.us-detail + div.us-detail-header + h1 + span ProjectName + span.green User Story + a.button.button-green(href="", title="Edit") Edit + section.us-story-main-data + h2.us-title + span.us-number 125 + span.us-name Tagear contenido dentro de las catas privadas + div.user-story-tags + - for(var y = 0; y < 6; y++) + include views/components/tag + input(type="text", placeholder="Add Tag") + section.us-content + p Hay que cambiar el texto "Hola NombreDelUsuario" por "Nivel de conexion al XX%" + p La propuesta que esperábamos de UX debía incluir nombre y nivel de conexión. Esperamos nueva propuesta corregida donde aparezca tanto el nombre como el % de conexión + p Test de aceptación + ul + li Entro en la aplicación + li Compruebo que el indicador crece + p Prototipos
share.axure.com/lalala + p Prototipos
share.axure.com/lalala + include views/modules/attachments + section.us-activity + ul.us-activity-tabs + li + a.active(href="#") + span.icon.icon-bulk + span.tab-title Comments - li - a(href="#") - span.icon.icon-issues - span.tab-title Activity - include views/modules/comments - //-include views/modules/activity - sidebar.menu-secondary.sidebar + li + a(href="#") + span.icon.icon-issues + span.tab-title Activity + //-include views/modules/comments + include views/modules/activity + sidebar.menu-secondary.sidebar diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 438a0d89..0cebeec2 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -32,7 +32,7 @@ top: 2px; } &:hover { - @include transition (background .3s linear); + @include transition (background .3s linear); } } diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index 4c491f29..097a8213 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -193,5 +193,5 @@ a:visited { content: 'A'; } .icon-reload:before { - content: 'z'; + content: 'z'; } diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index 2d978414..7e57d691 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -59,4 +59,4 @@ body { .hidden { display: none; -} \ No newline at end of file +} diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index ffab73b0..e17a41a2 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -74,3 +74,31 @@ .comment-list { padding: 1rem 2rem; } + +.activity-single { + @include table-flex; + border-bottom: 2px solid $gray-light; + padding: 1rem 0; + position: relative; + .username { + color: $green-taiga; + margin-bottom: 1rem; + } + .date { + @extend %small; + color: $gray-light; + margin-left: 1rem; + } +} + +.activity-user { + @include table-flex-child(1, 50px, 0); + img { + max-width: 70px; + width: 100%; + } +} + +.activity-content { + @include table-flex-child(20, 150px, 0); +} diff --git a/app/styles/main.scss b/app/styles/main.scss index c828796a..57568424 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -42,6 +42,9 @@ $prefix-for-spec: true; @import 'modules/admin-functionalities'; @import 'modules/category-config'; @import 'modules/project-details'; +@import 'modules/comments'; +@import 'modules/attachments'; +@import 'modules/comment-activity'; // Responsive @import 'responsive/mobile'; @@ -51,3 +54,4 @@ $prefix-for-spec: true; @import 'layout/base'; @import 'layout/backlog'; @import 'layout/taskboard'; +@import 'layout/us-detail'; diff --git a/app/styles/modules/lightbox.scss b/app/styles/modules/lightbox.scss index 1a28c714..60e79ce6 100644 --- a/app/styles/modules/lightbox.scss +++ b/app/styles/modules/lightbox.scss @@ -104,10 +104,10 @@ color: $white; } &.selected { - @include transition(all .2s ease-in); - background: $green-taiga; - border: 1px solid $green-taiga; - color: $white; + @include transition(all .2s ease-in); + background: $green-taiga; + border: 1px solid $green-taiga; + color: $white; } } .blocked { From f6566315d5e07f6371588768f3d36165e2476de0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 23 Jun 2014 10:04:21 +0200 Subject: [PATCH 08/10] Updated font with new icons --- app/fonts/taiga.eot | Bin 5684 -> 5996 bytes app/fonts/taiga.svg | 2 ++ app/fonts/taiga.ttf | Bin 5528 -> 5840 bytes app/fonts/taiga.woff | Bin 3888 -> 4128 bytes app/partials/us-detail.jade | 4 ++++ app/styles/dependencies/typography.scss | 6 ++++++ 6 files changed, 12 insertions(+) diff --git a/app/fonts/taiga.eot b/app/fonts/taiga.eot index e827d9a49b26c3456507af062edcabd66a3e6993..c0590ee8a2b25c9e889f08596d3fdfadd7219671 100644 GIT binary patch delta 726 zcmYk3&r4KM6vw~k-aGGI6jF2My+!jwM`lK*PpqrU^ucSF}?)mWLo_p>&XY0gHm$qO6 zpNyiG5y{-pXmKzLl-Vy!WC$M@fbkc$hB^3KLBtp@2nIsj}3rMx`h{={M6pT(gxt)257Ocw0uWwiw3~x1aKP!xIQ|ROWtZa z^Bau}u6_LQX!d`sRT(^8f=*9IUVu1T=&x77$z(a74f)JQ@yYbRoJCFOd znn!2h{3EYCG&Hz#Ll_bDm94UHL=|~R-Q}CAU8IGK%9ZD1qTIA5ki=#BOj~G#i4JrF zc1JWs{ywt$DP?y=11&D6TT*77-d@K$SzXV{xvZ2~eSTQVVOf3Rh4-=`WkLRw)lDgB zT+ZpcQts-1Pp`??8e&wT3R)4vDd4DO8m8gbHC>A);)!_5&e*N#RQxzawGjDDqmL{* zldw|>SJJhBd8oZv?Xkk4P}u4@1f_9XXq*e12~IxFd;>nleVmCj7n~~I-9&v>^<_qA zn#lNwGd^A7j4{Sbj5Een*uTdu^eTU#lUcoLAh1krsubwwF~rrcK!hUdh;gj3Zq0uH DkJ^&I delta 430 zcmYk1JxCj27{`C_y+^P(M2L4Tm$OTWLySZuc4$ilt%8GtA9M)H8Pg=-C23PiTZAgu z&XsqtxMd4;DOl)Ia1jwYgi`2G5nR;8LHt-0dh%WzeBjUX=YjvnbCUX=j11WD#afGG z%w#E6Uwi83jyKQ2S^}KW;gM&I69Fp=+@F~2>z~-qZh?3X%;bEp`to<_0f-9_p9)^B z8U#qNrhvA>;=32|gO7he{)FgmG4CzV=si~*!ufFTuS|pZ1`ID&a$bKi<$~0~Pkirf zl_KjP9_rw-=jYF^D;p471yQb6YOl@D@(?;NfLR1+)MKUOT=dZ;?FM?9+i$er?GFAM zg!eWK)K`%buKFi_jH4Tea6%(kMuyD6WI=xtO7slzJ_v4^r&+MqiUv$jN5+yGlHF=W zHdMkK+?+RmMb)%*D$``tnB8NfGwPLH6RtY4AFD){n}{Q{vem4W-<;jK(uQ~I-vA40 BWKaMA diff --git a/app/fonts/taiga.svg b/app/fonts/taiga.svg index 7097c6f2..63480eff 100644 --- a/app/fonts/taiga.svg +++ b/app/fonts/taiga.svg @@ -34,4 +34,6 @@ + + diff --git a/app/fonts/taiga.ttf b/app/fonts/taiga.ttf index aaa07b6882b4962b8e2a57e9cc401349ed3ca62a..a6c79474e7148b449eff4d52039d7a59d7ebb24b 100644 GIT binary patch delta 782 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 DOC5Ak delta 3754 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 U&3K$+U}iuDj0|W10052v1-b3~JOBUy diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index bf320e83..6a6a9f48 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -15,6 +15,10 @@ block content h2.us-title span.us-number 125 span.us-name Tagear contenido dentro de las catas privadas + div.blocked-warning + span.icon.icon-warning + p.blocked Blocked! + p div.user-story-tags - for(var y = 0; y < 6; y++) include views/components/tag diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index 097a8213..470494db 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -195,3 +195,9 @@ a:visited { .icon-reload:before { content: 'z'; } +.icon-graph:before { + content: "B"; +} +.icon-warning:before { + content: "C"; +} From 3f488cbf0d8d8aac7fe7800d3b1b38e9dc1bd9ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 23 Jun 2014 10:34:06 +0200 Subject: [PATCH 09/10] Blocked module --- app/partials/us-detail.jade | 3 ++- app/styles/components/buttons.scss | 9 ++++++++ app/styles/dependencies/typography.scss | 4 ++-- app/styles/layout/us-detail.scss | 29 +++++++++++++++++++++++++ 4 files changed, 42 insertions(+), 3 deletions(-) diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index 6a6a9f48..812685a9 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -18,7 +18,8 @@ block content div.blocked-warning span.icon.icon-warning p.blocked Blocked! - p + p We need Pilar to make a prototype out of this or we are not sure what to show at this part. + a.button.button-red.button-block(href="", title="Unblock US") Unblock div.user-story-tags - for(var y = 0; y < 6; y++) include views/components/tag diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 0cebeec2..00aa30d1 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -59,6 +59,15 @@ } } +a.button-block { + background: $white; + color: $red; + &:hover { + background: $red-light; + color: $white; + } +} + .button-bulk { @extend %button; background: $green-taiga; diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index 470494db..75a28d83 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -196,8 +196,8 @@ a:visited { content: 'z'; } .icon-graph:before { - content: "B"; + content: 'B'; } .icon-warning:before { - content: "C"; + content: 'C'; } diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index e17a41a2..9a86a3f8 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -7,6 +7,7 @@ top: 0; } } + .us-story-main-data { margin-bottom: 2rem; .us-title { @@ -22,6 +23,34 @@ color: $grayer; } } + .blocked-warning { + background: $red; + color: $white; + margin-bottom: 1rem; + padding: 1rem; + position: relative; + .icon { + @extend %xxlarge; + display: inline; + left: 1rem; + position: absolute; + top: 1rem; + } + .blocked { + @extend %xlarge; + margin-bottom: .3em; + } + p { + margin-bottom: 0; + margin-left: 4rem; + margin-right: 10rem; + } + .button-block { + position: absolute; + right: 1rem; + top: 1rem; + } + } } .us-content { From 5f2386918a4d563cf3dc6d1eb0233ffd8ef0ac64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 23 Jun 2014 13:00:47 +0200 Subject: [PATCH 10/10] Sidebar options for User Story detail --- app/partials/us-detail.jade | 36 +++++++ app/styles/components/buttons.scss | 19 ++-- app/styles/dependencies/mixins.scss | 14 +-- app/styles/layout/us-detail.scss | 149 ++++++++++++++++++++++++---- app/styles/main.scss | 3 +- app/styles/modules/activity.scss | 5 +- 6 files changed, 187 insertions(+), 39 deletions(-) diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index 812685a9..69d9ef73 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -48,3 +48,39 @@ block content //-include views/modules/comments include views/modules/activity sidebar.menu-secondary.sidebar + h1 + span Open + span.us-detail-status In progress + div.us-detail-progress-bar + div.current-progress + span.tasks-completed 6/7 tasks completed + ul.points-per-role + li.total + span.points 10 + span.role total + - for(var x=0; x<5; x++) + li.total + span.points 10 + span.role UX + section.us-detail-assigned-to + div.user-avatar + a.avatar(href="", title="Assigned to") + img(src="http://thecodeplayer.com/u/uifaces/18.jpg", alt="username") + div.assigned-to + span.assigned-title Assigned to + span.user-assigned Anler Hernández + section.watchers + div.watchers-header + span.title watchers + a.icon.icon-plus(href="", title="Add watcher") + div.watchers-content + - for(var y=0; y<5; y++) + div.watcher-single + div.watcher-avatar + a.avatar(href="", title="Assigned to") + img(src="http://thecodeplayer.com/u/uifaces/32.jpg", alt="username") + a.watcher-name(href="", title="Jesús Espino") Jesús Espino + section.us-settings + a.button.button-gray(href="", title="Client requirement") Client requirement + a.button.button-gray(href="", title="Team requirement") Team requirement + a.button.button-red(href="", title="Block") Block diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 00aa30d1..acc18fa6 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -11,28 +11,23 @@ } } -%button { +%button, +.button { @extend %large; + @include transition (background .3s linear); display: inline-block; font-family: 'ostrichSans'; padding: 8px 40px; - .icon { - margin-right: .3rem; + &:hover { + @include transition (background .3s linear); } -} - -.button-green, -.button-gray, -.button-red { - @extend %button; - @include transition (background .3s linear); span { color: $white; position: relative; top: 2px; } - &:hover { - @include transition (background .3s linear); + .icon { + margin-right: .3rem; } } diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index eb10e249..97c623ee 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -10,13 +10,13 @@ } // Table Flex - http://devbryce.com/site/flexbox/ -@mixin table-flex { - align-content: stretch; - align-items: stretch; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; +@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) { + align-content: $align-content; + align-items: $align-items; + display: $display; + flex-direction: $flex-direction; + flex-wrap: $flex-wrap; + justify-content: $justify-content; } @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') { diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index 9a86a3f8..3d49229f 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -104,30 +104,143 @@ padding: 1rem 2rem; } -.activity-single { - @include table-flex; - border-bottom: 2px solid $gray-light; - padding: 1rem 0; +.us-detail-status { + @extend %large; + color: $green-taiga; + vertical-align: middle; +} + +.us-detail-progress-bar { + background: $grayer; + height: 26px; + margin-bottom: 1rem; position: relative; - .username { - color: $green-taiga; - margin-bottom: 1rem; + .current-progress { + background: $fresh-taiga; + height: 26px; + left: 0; + position: absolute; + top: 0; + width: 60%; } - .date { + .tasks-completed { @extend %small; - color: $gray-light; - margin-left: 1rem; + color: $white; + left: 10px; + position: absolute; + top: 2px; } } -.activity-user { - @include table-flex-child(1, 50px, 0); - img { - max-width: 70px; +.points-per-role { + li { + border-right: 1px solid $grayer; + display: inline-block; + margin: .5rem .1rem; + opacity: .3; + text-align: center; + width: 18%; + &:first-child { + opacity: 1; + } + &:nth-child(5n) { + border: 0; + } + } + .points { + @extend %xlarge; + display: block; + font-family: 'ostrichSans'; + text-align: center; + } + .role { + display: inline-block; + max-width: 90%; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.us-detail-assigned-to { + @include table-flex(); + margin-top: 2rem; + .user-avatar { + @include table-flex-child(1, 0); + } + .assigned-to { + @include table-flex-child(3, 0); + margin-left: 1rem; + margin-top: 15px; + .assigned-title { + color: $gray-light; + display: block; + } + .user-assigned { + @extend %large; + color: $green-taiga; + } + } +} + +.watchers { + margin-top: 2rem; + .watchers-header { + border-bottom: 2px solid $gray-light; + padding: .5rem; + position: relative; + .title { + @extend %large; + font-family: 'ostrichSans'; + } + .icon { + @extend %large; + position: absolute; + right: 1rem; + top: 4px; + } + } + .watcher-single { + @include table-flex(center, center, flex, row, wrap, center); + border-bottom: 1px solid $gray-light; + padding: .5rem; + vertical-align: middle; + &:last-child { + border: 0; + } + .watcher-avatar { + @include table-flex-child(1, 0); + } + .watcher-name { + @include table-flex-child(8, 0); + @extend %large; + color: $grayer; + margin-left: 1rem; + } + } +} + +.us-settings { + margin-top: 2rem; + .button { + color: $white; + display: block; + margin-bottom: .5rem; + text-align: center; width: 100%; } -} - -.activity-content { - @include table-flex-child(20, 150px, 0); + .button-gray { + background: $gray-light; + &:hover, + &.active { + background: $grayer; + } + } + .button-red { + &:hover, + &.active { + background: $red; + } + } } diff --git a/app/styles/main.scss b/app/styles/main.scss index 57568424..918c0a85 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -42,9 +42,10 @@ $prefix-for-spec: true; @import 'modules/admin-functionalities'; @import 'modules/category-config'; @import 'modules/project-details'; -@import 'modules/comments'; @import 'modules/attachments'; +@import 'modules/comments'; @import 'modules/comment-activity'; +@import 'modules/activity'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/activity.scss b/app/styles/modules/activity.scss index 8b7e986f..62674b1f 100644 --- a/app/styles/modules/activity.scss +++ b/app/styles/modules/activity.scss @@ -44,6 +44,7 @@ @include table-flex; border-bottom: 2px solid $gray-light; padding: 2rem 0; + position: relative; &:first-child { margin-top: 0; } @@ -60,7 +61,8 @@ } .activity-username { border-bottom: 1px dotted $gray-light; - padding-bottom: 1rem; + color: $green-taiga; + margin-bottom: 1rem; } .activity-content { @include table-flex-child(20, 150px, 0); @@ -72,6 +74,7 @@ } } .date { + @extend %small; color: $gray-light; margin-left: 1rem; }