Skip to content

Commit 5ef2618

Browse files
microbit-robertmicrobit-robert
authored
Add sign up dialog for beta tester list (#248)
1 parent 32a34fa commit 5ef2618

20 files changed

+285
-102
lines changed

‎src/App.svelte‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
import { isLoading } from 'svelte-i18n';
1010
import { get } from 'svelte/store';
1111
import HomeIcon from 'virtual:icons/ri/home-2-line';
12-
import AppVersionRedirectDialog from './components/AppVersionRedirectDialog.svelte';
13-
import CompatibilityWarningDialog from './components/CompatibilityWarningDialog.svelte';
12+
import AppVersionRedirectDialog from './components/dialogs/AppVersionRedirectDialog.svelte';
13+
import CompatibilityWarningDialog from './components/dialogs/CompatibilityWarningDialog.svelte';
1414
import PrototypeVersionWarning from './components/PrototypeVersionWarning.svelte';
1515
import ConnectDialogContainer from './components/connection-prompt/ConnectDialogContainer.svelte';
1616
import ControlBar from './components/control-bar/ControlBar.svelte';
@@ -30,24 +30,24 @@
3030
import {
3131
compatibility,
3232
hasSeenAppVersionRedirectDialog,
33+
hasSeenSignUpDialog,
3334
isCompatibilityWarningDialogOpen,
3435
} from './script/stores/uiStore';
3536
import { fetchBrowserInfo } from './script/utils/api';
3637
import IncompatiblePlatformView from './views/IncompatiblePlatformView.svelte';
3738
import OverlayView from './views/OverlayView.svelte';
3839
import PageContentView from './views/PageContentView.svelte';
40+
import SignUpDialog from './components/dialogs/SignUpDialog.svelte';
3941
4042
let isPotentiallyNextGenUser: boolean = false;
43+
let asyncResolved = false;
4144
onMount(async () => {
4245
if (!get(hasSeenAppVersionRedirectDialog)) {
4346
const { country } = await fetchBrowserInfo();
4447
const nextGenAvailableCountries = ['GB', 'JE', 'IM', 'GG'];
4548
isPotentiallyNextGenUser = !!country && nextGenAvailableCountries.includes(country);
4649
}
47-
48-
const { bluetooth, usb } = $compatibility;
49-
// Value must switch from false to true after mount to trigger dialog transition
50-
isCompatibilityWarningDialogOpen.set(!bluetooth && !usb);
50+
asyncResolved = true;
5151
5252
if ($btSelectMicrobitDialogOnLoad) {
5353
$connectionDialogState.connectionState =
@@ -62,6 +62,18 @@
6262
routeAnnouncementEl.textContent = getTitle($currentPath, $t);
6363
}
6464
}
65+
66+
$isCompatibilityWarningDialogOpen = !$compatibility.bluetooth && !$compatibility.usb;
67+
$: showVersionRedirectDialog = !!(
68+
!$isCompatibilityWarningDialogOpen && isPotentiallyNextGenUser
69+
);
70+
$: showSignUpDialog = !!(
71+
!$isCompatibilityWarningDialogOpen &&
72+
!$hasSeenSignUpDialog &&
73+
asyncResolved &&
74+
(!isPotentiallyNextGenUser ||
75+
(isPotentiallyNextGenUser && $hasSeenAppVersionRedirectDialog))
76+
);
6577
</script>
6678

6779
{#if !$isLoading}
@@ -76,9 +88,8 @@
7688
<!-- Wait for consent dialog to avoid a clash -->
7789
{#if $consent}
7890
<CompatibilityWarningDialog />
79-
{/if}
80-
{#if $consent && !$isCompatibilityWarningDialogOpen && isPotentiallyNextGenUser}
81-
<AppVersionRedirectDialog />
91+
<AppVersionRedirectDialog isOpen={showVersionRedirectDialog} />
92+
<SignUpDialog isOpen={showSignUpDialog} />
8293
{/if}
8394
<div class="w-full flex flex-col bg-backgrounddark">
8495
<ControlBar>

‎src/components/LoadingBlobs.svelte‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!--
2+
(c) 2023, Center for Computational Thinking and Design at Aarhus University and contributors
3+
4+
SPDX-License-Identifier: MIT
5+
-->
6+
7+
<style>
8+
/* Modified from https://github.com/lukehaas/css-loaders */
9+
.loader,
10+
.loader:before,
11+
.loader:after {
12+
border-radius: 50%;
13+
width: 25px;
14+
height: 25px;
15+
-webkit-animation-fill-mode: both;
16+
animation-fill-mode: both;
17+
-webkit-animation: load7 1.8s infinite ease-in-out;
18+
animation: load7 1.8s infinite ease-in-out;
19+
}
20+
.loader {
21+
font-size: 10px;
22+
position: absolute;
23+
top: -25px;
24+
text-indent: -9999em;
25+
-webkit-transform: translateZ(0);
26+
-ms-transform: translateZ(0);
27+
transform: translateZ(0);
28+
-webkit-animation-delay: -0.16s;
29+
animation-delay: -0.16s;
30+
}
31+
.loader:before,
32+
.loader:after {
33+
content: '';
34+
position: absolute;
35+
top: 0;
36+
}
37+
.loader:before {
38+
left: -3.5em;
39+
-webkit-animation-delay: -0.32s;
40+
animation-delay: -0.32s;
41+
}
42+
.loader:after {
43+
left: 3.5em;
44+
}
45+
@-webkit-keyframes load7 {
46+
0%,
47+
80%,
48+
100% {
49+
box-shadow: 0 2.5em 0 -1.3em;
50+
}
51+
40% {
52+
box-shadow: 0 2.5em 0 -1.3em;
53+
}
54+
}
55+
@keyframes load7 {
56+
0%,
57+
80%,
58+
100% {
59+
box-shadow: 0 2.5em 0 -1.3em;
60+
}
61+
40% {
62+
box-shadow: 0 2.5em 0 0;
63+
}
64+
}
65+
</style>
66+
67+
<div class="flex justify-center h-25px w-full relative">
68+
<div class="loader text-secondary" />
69+
</div>

‎src/components/LoadingSpinner.svelte‎

Lines changed: 3 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,7 @@
33
44
SPDX-License-Identifier: MIT
55
-->
6-
7-
<style>
8-
/* Modified from https://github.com/lukehaas/css-loaders */
9-
.loader,
10-
.loader:before,
11-
.loader:after {
12-
border-radius: 50%;
13-
width: 25px;
14-
height: 25px;
15-
-webkit-animation-fill-mode: both;
16-
animation-fill-mode: both;
17-
-webkit-animation: load7 1.8s infinite ease-in-out;
18-
animation: load7 1.8s infinite ease-in-out;
19-
}
20-
.loader {
21-
font-size: 10px;
22-
position: absolute;
23-
top: -25px;
24-
text-indent: -9999em;
25-
-webkit-transform: translateZ(0);
26-
-ms-transform: translateZ(0);
27-
transform: translateZ(0);
28-
-webkit-animation-delay: -0.16s;
29-
animation-delay: -0.16s;
30-
}
31-
.loader:before,
32-
.loader:after {
33-
content: '';
34-
position: absolute;
35-
top: 0;
36-
}
37-
.loader:before {
38-
left: -3.5em;
39-
-webkit-animation-delay: -0.32s;
40-
animation-delay: -0.32s;
41-
}
42-
.loader:after {
43-
left: 3.5em;
44-
}
45-
@-webkit-keyframes load7 {
46-
0%,
47-
80%,
48-
100% {
49-
box-shadow: 0 2.5em 0 -1.3em;
50-
}
51-
40% {
52-
box-shadow: 0 2.5em 0 -1.3em;
53-
}
54-
}
55-
@keyframes load7 {
56-
0%,
57-
80%,
58-
100% {
59-
box-shadow: 0 2.5em 0 -1.3em;
60-
}
61-
40% {
62-
box-shadow: 0 2.5em 0 0;
63-
}
64-
}
65-
</style>
66-
67-
<div class="flex justify-center h-25px w-full relative">
68-
<div class="loader text-secondary" />
6+
<div class="flex items-center justify-center">
7+
<div
8+
class="animate-spin border-2 rounded-full w-6 h-6 border-r-white border-t-white border-b-transparent border-l-transparent" />
699
</div>

‎src/components/PrototypeVersionWarning.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</script>
1111

1212
<div
13-
class="bg-red-600 text-white px-10 py-2 space-x-5 flex items-center sticky top-16 z-5">
13+
class="bg-gray-800 text-white px-10 py-2 space-x-5 flex items-center justify-center sticky top-16 z-5">
1414
<WarningIcon class="text-white text-2xl" />
1515
<p class="font-bold">{$t('prototype.warning')}</p>
1616
</div>

‎src/components/connection-prompt/ConnectDialogContainer.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
import DownloadingDialog from './usb/DownloadingDialog.svelte';
4141
import SelectMicrobitDialogUsb from './usb/SelectMicrobitDialogUsb.svelte';
4242
import ManualInstallTutorial from './usb/manual/ManualInstallTutorial.svelte';
43-
import UnsupportedMicrobitWarningDialog from '../UnsupportedMicrobitWarningDialog.svelte';
43+
import UnsupportedMicrobitWarningDialog from '../dialogs/UnsupportedMicrobitWarningDialog.svelte';
4444
4545
const { bluetooth, usb } = get(compatibility);
4646
let endOfFlow = false;

‎src/components/WhatYouWillNeedDialog.svelte‎ renamed to ‎src/components/connection-prompt/WhatYouWillNeedDialog.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
-->
66

77
<script lang="ts">
8-
import { t } from '../i18n';
9-
import { state } from '../script/stores/uiStore';
10-
import DialogHeading from './DialogHeading.svelte';
11-
import StandardButton from './StandardButton.svelte';
8+
import { t } from '../../i18n';
9+
import { state } from '../../script/stores/uiStore';
10+
import DialogHeading from '../DialogHeading.svelte';
11+
import StandardButton from '../StandardButton.svelte';
1212
import ExternalLinkIcon from 'virtual:icons/ri/external-link-line';
1313
1414
interface Item {

‎src/components/connection-prompt/bluetooth/BluetoothConnectingDialog.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<script lang="ts">
88
import { t } from '../../../i18n';
99
import DialogHeading from '../../DialogHeading.svelte';
10-
import LoadingSpinner from '../../LoadingSpinner.svelte';
10+
import LoadingAnimation from '../../LoadingBlobs.svelte';
1111
</script>
1212

1313
<div class="w-175">
@@ -16,6 +16,6 @@
1616
</DialogHeading>
1717
<div class="flex flex-col gap-5 justify-center items-center py-3">
1818
<p>{$t('connectMB.connecting')}</p>
19-
<LoadingSpinner />
19+
<LoadingAnimation />
2020
</div>
2121
</div>

‎src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import computerImage from '../../../imgs/stylised_computer.svg';
1010
import usbCableImage from '../../../imgs/stylised-usb-cable.svg';
1111
import batteryPackImage from '../../../imgs/stylised-battery-pack.svg';
12-
import WhatYouWillNeedDialog from '../../WhatYouWillNeedDialog.svelte';
12+
import WhatYouWillNeedDialog from '../WhatYouWillNeedDialog.svelte';
1313
import { get } from 'svelte/store';
1414
import { compatibility, state } from '../../../script/stores/uiStore';
1515

‎src/components/connection-prompt/radio/ConnectingMicrobits.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<script lang="ts">
88
import DialogHeading from '../../DialogHeading.svelte';
99
import { t } from '../../../i18n';
10-
import LoadingSpinner from '../../LoadingSpinner.svelte';
10+
import LoadingAnimation from '../../LoadingBlobs.svelte';
1111
</script>
1212

1313
<div class="w-175">
@@ -16,6 +16,6 @@
1616
</DialogHeading>
1717
<div class="flex flex-col gap-5 justify-center items-center py-3">
1818
<p>{$t('connectMB.connecting')}</p>
19-
<LoadingSpinner />
19+
<LoadingAnimation />
2020
</div>
2121
</div>

‎src/components/connection-prompt/radio/StartRadioDialog.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
import computerImage from '../../../imgs/stylised_computer.svg';
1010
import usbCableImage from '../../../imgs/stylised-usb-cable.svg';
1111
import batteryPackImage from '../../../imgs/stylised-battery-pack.svg';
12-
import WhatYouWillNeedDialog from '../../WhatYouWillNeedDialog.svelte';
12+
import WhatYouWillNeedDialog from '../WhatYouWillNeedDialog.svelte';
1313
import { state } from '../../../script/stores/uiStore';
1414
1515
export let onNextClick: () => void;

0 commit comments

Comments
 (0)