flesh out settings more

This commit is contained in:
Nolan Lawson 2018-01-13 12:12:17 -08:00
parent af8cf63caa
commit b7d2a51ee7
11 changed files with 144 additions and 82 deletions

View file

@ -7,7 +7,7 @@
</div> </div>
<p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p> <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/instances">log in to an instance</a>.</p> <p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p> <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
</FreeTextLayout> </FreeTextLayout>

View file

@ -1,5 +1,5 @@
const WEBSITE = 'https://pinafore.social' const WEBSITE = 'https://pinafore.social'
const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances' const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances/add'
const SCOPES = 'read write follow' const SCOPES = 'read write follow'
const CLIENT_NAME = 'Pinafore' const CLIENT_NAME = 'Pinafore'

View file

@ -1,4 +1,4 @@
<SettingsNav page={{page}} /> <SettingsNav :page :label/>
<div class="settings"> <div class="settings">
<FreeTextLayout> <FreeTextLayout>

View file

@ -0,0 +1,11 @@
<ul>
<slot></slot>
</ul>
<style>
ul {
list-style: none;
width: 80%;
border: 1px solid var(--settings-list-item-border);
margin: 20px auto;
}
</style>

View file

@ -0,0 +1,22 @@
<li><a :href>{{label}}</a></li>
<style>
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>

View file

@ -5,6 +5,9 @@
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" /> <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
</li> </li>
{{/each}} {{/each}}
<li>
<SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
</li>
</ul> </ul>
</nav> </nav>
@ -39,21 +42,10 @@
import SettingsNavItem from './SettingsNavItem.html' import SettingsNavItem from './SettingsNavItem.html'
const NAV_ITEMS = { const NAV_ITEMS = {
home: { 'settings': 'Settings',
name: 'home', 'settings/about': 'About Pinafore',
href: '/settings', 'settings/instances': 'Instances',
label: 'Settings' 'settings/instances/add': 'Add an instance',
},
about: {
name: 'about',
href: '/settings/about',
label: 'About Pinafore'
},
instances: {
name: 'instances',
href: '/settings/instances',
label: 'Instances'
}
} }
export default { export default {
@ -62,11 +54,19 @@
}, },
computed: { computed: {
navItems: page => { navItems: page => {
let res = [NAV_ITEMS.home] let res = []
if (page === 'home') { let breadcrumbs = page.split('/')
return res let path = ''
for (let i = 0; i < breadcrumbs.length - 1; i++) {
let currentPage = breadcrumbs[i]
path += currentPage
res.push({
label: NAV_ITEMS[path],
href: `/${path}`,
name: path
})
path += '/'
} }
res.push(NAV_ITEMS[page])
return res return res
} }
} }

View file

@ -3,7 +3,7 @@
</:Head> </:Head>
<Layout page='settings'> <Layout page='settings'>
<SettingsLayout page='about'> <SettingsLayout page='settings/about' label="About Pinafore">
<h1>About Pinafore</h1> <h1>About Pinafore</h1>
<p>Pinafore is open-source software created by Nolan Lawson.</p> <p>Pinafore is open-source software created by Nolan Lawson.</p>

View file

@ -3,51 +3,28 @@
</:Head> </:Head>
<Layout page='settings'> <Layout page='settings'>
<SettingsLayout page='home'> <SettingsLayout page='settings' label="Settings">
<h1>Settings</h1> <h1>Settings</h1>
<ul> <SettingsList>
<li><a href="/settings/instances">Instances</a></li> <SettingsListItem href="/settings/instances" label="Instances"/>
<li><a href="/settings/about">About Pinafore</a></li> <SettingsListItem href="/settings/about" label="About Pinafore"/>
</ul> </SettingsList>
</SettingsLayout> </SettingsLayout>
</Layout> </Layout>
<script> <script>
import Layout from '../_components/Layout.html'; import Layout from '../_components/Layout.html';
import SettingsLayout from './_components/SettingsLayout.html' import SettingsLayout from './_components/SettingsLayout.html'
import SettingsList from './_components/SettingsList.html'
import SettingsListItem from './_components/SettingsListItem.html'
export default { export default {
components: { components: {
Layout, Layout,
SettingsLayout SettingsLayout,
SettingsList,
SettingsListItem
} }
}; };
</script> </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>

