From 03d7fc02ecc90690e1282d417f35b7e4561af066 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Tue, 17 Sep 2019 01:39:10 +0300 Subject: Drag handles. In Progress. --- client/components/boards/boardBody.js | 2 +- client/components/cards/minicard.jade | 9 +++- client/components/cards/minicard.js | 3 ++ client/components/cards/minicard.styl | 2 +- client/components/lists/list.js | 14 ++++++- client/components/lists/list.styl | 22 +++++++--- client/components/lists/listHeader.jade | 4 ++ client/components/lists/listHeader.js | 6 +++ client/components/swimlanes/swimlaneHeader.jade | 2 + client/components/swimlanes/swimlaneHeader.js | 6 +++ client/components/swimlanes/swimlanes.js | 56 +++++++++++++++++++++---- client/components/swimlanes/swimlanes.styl | 8 ++++ client/components/users/userHeader.jade | 5 +++ client/components/users/userHeader.js | 6 +++ 14 files changed, 127 insertions(+), 18 deletions(-) (limited to 'client/components') diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 07cd306a..713b6cbc 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: '.js-swimlane-header-handle', items: '.swimlane:not(.placeholder)', placeholder: 'swimlane placeholder', distance: 7, diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index 3806ce41..a3f32304 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -3,6 +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 cover .minicard-cover(style="background-image: url('{{cover.url}}');") if labels @@ -15,8 +22,6 @@ template(name="minicard") if hiddenMinicardLabelText .minicard-label(class="card-label-{{color}}" title="{{name}}") .minicard-title - .handle - .fa.fa-arrows if $eq 'prefix-with-full-path' currentBoard.presentParentTask .parent-prefix | {{ parentString ' > ' }} diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js index 4c25c11d..4c76db46 100644 --- a/client/components/cards/minicard.js +++ b/client/components/cards/minicard.js @@ -26,6 +26,9 @@ BlazeComponent.extendComponent({ }).register('minicard'); Template.minicard.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, hiddenMinicardLabelText() { return Meteor.user().hasHiddenMinicardLabelText(); }, diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index c4172572..9997fd5f 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -105,7 +105,7 @@ right: 5px; top: 5px; display:none; - @media only screen and (max-width: 1199px) { + @media only screen { display:block; } .fa-arrows diff --git a/client/components/lists/list.js b/client/components/lists/list.js index c2b39be9..b7b8b2e0 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -31,7 +31,13 @@ BlazeComponent.extendComponent({ const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)'; const $cards = this.$('.js-minicards'); - if (window.matchMedia('(max-width: 1199px)').matches) { + if (Utils.isMiniScreen) { + $('.js-minicards').sortable({ + handle: '.handle', + }); + } + + if (!Utils.isMiniScreen && showDesktopDragHandles) { $('.js-minicards').sortable({ handle: '.handle', }); @@ -155,6 +161,12 @@ BlazeComponent.extendComponent({ }, }).register('list'); +Template.list.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, +}); + Template.miniList.events({ 'click .js-select-list'() { const listId = this._id; diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 81938c1a..459481ea 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -84,17 +84,16 @@ padding-left: 10px color: #a6a6a6 - .list-header-menu position: absolute padding: 27px 19px margin-top: 1px top: -7px - right: -7px + right: 3px .list-header-plus-icon color: #a6a6a6 - margin-right: 10px + margin-right: 15px .highlight color: #ce1414 @@ -165,7 +164,12 @@ @media screen and (max-width: 800px) .list-header-menu - margin-right: 30px + position: absolute + padding: 27px 19px + margin-top: 1px + top: -7px + margin-right: 50px + right: -3px .mini-list flex: 0 0 60px @@ -221,9 +225,17 @@ padding: 7px top: 50% transform: translateY(-50%) - right: 17px + margin-right: 27px font-size: 20px + .list-header-menu-handle + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + right: 10px + 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 f930e57a..6a61a66f 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -29,8 +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 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 i.list-header-watch-icon.fa.fa-eye @@ -39,6 +41,8 @@ template(name="listHeader") if canSeeAddCard a.js-add-card.fa.fa-plus.list-header-plus-icon a.fa.fa-navicon.js-open-list-menu + if showDesktopDragHandles + a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle template(name="editListTitleForm") .list-composer diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js index e8a82499..5b7232cd 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -80,6 +80,12 @@ BlazeComponent.extendComponent({ }, }).register('listHeader'); +Template.listHeader.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, +}); + Template.listActionPopup.helpers({ isWipLimitEnabled() { return Template.currentData().getWipLimit('enabled'); diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index 8c6aa5a3..fb6ef21d 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -16,6 +16,8 @@ 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 template(name="editSwimlaneTitleForm") .list-composer diff --git a/client/components/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js index ee21d100..6f8029fd 100644 --- a/client/components/swimlanes/swimlaneHeader.js +++ b/client/components/swimlanes/swimlaneHeader.js @@ -28,6 +28,12 @@ BlazeComponent.extendComponent({ }, }).register('swimlaneHeader'); +Template.swimlaneHeader.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, +}); + Template.swimlaneActionPopup.events({ 'click .js-set-swimlane-color': Popup.open('setSwimlaneColor'), 'click .js-close-swimlane'(event) { diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index e0857003..33a7991e 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -53,10 +53,21 @@ 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, @@ -151,13 +162,39 @@ 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. - const noDragInside = [ - 'a', - 'input', - 'textarea', - 'p', - '.js-list-header', - ]; + + if (Utils.isMiniScreen) { + const noDragInside = [ + 'a', + 'input', + 'textarea', + 'p', + '.js-list-handle', + '.js-swimlane-header-handle', + ]; + } + + if (!Utils.isMiniScreen && !showDesktopDragHandles) { + const noDragInside = [ + 'a', + 'input', + 'textarea', + 'p', + '.js-list-header', + ]; + } + + if (!Utils.isMiniScreen && showDesktopDragHandles) { + const noDragInside = [ + 'a', + 'input', + 'textarea', + 'p', + '.js-list-handle', + '.js-swimlane-header-handle', + ]; + } + if ( $(evt.target).closest(noDragInside.join(',')).length === 0 && this.$('.swimlane').prop('clientHeight') > evt.offsetY @@ -233,6 +270,9 @@ BlazeComponent.extendComponent({ }).register('addListForm'); Template.swimlane.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, canSeeAddList() { return ( Meteor.user() && diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 1056e1e3..503091ee 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -50,6 +50,14 @@ margin-left: 5px margin-right: 10px + .swimlane-header-menu-handle + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + left: 300px + font-size: 18px + .list-group height: 100% diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade index 946bdab1..50a80396 100644 --- a/client/components/users/userHeader.jade +++ b/client/components/users/userHeader.jade @@ -78,6 +78,11 @@ template(name="changeSettingsPopup") | {{_ 'hide-system-messages'}} if hiddenSystemMessages i.fa.fa-check + li + a.js-toggle-desktop-drag-handles + | {{_ 'show-desktop-drag-handles'}} + if showDesktopDragHandles + i.fa.fa-check li label.bold | {{_ 'show-cards-minimum-count'}} diff --git a/client/components/users/userHeader.js b/client/components/users/userHeader.js index 36fb2020..194f990f 100644 --- a/client/components/users/userHeader.js +++ b/client/components/users/userHeader.js @@ -161,6 +161,9 @@ Template.changeLanguagePopup.events({ }); Template.changeSettingsPopup.helpers({ + showDesktopDragHandles() { + return Meteor.user().hasShowDesktopDragHandles(); + }, hiddenSystemMessages() { return Meteor.user().hasHiddenSystemMessages(); }, @@ -170,6 +173,9 @@ Template.changeSettingsPopup.helpers({ }); Template.changeSettingsPopup.events({ + 'click .js-toggle-desktop-drag-handles'() { + Meteor.call('toggleDesktopDragHandles'); + }, 'click .js-toggle-system-messages'() { Meteor.call('toggleSystemMessages'); }, -- cgit v1.2.3-1-g7c22