diff options
author | Xavier Priour <xavier.priour@bubblyware.com> | 2015-12-02 09:54:21 +0100 |
---|---|---|
committer | Xavier Priour <xavier.priour@bubblyware.com> | 2015-12-02 09:54:21 +0100 |
commit | 569f8d50ba5dd65be2ab2c3ee9a52ea22d2e566b (patch) | |
tree | 75b1188515d70a814933e30d1b89d63116029710 /client/components | |
parent | 82c59fb85f5f44928a506da59087809640d99050 (diff) | |
parent | 827663f2550ba691067535b317dd9f0b0bec12ba (diff) | |
download | wekan-569f8d50ba5dd65be2ab2c3ee9a52ea22d2e566b.tar.gz wekan-569f8d50ba5dd65be2ab2c3ee9a52ea22d2e566b.tar.bz2 wekan-569f8d50ba5dd65be2ab2c3ee9a52ea22d2e566b.zip |
Merge remote-tracking branch 'upstream/devel' into devel
Diffstat (limited to 'client/components')
-rw-r--r-- | client/components/boards/boardBody.js | 6 | ||||
-rw-r--r-- | client/components/cards/attachments.jade | 12 | ||||
-rw-r--r-- | client/components/cards/attachments.js | 79 | ||||
-rw-r--r-- | client/components/cards/attachments.styl | 11 | ||||
-rw-r--r-- | client/components/main/keyboardShortcuts.styl | 5 | ||||
-rw-r--r-- | client/components/main/layouts.styl | 9 |
6 files changed, 112 insertions, 10 deletions
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 5a74e61b..a601bc2e 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -134,7 +134,7 @@ Template.boardBody.onRendered(function() { if (!Meteor.user() || !Meteor.user().isBoardMember()) return; - self.$(self.listsDom).sortable({ + $(self.listsDom).sortable({ tolerance: 'pointer', helper: 'clone', handle: '.js-list-header', @@ -146,7 +146,7 @@ Template.boardBody.onRendered(function() { Popup.close(); }, stop() { - self.$('.js-lists').find('.js-list:not(.js-list-composer)').each( + $(self.listsDom).find('.js-list:not(.js-list-composer)').each( (i, list) => { const data = Blaze.getData(list); Lists.update(data._id, { @@ -161,7 +161,7 @@ Template.boardBody.onRendered(function() { // Disable drag-dropping while in multi-selection mode self.autorun(() => { - self.$(self.listsDom).sortable('option', 'disabled', + $(self.listsDom).sortable('option', 'disabled', MultiSelection.isActive()); }); diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade index 168fc2c8..2cb3bb85 100644 --- a/client/components/cards/attachments.jade +++ b/client/components/cards/attachments.jade @@ -3,6 +3,16 @@ template(name="cardAttachmentsPopup") li input.js-attach-file.hide(type="file" name="file" multiple) a.js-computer-upload {{_ 'computer'}} + li + a.js-upload-clipboard-image {{_ 'clipboard'}} + +template(name="previewClipboardImagePopup") + p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}} + img.preview-clipboard-image() + button.primary.js-upload-pasted-image {{_ 'upload'}} + +template(name="previewAttachedImagePopup") + img.preview-large-image.js-large-image-clicked(src="{{pathFor url}}") template(name="attachmentDeletePopup") p {{_ "attachment-delete-pop"}} @@ -15,7 +25,7 @@ template(name="attachmentsGalery") .attachment-thumbnail if isUploaded if isImage - img.attachment-thumbnail-img(src="{{pathFor url}}") + img.attachment-thumbnail-img.js-preview-image(src="{{pathFor url}}") else span.attachment-thumbnail-ext= extension else diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js index ea621a74..1e5aa03b 100644 --- a/client/components/cards/attachments.js +++ b/client/components/cards/attachments.js @@ -20,6 +20,39 @@ Template.attachmentsGalery.events({ 'click .js-remove-cover'() { Cards.findOne(this.cardId).unsetCover(); }, + 'click .js-preview-image'(evt) { + Popup.open('previewAttachedImage').call(this, evt); + // when multiple thumbnails, if click one then another very fast, + // we might get a wrong width from previous img. + // when popup reused, onRendered() won't be called, so we cannot get there. + // here make sure to get correct size when this img fully loaded. + const img = $('img.preview-large-image')[0]; + if (!img) return; + const rePosPopup = () => { + const w = img.width; + const h = img.height; + // if the image is too large, we resize & center the popup. + if (w > 300) { + $('div.pop-over').css({ + width: (w + 20), + position: 'absolute', + left: (window.innerWidth - w)/2, + top: (window.innerHeight - h)/2, + }); + } + }; + const url = $(evt.currentTarget).attr('src'); + if (img.src === url && img.complete) + rePosPopup(); + else + img.onload = rePosPopup; + }, +}); + +Template.previewAttachedImagePopup.events({ + 'click .js-large-image-clicked'(){ + Popup.close(); + }, }); Template.cardAttachmentsPopup.events({ @@ -28,7 +61,7 @@ Template.cardAttachmentsPopup.events({ FS.Utility.eachFile(evt, (f) => { const file = new FS.File(f); file.boardId = card.boardId; - file.cardId = card._id; + file.cardId = card._id; Attachments.insert(file); Popup.close(); @@ -38,4 +71,48 @@ Template.cardAttachmentsPopup.events({ tpl.find('.js-attach-file').click(); evt.preventDefault(); }, + 'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'), +}); + +let pastedResults = null; + +Template.previewClipboardImagePopup.onRendered(() => { + // we can paste image from clipboard + $(document.body).pasteImageReader((results) => { + if (results.dataURL.startsWith('data:image/')) { + $('img.preview-clipboard-image').attr('src', results.dataURL); + pastedResults = results; + } + }); + + // we can also drag & drop image file to it + $(document.body).dropImageReader((results) => { + if (results.dataURL.startsWith('data:image/')) { + $('img.preview-clipboard-image').attr('src', results.dataURL); + pastedResults = results; + } + }); +}); + +Template.previewClipboardImagePopup.events({ + 'click .js-upload-pasted-image'() { + const results = pastedResults; + if (results && results.file) { + const card = this; + const file = new FS.File(results.file); + if (!results.name) { + // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type + if (typeof results.file.type === 'string') { + file.name(results.file.type.replace('image/', 'clipboard.')); + } + } + file.updatedAt(new Date()); + file.boardId = card.boardId; + file.cardId = card._id; + Attachments.insert(file); + pastedResults = null; + $(document.body).pasteImageReader(() => {}); + Popup.close(); + } + }, }); diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl index 5cdf7386..a582f3af 100644 --- a/client/components/cards/attachments.styl +++ b/client/components/cards/attachments.styl @@ -45,3 +45,14 @@ display: block box-shadow: 0 1px 2px rgba(0,0,0,.2) +.preview-large-image + max-width: 1000px + display: block + box-shadow: 0 1px 2px rgba(0,0,0,.2) + +.preview-clipboard-image + width: 280px + height: 200px + display: block + border: 1px solid black + box-shadow: 0 1px 2px rgba(0,0,0,.2) diff --git a/client/components/main/keyboardShortcuts.styl b/client/components/main/keyboardShortcuts.styl index 42e0637b..f77d387f 100644 --- a/client/components/main/keyboardShortcuts.styl +++ b/client/components/main/keyboardShortcuts.styl @@ -14,11 +14,6 @@ padding: 5px 8px margin: 5px font-size: 18px - font-weight: bold - background: white - border-radius: 3px - border: 1px solid darken(white, 10%) - box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15) .shortcuts-list-item-action font-size: 1.4em diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl index 1dbefc20..fcc94251 100644 --- a/client/components/main/layouts.styl +++ b/client/components/main/layouts.styl @@ -172,6 +172,15 @@ dl, dt dd margin: 0 0 16px 24px +kbd + padding: 1px 3px + margin: 3px + font-weight: bold + background: darken(white, 2%) + border-radius: 3px + border: 1px solid darken(white, 10%) + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15) + .clear clear: both |