View file

@ -0,0 +1,22 @@
<:Head>
<title>{{params.instanceName}}</title>
</:Head>
<Layout page='settings'>
<SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
<h1>{{params.instanceName}}</h1>
</SettingsLayout>
</Layout>
<script>
import { store } from '../../_utils/store'
import Layout from '../../_components/Layout.html'
import SettingsLayout from '../_components/SettingsLayout.html'
export default {
components: {
Layout,
SettingsLayout
},
store: () => store
}
</script>

View file

@ -1,30 +1,22 @@
<:Head> <:Head>
<title>Instances</title> <title>Add an Instance</title>
</:Head> </:Head>
<Layout page='settings'> <Layout page='settings'>
<SettingsLayout page='instances'> <SettingsLayout page='settings/instances/add' label="Add an Instance">
<h1>Instances</h1> <h1>Add an Instance</h1>
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<ul class="instances-list"> <p>Connect to an instance to log in.</p>
{{#each $loggedInInstancesAsList as instance}}
<li class="instance-card">
<span>{{instance.name}}</span>
</li>
{{/each}}
</ul>
{{else}} {{else}}
<p>Connect to an instance to start using Pinafore.</p> <p>Log in to an instance to start using Pinafore.</p>
{{/if}} {{/if}}
{{#if !$isUserLoggedIn}}
<form class="add-new-instance" on:submit='onSubmit(event)'> <form class="add-new-instance" on:submit='onSubmit(event)'>
<label for="instanceInput">Instance name:</label> <label for="instanceInput">Instance name:</label>
<input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''> <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
<button class="primary" type="submit" id="submitButton">Add instance</button> <button class="primary" type="submit" id="submitButton">Add instance</button>
</form> </form>
{{/if}}
{{#if !$isUserLoggedIn}} {{#if !$isUserLoggedIn}}
<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p> <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
@ -55,11 +47,11 @@
} }
</style> </style>
<script> <script>
import Layout from '../_components/Layout.html'; import Layout from '../../_components/Layout.html';
import SettingsLayout from './_components/SettingsLayout.html' import SettingsLayout from '../_components/SettingsLayout.html'
import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon' import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../../_utils/mastodon'
import { databasePromise } from '../_utils/database' import { databasePromise } from '../../_utils/database'
import { store } from '../_utils/store' import { store } from '../../_utils/store'
import { goto } from 'sapper/runtime.js' import { goto } from 'sapper/runtime.js'
export default { export default {

View file

@ -0,0 +1,38 @@
<:Head>
<title>Instances</title>
</:Head>
<Layout page='settings'>
<SettingsLayout page='settings/instances' label="Instances">
<h1>Instances</h1>
{{#if $isUserLoggedIn}}
<p>Instances you've connected to:</p>
<SettingsList>
{{#each $loggedInInstancesAsList as instance}}
<SettingsListItem href="/settings/instances/{{instance.name}}" label="{{instance.name}}"/>
{{/each}}
</SettingsList>
<p><a href="/settings/instances/add">Add an instance</a></p>
{{else}}
<p><a href="/settings/instances/add">Connect to an instance</a> to start using Pinafore.</p>
{{/if}}
</SettingsLayout>
</Layout>
<script>
import { store } from '../../_utils/store'
import Layout from '../../_components/Layout.html'
import SettingsLayout from '../_components/SettingsLayout.html'
import SettingsList from '../_components/SettingsList.html'
import SettingsListItem from '../_components/SettingsListItem.html'
export default {
components: {
Layout,
SettingsLayout,
SettingsList,
SettingsListItem
},
store: () => store
}
</script>