summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
authorLauri Ojansivu <x@xet7.org>2019-10-03 04:23:33 +0300
committerLauri Ojansivu <x@xet7.org>2019-10-03 04:23:33 +0300
commit5bc355f9a5e78df4c19764fdc4a343a46af4fdf8 (patch)
tree619057d5fecfa4c041f5bbd99fd069b103e72123 /client/components/cards
parent21fa26a1be7cee947ea02de2ffd89bfd4e4b2f36 (diff)
downloadwekan-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.js3
-rw-r--r--client/components/cards/checklists.jade10
-rw-r--r--client/components/cards/checklists.js41
-rw-r--r--client/components/cards/checklists.styl12
-rw-r--r--client/components/cards/minicard.jade6
-rw-r--r--client/components/cards/minicard.styl15
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