data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

feat: Add 'switch to instance' buttons next to instances in instance list. (#945)

Browse source
This commit is contained in:
Isabelle Knott 2019-02-06 23:56:30 -05:00 committed by Nolan Lawson
parent 6e0f2ef6bb
commit 503378a400
6 changed files with 117 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
bin/svgs.js
View file

@ -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
View 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>

74
src/routes/_components/settings/SettingsListItem.html
View file

@ -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
View 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>

22
src/routes/_pages/settings/index.html
View file

@ -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>

40
src/routes/_pages/settings/instances/index.html
View file

@ -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}"
label={instance.name}
ariaLabel="{instance.name} {instance.name === $currentInstance ? '(current instance)' : ''}" />
<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
}