From 5a2492f6f1013a25de893a1487630835febbddf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Fri, 1 Aug 2014 13:49:23 +0200
Subject: [PATCH] Attachment styles

---
 app/coffee/modules/common/attachments.coffee | 17 ++++---
 app/partials/views/modules/attachments.jade  | 22 ++++++---
 app/styles/modules/common/attachments.scss   | 51 +++++++++++---------
 3 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/app/coffee/modules/common/attachments.coffee b/app/coffee/modules/common/attachments.coffee
index e092a99e..0c7b52b3 100644
--- a/app/coffee/modules/common/attachments.coffee
+++ b/app/coffee/modules/common/attachments.coffee
@@ -43,8 +43,9 @@ AttachmentsDirective = ($repo, $rs) ->
             items: "div.single-attachment"
             handle: "a.settings.icon.icon-drag-v"
             dropOnEmpty: true
-            revert: false # '400' if we fix the strange effects
+            revert: 400
             axis: "y"
+            placeholder: "sortable-placeholder single-attachment"
         })
 
         tdom.on "sortstop", (event, ui) ->
@@ -160,7 +161,7 @@ AttachmentDirective = ($log, $repo, $confirm) ->
         </a>
     </div>
     <div class="attachment-size">
-        <span class="attachment-size"><%- size %></span>
+        <span><%- size %></span>
     </div>
     <div class="attachment-comments">
         <span class="deprecated-file hidden">(deprecated)</span>
@@ -179,10 +180,10 @@ AttachmentDirective = ($log, $repo, $confirm) ->
         <a href="<%- url %>" title="<%- name %>" target="_blank"><%- name %></a>
     </div>
     <div class="attachment-size">
-        <span class="attachment-size"><%- size %></span>
+        <span><%- size %></span>
     </div>
     <div class="editable editable-attachment-comment">
-        <input type="text" name="description"
+        <input type="text" name="description" maxlength="140"
                value="<%- description %>""
                placeholder="Type a short description" />
     </div>
@@ -192,8 +193,8 @@ AttachmentDirective = ($log, $repo, $confirm) ->
         <label for="attach-<%- id %>-is-deprecated">Deprecated?</label>
     </div>
     <div class="attachment-settings">
-        <a class="editable icon icon-floppy" href="" title="Save"></a>
-        <a class="editable icon icon-delete" href="" title="Cancel"></a>
+        <a class="editable-settings icon icon-floppy" href="" title="Save"></a>
+        <a class="editable-settings icon icon-delete" href="" title="Cancel"></a>
     </div>
     """) # TODO: i18n
 
@@ -261,11 +262,11 @@ AttachmentDirective = ($log, $repo, $confirm) ->
         ###########
         ## Actions (on edit mode)
         ###########
-        $el.on "click", "a.editable.icon-delete", (event) ->
+        $el.on "click", "a.editable-settings.icon-delete", (event) ->
             event.preventDefault()
             render(attachment)
 
-        $el.on "click", "a.editable.icon-floppy", (event) ->
+        $el.on "click", "a.editable-settings.icon-floppy", (event) ->
             newDescription = $el.find("input[name='description']").val()
             newIsDeprecated = $el.find("input[name='is-deprecated']").prop("checked")
 
diff --git a/app/partials/views/modules/attachments.jade b/app/partials/views/modules/attachments.jade
index 43224e16..4a4b755b 100644
--- a/app/partials/views/modules/attachments.jade
+++ b/app/partials/views/modules/attachments.jade
@@ -41,15 +41,23 @@ section.attachments(tg-attachments, ng-model=attachModel)
         //-    a.editable.icon.icon-floppy(href="#", "Save")
         //-    a.editable.icon.icon-delete(href="#", "Cancel")
 
-        //-TODO: XAVI, FIX ME :-)
+        //- div.single-attachment(ng-repeat="file in uploadingFiles")
+        //-    div.attachment-name
+        //-        span
+        //-        a(href="", title="{{ file.name }}") file.name
+        //-    div.attachment-comment
+        //-        span.attachment-size ({{ file.size }})
+        //-        span(ng-if="file.progressMessage", style="color:#72a114; font-weight: bold;") {{ file.progressMessage }}  |  {{ file.progressPercent }}%
+
         div.single-attachment(ng-repeat="file in uploadingFiles")
             div.attachment-name
-                span
-                a(href="", title="{{ file.name }}") file.name
-            div.attachment-comment
-                span.attachment-size ({{ file.size }})
-                span(ng-if="file.progressMessage", style="color:#72a114; font-weight: bold;") {{ file.progressMessage }}  |  {{ file.progressPercent }}%
-        //-END_TODO
+                a(href="", title="{{ file.name }}") {{ file.name }}
+            div.attachment-size
+                span.attachment-size {{ file.size }}
+            div.attachment-comments
+                span {{ file.progressMessage }}
+                div.percentage(style="width:  {{ file.progressPercent }}%")
+            div.attachment-settings
 
         a.hidden.more-attachments(href="", title="show deprecated atachments")
             span.text + show deprecated atachments
diff --git a/app/styles/modules/common/attachments.scss b/app/styles/modules/common/attachments.scss
index fefd41ea..ed709540 100644
--- a/app/styles/modules/common/attachments.scss
+++ b/app/styles/modules/common/attachments.scss
@@ -48,6 +48,10 @@
             color: $gray-light;
         }
     }
+    &.sortable-placeholder {
+        background: $whitish;
+        height: 55px;
+    }
     .attachment-name {
         @include ellipsis(200px);
         @include table-flex-child(1, 300px);
@@ -67,18 +71,26 @@
     }
     .attachment-settings {
         @include table-flex-child(1, 100px);
-        .settings {
+        .settings,
+        .editable-settings {
             @extend %large;
             color: $gray-light;
             display: block;
-            opacity: 0;
             position: absolute;
-            top: 1rem;
             &:hover {
                 color: $green-taiga;
             }
         }
-        .icon-edit {
+        .settings {
+            opacity: 0;
+            top: 1rem;
+        }
+        .editable-settings {
+            opacity: 1;
+            top: 1.5rem;
+        }
+        .icon-edit,
+        .icon-floppy {
             right: 4rem;
         }
         .icon-delete {
@@ -92,13 +104,9 @@
             right: 0;
         }
     }
-    //  REFACTOR //
     .editable {
         @include table-flex-child(10, 300px);
     }
-    .attachment-delete {
-        @include table-flex-child(1, 10px);
-    }
     .icon-delete {
         @extend %large;
         color: $gray-light;
@@ -111,8 +119,9 @@
         span {
             color: $gray-light;
         }
-        input {
-            margin-right: .5rem;
+        input[type="checkbox"] {
+            margin-right: .2rem;
+            vertical-align: middle;
             &:checked {
                 + span {
                     color: $grayer;
@@ -120,21 +129,15 @@
             }
         }
     }
-    .editable-attachment-comment {
-        input {
-            color: $white;
-        }
+    .percentage {
+        background: rgba($green-taiga, .1);
+        bottom: 0;
+        height: 55px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 45%;
     }
-    &.edit {
-        .settings,
-        .attachment-comment {
-            display: none;
-        }
-        .editable {
-            display: block;
-        }
-    }
-
 }
 
 .more-attachments {