From 503378a400df9529bc44a4d5f6b064fd990cea25 Mon Sep 17 00:00:00 2001
From: Isabelle Knott <isabelle@blackle-mori.com>
Date: Wed, 6 Feb 2019 23:56:30 -0500
Subject: [PATCH] feat: Add 'switch to instance' buttons next to instances in
 instance list. (#945)

---
 bin/svgs.js                                   |  1 +
 .../settings/SettingsListButton.html          | 23 ++++++
 .../settings/SettingsListItem.html            | 74 -------------------
 .../_components/settings/SettingsListRow.html | 44 +++++++++++
 src/routes/_pages/settings/index.html         | 22 ++++--
 .../_pages/settings/instances/index.html      | 40 ++++++++--
 6 files changed, 117 insertions(+), 87 deletions(-)
 create mode 100644 src/routes/_components/settings/SettingsListButton.html
 delete mode 100644 src/routes/_components/settings/SettingsListItem.html
 create mode 100644 src/routes/_components/settings/SettingsListRow.html

diff --git a/bin/svgs.js b/bin/svgs.js
index f48e0a1f..1d33209f 100644
--- a/bin/svgs.js
+++ b/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' },
diff --git a/src/routes/_components/settings/SettingsListButton.html b/src/routes/_components/settings/SettingsListButton.html
new file mode 100644
index 00000000..4d4434a2
--- /dev/null
+++ b/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>
diff --git a/src/routes/_components/settings/SettingsListItem.html b/src/routes/_components/settings/SettingsListItem.html
deleted file mode 100644
index b5eb0e68..00000000
--- a/src/routes/_components/settings/SettingsListItem.html
+++ /dev/null
@@ -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>
diff --git a/src/routes/_components/settings/SettingsListRow.html b/src/routes/_components/settings/SettingsListRow.html
new file mode 100644
index 00000000..904b3d11
--- /dev/null
+++ b/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>
diff --git a/src/routes/_pages/settings/index.html b/src/routes/_pages/settings/index.html
index e1f97c27..442075a0 100644
--- a/src/routes/_pages/settings/index.html
+++ b/src/routes/_pages/settings/index.html
@@ -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>
diff --git a/src/routes/_pages/settings/instances/index.html b/src/routes/_pages/settings/instances/index.html
index 908f95c7..17ca24f2 100644
--- a/src/routes/_pages/settings/instances/index.html
+++ b/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}
-                        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
   }