diff options
author | Lauri Ojansivu <x@xet7.org> | 2019-10-01 00:48:36 +0300 |
---|---|---|
committer | Lauri Ojansivu <x@xet7.org> | 2019-10-01 00:48:36 +0300 |
commit | 98c38fe58f597cbc0389676ae880704a671e480b (patch) | |
tree | 56044051bc05c6d2ee9a942987a5740b3ea12d73 | |
parent | 44378fe9d10f690a42dc79f0e07aebade7f708f1 (diff) | |
download | wekan-98c38fe58f597cbc0389676ae880704a671e480b.tar.gz wekan-98c38fe58f597cbc0389676ae880704a671e480b.tar.bz2 wekan-98c38fe58f597cbc0389676ae880704a671e480b.zip |
Drag handles continue. In progress.
Thanks to xet7 !
-rw-r--r-- | client/components/cards/cardDetails.js | 3 | ||||
-rw-r--r-- | client/components/cards/checklists.jade | 7 | ||||
-rw-r--r-- | client/components/cards/checklists.js | 19 | ||||
-rw-r--r-- | client/components/cards/checklists.styl | 19 | ||||
-rw-r--r-- | client/components/lists/list.js | 1 | ||||
-rw-r--r-- | client/components/lists/list.styl | 10 | ||||
-rw-r--r-- | client/components/lists/listHeader.jade | 3 | ||||
-rw-r--r-- | client/components/swimlanes/swimlaneHeader.jade | 7 | ||||
-rw-r--r-- | client/components/swimlanes/swimlanes.js | 35 | ||||
-rw-r--r-- | client/components/swimlanes/swimlanes.styl | 8 | ||||
-rw-r--r-- | package-lock.json | 6 | ||||
-rw-r--r-- | package.json | 2 |
12 files changed, 88 insertions, 32 deletions
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 47941560..ad0ee1a6 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -165,7 +165,8 @@ BlazeComponent.extendComponent({ $checklistsDom.sortable({ tolerance: 'pointer', helper: 'clone', - handle: '.checklist-title', + //handle: '.checklist-title', + handle: '.checklist-item-handle', items: '.js-checklist', placeholder: 'checklist placeholder', distance: 7, diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 279d3671..5cc82211 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -31,10 +31,12 @@ template(name="checklistDetail") h2.title.js-open-inlined-form.is-editable +viewer = checklist.title + 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 +checklistItems(checklist = checklist) template(name="checklistDeleteDialog") @@ -75,6 +77,11 @@ template(name="checklistItems") +editChecklistItemForm(type = 'item' item = item checklist = checklist) else +checklistItemDetail(item = item checklist = checklist) + if isMiniScreen + a.checklist-item-handle.handle.fa.fa-arrows.js-checklist-item-handle + unless isMiniScreen + if showDesktopDragHandles + a.checklist-item-handle.handle.fa.fa-arrows.js-checklist-item-handle if canModifyCard +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist) +addChecklistItemForm diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 57939eb8..1a3a3265 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:not(.placeholder)', + items: '.js-checklist-item-handle:not(.placeholder)', connectWith: '.js-checklist-items', appendTo: '.board-canvas', distance: 7, - placeholder: 'checklist-item placeholder', + placeholder: 'checklist-item-handle 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').get(0); + let prevItem = ui.item.prev('.js-checklist-item-handle').get(0); if (prevItem) { prevItem = Blaze.getData(prevItem).item; } - let nextItem = ui.item.next('.js-checklist-item').get(0); + let nextItem = ui.item.next('.js-checklist-item-handle').get(0); if (nextItem) { nextItem = Blaze.getData(nextItem).item; } @@ -38,7 +38,7 @@ function initSorting(items) { }); // ugly touch event hotfix - enableClickOnTouch('.js-checklist-item:not(.placeholder)'); + enableClickOnTouch('.js-checklist-item-handle:not(.placeholder)'); } BlazeComponent.extendComponent({ @@ -197,6 +197,12 @@ BlazeComponent.extendComponent({ }, }).register('checklists'); +Template.checklists.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, +}); + Template.checklistDeleteDialog.onCreated(() => { const $cardDetails = this.$('.card-details'); this.scrollState = { @@ -231,6 +237,9 @@ Template.checklistItemDetail.helpers({ !Meteor.user().isCommentOnly() ); }, + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, }); BlazeComponent.extendComponent({ diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index 8ac37a15..a383a128 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -35,6 +35,14 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item &.is-finished color: #3cb500 + .checklist-handle + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + left: 100px + font-size: 18px + .js-delete-checklist @extends .delete-text @@ -70,7 +78,7 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item margin-left: 12% float: left .toggle-delete-checklist-dialog - margin-right: 12% + margin-right: 20% float: right #card-details-overlay @@ -125,12 +133,19 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item &.is-checked color: #8c8c8c font-style: italic - & .viewer + &.viewer p margin-bottom: 2px display: block word-wrap: break-word max-width: 420px + .checklist-item-handle + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + left: 200px + font-size: 18px .js-delete-checklist-item margin: 0 0 0.5em 1.33em diff --git a/client/components/lists/list.js b/client/components/lists/list.js index 023ba358..a134a00a 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -52,6 +52,7 @@ BlazeComponent.extendComponent({ $cards.sortable({ connectWith: '.js-minicards:not(.js-list-full)', tolerance: 'pointer', + handle: 'list-header', appendTo: '.board-canvas', helper(evt, item) { const helper = item.clone(); diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 459481ea..53de5bad 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -225,7 +225,7 @@ padding: 7px top: 50% transform: translateY(-50%) - margin-right: 27px + right: 47px font-size: 20px .list-header-menu-handle @@ -236,6 +236,14 @@ right: 10px font-size: 24px + .list-header-menu-handle-miniscreen-angle-left + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + right: 25px + font-size: 24px + .link-board-wrapper display: flex align-items: baseline diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 6a61a66f..78d0801a 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -29,9 +29,10 @@ template(name="listHeader") if canSeeAddCard a.js-add-card.fa.fa-plus.list-header-plus-icon a.fa.fa-navicon.js-open-list-menu - a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle + a.list-header-menu-handle-miniscreen-angle-left.handle.fa.fa-arrows.js-list-handle else a.list-header-menu-icon.fa.fa-angle-right.js-select-list + | a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle else if currentUser.isBoardMember if isWatching diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index fb6ef21d..dde8561e 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -16,8 +16,11 @@ template(name="swimlaneFixedHeader") unless currentUser.isCommentOnly a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon a.fa.fa-navicon.js-open-swimlane-menu - if showDesktopDragHandles - a.swimlane-header-menu-handle.handle.fa.fa-arrows.js-swimlane-header-handle + if isMiniScreen + a.swimlane-header-menu-miniscreen-handle.handle.fa.fa-arrows.js-swimlane-header-handle + unless isMiniScreen + if showDesktopDragHandles + a.swimlane-header-menu-handle.handle.fa.fa-arrows.js-swimlane-header-handle template(name="editSwimlaneTitleForm") .list-composer diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 2c916e4d..8953eb05 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -53,22 +53,9 @@ function initSortable(boardComponent, $listsDom) { }, }; - if (Utils.isMiniScreen) { - $listsDom.sortable({ - handle: '.js-list-handle', - }); - } - - if (!Utils.isMiniScreen && showDesktopDragHandles) { - $listsDom.sortable({ - handle: '.js-list-header', - }); - } - $listsDom.sortable({ tolerance: 'pointer', helper: 'clone', - handle: '.js-list-header', items: '.js-list:not(.js-list-composer)', placeholder: 'list placeholder', distance: 7, @@ -113,6 +100,22 @@ function initSortable(boardComponent, $listsDom) { // is not a board member 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', @@ -165,7 +168,7 @@ BlazeComponent.extendComponent({ // his mouse. if (Utils.isMiniScreen) { - const noDragInside = [ + noDragInside = [ 'a', 'input', 'textarea', @@ -176,7 +179,7 @@ BlazeComponent.extendComponent({ } if (!Utils.isMiniScreen && !showDesktopDragHandles) { - const noDragInside = [ + noDragInside = [ 'a', 'input', 'textarea', @@ -186,7 +189,7 @@ BlazeComponent.extendComponent({ } if (!Utils.isMiniScreen && showDesktopDragHandles) { - const noDragInside = [ + noDragInside = [ 'a', 'input', 'textarea', diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 503091ee..4fbfce4f 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -58,6 +58,14 @@ left: 300px font-size: 18px + .swimlane-header-menu-miniscreen-handle + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + left: 487px + font-size: 18px + .list-group height: 100% diff --git a/package-lock.json b/package-lock.json index 32c0fc21..12ae95d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,9 +25,9 @@ } }, "@babel/runtime": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz", - "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==", + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.2.tgz", + "integrity": "sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==", "requires": { "regenerator-runtime": "^0.13.2" } diff --git a/package.json b/package.json index c562b049..139cb96c 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "prettier-eslint": "^8.8.2" }, "dependencies": { - "@babel/runtime": "^7.5.5", + "@babel/runtime": "^7.6.2", "ajv": "^5.0.0", "babel-runtime": "^6.26.0", "bcrypt": "^3.0.2", |