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

bin/svgs.js

@@ -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' },

src/routes/_components/settings/SettingsListButton.html

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

src/routes/_components/settings/SettingsListItem.html

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

src/routes/_components/settings/SettingsListRow.html

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

src/routes/_pages/settings/index.html

@@ -2,23 +2,33 @@
   <h1>Settings</h1>
 
   <SettingsList>
-    <SettingsListItem href="/settings/general" label="General"/>
+    <SettingsListRow>
-    <SettingsListItem href="/settings/instances" label="Instances"/>
+      <SettingsListButton href="/settings/general" label="General"/>
-    <SettingsListItem href="/settings/hotkeys" label="Hotkeys"/>
+    </SettingsListRow>
-    <SettingsListItem href="/settings/about" label="About Pinafore"/>
+    <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>

src/routes/_pages/settings/instances/index.html

@@ -5,11 +5,16 @@
   <p>Instances you've logged in to:</p>
   <SettingsList label="Instances">
     {#each $loggedInInstancesAsList as instance}
-      <SettingsListItem offsetForIcon={instance.name !== $currentInstance}
+    <SettingsListRow>
-                        icon={instance.name === $currentInstance ? '#fa-star' : ''}
+      <SettingsListButton href="/settings/instances/{instance.name}"
-                        href="/settings/instances/{instance.name}"
+                          label={instance.name}
-                        label={instance.name}
+                          ariaLabel="{instance.name} {instance.name === $currentInstance ? '(current instance)' : ''}" />
-                        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
   }