diff options
| -rw-r--r-- | client/components/boards/boardBody.js | 2 | ||||
| -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 | ||||
| -rw-r--r-- | client/components/lists/list.js | 39 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlanes.js | 78 |
9 files changed, 133 insertions, 73 deletions
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 47042ae7..d64636f4 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -89,7 +89,7 @@ BlazeComponent.extendComponent({ helper.append(list.clone()); return helper; }, - handle: '.js-swimlane-header-handle', + handle: '.js-swimlane-header', items: '.swimlane:not(.placeholder)', placeholder: 'swimlane placeholder', distance: 7, 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 diff --git a/client/components/lists/list.js b/client/components/lists/list.js index a134a00a..fa70179b 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -31,24 +31,6 @@ BlazeComponent.extendComponent({ const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)'; const $cards = this.$('.js-minicards'); - if (Utils.isMiniScreen) { - $('.js-minicards').sortable({ - handle: '.handle', - }); - } - - if (!Utils.isMiniScreen && showDesktopDragHandles) { - $('.js-minicards').sortable({ - handle: '.handle', - }); - } - - if (!Utils.isMiniScreen && !showDesktopDragHandles) { - $('.js-minicards').sortable({ - handle: 'list-header', - }); - } - $cards.sortable({ connectWith: '.js-minicards:not(.js-list-full)', tolerance: 'pointer', @@ -138,6 +120,21 @@ BlazeComponent.extendComponent({ // Disable drag-dropping if the current user is not a board member or is comment only this.autorun(() => { $cards.sortable('option', 'disabled', !userIsMember()); + if (Utils.isMiniScreen()) { + this.$('.js-minicards').sortable({ + handle: '.handle', + }); + } else { + if (Meteor.user().hasShowDesktopDragHandles()) { + this.$('.js-minicards').sortable({ + handle: '.handle', + }); + } else { + this.$('.js-minicards').sortable({ + handle: '.minicard-title', + }); + } + } }); // We want to re-run this function any time a card is added. @@ -180,3 +177,9 @@ Template.miniList.events({ Session.set('currentList', listId); }, }); + +Template.miniList.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, +}); diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 1f4a882b..ed53b9e9 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -56,6 +56,7 @@ function initSortable(boardComponent, $listsDom) { $listsDom.sortable({ tolerance: 'pointer', helper: 'clone', + handle: '.js-list-header', items: '.js-list:not(.js-list-composer)', placeholder: 'list placeholder', distance: 7, @@ -101,16 +102,7 @@ function initSortable(boardComponent, $listsDom) { boardComponent.autorun(() => { const $listDom = $listsDom; - if (Utils.isMiniScreen) { - $listsDom.sortable({ - handle: '.js-list-handle', - }); - } - if (!Utils.isMiniScreen && showDesktopDragHandles) { - $listsDom.sortable({ - handle: '.js-list-header', - }); - } + if ($listDom.data('sortable')) { $listsDom.sortable( 'option', @@ -118,6 +110,33 @@ function initSortable(boardComponent, $listsDom) { MultiSelection.isActive() || !userIsMember(), ); } + + + if (Utils.isMiniScreen()) { + this.$('.js-lists').sortable({ + handle: '.list-header-menu-handle', + }); + this.$('.js-swimlanes').sortable({ + handle: '.swimlane-header-menu-miniscreen-handle', + }); + } else { + if (Meteor.user().hasShowDesktopDragHandles()) { + this.$('.js-lists').sortable({ + handle: '.list-header-menu-handle', + }); + this.$('.js-swimlanes').sortable({ + handle: '.swimlane-header-menu-handle', + }); + } else { + this.$('.js-lists').sortable({ + handle: '.list-header', + }); + this.$('.js-swimlanes').sortable({ + handle: '.swimlane-header', + }); + } + } + }); } @@ -161,32 +180,13 @@ BlazeComponent.extendComponent({ // define a list of elements in which we disable the dragging because // the user will legitimately expect to be able to select some text with // his mouse. - - if (Utils.isMiniScreen) { - noDragInside = [ - 'a', - 'input', - 'textarea', - 'p', - '.js-list-handle', - '.js-swimlane-header-handle', - ]; - } - - if (!Utils.isMiniScreen && !showDesktopDragHandles) { - noDragInside = ['a', 'input', 'textarea', 'p', '.js-list-header']; - } - - if (!Utils.isMiniScreen && showDesktopDragHandles) { - noDragInside = [ - 'a', - 'input', - 'textarea', - 'p', - '.js-list-handle', - '.js-swimlane-header-handle', - ]; - } + const noDragInside = [ + 'a', + 'input', + 'textarea', + 'p', + '.js-list-header', + ]; if ( $(evt.target).closest(noDragInside.join(',')).length === 0 && @@ -308,3 +308,9 @@ BlazeComponent.extendComponent({ initSortable(boardComponent, $listsDom); }, }).register('listsGroup'); + +Template.listsGroup.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, +}); |