feat: Add 'switch to instance' buttons next to instances in instance …

…list. (#945)
nolanlawson · Feb 7, 2019 · 503378a · 503378a
1 parent 6e0f2ef
commit 503378a
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 87 deletions.
diff --git 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
@@ -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
diff --git a/src/routes/_components/settings/SettingsListRow.html 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
@@ -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
@@ -5,11 +5,16 @@ <h1>Instances</h1>
   <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 @@ <h1>Instances</h1>
   <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
   }