From 1582cd10e11ed78f8d9121f077ab5bf3e53d35d8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 13 Jan 2018 10:53:25 -0800
Subject: [PATCH] flesh out settings

---
 routes/_components/NotLoggedInHome.html       |  3 +-
 routes/_utils/mastodon.js                     |  2 +-
 .../settings/_components/SettingsLayout.html  |  8 +++
 routes/settings/_components/SettingsNav.html  | 70 ++++++++++++++-----
 .../settings/_components/SettingsNavItem.html | 24 +++++++
 routes/settings/about.html                    |  4 +-
 routes/settings/index.html                    | 35 +++++++++-
 .../{add-instance.html => instances.html}     |  8 +--
 scss/theme-default.scss                       | 10 ++-
 9 files changed, 134 insertions(+), 30 deletions(-)
 create mode 100644 routes/settings/_components/SettingsNavItem.html
 rename routes/settings/{add-instance.html => instances.html} (95%)

diff --git a/routes/_components/NotLoggedInHome.html b/routes/_components/NotLoggedInHome.html
index d49172c..798e1f2 100644
--- a/routes/_components/NotLoggedInHome.html
+++ b/routes/_components/NotLoggedInHome.html
@@ -7,7 +7,7 @@
   </div>
   <p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
 
-  <p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
+  <p>To get started, <a href="/settings/instances">log in to an instance</a>.</p>
 
   <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 </FreeTextLayout>
