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' import { get } from '../ajax'
export function getCurrentUser(instanceName, accessToken) { export function getThisUserAccount(instanceName, accessToken) {
let url = `https://${instanceName}/api/v1/accounts/verify_credentials` let url = `https://${instanceName}/api/v1/accounts/verify_credentials`
return get(url, { return get(url, {
'Authorization': `Bearer ${accessToken}` '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> <style>
li { li {
border: 1px solid var(--settings-list-item-border); border: 1px solid var(--settings-list-item-border);
@ -6,10 +17,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
a {
display: flex;
padding: 20px;
background: var(--settings-list-item-bg);
}
a, a:visited { a, a:visited {
color: var(--settings-list-item-text); color: var(--settings-list-item-text);
background: var(--settings-list-item-bg);
padding: 20px;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -19,4 +33,15 @@
a:active { a:active {
background: var(--settings-list-item-bg-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> </style>

View File

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

View File

@ -10,7 +10,10 @@
<p>Instances you've connected to:</p> <p>Instances you've connected to:</p>
<SettingsList> <SettingsList>
{{#each $loggedInInstancesAsList as instance}} {{#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}} {{/each}}
</SettingsList> </SettingsList>
<p><a href="/settings/instances/add">Add another instance</a></p> <p><a href="/settings/instances/add">Add another instance</a></p>

View File

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