From 92d77c34be13442094ed58934e8a26df0152d460 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 17 Nov 2019 20:51:28 -0500 Subject: [PATCH] fix: use radiogroup for instance switcher (#1634) * fix: use radiogroup for instance switcher progress on #1633 * fixup * add unique id --- src/routes/_components/radio/RadioGroup.html | 43 +++++++++++++ .../_components/radio/RadioGroupButton.html | 17 ++++++ .../_pages/settings/instances/index.html | 60 +++++++++++-------- src/routes/_utils/lodash-lite.js | 8 +++ 4 files changed, 103 insertions(+), 25 deletions(-) create mode 100644 src/routes/_components/radio/RadioGroup.html create mode 100644 src/routes/_components/radio/RadioGroupButton.html diff --git a/src/routes/_components/radio/RadioGroup.html b/src/routes/_components/radio/RadioGroup.html new file mode 100644 index 00000000..52c2a0a2 --- /dev/null +++ b/src/routes/_components/radio/RadioGroup.html @@ -0,0 +1,43 @@ + +
+ +
+ diff --git a/src/routes/_components/radio/RadioGroupButton.html b/src/routes/_components/radio/RadioGroupButton.html new file mode 100644 index 00000000..3481dd02 --- /dev/null +++ b/src/routes/_components/radio/RadioGroupButton.html @@ -0,0 +1,17 @@ + + diff --git a/src/routes/_pages/settings/instances/index.html b/src/routes/_pages/settings/instances/index.html index 10528ab9..8befd9fd 100644 --- a/src/routes/_pages/settings/instances/index.html +++ b/src/routes/_pages/settings/instances/index.html @@ -3,26 +3,30 @@ {#if $isUserLoggedIn}

Instances you've logged in to:

- - {#each instanceStates as instance} - - -
- -
-
- {/each} -
+ + + {#each instanceStates as instance} + + +
+ + + +
+
+ {/each} +
+

Add another instance

{:else}

You're not logged in to any instances.

@@ -40,7 +44,7 @@ border: 1px solid var(--settings-list-item-border); min-width: 44px; } - .instance-switcher-button { + :global(.instance-switcher-button) { display: flex; position: absolute; top: 0; @@ -69,6 +73,8 @@ import SettingsListRow from '../../../_components/settings/SettingsListRow.html' import SettingsListButton from '../../../_components/settings/SettingsListButton.html' import SvgIcon from '../../../_components/SvgIcon.html' + import RadioGroup from '../../../_components/radio/RadioGroup.html' + import RadioGroupButton from '../../../_components/radio/RadioGroupButton.html' export default { components: { @@ -76,7 +82,9 @@ SettingsList, SettingsListRow, SettingsListButton, - SvgIcon + SvgIcon, + RadioGroup, + RadioGroupButton }, methods: { onSwitchToThisInstance (e, instanceName) { @@ -88,13 +96,15 @@ store: () => store, computed: { instanceStates: ({ $loggedInInstancesAsList }) => ( - $loggedInInstancesAsList.map(({ name, current }) => ({ + $loggedInInstancesAsList.map(({ name, current }, index) => ({ + index, name, current, label: `${name} ${current ? '(current instance)' : ''}`, - switchLabel: current ? `${name} is the current instance` : `Switch to ${name}` + switchLabel: `Switch to ${name}` })) - ) + ), + numInstances: ({ $loggedInInstancesAsList }) => $loggedInInstancesAsList.length } } diff --git a/src/routes/_utils/lodash-lite.js b/src/routes/_utils/lodash-lite.js index 99d30577..0723100c 100644 --- a/src/routes/_utils/lodash-lite.js +++ b/src/routes/_utils/lodash-lite.js @@ -36,3 +36,11 @@ export function sum (list) { } return total } + +export function times (n, func) { + const res = [] + for (let i = 0; i < n; i++) { + res.push(func(i)) + } + return res +}