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

Restyling of Details page for related tasks and attachments

stable
Xavier Julián 2014-09-16 17:27:39 +02:00
parent aa6ba4fe77
commit 2442f50028
5 changed files with 64 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/coffee/modules/common/attachments.coffee
View File

@ -154,16 +154,13 @@ AttachmentsDirective = ($confirm) ->
<section class="attachments">
<div class="attachments-header">
<h3 class="attachments-title">
<span class="icon icon-attachments"></span>
<span class="attachments-num" tg-bind-html="ctrl.attachmentsCount"></span>
<span class="attachments-text">attachments</span>
<div tg-check-permission="modify_<%- type %>"
title="Add new attachment" class="button button-gray add-attach">
<span>+new file</span>
<input type="file" multiple="multiple"/>
</div>
</h3>
<div tg-check-permission="modify_<%- type %>" title="Add new attachment" class="add-attach">
<label for="add-attach" class="icon icon-plus related-tasks-buttons"></label>
<input id="add-attach" type="file" multiple="multiple"/>
</div>
</div>
<div class="attachment-body sortable">

7
app/coffee/modules/related-tasks.coffee
View File

@ -208,6 +208,7 @@ RelatedTaskCreateFormDirective = ($repo, $compile, $confirm, $tgmodel) ->
$el.html($compile(template())($scope))
$el.find('input').focus().select()
$el.addClass('active')
$el.on "keyup", "input", (event)->
if event.keyCode == 13
@ -242,9 +243,7 @@ module.directive("tgRelatedTaskCreateForm", ["$tgRepo", "$compile", "$tgConfirm"
RelatedTaskCreateButtonDirective = ($repo, $compile, $confirm, $tgmodel) ->
template = _.template("""
<div class="related-tasks-buttons">
<a class="button button-green">+ Add new task</a>
</div>
<a class="icon icon-plus related-tasks-buttons"></a>
""")
link = ($scope, $el, $attrs) ->
@ -256,7 +255,7 @@ RelatedTaskCreateButtonDirective = ($repo, $compile, $confirm, $tgmodel) ->
else
$el.html("")
$el.on "click", ".button", (event)->
$el.on "click", ".icon", (event)->
$scope.$emit("related-tasks:add-new-clicked")
$scope.$on "$destroy", ->

13
app/partials/views/modules/related-tasks.jade
View File

@ -1,11 +1,8 @@
section.related-tasks(tg-related-tasks)
h2 Related tasks
div(tg-related-task-create-button)
div.related-tasks-header
.row.related-tasks-title
.tasks Task Name
.status Status
.assigned-to Assigned to
span.related-tasks-title Related tasks
div(tg-related-task-create-button)
div.related-tasks-body
div.row.single-related-task(ng-repeat="task in tasks", ng-class="{closed: task.is_closed, blocked: task.is_blocked, iocaine: task.is_iocaine}", tg-related-task-row, ng-model="task")
div.row.single-related-task(tg-related-task-create-form)
div.row.single-related-task(ng-repeat="task in tasks", ng-class="{closed: task.is_closed, blocked: task.is_blocked, iocaine: task.is_iocaine}",
tg-related-task-row, ng-model="task")
div.row.single-related-task.related-task-create-form(tg-related-task-create-form)

38
app/styles/modules/common/attachments.scss
View File

@ -3,19 +3,26 @@
}
.attachments-header {
@include clearfix;
@include table-flex(space-between, center, flex, row, wrap, space-between);
background: $whitish;
padding: .5rem 1rem;
.button {
float: right;
.attachments-title {
@extend %medium;
@extend %bold;
color: $grayer;
}
.icon,
.attachments-num,
.attachments-text {
@extend %medium;
margin-right: .5rem;
position: relative;
top: 2px;
margin-right: .1rem;
}
.icon {
@extend %large;
color: $grayer;
cursor: pointer;
&:hover {
@include transition (color .2s ease-in);
color: $green-taiga;
}
}
}
@ -23,12 +30,9 @@
@include table-flex();
@extend %small;
align-items: center;
border-bottom: 1px solid #cdcdcd;
border-bottom: 1px solid $whitish;
padding: .5rem 0 .5rem 1rem;
position: relative;
&:last-child {
border: 0;
}
&:hover {
.attachment-settings {
.settings {
@ -163,14 +167,6 @@
overflow: hidden;
position: relative;
input {
cursor: pointer;
font-size: 99px;
height: 120%;
left: 0;
opacity: 0;
position: absolute;
top: -5px;
width: 100%;
z-index: 9999;
display: none;
}
}

71
app/styles/modules/common/related-tasks.scss
View File

@ -3,18 +3,44 @@
position: relative;
}
.related-tasks-header,
.related-tasks-header {
@include table-flex(space-between, center, flex, row, wrap, space-between);
background: $whitish;
padding: .5rem 1rem;
.related-tasks-title {
@extend %medium;
@extend %bold;
}
.icon {
@extend %large;
color: $grayer;
cursor: pointer;
&:hover {
@include transition (color .2s ease-in);
color: $green-taiga;
}
}
}
.related-tasks-body {
width: 100%;
.row {
@extend %small;
@include table-flex(center, center, flex, row, wrap, center);
border-bottom: 1px solid $gray-light;
border-bottom: 1px solid $whitish;
padding: .5rem 0 .5rem .5rem;
position: relative;
text-align: left;
width: 100%;
&:hover {
background: transparent;
.task-settings {
@include transition (all .2s ease-in);
opacity: 1;
}
}
&:last-child {
border: 0;
}
.tasks {
@include table-flex-child(10, 78%, 0);
@ -25,7 +51,12 @@
.assigned-to {
@include table-flex-child(0, 10%, 0);
}
}
.related-task-create-form {
padding: 0;
&.active {
padding: .5rem 0 .5rem .5rem;
}
}
.status {
position: relative;
@ -45,37 +76,13 @@
}
}
.pop-status {
@include popover(200px, 0, 40%, '', '');
@include popover(200px, 0, 40%);
padding-right: 1rem;
&.fix {
bottom: 0;
top: auto;
}
}
}
.related-tasks-header {
.related-tasks-title {
@extend %medium;
@extend %bold;
border-bottom: 2px solid $gray-light;
margin-top: 1rem;
}
}
.related-tasks-body {
.row {
position: relative;
&:hover {
.task-settings {
@include transition (all .2s ease-in);
opacity: 1;
}
}
&:last-child {
border-bottom: 0;
}
}
.task-name {
position: relative;
a {
@ -176,11 +183,3 @@
}
}
}
.related-tasks-buttons {
position: absolute;
right: 0;
top: 0;
.button {
cursor: pointer;
}
}