add settings (#4)

bukinoshita · Dec 29, 2017 · 288cf43 · 288cf43
1 parent 870991e
commit 288cf43
Show file tree

Hide file tree

Showing 2 changed files with 219 additions and 1 deletion.
diff --git a/renderer/components/hero.js b/renderer/components/hero.js
@@ -1,9 +1,29 @@
 'use strict'
 
+import Link from 'next/link'
+
 const Hero = ({ type }) => {
   return (
     <header>
-      <h1>{type}</h1>
+      <div>
+        <h1>{type}</h1>
+
+        <Link href="/settings" prefetch>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+          </svg>
+        </Link>
+      </div>
 
       <style jsx>{`
         header {
@@ -13,10 +33,27 @@ const Hero = ({ type }) => {
           padding-bottom: 20px;
         }
 
+        div {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
         h1 {
           color: white;
           font-size: 30px;
         }
+
+        svg {
+          stroke: #868e96;
+          transition: 0.2s;
+          cursor: pointer;
+        }
+
+        svg:hover {
+          stroke: white;
+        }
       `}</style>
     </header>
   )

diff --git a/renderer/pages/settings.js b/renderer/pages/settings.js
@@ -0,0 +1,181 @@
+'use strict'
+
+// Packages
+import { remote, shell } from 'electron'
+import { Component } from 'react'
+import Link from 'next/link'
+
+// Layouts
+import Page from './../layouts/page'
+
+// Components
+import Row from './../components/row'
+import Hero from './../components/hero'
+
+class Settings extends Component {
+  constructor() {
+    super()
+
+    this.openUrl = this.openUrl.bind(this)
+  }
+
+  openUrl(url) {
+    shell.openExternal(url)
+  }
+
+  render() {
+    const appVersion = remote && remote.app ? remote.app.getVersion() : ''
+    return (
+      <Page>
+        <Row>
+          <section>
+            <Hero type="Settings" />
+
+            <ul>
+              <li>
+                Import tasks <span>soon</span>
+              </li>
+              <li>
+                Export tasks <span>soon</span>
+              </li>
+              <li>
+                Clear history <span>soon</span>
+              </li>
+              <li>
+                Cloud sync <span>soon</span>
+              </li>
+              <li>
+                Create team <span>soon</span>
+              </li>
+            </ul>
+
+            <footer>
+              <Link href="/start" prefetch>
+                <span>Back</span>
+              </Link>
+
+              <div>
+                <p>© taskr {appVersion}</p>
+
+                <ul>
+                  <li
+                    onClick={() =>
+                      this.openUrl('https://github.com/bukinoshita/taskr')
+                    }
+                  >
+                    About
+                  </li>
+                  <li
+                    onClick={() =>
+                      this.openUrl('https://github.com/bukinoshita/taskr')
+                    }
+                  >
+                    Github
+                  </li>
+                  <li
+                    onClick={() =>
+                      this.openUrl(
+                        'https://github.com/bukinoshita/taskr/releases'
+                      )
+                    }
+                  >
+                    Releases
+                  </li>
+                </ul>
+              </div>
+            </footer>
+          </section>
+        </Row>
+
+        <style jsx>{`
+          section {
+            display: flex;
+            flex-direction: column;
+            jutify-content: space-between;
+            min-height: 500px;
+          }
+
+          ul {
+            flex-basis: 340px;
+          }
+
+          li {
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.65);
+            height: 60px;
+            line-height: 60px;
+            font-size: 12px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            transition: 0.2s;
+          }
+
+          li:hover {
+            padding-left: 5px;
+            color: white;
+          }
+
+          span {
+            color: white;
+            border: 1px solid white;
+            margin-left: 5px;
+            font-size: 10px;
+            padding: 0 2px 1px;
+          }
+
+          footer div {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+
+          footer span {
+            display: block;
+            width: 100%;
+            color: #aaa;
+            height: 36px;
+            font-weight: 600;
+            font-size: 10px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            text-align: center;
+            transition: 0.2s all;
+            margin: 0;
+            padding: 0;
+            border: 0;
+          }
+
+          footer span:hover {
+            color: white;
+          }
+
+          footer p {
+            color: white;
+            font-size: 12px;
+            opacity: 0.75;
+            font-weight: 600;
+          }
+
+          footer ul {
+            flex-basis: auto;
+          }
+
+          footer li {
+            display: inline-block;
+            border-bottom: 0;
+            height: auto;
+            line-height: auto;
+            font-size: 12px;
+            margin-left: 8px;
+          }
+
+          footer li:hover {
+            padding-left: 0;
+          }
+        `}</style>
+      </Page>
+    )
+  }
+}
+
+export default Settings