Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-21 18:00:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Set drag handle on touch screen not miniscreen

Browse source
This commit is contained in:
Repmovs 2022-08-12 17:21:45 +00:00
parent 61d2fd0308
commit d7bb0b4cc0
16 changed files with 214 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/components/boards/boardBody.js
View file

@ -193,7 +193,7 @@ BlazeComponent.extendComponent({
});
this.autorun(() => {
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
$swimlanesDom.sortable({
handle: '.js-swimlane-header-handle',
});

4
client/components/boards/boardsList.jade
View file

@ -62,7 +62,7 @@ template(name="boardList")
i.fa.js-has-spenttime-cards(
class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
if isMiniScreenOrShowDesktopDragHandles
if isTouchScreenOrShowDesktopDragHandles
i.fa.board-handle(
class="fa-arrows"
title="{{_ 'Drag board'}}")
@ -114,7 +114,7 @@ template(name="boardList")
i.fa.js-has-spenttime-cards(
class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
if isMiniScreenOrShowDesktopDragHandles
if isTouchScreenOrShowDesktopDragHandles
i.fa.board-handle(
class="fa-arrows"
title="{{_ 'Drag board'}}")

8
client/components/boards/boardsList.js
View file

@ -79,7 +79,7 @@ BlazeComponent.extendComponent({
// Disable drag-dropping if the current user is not a board member or is comment only
this.autorun(() => {
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
$boards.sortable({
handle: '.board-handle',
});
@ -323,12 +323,10 @@ BlazeComponent.extendComponent({
{ $or: [] }
]
};
if(selectedTeamsValues.length > 0)
{
if (selectedTeamsValues.length > 0) {
query.$and[2].$or.push({ 'teams.teamId': { $in: selectedTeamsValues } });
}
if(selectedOrgsValues.length > 0)
{
if (selectedOrgsValues.length > 0) {
query.$and[2].$or.push({ 'orgs.orgId': { $in: selectedOrgsValues } });
}

8
client/components/cards/cardDetails.js
View file

@ -306,7 +306,7 @@ BlazeComponent.extendComponent({
$checklistsDom.data('sortable')
) {
$checklistsDom.sortable('option', 'disabled', disabled);
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
$checklistsDom.sortable({ handle: '.checklist-handle' });
}
}
@ -1728,11 +1728,9 @@ EscapeActions.register(
() => {
// if card description diverges from database due to editing
// ask user whether changes should be applied
if(currentUser.profile.rescueCardDescription== true)
{
if (currentUser.profile.rescueCardDescription == true) {
currentDescription = document.getElementsByClassName("editor js-new-description-input").item(0)
if (currentDescription?.value && !(currentDescription.value === Utils.getCurrentCard().getDescription()))
{
if (currentDescription?.value && !(currentDescription.value === Utils.getCurrentCard().getDescription())) {
if (confirm(TAPi18n.__('rescue-card-description-dialogue'))) {
Utils.getCurrentCard().setDescription(document.getElementsByClassName("editor js-new-description-input").item(0).value);
// Save it!

4
client/components/cards/checklists.jade
View file

@ -35,7 +35,7 @@ template(name="checklistDetail")
if canModifyCard
h2.title.js-open-inlined-form.is-editable
if isMiniScreenOrShowDesktopDragHandles
if isTouchScreenOrShowDesktopDragHandles
span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
+viewer
= checklist.title
@ -104,7 +104,7 @@ template(name='checklistItemDetail')
if canModifyCard
.check-box-container
.check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
if isMiniScreenOrShowDesktopDragHandles
if isTouchScreenOrShowDesktopDragHandles
span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
.item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
+viewer

5
client/components/cards/checklists.js
View file

@ -61,7 +61,7 @@ BlazeComponent.extendComponent({
const $itemsDom = $(self.itemsDom);
if ($itemsDom.data('uiSortable') || $itemsDom.data('sortable')) {
$(self.itemsDom).sortable('option', 'disabled', !userIsMember());
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
$(self.itemsDom).sortable({
handle: 'span.fa.checklistitem-handle',
});
@ -419,8 +419,7 @@ class DialogWithBoardSwimlaneListAndCard extends BlazeComponent {
if (this.checklistDialogOption.boardId &&
this.checklistDialogOption.swimlaneId &&
this.checklistDialogOption.listId
)
{
) {
this.selectedBoardId.set(this.checklistDialogOption.boardId)
this.selectedSwimlaneId.set(this.checklistDialogOption.swimlaneId);
this.selectedListId.set(this.checklistDialogOption.listId);

2
client/components/cards/labels.jade
View file

@ -29,7 +29,7 @@ template(name="cardLabelsPopup")
each board.labels
li.js-card-label-item
a.card-label-edit-button.fa.fa-pencil.js-edit-label
if isMiniScreenOrShowDesktopDragHandles
if isTouchScreenOrShowDesktopDragHandles
span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
class="{{# if isLabelSelected ../_id }}active{{/if}}")

5
client/components/cards/labels.js
View file

@ -50,8 +50,7 @@ BlazeComponent.extendComponent({
appendTo: '.edit-labels-pop-over',
helper(element, currentItem) {
let ret = currentItem.clone();
if (currentItem.closest('.popup-container-depth-0').size() == 0)
{ // only set css transform at every sub-popup, not at the main popup
if (currentItem.closest('.popup-container-depth-0').size() == 0) { // only set css transform at every sub-popup, not at the main popup
const content = currentItem.closest('.content')[0]
const offsetLeft = content.offsetLeft;
const offsetTop = $('.pop-over > .header').height() * -1;
@ -76,7 +75,7 @@ BlazeComponent.extendComponent({
// Disable drag-dropping if the current user is not a board member or is comment only
this.autorun(() => {
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
$labels.sortable({
handle: '.label-handle',
});

2
client/components/cards/minicard.jade
View file

@ -3,7 +3,7 @@ template(name="minicard")
class="{{#if isLinkedCard}}linked-card{{/if}}"
class="{{#if isLinkedBoard}}linked-board{{/if}}"
class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
if isMiniScreenOrShowDesktopDragHandles
if isTouchScreenOrShowDesktopDragHandles
.handle
.fa.fa-arrows
if cover

14
client/components/lists/list.js
View file

@ -121,27 +121,23 @@ BlazeComponent.extendComponent({
const $boardCanvas = $('.board-canvas');
const boardCanvas = $boardCanvas[0];
if (event.pageX < 10)
{ // scroll to the left
if (event.pageX < 10) { // scroll to the left
boardCanvas.scrollLeft -= 15;
ui.helper[0].offsetLeft -= 15;
}
if (
event.pageX > boardCanvas.offsetWidth - 10 &&
boardCanvas.scrollLeft < $boardCanvas.data('scrollLeftMax') // don't scroll more than possible
)
{ // scroll to the right
) { // scroll to the right
boardCanvas.scrollLeft += 15;
}
if (
event.pageY > boardCanvas.offsetHeight - 10 &&
event.pageY + boardCanvas.scrollTop < $boardCanvas.data('scrollTopMax') // don't scroll more than possible
)
{ // scroll to the bottom
) { // scroll to the bottom
boardCanvas.scrollTop += 15;
}
if (event.pageY < 10)
{ // scroll to the top
if (event.pageY < 10) { // scroll to the top
boardCanvas.scrollTop -= 15;
}
},
@ -157,7 +153,7 @@ BlazeComponent.extendComponent({
});
this.autorun(() => {
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
$cards.sortable({
handle: '.handle',
});

2
client/components/lists/listHeader.jade
View file

@ -44,7 +44,7 @@ template(name="listHeader")
a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
if currentUser.isBoardAdmin
if isShowDesktopDragHandles
if isTouchScreenOrShowDesktopDragHandles
a.list-header-handle.handle.fa.fa-arrows.js-list-handle
template(name="editListTitleForm")

4
client/components/swimlanes/swimlaneHeader.jade
View file

@ -25,10 +25,10 @@ template(name="swimlaneFixedHeader")
if currentUser.isBoardAdmin
a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}")
a.fa.fa-navicon.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}")
unless isMiniScreen
unless isTouchScreen
if isShowDesktopDragHandles
a.swimlane-header-handle.handle.fa.fa-arrows.js-swimlane-header-handle
if isMiniScreen
if isTouchScreen
a.swimlane-header-miniscreen-handle.handle.fa.fa-arrows.js-swimlane-header-handle
template(name="editSwimlaneTitleForm")

4
client/components/swimlanes/swimlanes.js
View file

@ -114,7 +114,7 @@ function initSortable(boardComponent, $listsDom) {
//}
boardComponent.autorun(() => {
if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
if (Utils.isTouchScreenOrShowDesktopDragHandles()) {
$listsDom.sortable({
handle: '.js-list-handle',
});
@ -200,7 +200,7 @@ BlazeComponent.extendComponent({
// his mouse.
const noDragInside = ['a', 'input', 'textarea', 'p'].concat(
Utils.isMiniScreenOrShowDesktopDragHandles()
Utils.isTouchScreenOrShowDesktopDragHandles()
? ['.js-list-handle', '.js-swimlane-header-handle']
: ['.js-list-header'],
);

6
client/config/blazeHelpers.js
View file

@ -27,12 +27,14 @@ Blaze.registerHelper('concat', (...args) => args.slice(0, -1).join(''));
Blaze.registerHelper('isMiniScreen', () => Utils.isMiniScreen());
Blaze.registerHelper('isTouchScreen', () => Utils.isTouchScreen());
Blaze.registerHelper('isShowDesktopDragHandles', () =>
Utils.isShowDesktopDragHandles(),
);
Blaze.registerHelper('isMiniScreenOrShowDesktopDragHandles', () =>
Utils.isMiniScreenOrShowDesktopDragHandles(),
Blaze.registerHelper('isTouchScreenOrShowDesktopDragHandles', () =>
Utils.isTouchScreenOrShowDesktopDragHandles(),
);
Blaze.registerHelper('moment', (...args) => {

2
client/lib/tests/Utils.tests.js
View file

@ -151,7 +151,7 @@ describe('Utils', function() {
it('has no tests yet');
});
describe(Utils.isMiniScreenOrShowDesktopDragHandles.name, function() {
describe(Utils.isTouchScreenOrShowDesktopDragHandles.name, function () {
it('has no tests yet');
});

13
client/lib/utils.js
View file

@ -256,11 +256,13 @@ Utils = {
// OLD WINDOW WIDTH DETECTION:
this.windowResizeDep.depend();
return $(window).width() <= 800;
},
isTouchScreen() {
// NEW TOUCH DEVICE DETECTION:
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
/*
var hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
@ -281,10 +283,7 @@ Utils = {
);
}
}
*/
//if (hasTouchScreen)
// document.getElementById("exampleButton").style.padding="1em";
//return false;
return hasTouchScreen;
},
// returns if desktop drag handles are enabled
@ -300,8 +299,8 @@ Utils = {
},
// returns if mini screen or desktop drag handles
isMiniScreenOrShowDesktopDragHandles() {
return this.isMiniScreen() || this.isShowDesktopDragHandles();
isTouchScreenOrShowDesktopDragHandles() {
return this.isTouchScreen() || this.isShowDesktopDragHandles();
},
calculateIndexData(prevData, nextData, nItems = 1) {