100 lines
3.0 KiB
HTML
100 lines
3.0 KiB
HTML
<SettingsLayout page='settings/instances' label="Instances">
|
|
<h1>Instances</h1>
|
|
|
|
{#if $isUserLoggedIn}
|
|
<p>Instances you've logged in to:</p>
|
|
<SettingsList label="Instances">
|
|
{#each instanceStates as instance}
|
|
<SettingsListRow>
|
|
<SettingsListButton className="instance-switcher-instance-name"
|
|
href="/settings/instances/{instance.name}"
|
|
label={instance.name}
|
|
ariaLabel={instance.label} />
|
|
<div class="instance-switcher-button-wrapper">
|
|
<button class="instance-switcher-button"
|
|
aria-label={instance.switchLabel}
|
|
title={instance.switchLabel}
|
|
aria-pressed={instance.current}
|
|
on:click="onSwitchToThisInstance(event, instance.name)">
|
|
<svg class="instance-switcher-button-svg">
|
|
<use xlink:href="{instance.current ? '#fa-star' : '#fa-star-o'}" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</SettingsListRow>
|
|
{/each}
|
|
</SettingsList>
|
|
<p><a href="/settings/instances/add">Add another instance</a></p>
|
|
{:else}
|
|
<p>You're not logged in to any instances.</p>
|
|
<p><a href="/settings/instances/add">Log in to an instance</a> to start using Pinafore.</p>
|
|
{/if}
|
|
</SettingsLayout>
|
|
<style>
|
|
:global(.instance-switcher-instance-name) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.instance-switcher-button-wrapper {
|
|
position: relative;
|
|
border: 1px solid var(--settings-list-item-border);
|
|
min-width: 44px;
|
|
}
|
|
.instance-switcher-button {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
border: none;
|
|
background: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 1px;
|
|
}
|
|
.instance-switcher-button-svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline-block;
|
|
fill: var(--svg-fill);
|
|
}
|
|
</style>
|
|
<script>
|
|
import { store } from '../../../_store/store'
|
|
import { switchToInstance } from '../../../_actions/instances'
|
|
import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
|
|
import SettingsList from '../../../_components/settings/SettingsList.html'
|
|
import SettingsListRow from '../../../_components/settings/SettingsListRow.html'
|
|
import SettingsListButton from '../../../_components/settings/SettingsListButton.html'
|
|
|
|
export default {
|
|
components: {
|
|
SettingsLayout,
|
|
SettingsList,
|
|
SettingsListRow,
|
|
SettingsListButton
|
|
},
|
|
methods: {
|
|
onSwitchToThisInstance (e, instanceName) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
switchToInstance(instanceName)
|
|
}
|
|
},
|
|
store: () => store,
|
|
computed: {
|
|
instanceStates: ({ $loggedInInstancesAsList }) => (
|
|
$loggedInInstancesAsList.map(({ name, current }) => ({
|
|
name,
|
|
current,
|
|
label: `${name} ${current ? '(current instance)' : ''}`,
|
|
switchLabel: current ? `${name} is the current instance` : `Switch to ${name}`
|
|
}))
|
|
)
|
|
}
|
|
}
|
|
</script>
|