Restyling of Details page for related tasks and attachments

app/coffee/modules/common/attachments.coffee

@@ -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">

app/coffee/modules/related-tasks.coffee

@@ -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="icon icon-plus related-tasks-buttons"></a>
-            <a class="button button-green">+ Add new task</a>
-        </div>
     """)
 
     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", ->

app/partials/views/modules/related-tasks.jade

@@ -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
+        span.related-tasks-title Related tasks
-            .tasks Task Name
+        div(tg-related-task-create-button)
-            .status Status
-            .assigned-to Assigned to
     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(ng-repeat="task in tasks", ng-class="{closed: task.is_closed, blocked: task.is_blocked, iocaine: task.is_iocaine}",
-        div.row.single-related-task(tg-related-task-create-form)
+                                    tg-related-task-row, ng-model="task")
+        div.row.single-related-task.related-task-create-form(tg-related-task-create-form)

app/styles/modules/common/attachments.scss

@@ -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 {
+    .attachments-title {
-        float: right;
+        @extend %medium;
+        @extend %bold;
+        color: $grayer;
     }
-    .icon,
     .attachments-num,
     .attachments-text {
-        @extend %medium;
+        margin-right: .1rem;
-        margin-right: .5rem;
+    }
-        position: relative;
+    .icon {
-        top: 2px;
+        @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;
+        display: none;
-        font-size: 99px;
-        height: 120%;
-        left: 0;
-        opacity: 0;
-        position: absolute;
-        top: -5px;
-        width: 100%;
-        z-index: 9999;
     }
 }

app/styles/modules/common/related-tasks.scss

@@ -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;
-    }
-}