summaryrefslogtreecommitdiffstats
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/components/activities/activities.js16
-rw-r--r--client/components/cards/attachments.jade40
-rw-r--r--client/components/cards/attachments.js (renamed from client/components/cards/events.js)14
-rw-r--r--client/components/cards/attachments.styl47
-rw-r--r--client/components/cards/details.jade6
-rw-r--r--client/components/cards/templates.html197
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>