Fix card attachments

Closes #192.

6 files changed, 102 insertions, 218 deletions

diff --git a/client/components/activities/activities.js b/client/components/activities/activities.js
index 5d95006a..6d796199 100644
--- a/client/components/activities/activities.js
+++ b/client/components/activities/activities.js
@@ -49,6 +49,10 @@ BlazeComponent.extendComponent({
     return TAPi18n.__('this-board');
   },
 
+  cardLabel: function() {
+    return TAPi18n.__('this-card');
+  },
+
   cardLink: function() {
     var card = this.currentData().card();
     return Blaze.toHTML(HTML.A({
@@ -69,16 +73,6 @@ BlazeComponent.extendComponent({
       href: attachment.url(),
       'class': 'js-open-attachment-viewer'
     }, attachment.name()));
-  }
-}).register('activities');
-
-BlazeComponent.extendComponent({
-  template: function() {
-    return 'cardActivities';
-  },
-
-  cardLabel: function() {
-    return TAPi18n.__('this-card');
   },
 
   events: function() {
@@ -102,4 +96,4 @@ BlazeComponent.extendComponent({
       }
     }];
   }
-}).register('cardActivities');
+}).register('activities');
diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade
new file mode 100644
index 00000000..4170d195
--- /dev/null
+++ b/client/components/cards/attachments.jade
@@ -0,0 +1,40 @@
+template(name="cardAttachmentsPopup")
+  ul.pop-over-list
+    li
+      input.js-attach-file.hide(type="file" name="file" multiple)
+      a.js-computer-upload {{_ 'computer'}}
+
+template(name="attachmentDeletePopup")
+  p {{_ "attachment-delete-pop"}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="attachmentsGalery")
+  .attachments-galery
+    each attachments
+      a.attachment-item.js-open-viewer(title="{{_ 'added'}} {{ moment uploadedAt }}")
+        .attachment-thumbnail
+          if isUploaded
+            if isImage
+              img.attachment-thumbnail-img(src=url)
+            else
+              span.attachment-thumbnail-ext= extension
+          else
+            +spinner
+        p.attachment-details
+          = name
+          span.attachment-details-actions
+            a.js-download
+              i.fa.fa-download
+              | {{_ 'download'}}
+            if isImage
+              a(class="{{#if $eq ../coverId _id}}js-remove-cover{{else}}js-add-cover{{/if}}")
+                i.fa.fa-thumb-tack
+                if($eq ../coverId _id)
+                  | {{_ 'remove-cover'}}
+                else
+                  | {{_ 'add-cover'}}
+            a.js-confirm-delete
+              i.fa.fa-close
+              | {{_ 'delete'}}
+
+    a.attachment-item.add-attachment.js-add-attachment {{_ 'add-attachment' }}
diff --git a/client/components/cards/events.js b/client/components/cards/attachments.js
index ca2ddb50..db0ecb8e 100644
--- a/client/components/cards/events.js
+++ b/client/components/cards/attachments.js
@@ -1,5 +1,5 @@
-Template.WindowAttachmentsModule.events({
-  'click .js-attach': Popup.open('cardAttachments'),
+Template.attachmentsGalery.events({
+  'click .js-add-attachment': Popup.open('cardAttachments'),
   'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete',
     function() {
       Attachments.remove(this._id);
@@ -21,22 +21,18 @@ Template.WindowAttachmentsModule.events({
 
 Template.cardAttachmentsPopup.events({
   'change .js-attach-file': function(evt) {
-    var card = this.card;
+    var card = this;
     FS.Utility.eachFile(evt, function(f) {
       var file = new FS.File(f);
-
-      // set Ids
       file.boardId = card.boardId;
       file.cardId  = card._id;
 
-      // upload file
       Attachments.insert(file);
-
       Popup.close();
     });
   },
-  'click .js-computer-upload': function(evt, t) {
-    t.find('.js-attach-file').click();
+  'click .js-computer-upload': function(evt, tpl) {
+    tpl.find('.js-attach-file').click();
     evt.preventDefault();
   }
 });
diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl
new file mode 100644
index 00000000..5cdf7386
--- /dev/null
+++ b/client/components/cards/attachments.styl
@@ -0,0 +1,47 @@
+.attachments-galery
+  display: flex
+  flex-wrap: wrap
+
+  .attachment-item
+    width: 33.33% - 2%
+    margin: 10px 1% 0
+    text-align: center
+    border-radius: 3px
+    overflow: hidden
+    background: darken(white, 7%)
+    min-height: 120px
+
+    &:hover
+      background: darken(white, 12%)
+
+    &.add-attachment
+      display: flex
+      align-items: center
+
+    .attachment-thumbnail
+      height: 80px
+      display: flex
+      align-items: center
+      justify-content: center
+      position: relative
+
+      .attachment-thumbnail-img
+        height: 100%
+        width: 100%
+
+      .attachment-thumbnail-ext
+        text-transform: uppercase
+        font-size: 1.6em
+
+    .attachment-details
+      font-size: 0.75em
+      margin: 3px
+
+      .attachment-details-actions
+        display: block
+
+.attachment-image-preview
+  max-width: 100px
+  display: block
+  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade
index 1eeda71d..f8e99d77 100644
--- a/client/components/cards/details.jade
+++ b/client/components/cards/details.jade
@@ -61,7 +61,11 @@ template(name="cardDetails")
         = description
     if attachments.count
       hr
-      +WindowAttachmentsModule(card=this)
+      h2
+        i.fa.fa-paperclip
+        | {{_ 'attachments'}}
+
+      +attachmentsGalery
 
     hr
     h2 {{ _ 'activity'}}
diff --git a/client/components/cards/templates.html b/client/components/cards/templates.html
deleted file mode 100644
index f61c3df5..00000000
--- a/client/components/cards/templates.html
+++ /dev/null
@@ -1,197 +0,0 @@
-<template name="cardAttachmentsPopup">
-    <div>
-        <ul class="pop-over-list">
-            <li>
-                <input type="file" name="file" class="js-attach-file hide" multiple>
-                <a class="js-computer-upload" href="#">
-                    {{_ 'computer'}}
-                </a>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<template name="attachmentDeletePopup">
-    <p>{{_ "attachment-delete-pop"}}</p>
-    <input type="submit" class="js-confirm negate full" value="{{_ 'delete'}}">
-</template>
-
-<template name="cardDetailSidebarOld">
-    <div class="card-details-window clearfix">
-        {{# if card.cover }}
-            <div class="window-cover js-card-cover-box js-open-card-cover-in-viewer has-cover" style="background-image: url({{ card.cover.url }}); background-color: rgb(119, 119, 119); background-size: contain;">
-        </div>
-        {{ /if }}
-        {{ #if card.archived }}
-            <div class="window-archive-banner js-archive-banner">
-                <span class="icon-lg fa fa-archive window-archive-banner-icon"></span>
-                <p class="window-archive-banner-text">{{_ "card-archived"}}</p>
-            </div>
-        {{ /if }}
-        <div class="window-header clearfix">
-            <span class="window-header-icon icon-lg fa fa-calendar-o"></span>
-            <div class="window-title card-details-title non-empty inline {{# if currentUser.isBoardMember }}editable{{/ if }}">
-                <h2 class="window-title-text current hide-on-edit js-card-title">{{ card.title }}</h2>
-                <div class="edit edit-heavy">
-                    <form id="WindowTitleEdit">
-                        <textarea type="text" class="field single-line" id="title">{{ card.title }}</textarea>
-                        <div class="edit-controls clearfix">
-                            <input type="submit" class="primary confirm js-title-save-edit" value="{{_ 'save'}}">
-                            <a href="#" class="icon-lg fa fa-times dark-hover cancel js-cancel-edit"></a>
-                        </div>
-                    </form>
-                </div>
-                <div class="quiet hide-on-edit window-header-inline-content js-current-list">
-                    <p class="inline-block bottom">
-                        {{_ 'in-list'}}
-                        <a href="#" class="{{# if currentUser.isBoardMember }}js-open-move-from-header{{else}}disabled{{/ if }}"><strong>{{ card.list.title }}</strong></a>
-                    </p>
-                </div>
-            </div>
-        </div>
-        <div class="window-main-col clearfix">
-            <div class="card-details-data gutter clearfix">
-                <div class="card-details-item card-details-item-block clear clearfix editable">
-                    {{# if card.members }}
-                        <div class="card-details-item card-details-item-members clearfix js-card-details-members">
-                            <h3 class="card-details-item-header">{{_ 'members'}}</h3>
-                            <div class="js-card-details-members-list clearfix">
-                                {{# each card.members }}
-                                    {{> userAvatar userId=this}}
-                                {{/ each }}
-                                <a class="card-details-item-add-button dark-hover js-details-edit-members">
-                                    <span class="icon-sm fa fa-plus"></span>
-                                </a>
-                            </div>
-                        </div>
-                    {{/ if }}
-                    {{# if card.labels }}
-                        <div class="card-details-item card-details-item-labels clearfix js-card-details-labels">
-                            <h3 class="card-details-item-header">{{_ 'labels'}}</h3>
-                            <div class="js-card-details-labels-list clearfix editable-labels js-edit-label">
-                                {{# each card.labels }}
-                                    <span class="card-label card-label-{{color}}" title="{{name}}">{{ name }}</span>
-                                {{/ each }}
-                                <a class="card-details-item-add-button dark-hover js-details-edit-labels">
-                                    <span class="icon-sm fa fa-plus"></span>
-                                </a>
-                            </div>
-                        </div>
-                    {{/ if }}
-                    <div class="card-details-item card-details-item-block clear clearfix editable" attr="desc">
-                        {{# if card.description }}
-                            <h3 class="card-details-item-header js-show-with-desc">{{_ 'description'}}</h3>
-                            {{# if currentUser.isBoardMember }}
-                                <a href="#" class="card-details-item-header-edit hide-on-edit js-show-with-desc js-edit-desc">{{_ 'edit'}}</a>
-                            {{/ if }}
-                            <div class="current markeddown hide-on-edit js-card-desc js-show-with-desc">
-                              {{#viewer}}{{ card.description }}{{/viewer}}
-                            </div>
-                        {{ else }}
-                            {{# if currentUser.isBoardMember }}
-                                <p class="bottom">
-                                    <a href="#" class="hide-on-edit quiet-button w-img js-edit-desc js-hide-with-desc">
-                                        <span class="icon-sm fa fa-align-left"></span>
-                                        {{_ 'edit-description'}}
-                                    </a>
-                                </p>
-                            {{/ if }}
-                        {{/ if }}
-                        <div class="card-details-edit edit">
-                            <form id="WindowDescEdit">
-                                {{#editor class="field single-line2" id="desc"}}{{ card.description }}{{/editor}}
-                                <div class="edit-controls clearfix">
-                                    <input type="submit" class="primary confirm js-title-save-edit" value="{{_ 'save'}}">
-                                    <a href="#" class="icon-lg fa fa-times dark-hover cancel js-cancel-edit"></a>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {{# if card.attachments.count }}
-                {{ > WindowAttachmentsModule card=card }}
-            {{/ if}}
-            {{ > WindowActivityModule card=card }}
-        </div>
-        {{# if currentUser.isBoardMember }}
-            {{ > WindowSidebarModule card=card }}
-        {{/if}}
-    </div>
-</template>
-
-<template name="WindowActivityModule">
-    <div class="card-detailswindow-module">
-        <div class="window-module-title window-module-title-no-divider">
-            <span class="window-module-title-icon icon-lg fa fa-comments-o"></span>
-            <h3>{{ _ 'activity'}}</h3>
-        </div>
-        {{# if currentUser.isBoardMember }}
-            <div class="new-comment js-new-comment">
-                {{> userAvatar userId=currentUser._id}}
-                <form id="CommentForm">
-                    {{#editor class="new-comment-input js-new-comment-input"}}{{/editor}}
-                    <div class="add-controls clearfix">
-                        <input type="submit" class="primary confirm clear js-add-comment" value="{{_ 'comment'}}" tabindex="2">
-                    </div>
-                </form>
-            </div>
-        {{/ if }}
-        {{ > activities mode="card" }}
-    </div>
-</template>
-
-<template name="WindowAttachmentsModule">
-    <div class="window-module js-attachments-section clearfix">
-        <div class="window-module-title window-module-title-no-divider">
-            <span class="window-module-title-icon icon-lg fa fa-paperclip"></span>
-            <h3 class="inline-block">{{_ 'attachments'}}</h3>
-        </div>
-        <div class="gutter">
-            <div class="clearfix js-attachment-list">
-                {{# each card.attachments }}
-                    <div class="attachment-thumbnail">
-                        {{# if isUploaded }}
-                            <a href="{{ url download=true }}" class="attachment-thumbnail-preview js-open-viewer attachment-thumbnail-preview-is-cover">
-                                {{# if isImage }}
-                                    <img src="{{ url }}">
-                                {{ else }}
-                                    <span class="attachment-thumbnail-preview-ext">{{ extension }}</span>
-                                {{ /if }}
-                            </a>
-                            <p class="attachment-thumbnail-details js-open-viewer">
-                                <a href="" class="attachment-thumbnail-details-title js-attachment-thumbnail-details">
-                                    {{ name }}
-                                    <span class="block quiet">
-                                    {{_ 'added'}} <span class="date">{{ moment uploadedAt }}</span>
-                                    </span>
-                                </a>
-                                <span class="quiet attachment-thumbnail-details-options">
-                                    <a href="{{ url download=true }}" class="attachment-thumbnail-details-options-item dark-hover js-download">
-                                        <span class="icon-sm fa fa-download"></span>
-                                        <span class="attachment-thumbnail-details-options-item-text">{{_ 'download'}}</span>
-                                    </a>
-                                    {{# if isImage }}
-                                        <a class="attachment-thumbnail-details-options-item dark-hover {{#if $eq ../card.coverId _id}}js-remove-cover{{else}}js-add-cover{{/if}}">
-                                            <span class="icon-sm fa fa-thumb-tack"></span>
-                                            <span class="attachment-thumbnail-details-options-item-text">{{#if $eq ../card.coverId _id}}{{_ 'remove-cover'}}{{else}}{{_ 'add-cover'}}{{/if}}</span>
-                                        </a>
-                                    {{/if}}
-                                    <a href="#" class="attachment-thumbnail-details-options-item attachment-thumbnail-details-options-item-delete dark-hover js-confirm-delete">
-                                        <span class="icon-sm fa fa-close"></span>
-                                        <span class="attachment-thumbnail-details-options-item-text">{{_ 'delete'}}</span>
-                                    </a>
-                                </span>
-                            </p>
-                        {{ else }}
-                            +spinner
-                        {{/ if }}
-                    </div>
-                {{/each}}
-            </div>
-            <p>
-                <a href="#" class="quiet-button js-attach">{{_ 'add-attachment' }}</a>
-            </p>
-        </div>
-    </div>
-</template>