Add welcome screen

Nahara-OSS · Oct 9, 2024 · d14a65f · d14a65f
1 parent 8484792
commit d14a65f
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 10 deletions.
diff --git a/nahara-motion-ui/src/ui/bar/TopBar.svelte b/nahara-motion-ui/src/ui/bar/TopBar.svelte
@@ -60,7 +60,16 @@
                         duration: maxEndTime / 1000
                     });
                 },
-            }
+            },
+            ...($currentProject ? [
+                {
+                    type: "simple",
+                    name: "Close project",
+                    async click(event) {
+                        editor.closeProject();
+                    },
+                }
+            ] as DropdownEntry[] : [])
         ]);
     }
 

diff --git a/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte b/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte
@@ -8,6 +8,7 @@
     import { openPopupAt } from "../popup/PopupHost.svelte";
     import ColorPickerPopup from "../popup/ColorPickerPopup.svelte";
     import type { EditorImpl } from "../../App.svelte";
+    import Welcome from "./Welcome.svelte";
 
     export let state: any;
     export let editor: EditorImpl;
@@ -439,15 +440,10 @@
 />
 
 <canvas bind:this={canvas} on:mousedown={handleCanvasMouseDown} on:contextmenu={handleCanvasContextMenu}></canvas>
-{#if !$currentProject || !$currentScene}
-    <div class="notice">
-        {#if !$currentProject}
-            <div>No project opened. Open existing project or create new one by clicking File &gt; Open/New project</div>
-        {/if}
-        {#if !$currentScene}
-            <div>Select a scene from Project explorer pane to edit</div>
-        {/if}
-    </div>
+{#if !$currentProject}
+    <div class="welcome-wrapper"><Welcome {editor} /></div>
+{:else if !$currentScene}
+    <div class="notice">Select a scene from Project explorer pane to edit</div>
 {/if}
 
 <style lang="scss">
@@ -468,4 +464,14 @@
         text-align: center;
         color: #7f7f7f;
     }
+
+    .welcome-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        translate: 0 -50%;
+        padding: 32px;
+        box-sizing: border-box;
+    }
 </style>
diff --git a/nahara-motion-ui/src/ui/viewport/Welcome.svelte b/nahara-motion-ui/src/ui/viewport/Welcome.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { SimpleProject } from "@nahara/motion";
+    import type { EditorImpl } from "../../App.svelte";
+
+    export let editor: EditorImpl;
+
+    interface QuickStartAction {
+        icon: string;
+        label: string;
+        click?(e: MouseEvent): any;
+    }
+
+    const quickStartActions: QuickStartAction[] = [
+        {
+            icon: "wave",
+            label: "Take a tour (Coming soon in distant future)"
+        },
+        {
+            icon: "folder",
+            label: "New or open existing project...",
+            async click(e) {
+                const handle = await showDirectoryPicker({ id: "project", mode: "readwrite" });
+                const meta = await SimpleProject.probeProjectMeta(handle);
+
+                if (!meta) {
+                    // TODO show popup warning of project creation
+                }
+
+                const project = await SimpleProject.tryOpen(handle);
+                editor.openProject(project);
+            },
+        }
+    ];
+</script>
+
+<div class="welcome">
+    <h1>Welcome</h1>
+    <h2>Quick start</h2>
+    <div class="quick-start">
+        {#each quickStartActions as action}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div
+                class="entry"
+                role="button"
+                tabindex="0"
+                on:click={e => { if (action.click) action.click(e); }}
+            >
+                <div class="icon"></div>
+                <div class="label">{action.label}</div>
+            </div>
+        {/each}
+    </div>
+    <h2>Recent</h2>
+    <div class="recent">
+        Not implemented
+    </div>
+</div>
+
+<style lang="scss">
+    .welcome {
+        position: relative;
+        color: #000;
+        text-align: left;
+    }
+
+    h1 { font-size: 24px; font-weight: normal; margin: 12px 0; }
+    h2 { font-size: 16px; font-weight: normal; margin: 8px 0; }
+
+    .quick-start {
+        .entry {
+            width: fit-content;
+            display: flex;
+            flex-direction: row;
+            height: 24px;
+            border: 1px solid transparent;
+
+            &:hover {
+                background-color: #0000000f;
+                border: 1px solid #1d1d1d;
+            }
+
+            .icon {
+                width: 24px;
+                height: 24px;
+                background-color: #e0e0e0;
+            }
+
+            .label {
+                padding: 5px;
+            }
+        }
+    }
+</style>