flesh out settings menu

This commit is contained in:
Nolan Lawson 2018-01-13 20:07:11 -08:00
parent a56996b2bf
commit 269d0b1953
6 changed files with 63 additions and 18 deletions

View File

@ -1,6 +1,6 @@
import { get } from '../ajax'
export function getCurrentUser(instanceName, accessToken) {
export function getThisUserAccount(instanceName, accessToken) {
let url = `https://${instanceName}/api/v1/accounts/verify_credentials`
return get(url, {
'Authorization': `Bearer ${accessToken}`

View File

@ -1,4 +1,15 @@
<li><a :href>{{label}}</a></li>
<li>
<a :href>
{{#if icon}}
<svg>
<use xlink:href="{{icon}}" />
</svg>
{{/if}}
<span class="{{offsetForIcon ? 'offset-for-icon' : ''}}">
{{label}}
</span>
</a>
</li>
<style>
li {
border: 1px solid var(--settings-list-item-border);
@ -6,10 +17,13 @@
display: flex;
flex-direction: column;
}
a {
display: flex;
padding: 20px;
background: var(--settings-list-item-bg);
}
a, a:visited {
color: var(--settings-list-item-text);
background: var(--settings-list-item-bg);
padding: 20px;
}
a:hover {
text-decoration: none;
@ -19,4 +33,15 @@
a:active {
background: var(--settings-list-item-bg-active);
}
svg {
width: 24px;
height: 24px;
display: inline-block;
margin-right: 20px;
fill: var(--svg-fill);
}
.offset-for-icon {
margin-left: 44px;
}
</style>

View File

@ -6,12 +6,12 @@
<SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
<h1>{{params.instanceName}}</h1>
{{#if currentUser}}
{{#if instanceUserAccount}}
<h2>Logged in as:</h2>
<div class="current-user">
<img src="{{currentUser.avatar}}" />
<a rel="noopener" target="_blank" href="{{currentUser.url}}">@{{currentUser.acct}}</a>
<span class="acct-name">{{currentUser.display_name}}</span>
<img src="{{instanceUserAccount.avatar}}" />
<a rel="noopener" target="_blank" href="{{instanceUserAccount.url}}">@{{instanceUserAccount.acct}}</a>
<span class="acct-name">{{instanceUserAccount.display_name}}</span>
</div>
<h2>Theme:</h2>
<form class="theme-chooser">
@ -26,7 +26,8 @@
</form>
<form class="instance-actions">
<button class="primary" disabled="$currentInstance === params.instanceName">
<button class="primary" disabled="{{$currentInstance === params.instanceName}}"
on:click="onSwitchToThisInstance()">
Switch to this instance
</button>
<button>Log out</button>
@ -75,7 +76,7 @@
import { store } from '../../_utils/store'
import Layout from '../../_components/Layout.html'
import SettingsLayout from '../_components/SettingsLayout.html'
import { getCurrentUser } from '../../_utils/mastodon/user'
import { getThisUserAccount } from '../../_utils/mastodon/user'
import { themes } from '../../_static/themes'
import { switchToTheme } from '../../_utils/themeEngine'
@ -89,17 +90,20 @@
themes: themes
}),
oncreate: async function () {
let currentInstanceData = this.store.get('currentInstanceData')
let currentUser = await getCurrentUser(currentInstanceData.name, currentInstanceData.access_token)
let instanceName = this.get('params').instanceName
let loggedInInstances = this.store.get('loggedInInstances')
let instanceThemes = this.store.get('instanceThemes')
let instanceData = loggedInInstances[instanceName]
let instanceUserAccount = await getThisUserAccount(instanceName, instanceData.access_token)
this.set({
currentUser: currentUser,
selectedTheme: this.store.get('currentTheme')
instanceUserAccount: instanceUserAccount,
selectedTheme: instanceThemes[instanceName]
})
},
methods: {
onThemeChange() {
let newTheme = this.get('selectedTheme')
let instanceName = this.store.get('currentInstance')
let instanceName = this.get('params').instanceName
let instanceThemes = this.store.get('instanceThemes')
instanceThemes[instanceName] = newTheme
this.store.set({instanceThemes: instanceThemes})
@ -107,6 +111,15 @@
if (this.get('params').instanceName === this.store.get('currentInstance')) {
switchToTheme(newTheme)
}
},
onSwitchToThisInstance() {
let instanceName = this.get('params').instanceName
let instanceThemes = this.store.get('instanceThemes')
this.store.set({
currentInstance: instanceName
})
this.store.save()
switchToTheme(instanceThemes[instanceName])
}
}
}

View File

@ -105,6 +105,8 @@
// TODO: handle error
let loggedInInstances = this.store.get('loggedInInstances')
let loggedInInstancesInOrder = this.store.get('loggedInInstancesInOrder')
let instanceThemes = this.store.get('instanceThemes')
instanceThemes[currentRegisteredInstanceName] = 'default'
loggedInInstances[currentRegisteredInstanceName] = instanceData
if (!loggedInInstancesInOrder.includes(currentRegisteredInstanceName)) {
loggedInInstancesInOrder.push(currentRegisteredInstanceName)
@ -115,7 +117,8 @@
currentRegisteredInstance: null,
loggedInInstances: loggedInInstances,
currentInstance: currentRegisteredInstanceName,
loggedInInstancesInOrder: loggedInInstancesInOrder
loggedInInstancesInOrder: loggedInInstancesInOrder,
instanceThemes: instanceThemes
})
this.store.save()
goto('/')

View File

@ -10,7 +10,10 @@
<p>Instances you've connected to:</p>
<SettingsList>
{{#each $loggedInInstancesAsList as instance}}
<SettingsListItem href="/settings/instances/{{instance.name}}" label="{{instance.name}}"/>
<SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
href="/settings/instances/{{instance.name}}"
label="{{instance.name}}" />
{{/each}}
</SettingsList>
<p><a href="/settings/instances/add">Add another instance</a></p>

View File

@ -17,6 +17,7 @@
--body-bg: $body-bg-color;
--body-text-color: $main-text-color;
--main-border: $border-color;
--svg-fill: $main-theme-color;
--form-bg: darken($main-bg-color, 3%);
--form-border: darken($border-color, 10%);