cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
routes/_components/NotLoggedInHome.html
View File

@ -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/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>
</FreeTextLayout>

2
routes/_utils/mastodon.js
View File

@ -1,5 +1,5 @@
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 CLIENT_NAME = 'Pinafore'

2
routes/settings/_components/SettingsLayout.html
View File

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

11
routes/settings/_components/SettingsList.html Normal file
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>

22
routes/settings/_components/SettingsListItem.html Normal file
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>

40
routes/settings/_components/SettingsNav.html
View File

@ -2,9 +2,12 @@
<ul>
{{#each navItems as navItem}}
<li>
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
<SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
</li>
{{/each}}
<li>
<SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
</li>
</ul>
</nav>
@ -39,21 +42,10 @@
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'
}
'settings': 'Settings',
'settings/about': 'About Pinafore',
'settings/instances': 'Instances',
'settings/instances/add': 'Add an instance',
}
export default {
@ -62,11 +54,19 @@
},
computed: {
navItems: page => {
let res = [NAV_ITEMS.home]
if (page === 'home') {
return res
let res = []
let breadcrumbs = page.split('/')
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
}
}

2
routes/settings/about.html
View File

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

43
routes/settings/index.html
View File

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

22
routes/settings/instances/[instanceName].html Normal file
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>

40
routes/settings/instances.html → routes/settings/instances/add.html
View File

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

38
routes/settings/instances/index.html Normal file
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>