apitech
/
wekan
mirror of https://github.com/wekan/wekan
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix card attachments

Browse Source 
Closes #192.
pull/195/head
Maxime Quandalle 11 years ago
parent c894567987
commit e001c3409a
6 changed files with 102 additions and 218 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 16
      client/components/activities/activities.js
  2. 40
      client/components/cards/attachments.jade
  3. 14
      client/components/cards/attachments.js
  4. 47
      client/components/cards/attachments.styl
  5. 6
      client/components/cards/details.jade
  6. 197
      client/components/cards/templates.html

16
client/components/activities/activities.js
Unescape View File

@ -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');

40
client/components/cards/attachments.jade
Unescape View File

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

14
client/components/cards/events.js → client/components/cards/attachments.js
Unescape View File

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

47
client/components/cards/attachments.styl
Unescape View File

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

6
client/components/cards/details.jade
Unescape View File

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

197
client/components/cards/templates.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save