feat: Add 'switch to instance' buttons next to instances in instance list. (#945)
This commit is contained in:
Isabelle Knott
Nolan Lawson
parent
6e0f2ef6bb
commit
503378a400
|
|
@ -8,6 +8,7 @@ module.exports = [
|
|||
{ id: 'fa-reply-all', src: 'src/thirdparty/font-awesome-svg-png/white/svg/reply-all.svg' },
|
||||
{ id: 'fa-retweet', src: 'src/thirdparty/font-awesome-svg-png/white/svg/retweet.svg' },
|
||||
{ id: 'fa-star', src: 'src/thirdparty/font-awesome-svg-png/white/svg/star.svg' },
|
||||
{ id: 'fa-star-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/star-o.svg' },
|
||||
{ id: 'fa-ellipsis-h', src: 'src/thirdparty/font-awesome-svg-png/white/svg/ellipsis-h.svg' },
|
||||
{ id: 'fa-spinner', src: 'src/thirdparty/font-awesome-svg-png/white/svg/spinner.svg' },
|
||||
{ id: 'fa-user', src: 'src/thirdparty/font-awesome-svg-png/white/svg/user.svg' },
|
||||
|
|
|
|||
23
src/routes/_components/settings/SettingsListButton.html
Normal file
23
src/routes/_components/settings/SettingsListButton.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<a {href} aria-label={ariaLabel || label} class="settings-list-button">
|
||||
<span>
|
||||
{label}
|
||||
</span>
|
||||
</a>
|
||||
<style>
|
||||
.settings-list-button {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.settings-list-button span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
ariaLabel: void 0
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<li class="settings-list-item">
|
||||
<a {href}>
|
||||
{#if icon}
|
||||
<svg class="settings-list-item-svg">
|
||||
<use xlink:href={icon} />
|
||||
</svg>
|
||||
{/if}
|
||||
<span aria-label={ariaLabel || label} class={offsetForIcon ? 'offset-for-icon' : ''}>
|
||||
{label}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.settings-list-item {
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
font-size: 1.3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.settings-list-item a {
|
||||
display: flex;
|
||||
padding: 20px 40px;
|
||||
background: var(--settings-list-item-bg);
|
||||
}
|
||||
.settings-list-item a, .settings-list-item a:visited {
|
||||
text-decoration: none;
|
||||
color: var(--settings-list-item-text);
|
||||
}
|
||||
.settings-list-item a:hover {
|
||||
text-decoration: none;
|
||||
background: var(--settings-list-item-bg-hover);
|
||||
color: var(--settings-list-item-text-hover);
|
||||
}
|
||||
.settings-list-item a:active {
|
||||
background: var(--settings-list-item-bg-active);
|
||||
}
|
||||
.settings-list-item-svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
fill: var(--svg-fill);
|
||||
}
|
||||
.settings-list-item .offset-for-icon {
|
||||
margin-left: 44px;
|
||||
}
|
||||
.settings-list-item span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.settings-list-item a {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.settings-list-item-svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.settings-list-item .offset-for-icon {
|
||||
margin-left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
icon: void 0,
|
||||
ariaLabel: void 0,
|
||||
offsetForIcon: void 0
|
||||
})
|
||||
}
|
||||
</script>
|
||||
44
src/routes/_components/settings/SettingsListRow.html
Normal file
44
src/routes/_components/settings/SettingsListRow.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<li class="settings-list-item">
|
||||
<slot></slot>
|
||||
</li>
|
||||
<style>
|
||||
.settings-list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.settings-list-item > :global(*) {
|
||||
font-size: 1.3em;
|
||||
display: flex;
|
||||
padding: 20px 40px;
|
||||
border: 1px solid var(--settings-list-item-border);
|
||||
background: var(--settings-list-item-bg);
|
||||
color: var(--settings-list-item-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.settings-list-item > :global(*:hover) {
|
||||
text-decoration: none;
|
||||
background: var(--settings-list-item-bg-hover);
|
||||
color: var(--settings-list-item-text-hover);
|
||||
}
|
||||
.settings-list-item > :global(*:active) {
|
||||
background: var(--settings-list-item-bg-active);
|
||||
}
|
||||
.settings-list-item > :global(*:not(:last-child)) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.settings-list-item > :global(*) {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
icon: void 0,
|
||||
ariaLabel: void 0
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,23 +2,33 @@
|
|||
<h1>Settings</h1>
|
||||
|
||||
<SettingsList>
|
||||
<SettingsListItem href="/settings/general" label="General"/>
|
||||
<SettingsListItem href="/settings/instances" label="Instances"/>
|
||||
<SettingsListItem href="/settings/hotkeys" label="Hotkeys"/>
|
||||
<SettingsListItem href="/settings/about" label="About Pinafore"/>
|
||||
<SettingsListRow>
|
||||
<SettingsListButton href="/settings/general" label="General"/>
|
||||
</SettingsListRow>
|
||||
<SettingsListRow>
|
||||
<SettingsListButton href="/settings/instances" label="Instances"/>
|
||||
</SettingsListRow>
|
||||
<SettingsListRow>
|
||||
<SettingsListButton href="/settings/hotkeys" label="Hotkeys"/>
|
||||
</SettingsListRow>
|
||||
<SettingsListRow>
|
||||
<SettingsListButton href="/settings/about" label="About Pinafore"/>
|
||||
</SettingsListRow>
|
||||
</SettingsList>
|
||||
|
||||
</SettingsLayout>
|
||||
<script>
|
||||
import SettingsLayout from '../../_components/settings/SettingsLayout.html'
|
||||
import SettingsList from '../../_components/settings/SettingsList.html'
|
||||
import SettingsListItem from '../../_components/settings/SettingsListItem.html'
|
||||
import SettingsListRow from '../../_components/settings/SettingsListRow.html'
|
||||
import SettingsListButton from '../../_components/settings/SettingsListButton.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
SettingsListRow,
|
||||
SettingsListButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,16 @@
|
|||
<p>Instances you've logged in to:</p>
|
||||
<SettingsList label="Instances">
|
||||
{#each $loggedInInstancesAsList as instance}
|
||||
<SettingsListItem offsetForIcon={instance.name !== $currentInstance}
|
||||
icon={instance.name === $currentInstance ? '#fa-star' : ''}
|
||||
href="/settings/instances/{instance.name}"
|
||||
<SettingsListRow>
|
||||
<SettingsListButton href="/settings/instances/{instance.name}"
|
||||
label={instance.name}
|
||||
ariaLabel="{instance.name} {instance.name === $currentInstance ? '(current instance)' : ''}" />
|
||||
<button class="instance-switcher-button" on:click="onSwitchToThisInstance(event, instance.name)">
|
||||
<svg class="instance-switcher-button-svg">
|
||||
<use xlink:href="{instance.name === $currentInstance ? '#fa-star' : '#fa-star-o'}" />
|
||||
</svg>
|
||||
</button>
|
||||
</SettingsListRow>
|
||||
{/each}
|
||||
</SettingsList>
|
||||
<p><a href="/settings/instances/add">Add another instance</a></p>
|
||||
|
|
@ -18,17 +23,38 @@
|
|||
<p><a href="/settings/instances/add">Log in to an instance</a> to start using Pinafore.</p>
|
||||
{/if}
|
||||
</SettingsLayout>
|
||||
<style>
|
||||
.instance-switcher-button {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.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 SettingsListItem from '../../../_components/settings/SettingsListItem.html'
|
||||
import SettingsListRow from '../../../_components/settings/SettingsListRow.html'
|
||||
import SettingsListButton from '../../../_components/settings/SettingsListButton.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
SettingsListRow,
|
||||
SettingsListButton
|
||||
},
|
||||
methods: {
|
||||
onSwitchToThisInstance (e, instanceName) {
|
||||
e.preventDefault()
|
||||
switchToInstance(instanceName)
|
||||
}
|
||||
},
|
||||
store: () => store
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue