Skip to content

Commit

Permalink
show task as done on done's tab (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
bukinoshita committed Jan 6, 2018
1 parent 5428f7d commit f03cbb2
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 132 deletions.
4 changes: 1 addition & 3 deletions renderer/components/done.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ const Done = ({ tasks, onMove }) => {
tasks.length === 0 ? (
<EmptyState title="tasks done" />
) : (
tasks.map(task => (
<Task key={task.id} task={task} onMove={onMove} isDone={true} />
))
tasks.map(task => <Task key={task.id} task={task} onMove={onMove} />)
)

return (
Expand Down
53 changes: 53 additions & 0 deletions renderer/components/task-actions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
'use strict'

// Packages
import Link from 'next/link'

const TaskActions = ({ task, onDelete, onMove }) => {
const { id, type } = task
const isToday = type === 'today' ? 'done' : 'today'
const nextType = type === 'today' ? 'today' : 'backlog'

return (
<ul>
{type !== 'done' ? ( // eslint-disable-line no-negated-condition
<li onClick={() => onMove(nextType, task)}>{isToday}</li>
) : null}

{type !== 'backlog' ? ( // eslint-disable-line no-negated-condition
<li onClick={() => onMove('back', task)}>backlog</li>
) : null}

<li>
<Link href={`/edit?id=${id}`}>
<span>view</span>
</Link>
</li>

<li onClick={() => onDelete(task)}>delete</li>

<style jsx>{`
li {
color: white;
display: inline-block;
font-size: 11px;
font-weight: 600;
margin-right: 10px;
color: #868e96;
cursor: pointer;
}
span {
color: #868e96;
}
li:hover,
span:hover {
color: white;
}
`}</style>
</ul>
)
}

export default TaskActions
58 changes: 58 additions & 0 deletions renderer/components/task-check.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
'use strict'

const TaskCheck = ({ task, onMove }) => {
const { type } = task
const isDone = type === 'done' ? 'is-done' : ''
const nextMove = type === 'backlog' ? 'backlog' : 'today'
const hasAction = type === 'done' ? null : nextMove

return (
<div>
<label className={isDone} onClick={() => onMove(hasAction, task)} />

<style jsx>{`
label {
height: 12px;
width: 12px;
display: block;
border: 1px dotted rgba(255, 255, 255, 0.75);
border-radius: 50%;
margin-right: 10px;
margin-top: 6px;
cursor: pointer;
transition: 0.15s;
position: relative;
}
label:hover {
border-color: white;
border-style: solid;
}
.is-done {
background-color: transparent;
border: 0;
cursor: default;
}
.is-done:after {
display: inline-block;
width: 6px;
height: 2px;
position: absolute;
left: 2px;
top: 3px;
border: 2px solid #00e7c0;
border-top: 0;
border-right: 0;
color: #00e7c0;
opacity: 1;
transform: rotate(-45deg) scale(1);
content: '';
}
`}</style>
</div>
)
}

export default TaskCheck
25 changes: 25 additions & 0 deletions renderer/components/task-project.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
'use strict'

// Packages
import reactHashAvatar from 'react-hash-avatar'
import renderHTML from 'react-render-html'

const TaskProject = ({ project }) => {
if (project) {
return (
<span title={project}>
{renderHTML(reactHashAvatar(project, { size: 8, radius: '50px' }))}

<style jsx>{`
span {
flex-basis: 10px;
}
`}</style>
</span>
)
}

return null
}

export default TaskProject
142 changes: 13 additions & 129 deletions renderer/components/task.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,121 +2,20 @@

// Packages
import Link from 'next/link'
import reactHashAvatar from 'react-hash-avatar'
import renderHTML from 'react-render-html'

const Task = ({ task, onMove, onDelete, isDone }) => {
const { id, title, description, project, type } = task
const isToday = type === 'today' ? 'done' : 'today'
const nextType = type === 'today' ? 'today' : 'backlog'
// Components
import TaskCheck from './task-check'
import TaskProject from './task-project'
import TaskActions from './task-actions'

const Task = ({ task, onMove, onDelete }) => {
const { id, title, description, project } = task
const desc =
description.length >= 30 ? `${description.substr(0, 30)}...` : description
const hasProject = project ? (
<span title={project}>
{renderHTML(reactHashAvatar(project, { size: 8, radius: '50px' }))}

<style jsx>{`
span {
flex-basis: 10px;
}
`}</style>
</span>
) : null
const backBacklog =
type === 'today' || type === 'done' ? (
<li onClick={() => onMove('back', task)}>
backlog
<style jsx>{`
li {
color: white;
display: inline-block;
font-size: 11px;
font-weight: 600;
margin-right: 10px;
color: #868e96;
cursor: pointer;
}
li:hover {
color: white;
}
`}</style>
</li>
) : null
const hasFooter = isDone ? (
<div>
<ul>
{backBacklog}

<li>
<Link href={`/task?id=${id}`}>
<span>view</span>
</Link>
</li>
</ul>

<style jsx>{`
li {
color: white;
display: inline-block;
font-size: 11px;
font-weight: 600;
margin-right: 10px;
color: #868e96;
cursor: pointer;
}
span {
color: #868e96;
}
li:hover,
span:hover {
color: white;
}
`}</style>
</div>
) : (
<div>
<ul>
<li onClick={() => onMove(nextType, task)}>{isToday}</li>

{backBacklog}

<li>
<Link href={`/edit?id=${id}`}>
<span>view</span>
</Link>
</li>
<li onClick={() => onDelete(task)}>delete</li>
</ul>

<style jsx>{`
li {
color: white;
display: inline-block;
font-size: 11px;
font-weight: 600;
margin-right: 10px;
color: #868e96;
cursor: pointer;
}
span {
color: #868e96;
}
li:hover,
span:hover {
color: white;
}
`}</style>
</div>
)

return (
<li>
<label onClick={() => onMove(task)} />
<TaskCheck task={task} onMove={onMove} />

<Link href={`/edit?id=${id}`}>
<div className="heading">
Expand All @@ -125,11 +24,13 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
<p>{desc}</p>
</div>

{hasProject}
<TaskProject project={project} />
</div>
</Link>

<footer>{hasFooter}</footer>
<footer>
<TaskActions task={task} onMove={onMove} onDelete={onDelete} />
</footer>

<style jsx>{`
li {
Expand All @@ -138,18 +39,6 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
flex-wrap: wrap;
}
label {
height: 12px;
width: 12px;
display: block;
border: 1px dotted rgba(255, 255, 255, 0.75);
border-radius: 50%;
margin-right: 15px;
margin-top: 6px;
cursor: pointer;
transition: 0.15s;
}
.heading {
max-width: calc(280px - 37px);
flex-basis: calc(280px - 37px);
Expand All @@ -159,11 +48,6 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
align-items: center;
}
label:hover {
border-color: white;
border-style: solid;
}
h2 {
font-weight: 700;
font-size: 14px;
Expand All @@ -183,7 +67,7 @@ const Task = ({ task, onMove, onDelete, isDone }) => {
footer {
transform: translateY(-5px);
opacity: 0;
margin-left: 28px;
margin-left: 22px;
transition: 0.2s;
flex-basis: 100%;
}
Expand Down

0 comments on commit f03cbb2

Please sign in to comment.