@@ -15,6 +15,7 @@
   .banner {
     display: flex;
     align-items: center;
+    margin: 0 0 30px;
   }
   svg {
     width: 70px;
diff --git a/routes/_utils/mastodon.js b/routes/_utils/mastodon.js
index 880c3ed..9542623 100644
--- a/routes/_utils/mastodon.js
+++ b/routes/_utils/mastodon.js
@@ -1,5 +1,5 @@
 const WEBSITE = 'https://pinafore.social'
-const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/add-instance'
+const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances'
 const SCOPES = 'read write follow'
 const CLIENT_NAME = 'Pinafore'
 
diff --git a/routes/settings/_components/SettingsLayout.html b/routes/settings/_components/SettingsLayout.html
index 35022d1..4f2bb9b 100644
--- a/routes/settings/_components/SettingsLayout.html
+++ b/routes/settings/_components/SettingsLayout.html
@@ -5,6 +5,14 @@
     <slot></slot>
   </FreeTextLayout>
 </div>
+<style>
+  .settings {
+    margin-top: 20px;
+  }
+  :global(.settings .free-text h1) {
+    margin-bottom: 30px;
+  }
+</style>
 <script>
   import SettingsNav from './SettingsNav.html';
   import FreeTextLayout from '../../_components/FreeTextLayout'
diff --git a/routes/settings/_components/SettingsNav.html b/routes/settings/_components/SettingsNav.html
index ab81f03..c882c14 100644
--- a/routes/settings/_components/SettingsNav.html
+++ b/routes/settings/_components/SettingsNav.html
@@ -1,20 +1,10 @@
 <nav>
   <ul>
+    {{#each navItems as navItem}}
     <li>
-      <a class='{{page === "home"  ? "selected" : ""}}' href='/settings'>
-        Settings
-      </a>
-    </li>
-    <li>
-      <a class='{{page === "about"  ? "selected" : ""}}' href='/settings/about'>
-        About
-      </a>
-    </li>
-    <li>
-      <a class='{{page === "add-instance" ? "selected" : ""}}' href='/settings/add-instance'>
-        Add an instance
-      </a>
+      <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
     </li>
+    {{/each}}
   </ul>
 </nav>
 
@@ -28,15 +18,57 @@
   }
 
   li {
-    margin: 10px 15px 20px;
+    margin: 10px 0;
+    font-size: 1em;
   }
 
-  a {
-    font-size: 1.2em;
+  li::after {
+    content: '>';
+    margin: 0 15px;
+    color: var(--anchor-text);
   }
 
-  a.selected {
-    font-weight: bold;
+  li:last-child::after {
+    content: '';
+    margin-left: 0;
+    font-size: 1em;
   }
 
-</style>
\ No newline at end of file
+</style>
+<script>
+  import SettingsNavItem from './SettingsNavItem.html'
+
+  const NAV_ITEMS = {
+    home: {
+      name: 'home',
+      href: '/settings',
+      label: 'Settings'
+    },
+    about: {
+      name: 'about',
+      href: '/settings/about',
+      label: 'About Pinafore'
+    },
+    instances: {
+      name: 'instances',
+      href: '/settings/instances',
+      label: 'Instances'
+    }
+  }
+
+  export default {
+    components: {
+      SettingsNavItem
+    },
+    computed: {
+      navItems: page => {
+        let res = [NAV_ITEMS.home]
+        if (page === 'home') {
+          return res
+        }
+        res.push(NAV_ITEMS[page])
+        return res
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/settings/_components/SettingsNavItem.html b/routes/settings/_components/SettingsNavItem.html
new file mode 100644
index 0000000..56457fc
--- /dev/null
+++ b/routes/settings/_components/SettingsNavItem.html
@@ -0,0 +1,24 @@
+<a class='{{getCurrentClass(page, name)}}' aria-label='{{getAriaLabel(page, name, label)}}' href='{{href}}'>
+  {{label}}
+</a>
+<style>
+  a {
+    font-size: 1.2em;
+  }
+
+  a.selected {
+    font-weight: 600;
+  }
+</style>
+<script>
+  export default {
+    helpers: {
+      getCurrentClass(page, name) {
+        return page === name  ? "selected" : ""
+      },
+      getAriaLabel(page, name, label) {
+        return page === name ? "Current page" : label
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/settings/about.html b/routes/settings/about.html
index b9e6eeb..6e8f616 100644
--- a/routes/settings/about.html
+++ b/routes/settings/about.html
@@ -1,10 +1,10 @@
 <:Head>
-  <title>About</title>
+  <title>About Pinafore</title>
 </:Head>
 
 <Layout page='settings'>
   <SettingsLayout page='about'>
-    <h1>About</h1>
+    <h1>About Pinafore</h1>
 
     <p>Pinafore is open-source software created by Nolan Lawson.</p>
 
diff --git a/routes/settings/index.html b/routes/settings/index.html
index a1c5999..b1f7071 100644
--- a/routes/settings/index.html
+++ b/routes/settings/index.html
@@ -6,9 +6,13 @@
   <SettingsLayout page='home'>
     <h1>Settings</h1>
 
+    <ul>
+      <li><a href="/settings/instances">Instances</a></li>
+      <li><a href="/settings/about">About Pinafore</a></li>
+    </ul>
+
   </SettingsLayout>
 </Layout>
-
 <script>
   import Layout from '../_components/Layout.html';
   import SettingsLayout from './_components/SettingsLayout.html'
@@ -19,4 +23,31 @@
       SettingsLayout
     }
   };
-</script>
\ No newline at end of file
+</script>
+<style>
+  ul {
+    list-style: none;
+    width: 80%;
+    border: 1px solid var(--settings-list-item-border);
+    margin: 20px auto;
+  }
+  li {
+    border: 1px solid var(--settings-list-item-border);
+    font-size: 1.3em;
+    display: flex;
+    flex-direction: column;
+  }
+  a, a:visited {
+    color: var(--settings-list-item-text);
+    background: var(--settings-list-item-bg);
+    padding: 20px;
+  }
+  a:hover {
+    text-decoration: none;
+    background: var(--settings-list-item-bg-hover);
+    color: var(--settings-list-item-text-hover);
+  }
+  a:active {
+    background: var(--settings-list-item-bg-active);
+  }
+</style>
\ No newline at end of file
diff --git a/routes/settings/add-instance.html b/routes/settings/instances.html
similarity index 95%
rename from routes/settings/add-instance.html
rename to routes/settings/instances.html
index 26f688d..812abb5 100644
--- a/routes/settings/add-instance.html
+++ b/routes/settings/instances.html
@@ -1,12 +1,12 @@
 <:Head>
-  <title>Instance Wizard</title>
+  <title>Instances</title>
 </:Head>
 
 <Layout page='settings'>
-  <SettingsLayout page='add-instance'>
-    <h1>Add an instance</h1>
+  <SettingsLayout page='instances'>
+    <h1>Instances</h1>
 
-    <p>Log in to your instance to use Pinafore.</p>
+    <p>Connect to an instance to start using Pinafore.</p>
 
     <form on:submit='onSubmit(event)'>
       <label for="instanceInput">Instance name:</label>
diff --git a/scss/theme-default.scss b/scss/theme-default.scss
index 99f545e..5960ef4 100644
--- a/scss/theme-default.scss
+++ b/scss/theme-default.scss
@@ -1,5 +1,6 @@
 :root {
   $main-theme-color: royalblue; // also: crimson, forestgreen, hotpink
+  $anchor-color: $main-theme-color;
   $main-text-color: #333;
   $border-color: #dadada;
   $main-bg-color: white;
@@ -18,7 +19,7 @@
   --button-bg-hover: darken($main-bg-color, 5%);
 
   --input-border: $border-color;
-  --anchor-text: $main-theme-color;
+  --anchor-text: $anchor-color;
   --main-bg: $main-bg-color;
   --body-bg: lighten($main-theme-color, 38%);
   --body-text-color: $main-text-color;
@@ -45,4 +46,11 @@
   --action-button-fill-color: lighten($main-theme-color, 15%);
   --action-button-fill-color-hover: lighten($main-theme-color, 20%);
   --action-button-fill-color-active: lighten($main-theme-color, 5%);
+
+  --settings-list-item-bg: $main-bg-color;
+  --settings-list-item-text: $main-theme-color;
+  --settings-list-item-text-hover: $main-theme-color;
+  --settings-list-item-border: $border-color;
+  --settings-list-item-bg-active: darken($main-bg-color, 10%);
+  --settings-list-item-bg-hover: darken($main-bg-color, 2%);
 }
\ No newline at end of file