diff --git a/app/fonts/taiga.eot b/app/fonts/taiga.eot index 9a108ee0..b6af2930 100644 Binary files a/app/fonts/taiga.eot and b/app/fonts/taiga.eot differ diff --git a/app/fonts/taiga.svg b/app/fonts/taiga.svg index b1779c43..048c962b 100644 --- a/app/fonts/taiga.svg +++ b/app/fonts/taiga.svg @@ -42,4 +42,6 @@ + + diff --git a/app/fonts/taiga.ttf b/app/fonts/taiga.ttf index f5e6e246..8a253dae 100644 Binary files a/app/fonts/taiga.ttf and b/app/fonts/taiga.ttf differ diff --git a/app/fonts/taiga.woff b/app/fonts/taiga.woff index 54508d1e..588dcb30 100644 Binary files a/app/fonts/taiga.woff and b/app/fonts/taiga.woff differ diff --git a/app/partials/views/components/kanban-task.jade b/app/partials/views/components/kanban-task.jade index 95e500dc..9b02859d 100644 --- a/app/partials/views/components/kanban-task.jade +++ b/app/partials/views/components/kanban-task.jade @@ -4,10 +4,35 @@ div.kanban-task-inner div.task-text a.task-assigned(href="", title="Assign User Story") span.task-num(tg-bo-ref="us.ref") - a.task-name(href="", title="", tg-bind-html="us.subject", + a.task-name(href="", tg-bo-title="us.subject", tg-bind-html="us.subject", tg-nav="project-userstories-detail:project=project.slug,ref=us.ref") - p.task-points - span(tg-bind-html="us.total_points") -- - span points + ul.task-points-per-role + li + a(href="", title="Role Points") + span User Experience + span(tg-bind-html="us.total_points") -- + span points + span.icon.icon-arrow-bottom + li + a(href="", title="Role Points") + span Design + span(tg-bind-html="us.total_points") -- + span points + span.icon.icon-arrow-bottom + li + a(href="", title="Role Points") + span Front + span(tg-bind-html="us.total_points") -- + span points + span.icon.icon-arrow-bottom + li + a(href="", title="Role Points") + span Back + span(tg-bind-html="us.total_points") -- + span points + span.icon.icon-arrow-bottom + //-p.task-points + //- span(tg-bind-html="us.total_points") -- + //- span points a.icon.icon-edit(tg-check-permission="modify_us", href="", title="Edit") a.icon.icon-drag-h(tg-check-permission="modify_us", href="", title="Drag&Drop") diff --git a/app/partials/views/modules/kanban-table.jade b/app/partials/views/modules/kanban-table.jade index 0fc2499c..0e907dd6 100644 --- a/app/partials/views/modules/kanban-table.jade +++ b/app/partials/views/modules/kanban-table.jade @@ -4,14 +4,15 @@ div.kanban-table h2.task-colum_name(ng-repeat="s in usStatusList track by s.id", ng-style="{'border-top-color':s.color}") span(tg-bo-bind="s.name") + a.icon.icon-minimize(href="", title="Add New task") + //-a.icon.icon-maximize(href="", title="Add New task") a.icon.icon-plus(tg-check-permission="add_us", href="", title="Add New task", ng-click="ctrl.addNewUs('standard', s.id)") a.icon.icon-bulk(tg-check-permission="add_us", href="", title="Add New bulk", ng-click="ctrl.addNewUs('bulk', s.id)") - div.kanban-table-body div.kanban-table-inner(tg-kanban-row-width-fixer) div.kanban-uses-box.task-column(ng-repeat="status in usStatusList track by status.id", tg-kanban-sortable, tg-kanban-wip-limit, tg-kanban-column-height-fixer) - div.kanban-task(ng-repeat="us in usByStatus[status.id] track by us.id", - tg-kanban-userstory, ng-model="us") + div.kanban-task.kanban-task-maximized(ng-repeat="us in usByStatus[status.id] track by us.id", + tg-kanban-userstory, ng-model="us") diff --git a/app/styles/components/kanban-task.scss b/app/styles/components/kanban-task.scss index 8ac1565f..63e4c9af 100644 --- a/app/styles/components/kanban-task.scss +++ b/app/styles/components/kanban-task.scss @@ -28,20 +28,18 @@ } .kanban-tagline { @include table-flex(); - background: $gray-light; //Fallback - height: .3rem; + background: $postit-hover; //Fallback + //height: .3rem; } .kanban-tag { @include table-flex-child(1, 0, 0, 0); background: $postit-hover; //Fallback - height: .3rem; + //height: .3rem; } .kanban-task-inner { @include table-flex(); - padding: 1rem 1rem 2rem; } .avatar { - @include table-flex-child($flex-basis: 50px); a { @extend %small; text-align: center; @@ -69,37 +67,24 @@ color: $postit-dark-hover; display: block; } + .task-text { + @include table-flex-child($flex-grow: 10, $flex-basis: 50px); + @extend %small; + padding: 0 .5rem 0 .8rem; + word-wrap: break-word; + } .task-num { color: $grayer; - margin-right: .5em; + margin-right: .3rem; } .task-name { @extend %bold; color: $grayer; - word-wrap: break-word; - } - .task-text { - @include table-flex-child($flex-grow: 10, $flex-basis: 50px); - @extend %small; - padding: 0 .5rem 0 1rem; - word-wrap: break-word; - } - .task-points { - @extend %small; - color: darken($postit-hover, 15%); - margin: 0; - span { - display: inline-block; - &:first-child { - padding-right: .2rem; - } - } } .icon-edit, .icon-drag-h { @include transition(opacity .2s linear); @extend %large; - bottom: .2rem; color: $postit-hover; opacity: 0; position: absolute; @@ -108,12 +93,95 @@ color: darken($postit-hover, 15%); } } +} + +.kanban-task-maximized { + .kanban-task-inner { + padding: 1rem 1rem 2rem; + } + .avatar { + @include table-flex-child($flex-basis: 50px); + } + .task-name { + word-wrap: break-word; + } .icon-edit { + bottom: .2rem; right: .5rem; } .icon-drag-h { @extend %xlarge; + bottom: .2rem; cursor: move; right: 45%; } + .task-points-per-role { + @extend %small; + margin: 0; + a { + @include transition(color .2s linear); + color: darken($postit-hover, 15%); + &:hover { + @include transition(color .2s linear); + color: darken($postit-hover, 30%); + } + } + span { + display: inline-block; + padding-left: .2rem; + &:first-child { + color: darken($postit-hover, 30%); + padding-left: 0; + padding-right: .2rem; + } + } + } + .kanban-tagline { + height: .3rem; + } + .kanban-tag { + height: .3rem; + } +} + +.kanban-task-minimized { + .kanban-task-inner { + padding: .3rem; + } + .avatar { + @include table-flex-child($flex-basis: 40px); + } + .task-num { + vertical-align: top; + } + .task-name { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 70%; + } + .task-points-per-role { + display: none; + } + .icon-edit, + .icon-drag-h { + top: 1.4rem; + } + .icon-edit { + bottom: .2rem; + right: 1rem; + } + .icon-drag-h { + @extend %medium; + @include transform(rotate(90deg)); + cursor: move; + right: .1rem; + } + .kanban-tagline { + height: .2rem; + } + .kanban-tag { + height: .2rem; + } } diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index 68d878d5..114f7af8 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -6,9 +6,9 @@ @font-face { font-family: '#{$font-face}'; src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'), - url('../fonts/#{$font-face}.woff') format('woff'), - url('../fonts/#{$font-face}.ttf') format('truetype'), - url('../fonts/#{$font-face}.svg#{$font-face}') format('svg'); + url('../fonts/#{$font-face}.woff') format('woff'), + url('../fonts/#{$font-face}.ttf') format('truetype'), + url('../fonts/#{$font-face}.svg#{$font-face}') format('svg'); } } @@ -88,7 +88,7 @@ p { img { margin: 0; } - } +} em { font-style: italic; } strong { @@ -247,3 +247,9 @@ a:visited { .icon-spinner:before { content: 'E'; } +.icon-minimize:before { + content: 'J'; +} +.icon-maximize:before { + content: 'K'; +} diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index 966500b5..e82a7d3f 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/app/styles/modules/kanban/kanban-table.scss @@ -44,6 +44,11 @@ $column-margin: 0 10px 0 0; &.icon-plus { right: 2rem; } + &.icon-maximize, + &.icon-minimize { + left: .5rem; + right: inherit; + } } } } @@ -51,7 +56,6 @@ $column-margin: 0 10px 0 0; .kanban-table-body { @include table-flex(); @extend %medium; - //height: 700px; overflow: hidden; overflow-x: auto; width: 100%;