feat: actions menu

Signed-off-by: David Dal Busco <[email protected]>
junobuild · Nov 17, 2023 · 69a70e5 · 69a70e5
1 parent 615dcaa
commit 69a70e5
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 64 deletions.
diff --git a/src/frontend/src/lib/components/core/Actions.svelte b/src/frontend/src/lib/components/core/Actions.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Popover from '$lib/components/ui/Popover.svelte';
+	import IconMore from '$lib/components/icons/IconMore.svelte';
+
+	export let visible: boolean | undefined;
+
+	let button: HTMLButtonElement | undefined;
+</script>
+
+<button class="square" bind:this={button} on:click={() => (visible = true)}><IconMore /></button>
+
+<Popover bind:visible anchor={button} direction="rtl">
+	<div class="container">
+		<slot />
+	</div>
+</Popover>
+
+<style lang="scss">
+	@use '../../styles/mixins/overlay';
+
+	@include overlay.popover-container;
+
+	button {
+		position: absolute;
+		top: var(--padding-2x);
+		right: var(--padding-2x);
+	}
+</style>
diff --git a/src/frontend/src/lib/components/core/User.svelte b/src/frontend/src/lib/components/core/User.svelte
@@ -91,7 +91,7 @@
 </Popover>
 
 <style lang="scss">
-	.container {
-		padding: var(--padding) var(--padding-2x);
-	}
+	@use '../../styles/mixins/overlay';
+
+	@include overlay.popover-container;
 </style>
diff --git a/src/frontend/src/lib/components/mission-control/MissionControl.svelte b/src/frontend/src/lib/components/mission-control/MissionControl.svelte
@@ -3,7 +3,7 @@
 	import { missionControlStore } from '$lib/stores/mission-control.store';
 	import { nonNullish } from '@dfinity/utils';
 	import CanisterOverview from '$lib/components/canister/CanisterOverview.svelte';
