mirror of
https://github.com/wekan/wekan.git
synced 2025-04-23 13:37:09 -04:00
Maxime Quandalle
parent
c894567987
commit
e001c3409a
6 changed files with 102 additions and 218 deletions
|
|
@ -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
Normal file
40
client/components/cards/attachments.jade
Normal 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' }}
|
||||
|
|
@ -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
Normal file
47
client/components/cards/attachments.styl
Normal 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)
|
||||
|
||||
|
|
@ -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'}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue