From 96151080a01ebdbcea0dad2c29442f0a33a986f4 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Tue, 13 Dec 2016 15:51:22 -0800 Subject: [PATCH 1/3] Add card drag UI --- app/components/task-card.js | 6 ++++- app/controllers/index.js | 40 +++++++++++++++++++++++++++- app/styles/components/task-card.scss | 7 ++++- app/styles/main.scss | 31 +++++++++++++++++++++ app/templates/index.hbs | 18 +++++++++++-- bower.json | 3 ++- package.json | 1 + 7 files changed, 100 insertions(+), 6 deletions(-) diff --git a/app/components/task-card.js b/app/components/task-card.js index 47cdad97e..998919b26 100644 --- a/app/components/task-card.js +++ b/app/components/task-card.js @@ -15,5 +15,9 @@ export default Component.extend({ taskTypeClass: computed('taskType', function() { return `task-card--${get(this, 'taskType')}`; }), - taskType: alias('task.taskType') + taskType: alias('task.taskType'), + + drop() { + console.log('hello'); + } }); diff --git a/app/controllers/index.js b/app/controllers/index.js index 0b27f4cfe..4a0f618eb 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -1,4 +1,5 @@ import Ember from 'ember'; +import moment from 'moment'; const { Controller } = Ember; @@ -17,5 +18,42 @@ export default Controller.extend({ 'ending climate change.', 'families.', 'government.' - ] + ], + tasks: [ + Ember.Object.create({ + insertedAt: moment().subtract(10, 'weeks'), + number: 1, + taskType: 'idea', + title: 'Implement drag and drop' + }), + Ember.Object.create({ + insertedAt: moment().subtract(1, 'days'), + number: 2, + taskType: 'issue', + title: 'Fix the way we handle positioning' + }) + ], + otherTasks: [ + Ember.Object.create({ + insertedAt: moment().subtract(3, 'days'), + number: 3, + taskType: 'task', + title: 'Figure out the best Ember library for drag and drop' + }) + ], + dragulaconfig: { + options: { + copy: false, + revertOnSpill: false, + removeOnSpill: false + // Other options from the dragula source page. + }, + enabledEvents: ['drag', 'drop'] + }, + + actions: { + onDrop(el, target, source, sibling) { + console.log(el, target, source, sibling); + } + } }); diff --git a/app/styles/components/task-card.scss b/app/styles/components/task-card.scss index 4a059dbcd..bfea2e794 100644 --- a/app/styles/components/task-card.scss +++ b/app/styles/components/task-card.scss @@ -1,5 +1,6 @@ .task-card { - border: 1px solid $border-light; + background-color: white; + border: 1px solid #CCCCCC; border-radius: 0 0 4px 4px; display: flex; flex-direction: column; @@ -37,18 +38,22 @@ border-top: 2px solid $idea-color; &:hover { background-color: $idea-background; } .task-card__icon { @include taskBoardIcon($idea-small); } + + &.gu-mirror { background-color: $idea-background; } } &--issue { border-top: 2px solid $issue-color; &:hover { background-color: $issue-background; } .task-card__icon { @include taskBoardIcon($issue-small); } + &.gu-mirror { background-color: $issue-background; } } &--task { border-top: 2px solid $task-color; &:hover { background-color: $task-background; } .task-card__icon { @include taskBoardIcon($task-small); } + &.gu-mirror { background-color: $task-background; } } a { diff --git a/app/styles/main.scss b/app/styles/main.scss index 565a28605..95e1cbc86 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -185,3 +185,34 @@ p.subtext { margin: auto; max-width: 600px; } + +.task-board-container { + display: flex; + flex-grow: 1; + position: relative;; +} + +.task-board { + user-select: none; + margin-bottom: 10px; + overflow-x: auto; + overflow-y: hidden; + padding-bottom: 10px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.task-list { + position: relative; + height: 100%; + width: 280px; + margin-right: 10px; + border: 1px solid #DDDDDD; + border-radius: 4px; + padding: 10px 7px; + background: #FAFAFA; + float: left; +} diff --git a/app/templates/index.hbs b/app/templates/index.hbs index e3cd75a19..c2f45d3a3 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,4 +1,18 @@ -
+
+ {{#ember-dragula config=dragulaconfig class="task-board" drop="onDrop"}} + {{#ember-dragula-container class="task-list"}} + {{#each tasks as |task|}} + {{task-card task=task}} + {{/each}} + {{/ember-dragula-container}} + {{#ember-dragula-container class="task-list"}} + {{#each otherTasks as |task|}} + {{task-card task=task}} + {{/each}} + {{/ember-dragula-container}} + {{/ember-dragula}} +
+{{!--

Build a better future.

Contribute to software projects for {{typed-string strings=typedStrings typeSpeed=70 backDelay=1500 loop=true loopCount=false}}

@@ -29,4 +43,4 @@
- + --}} diff --git a/bower.json b/bower.json index 9de6bd9d0..684f82ac4 100644 --- a/bower.json +++ b/bower.json @@ -11,7 +11,8 @@ "typed.js": "^1.1.1", "bourbon": "^4.2.7", "neat": "^1.8.0", - "raven-js": "~3.3" + "raven-js": "~3.3", + "dragula": "^3.5.4" }, "resolutions": { "route-recognizer": "^0.2.7" diff --git a/package.json b/package.json index 99ac0c8b4..496dcbf87 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "ember-data": "^2.9.0", "ember-deferred-content": "0.2.0", "ember-disable-proxy-controllers": "^1.0.1", + "ember-dragula": "1.9.3", "ember-exam": "0.6.0", "ember-export-application-global": "^1.0.5", "ember-keyboard": "^2.1.9", From 19289267cf0b0899ecd82343bcf45552b9b06a2c Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Tue, 13 Dec 2016 16:45:17 -0800 Subject: [PATCH 2/3] Update css --- app/styles/main.scss | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/app/styles/main.scss b/app/styles/main.scss index 95e1cbc86..f3ab87961 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -186,25 +186,6 @@ p.subtext { max-width: 600px; } -.task-board-container { - display: flex; - flex-grow: 1; - position: relative;; -} - -.task-board { - user-select: none; - margin-bottom: 10px; - overflow-x: auto; - overflow-y: hidden; - padding-bottom: 10px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - .task-list { position: relative; height: 100%; From 3bee245cda7fc4da0359692ce14f31868cbd355e Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Tue, 13 Dec 2016 20:44:42 -0800 Subject: [PATCH 3/3] Update component --- app/components/task-card.js | 4 ++ app/components/task-list.js | 16 ++++++ app/controllers/index.js | 73 +++++++++++++++++--------- app/styles/main.scss | 5 ++ app/templates/components/task-list.hbs | 3 ++ app/templates/index.hbs | 13 ++--- 6 files changed, 78 insertions(+), 36 deletions(-) create mode 100644 app/components/task-list.js create mode 100644 app/templates/components/task-list.hbs diff --git a/app/components/task-card.js b/app/components/task-card.js index 998919b26..e44b709e0 100644 --- a/app/components/task-card.js +++ b/app/components/task-card.js @@ -8,10 +8,14 @@ const { } = Ember; export default Component.extend({ + attributeBindings: ['data-model-id', 'data-model-type'], classNames: ['task-card'], classNameBindings: ['taskTypeClass'], tagName: 'div', + 'data-model-id': alias('task.id'), + 'data-model-type': 'task', + taskTypeClass: computed('taskType', function() { return `task-card--${get(this, 'taskType')}`; }), diff --git a/app/components/task-list.js b/app/components/task-list.js new file mode 100644 index 000000000..131b2f4e8 --- /dev/null +++ b/app/components/task-list.js @@ -0,0 +1,16 @@ +import EmberDragulaContainer from 'ember-dragula/components/ember-dragula-container'; + +const { + computed: { alias, sort } +} = Ember; + +export default EmberDragulaContainer.extend({ + attributeBindings: ['data-model-id', 'data-model-type'], + classNames: ['task-list'], + sorting: ['order:asc'], + + orderedTasks: sort('taskList.tasks' , 'sorting'), + + 'data-model-id': alias('taskList.id'), + 'data-model-type': 'task-list', +}); diff --git a/app/controllers/index.js b/app/controllers/index.js index 4a0f618eb..b647961fe 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -1,7 +1,11 @@ import Ember from 'ember'; import moment from 'moment'; -const { Controller } = Ember; +const { + $, + Controller, + Object +} = Ember; export default Controller.extend({ typedStrings: [ @@ -19,41 +23,58 @@ export default Controller.extend({ 'families.', 'government.' ], - tasks: [ - Ember.Object.create({ - insertedAt: moment().subtract(10, 'weeks'), - number: 1, - taskType: 'idea', - title: 'Implement drag and drop' + taskLists: [ + Object.create({ + id: 1, + tasks: [ + Object.create({ + id: 1, + insertedAt: moment().subtract(10, 'weeks'), + number: 1, + order: 2, + taskType: 'idea', + title: 'Implement drag and drop' + }), + Object.create({ + id: 2, + insertedAt: moment().subtract(1, 'days'), + number: 2, + order: 1, + taskType: 'issue', + title: 'Fix the way we handle positioning' + }) + ] }), - Ember.Object.create({ - insertedAt: moment().subtract(1, 'days'), - number: 2, - taskType: 'issue', - title: 'Fix the way we handle positioning' - }) - ], - otherTasks: [ - Ember.Object.create({ - insertedAt: moment().subtract(3, 'days'), - number: 3, - taskType: 'task', - title: 'Figure out the best Ember library for drag and drop' + Object.create({ + id: 2, + tasks: [ + Object.create({ + id: 3, + insertedAt: moment().subtract(3, 'days'), + number: 3, + order: 1, + taskType: 'task', + title: 'Figure out the best Ember library for drag and drop' + }) + ], }) ], dragulaconfig: { options: { - copy: false, - revertOnSpill: false, - removeOnSpill: false - // Other options from the dragula source page. + copy: false, + revertOnSpill: false, + removeOnSpill: false + // Other options from the dragula source page. }, enabledEvents: ['drag', 'drop'] }, actions: { - onDrop(el, target, source, sibling) { - console.log(el, target, source, sibling); + onDrop(el, target) { + let listId = target.dataset.modelId; + let position = $(el).index(); + let taskId = el.dataset.modelId; + console.log(taskId, position, listId); } } }); diff --git a/app/styles/main.scss b/app/styles/main.scss index f3ab87961..f1fa4d360 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -197,3 +197,8 @@ p.subtext { background: #FAFAFA; float: left; } + +.code--theme-light { + display: flex; + flex-grow: 1; +} diff --git a/app/templates/components/task-list.hbs b/app/templates/components/task-list.hbs new file mode 100644 index 000000000..f29926771 --- /dev/null +++ b/app/templates/components/task-list.hbs @@ -0,0 +1,3 @@ +{{#each orderedTasks as |task|}} + {{task-card task=task}} +{{/each}} diff --git a/app/templates/index.hbs b/app/templates/index.hbs index c2f45d3a3..b43a46f6e 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,15 +1,8 @@
{{#ember-dragula config=dragulaconfig class="task-board" drop="onDrop"}} - {{#ember-dragula-container class="task-list"}} - {{#each tasks as |task|}} - {{task-card task=task}} - {{/each}} - {{/ember-dragula-container}} - {{#ember-dragula-container class="task-list"}} - {{#each otherTasks as |task|}} - {{task-card task=task}} - {{/each}} - {{/ember-dragula-container}} + {{#each taskLists as |taskList|}} + {{task-list class="task-list" taskList=taskList}} + {{/each}} {{/ember-dragula}}
{{!--