diff --git a/app/components/task-card.js b/app/components/task-card.js index 47cdad97e..e44b709e0 100644 --- a/app/components/task-card.js +++ b/app/components/task-card.js @@ -8,12 +8,20 @@ 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')}`; }), - taskType: alias('task.taskType') + taskType: alias('task.taskType'), + + drop() { + console.log('hello'); + } }); 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 0b27f4cfe..b647961fe 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -1,6 +1,11 @@ import Ember from 'ember'; +import moment from 'moment'; -const { Controller } = Ember; +const { + $, + Controller, + Object +} = Ember; export default Controller.extend({ typedStrings: [ @@ -17,5 +22,59 @@ export default Controller.extend({ 'ending climate change.', 'families.', 'government.' - ] + ], + 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' + }) + ] + }), + 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. + }, + enabledEvents: ['drag', 'drop'] + }, + + actions: { + 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/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..f1fa4d360 100644 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -185,3 +185,20 @@ p.subtext { margin: auto; max-width: 600px; } + +.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; +} + +.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 e3cd75a19..b43a46f6e 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,4 +1,11 @@ -
+
+ {{#ember-dragula config=dragulaconfig class="task-board" drop="onDrop"}} + {{#each taskLists as |taskList|}} + {{task-list class="task-list" taskList=taskList}} + {{/each}} + {{/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 +36,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",