From 0b6bdc82e60a327118d0ea7afad7097ac76c17fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 19 Jan 2023 11:27:16 +0100
Subject: [PATCH] feat(frontend): Add app preview lock (#1127)

* feat(frontend): Add locked state to app preview

* change color

* add transition
---
 .../components/apps/editor/AppPreview.svelte  | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index 9cc2897309..a2376e98be 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, setContext } from 'svelte'
-
+	import { fade } from 'svelte/transition'
+	import { cubicOut } from 'svelte/easing'
 	import { writable, type Writable } from 'svelte/store'
 	import { buildWorld, type World } from '../rx'
 	import type {
@@ -11,9 +12,10 @@
 		EditorMode
 	} from '../types'
 	import GridEditor from './GridEditor.svelte'
-
 	import { classNames } from '$lib/utils'
 	import type { Policy } from '$lib/gen'
+	import Button from '../../common/button/Button.svelte'
+	import { Unlock } from 'lucide-svelte'
 
 	export let app: App
 	export let appPath: string
@@ -24,6 +26,7 @@
 	export let isEditor: boolean
 	export let context: Record<string, any>
 	export let noBackend: boolean = false
+	export let isLocked = false
 
 	const appStore = writable<App>(app)
 	const worldStore = writable<World | undefined>(undefined)
@@ -67,12 +70,29 @@
 
 	$: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context))
 	$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full '
+	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
 </script>
 
-<div class="h-full max-h-[calc(100%-41px)] overflow-auto w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
-	{#if $appStore.grid}
-		<div class={classNames('mx-auto pb-4', width)}>
-			<GridEditor {policy} />
+<div class="relative">
+	<div class="{$$props.class} {lockedClasses} h-full max-h-[calc(100%-41px)] overflow-auto 
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
+		{#if $appStore.grid}
+			<div class={classNames('mx-auto pb-4', width)}>
+				<GridEditor {policy} />
+			</div>
+		{/if}
+	</div>
+	{#if isLocked}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			transition:fade|local={{ duration: 200, easing: cubicOut }}
+			on:click={() => isLocked = false}
+			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
+		>
+			<Button on:click={() => isLocked = false}>
+				Unlock preview
+				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
+			</Button>
 		</div>
 	{/if}
 </div>