tasks

bukinoshita · Feb 13, 2018 · d28a5aa · d28a5aa
1 parent 45581f9
commit d28a5aa
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "prop-types": "^15.6.0",
     "react-hash-avatar": "^0.0.2",
     "react-render-html": "^0.6.0",
+    "react-sortable-hoc": "^0.6.8",
     "uid-promise": "^1.0.0"
   },
   "devDependencies": {

diff --git a/renderer/components/backlog.js → renderer/components/home/backlog.js b/renderer/components/backlog.js → renderer/components/home/backlog.js
@@ -1,8 +1,8 @@
 'use strict'
 
 // Components
-import EmptyState from './empty-state'
-import Task from './task'
+import EmptyState from './../empty-state'
+import Task from './../task'
 
 const Backlog = ({ tasks, onDelete, onMove }) => {
   const list =

diff --git a/renderer/components/done.js → renderer/components/home/done.js b/renderer/components/done.js → renderer/components/home/done.js
@@ -1,8 +1,8 @@
 'use strict'
 
 // Components
-import EmptyState from './empty-state'
-import Task from './task'
+import EmptyState from './../empty-state'
+import Task from './../task'
 
 const Done = ({ tasks, onDelete, onMove }) => {
   const list =

diff --git a/renderer/components/today.js → renderer/components/home/today.js b/renderer/components/today.js → renderer/components/home/today.js
@@ -1,8 +1,8 @@
 'use strict'
 
 // Components
-import EmptyState from './empty-state'
-import Task from './task'
+import EmptyState from './../empty-state'
+import Task from './../task'
 
 const Today = ({ tasks, onDelete, onMove }) => {
   const list =

diff --git a/renderer/components/icons/dragger.js b/renderer/components/icons/dragger.js
@@ -0,0 +1,36 @@
+'use strict'
+
+const Dragger = () => {
+  return (
+    <svg width="7px" height="10px" viewBox="0 0 7 10">
+      <g
+        stroke="none"
+        strokeWidth="1"
+        fill="#868E96"
+        fillRule="evenodd"
+        transform="translate(-289.000000, -184.000000)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <g transform="translate(25.000000, 167.000000)" stroke="#868E96">
+          <g>
+            <g transform="translate(265.000000, 18.000000)">
+              <g>
+                <ellipse cx="0.555555556" cy="4" rx="1" ry="1" />
+                <ellipse cx="0.555555556" cy="0.5" rx="1" ry="1" />
+                <ellipse cx="0.555555556" cy="7.5" rx="1" ry="1" />
+              </g>
+              <g id="more-vertical" transform="translate(3.888889, 0.000000)">
+                <ellipse cx="0.555555556" cy="4" rx="1" ry="1" />
+                <ellipse cx="0.555555556" cy="0.5" rx="1" ry="1" />
+                <ellipse cx="0.555555556" cy="7.5" rx="1" ry="1" />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export default Dragger
diff --git a/renderer/components/task-check.js b/renderer/components/task-check.js
@@ -3,42 +3,27 @@
 // Theme
 import { colors } from './../theme'
 
-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
-
+const TaskCheck = () => {
   return (
     <div>
-      <label className={isDone} onClick={() => onMove(hasAction, task)} />
+      <label />
 
       <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: ${colors.white};
-          border-style: solid;
-        }
-
-        .is-done {
           background-color: transparent;
           border: 0;
           cursor: default;
         }
 
-        .is-done:after {
+        label:after {
           display: inline-block;
           width: 6px;
           height: 2px;

diff --git a/renderer/components/task.js b/renderer/components/task.js
@@ -1,59 +1,60 @@
 'use strict'
 
-// Packages
-import Link from 'next/link'
-
 // Components
 import TaskCheck from './task-check'
 import TaskProject from './task-project'
 import TaskActions from './task-actions'
+import DraggerIcon from './icons/dragger'
 
 // Theme
 import { colors, typography } from './../theme'
 
 const Task = ({ task, onMove, onDelete }) => {
-  const { id, title, description, project } = task
+  const { title, description, project, type } = task
   const desc =
-    description.length >= 30 ? `${description.substr(0, 30)}...` : description
+    description.length >= 30 ? `${description.substr(0, 50)}...` : description
 
   return (
     <li>
-      <TaskCheck task={task} onMove={onMove} />
+      {type === 'done' ? <TaskCheck /> : null}
 
-      <Link href={`/edit?id=${id}`}>
-        <div className="heading">
-          <div>
-            <h2>{title}</h2>
-            <p>{desc}</p>
-          </div>
+      <div className="heading">
+        <div>
+          <h2>
+            {title} <TaskProject project={project} />
+          </h2>
+          <p>{desc}</p>
+        </div>
 
-          <TaskProject project={project} />
+        <div className="dragger">
+          <DraggerIcon />
         </div>
-      </Link>
+      </div>
 
-      <footer>
-        <TaskActions task={task} onMove={onMove} onDelete={onDelete} />
-      </footer>
+      {type !== 'done' ? ( // eslint-disable-line no-negated-condition
+        <div className="actions">
+          <TaskActions task={task} onMove={onMove} onDelete={onDelete} />
+        </div>
+      ) : null}
 
       <style jsx>{`
         li {
-          margin-bottom: 8px;
+          margin-bottom: 20px;
           display: flex;
           flex-wrap: wrap;
         }
 
         .heading {
-          max-width: calc(280px - 37px);
-          flex-basis: calc(280px - 37px);
-          cursor: pointer;
           display: flex;
           justify-content: space-between;
           align-items: center;
+          max-width: ${type === 'done' ? 'calc(280px - 37px)' : '100%'};
+          flex-basis: ${type === 'done' ? 'calc(280px - 37px)' : '100%'};
         }
 
         h2 {
           font-weight: ${typography.bold};
-          font-size: ${typography.f14};
+          font-size: ${typography.f16};
           color: ${colors.white};
           line-height: 1.5em;
           word-wrap: break-word;
@@ -63,20 +64,25 @@ const Task = ({ task, onMove, onDelete }) => {
           color: ${colors.romanSilver};
           line-height: 1.75;
           font-size: ${typography.f12};
-          margin: 2px 0;
+          margin-top: 5px;
           word-wrap: break-word;
         }
 
-        footer {
+        .dragger {
+          flex-basis: 10px;
+        }
+
+        .actions {
           transform: translateY(-5px);
           opacity: 0;
-          margin-left: 22px;
+          max-height: 0;
           transition: 0.2s;
           flex-basis: 100%;
         }
 
-        li:hover footer {
+        li:hover .actions {
           opacity: 1;
+          max-height: auto;
           transform: translateY(0);
         }
       `}</style>

diff --git a/renderer/layouts/page.js b/renderer/layouts/page.js
@@ -85,10 +85,6 @@ class Page extends Component {
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
           }
 
-          html {
-            -webkit-app-region: ${platform() === 'win32' ? 'inherit' : 'drag'};
-          }
-
           body {
             background-color: ${bgColor};
             max-height: 550px;

diff --git a/renderer/pages/home.js b/renderer/pages/home.js
@@ -9,12 +9,12 @@ import Page from './../layouts/page'
 // Components
 import Row from './../components/row'
 import Hero from './../components/hero'
-import Today from './../components/today'
-import Backlog from './../components/backlog'
-import Done from './../components/done'
 import ButtonLink from './../components/button-link'
 import Navigation from './../components/navigation'
 import Content from './../components/content'
+import Today from './../components/home/today'
+import Backlog from './../components/home/backlog'
+import Done from './../components/home/done'
 
 // Services
 import { getUser, updateUser } from './../services/api'

diff --git a/yarn.lock b/yarn.lock
@@ -935,7 +935,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.26.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -3353,7 +3353,7 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
-invariant@^2.2.2:
+invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -4068,7 +4068,7 @@ lodash.upperfirst@^4.2.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
 
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.8.0:
+lodash@^4.0.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1, lodash@^4.8.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5071,7 +5071,7 @@ prop-types-exact@1.1.1:
     has "^1.0.1"
     object.assign "^4.0.4"
 
-prop-types@15.6.0, prop-types@^15.5.4, prop-types@^15.6.0:
+prop-types@15.6.0, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -5249,6 +5249,15 @@ react-render-html@^0.6.0:
     parse5 "^3.0.2"
     react-attr-converter "^0.3.1"
 
+react-sortable-hoc@^0.6.8:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9"
+  dependencies:
+    babel-runtime "^6.11.6"
+    invariant "^2.2.1"
+    lodash "^4.12.0"
+    prop-types "^15.5.7"
+
 react@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"