diff options
Diffstat (limited to 'client/components/cards')
| -rw-r--r-- | client/components/cards/attachments.jade | 40 | ||||
| -rw-r--r-- | client/components/cards/attachments.js (renamed from client/components/cards/events.js) | 14 | ||||
| -rw-r--r-- | client/components/cards/attachments.styl | 47 | ||||
| -rw-r--r-- | client/components/cards/details.jade | 6 | ||||
| -rw-r--r-- | client/components/cards/templates.html | 197 |
5 files changed, 97 insertions, 207 deletions
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> |