-	import MissionControlTopUp from '$lib/components/mission-control/MissionControlTopUp.svelte';
+	import MissionControlActions from '$lib/components/mission-control/MissionControlActions.svelte';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import Identifier from '$lib/components/ui/Identifier.svelte';
@@ -12,10 +12,16 @@
 
 {#if $authSignedInStore}
 	<div class="card-container">
-		<Value>
-			<svelte:fragment slot="label">{$i18n.mission_control.id}</svelte:fragment>
-			<Identifier identifier={$missionControlStore?.toText() ?? ''} shorten={false} small={false} />
-		</Value>
+		<div class="id">
+			<Value>
+				<svelte:fragment slot="label">{$i18n.mission_control.id}</svelte:fragment>
+				<Identifier
+					identifier={$missionControlStore?.toText() ?? ''}
+					shorten={false}
+					small={false}
+				/>
+			</Value>
+		</div>
 
 		<Value>
 			<svelte:fragment slot="label">{$i18n.core.version}</svelte:fragment>
@@ -25,7 +31,13 @@
 		{#if nonNullish($missionControlStore)}
 			<CanisterOverview canisterId={$missionControlStore} />
 		{/if}
-	</div>
 
-	<MissionControlTopUp />
+		<MissionControlActions />
+	</div>
 {/if}
+
+<style lang="scss">
+	.id {
+		max-width: 80%;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/mission-control/MissionControlActions.svelte b/src/frontend/src/lib/components/mission-control/MissionControlActions.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import TopUp from '$lib/components/canister/TopUp.svelte';
+	import Actions from '$lib/components/core/Actions.svelte';
+
+	let visible: boolean | undefined;
+	const close = () => (visible = false);
+</script>
+
+<Actions bind:visible>
+	<TopUp type="topup_mission_control" on:junoTopUp={close} />
+</Actions>
diff --git a/src/frontend/src/lib/components/mission-control/MissionControlTopUp.svelte b/src/frontend/src/lib/components/mission-control/MissionControlTopUp.svelte
diff --git a/src/frontend/src/lib/components/orbiter/Orbiter.svelte b/src/frontend/src/lib/components/orbiter/Orbiter.svelte
@@ -5,23 +5,31 @@
 	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import { versionStore } from '$lib/stores/version.store';
 	import CanisterOverview from '$lib/components/canister/CanisterOverview.svelte';
-	import OrbiterTopUp from '$lib/components/orbiter/OrbiterTopUp.svelte';
+	import OrbiterActions from '$lib/components/orbiter/OrbiterActions.svelte';
 
 	export let orbiter: Orbiter;
 </script>
 
 <div class="card-container">
-	<Value>
-		<svelte:fragment slot="label">{$i18n.analytics.id}</svelte:fragment>
-		<Identifier identifier={orbiter.orbiter_id.toText()} shorten={false} small={false} />
-	</Value>
+	<div class="id">
+		<Value>
+			<svelte:fragment slot="label">{$i18n.analytics.id}</svelte:fragment>
+			<Identifier identifier={orbiter.orbiter_id.toText()} shorten={false} small={false} />
+		</Value>
+	</div>
 
 	<Value>
 		<svelte:fragment slot="label">{$i18n.core.version}</svelte:fragment>
 		<p>v{$versionStore?.orbiter?.current ?? '...'}</p>
 	</Value>
 
 	<CanisterOverview canisterId={orbiter.orbiter_id} />
+
+	<OrbiterActions />
 </div>
 
-<OrbiterTopUp />
+<style lang="scss">
+	.id {
+		max-width: 80%;
+	}
+</style>
diff --git a/src/frontend/src/lib/components/orbiter/OrbiterActions.svelte b/src/frontend/src/lib/components/orbiter/OrbiterActions.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import TopUp from '$lib/components/canister/TopUp.svelte';
+	import Actions from '$lib/components/core/Actions.svelte';
+
+	let visible: boolean | undefined;
+	const close = () => (visible = false);
+</script>
+
+<Actions bind:visible>
+	<TopUp type="topup_orbiter" />
+</Actions>
diff --git a/src/frontend/src/lib/components/orbiter/OrbiterTopUp.svelte b/src/frontend/src/lib/components/orbiter/OrbiterTopUp.svelte
diff --git a/src/frontend/src/lib/components/satellites/SatelliteActions.svelte b/src/frontend/src/lib/components/satellites/SatelliteActions.svelte
@@ -3,19 +3,13 @@
 	import TopUp from '$lib/components/canister/TopUp.svelte';
 	import SatelliteStopStart from '$lib/components/satellites/SatelliteStopStart.svelte';
 	import SatelliteDelete from '$lib/components/satellites/SatelliteDelete.svelte';
-	import IconMore from '$lib/components/icons/IconMore.svelte';
-	import Popover from '$lib/components/ui/Popover.svelte';
 	import type { Canister } from '$lib/types/canister';
+	import Actions from '$lib/components/core/Actions.svelte';
 
 	export let satellite: Satellite;
 
 	let detail = { satellite };
 
-	let button: HTMLButtonElement | undefined;
-	let visible: boolean | undefined;
-
-	const close = () => (visible = false);
-
 	let canister: Canister | undefined = undefined;
 
 	const onSyncCanister = (syncCanister: Canister) => {
@@ -25,40 +19,24 @@
 
 		canister = syncCanister;
 	};
+
+	let visible: boolean | undefined;
+	const close = () => (visible = false);
 </script>
 
 <svelte:window on:junoSyncCanister={({ detail: { canister } }) => onSyncCanister(canister)} />
 
-<button class="square" bind:this={button} on:click={() => (visible = true)}><IconMore /></button>
-
-<Popover bind:visible anchor={button} direction="rtl">
-	<div class="container">
-		<TopUp
-			type="topup_satellite"
-			{detail}
-			on:junoTopUp={close}
-			on:junoStop={close}
-			on:junoStart={close}
-			on:junoDelete={close}
-		/>
-
-		<SatelliteStopStart {satellite} {canister} />
-
-		<SatelliteDelete {satellite} {canister} />
-	</div>
-</Popover>
-
-<style lang="scss">
-	button {
-		position: absolute;
-		top: var(--padding-2x);
-		right: var(--padding-2x);
-	}
+<Actions bind:visible>
+	<TopUp
+		type="topup_satellite"
+		{detail}
+		on:junoTopUp={close}
+		on:junoStop={close}
+		on:junoStart={close}
+		on:junoDelete={close}
+	/>
 
-	.container {
-		display: flex;
-		flex-direction: column;
+	<SatelliteStopStart {satellite} {canister} />
 
-		padding: var(--padding) var(--padding-2x);
-	}
-</style>
+	<SatelliteDelete {satellite} {canister} />
+</Actions>
diff --git a/src/frontend/src/lib/styles/mixins/_overlay.scss b/src/frontend/src/lib/styles/mixins/_overlay.scss
@@ -85,3 +85,12 @@
 @mixin title {
 	margin: 0 0 var(--padding-3x);
 }
+
+@mixin popover-container {
+	.container {
+		display: flex;
+		flex-direction: column;
+
+		padding: var(--padding) var(--padding-2x);
+	}
+}