diff options
author | Lauri Ojansivu <x@xet7.org> | 2019-10-03 04:23:33 +0300 |
---|---|---|
committer | Lauri Ojansivu <x@xet7.org> | 2019-10-03 04:23:33 +0300 |
commit | 5bc355f9a5e78df4c19764fdc4a343a46af4fdf8 (patch) | |
tree | 619057d5fecfa4c041f5bbd99fd069b103e72123 /client/components/cards | |
parent | 21fa26a1be7cee947ea02de2ffd89bfd4e4b2f36 (diff) | |
download | wekan-5bc355f9a5e78df4c19764fdc4a343a46af4fdf8.tar.gz wekan-5bc355f9a5e78df4c19764fdc4a343a46af4fdf8.tar.bz2 wekan-5bc355f9a5e78df4c19764fdc4a343a46af4fdf8.zip |
Drag handles. In progress.
Diffstat (limited to 'client/components/cards')
-rw-r--r-- | client/components/cards/cardDetails.js | 3 | ||||
-rw-r--r-- | client/components/cards/checklists.jade | 10 | ||||
-rw-r--r-- | client/components/cards/checklists.js | 41 | ||||
-rw-r--r-- | client/components/cards/checklists.styl | 12 | ||||
-rw-r--r-- | client/components/cards/minicard.jade | 6 | ||||
-rw-r--r-- | client/components/cards/minicard.styl | 15 |
6 files changed, 69 insertions, 18 deletions
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index ad0ee1a6..47941560 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -165,8 +165,7 @@ BlazeComponent.extendComponent({ $checklistsDom.sortable({ tolerance: 'pointer', helper: 'clone', - //handle: '.checklist-title', - handle: '.checklist-item-handle', + handle: '.checklist-title', items: '.js-checklist', placeholder: 'checklist placeholder', distance: 7, diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 5cc82211..635b4092 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -31,12 +31,20 @@ template(name="checklistDetail") h2.title.js-open-inlined-form.is-editable +viewer = checklist.title + if isMiniScreen a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle + unless isMiniScreen + if showDesktopDragHandles + a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle else h2.title +viewer = checklist.title - a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle + if isMiniScreen + a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle + unless isMiniScreen + if showDesktopDragHandles + a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle +checklistItems(checklist = checklist) template(name="checklistDeleteDialog") diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 1a3a3265..2128b67d 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -4,11 +4,11 @@ function initSorting(items) { items.sortable({ tolerance: 'pointer', helper: 'clone', - items: '.js-checklist-item-handle:not(.placeholder)', + items: '.js-checklist-item:not(.placeholder)', connectWith: '.js-checklist-items', appendTo: '.board-canvas', distance: 7, - placeholder: 'checklist-item-handle placeholder', + placeholder: 'checklist-item placeholder', scroll: false, start(evt, ui) { ui.placeholder.height(ui.helper.height()); @@ -17,11 +17,11 @@ function initSorting(items) { stop(evt, ui) { const parent = ui.item.parents('.js-checklist-items'); const checklistId = Blaze.getData(parent.get(0)).checklist._id; - let prevItem = ui.item.prev('.js-checklist-item-handle').get(0); + let prevItem = ui.item.prev('.js-checklist-item').get(0); if (prevItem) { prevItem = Blaze.getData(prevItem).item; } - let nextItem = ui.item.next('.js-checklist-item-handle').get(0); + let nextItem = ui.item.next('.js-checklist-item').get(0); if (nextItem) { nextItem = Blaze.getData(nextItem).item; } @@ -38,7 +38,8 @@ function initSorting(items) { }); // ugly touch event hotfix - enableClickOnTouch('.js-checklist-item-handle:not(.placeholder)'); + enableClickOnTouch('.js-checklist-item:not(.placeholder)'); + } BlazeComponent.extendComponent({ @@ -60,6 +61,30 @@ BlazeComponent.extendComponent({ if ($itemsDom.data('sortable')) { $(self.itemsDom).sortable('option', 'disabled', !userIsMember()); } + if(Utils.isMiniScreen()) { + this.$('.js-checklists').sortable({ + handle: '.checklist-handle', + }); + this.$('.js-checklist-item').sortable({ + handle: '.checklist-item-handle', + }); + } else { + if (Meteor.user().hasShowDesktopDragHandles()) { + this.$('.js-checklists').sortable({ + handle: '.checklist-handle', + }); + this.$('.js-checklist-item').sortable({ + handle: '.checklist-item-handle', + }); + } else { + this.$('.js-checklists').sortable({ + handle: '.checklist-title', + }); + this.$('.js-checklist-item').sortable({ + handle: '.checklist-item', + }); + } + } }); }, @@ -72,6 +97,12 @@ BlazeComponent.extendComponent({ }, }).register('checklistDetail'); +Template.checklistDetail.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, +}); + BlazeComponent.extendComponent({ addChecklist(event) { event.preventDefault(); diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index a383a128..dd3afe04 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -37,10 +37,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item .checklist-handle position: absolute - padding: 7px - top: 50% + float: right + padding-bottom: 30px transform: translateY(-50%) - left: 100px + left: 400px font-size: 18px .js-delete-checklist @@ -141,10 +141,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item max-width: 420px .checklist-item-handle position: absolute - padding: 7px - top: 50% + float: right + padding-bottom: 30px transform: translateY(-50%) - left: 200px + left: 400px font-size: 18px .js-delete-checklist-item diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index a3f32304..2bc20622 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -3,13 +3,13 @@ template(name="minicard") class="{{#if isLinkedCard}}linked-card{{/if}}" class="{{#if isLinkedBoard}}linked-board{{/if}}" class="minicard-{{colorClass}}") - if isMiniScreen - .handle - .fa.fa-arrows unless isMiniScreen if showDesktopDragHandles .handle .fa.fa-arrows + if isMiniScreen + .handle + .fa.fa-arrows if cover .minicard-cover(style="background-image: url('{{cover.url}}');") if labels diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index 9997fd5f..428a7abe 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -105,12 +105,25 @@ right: 5px; top: 5px; display:none; - @media only screen { + @media only screen and (min-width: 1200px) { display:block; } .fa-arrows font-size:20px; color: #ccc; + //.handle-minicard-desktop + // width: 20px; + // height: 20px; + // position: absolute; + // right: 5px; + // top: 5px; + // display:none; + // @media only screen and (min-width: 1200px) { + // display:block; + // } + // .fa-arrows + // font-size:20px; + // color: #ccc; .minicard-title p:last-child margin-bottom: 0 |