flesh out settings menu
This commit is contained in:
parent
a56996b2bf
commit
269d0b1953
|
@ -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}`
|
||||
|
|
|
@ -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>
|
|
@ -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])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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('/')
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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%);
|
||||
|
|
Loading…
Reference in New Issue