feat: Added welcome tab
Billy committed
Oct 11, 2024 at 22:23 UTC
ea4d4c33b4cab4a60364ac7e563da05cf9ea6b5c
3 files changed
+126
src/App.svelte
+5
@@ -19,6 +19,9 @@
19
import NotificationToasts from "./lib/Notifications/NotificationToasts.svelte";
20
import { NotifType, addNotification, toasts } from "./lib/Notifications/notifications";
21
import { shell } from "@tauri-apps/api";
22
+ import { addTab } from "./lib/EditorTabList.svelte";
23
+ import Welcome from "./lib/Welcome.svelte";
24
+
25
let resolution = writable(0);
26
27
let minPanelSize = 10;
@@ -31,6 +34,8 @@
34
let dir = localStorage.getItem("lastDir");
35
if (dir) {
36
loadDir(dir);
37
+ } else {
38
+ addTab("Welcome", "Welcome", new Welcome({target: document.getElementById("tabview")}));
39
}
40
41
let size = await appWindow.innerSize();
src/lib/Header.svelte
+2
@@ -1,6 +1,7 @@
1
<script lang="ts">
2
import Menu from "./utility/Menu.svelte";
3
import settings from "./Settings.svelte";
4
+ import Welcome from "./Welcome.svelte";
5
import { Settings } from "carbon-icons-svelte";
6
import { addTab, tabs, closeActiveTab } from "../lib/EditorTabList.svelte";
7
import { workspaceName } from "./File";
@@ -48,6 +49,7 @@
49
{name: "Close Window", shortcut: commands.closeWindow.keybind, action: commands.closeWindow.command},
50
]},
51
{menuname: "Help", children: [
52
+ {name: "Welcome", shortcut: "", action: () => {addTab("Welcome", "Welcome", new Welcome({target: document.getElementById("tabview")}))}},
53
{name: "Send Feedback", disabled: true, shortcut: "", action: () => {console.warn("Feature not implemented yet.")}},
54
{name: "Contact Support", disabled: true, shortcut: "", action: () => {console.warn("Feature not implemented yet.")}},
55
{name: "Report Issue", shortcut: "", action: () => {shell.open("https://github.com/mellobacon/Nucleus/issues/new/choose")}},
src/lib/Welcome.svelte
new
+119
@@ -0,0 +1,119 @@
1
+<script lang="ts">
2
+ import { openFolder } from "./File";
3
+ import { DocumentBlank, Folder, RecentlyViewed, Settings } from "carbon-icons-svelte";
4
+ import { addEditorTab, addTab } from "./EditorTabList.svelte";
5
+ import settings from "./Settings.svelte";
6
+ import { getVersion } from '@tauri-apps/api/app';
7
+ import { onMount } from "svelte";
8
+
9
+ export let hidden = true;
10
+
11
+ let appVersion = "";
12
+
13
+ onMount(async () => {
14
+ appVersion = await getVersion();
15
+ })
16
+</script>
17
+
18
+<div class="container" class:hidden>
19
+ <div class="content">
20
+ <div class="logo"></div>
21
+
22
+ <h1>Nucleus</h1>
23
+
24
+ <div class="quick-actions">
25
+ <button on:click={() => addEditorTab()} ><DocumentBlank /> New file</button>
26
+ <button on:click={openFolder} ><Folder /> Open Folder</button>
27
+ <!-- <button on:click={openFolder} ><RecentlyViewed /> Recent...</button> -->
28
+ <button on:click={() => addTab("Settings", "Settings", new settings({target: document.getElementById("tabview")}))}><Settings /> Config</button>
29
+ </div>
30
+ </div>
31
+
32
+ <div class="version">v{appVersion}-alpha</div>
33
+</div>
34
+
35
+<style lang="scss">
36
+ .hidden {
37
+ display: none !important;
38
+ }
39
+
40
+ .container {
41
+ display: grid;
42
+ grid-template-areas:
43
+ ". header ."
44
+ ". footer .";
45
+ grid-template-columns: 1fr 6fr 1fr;
46
+ grid-template-rows: minmax(min-content, auto) min-content;
47
+ height: 100%;
48
+ width: 100%;
49
+ }
50
+
51
+ .content {
52
+ grid-area: header;
53
+ display: flex;
54
+ flex-direction: column;
55
+ align-items: center;
56
+ justify-content: center;
57
+ }
58
+
59
+ .logo {
60
+ width: 200px;
61
+ height: 200px;
62
+ background-image: url('assets/images/Icon(1).png');
63
+ background-size: contain;
64
+ background-repeat: no-repeat;
65
+ background-position: center;
66
+ }
67
+
68
+ h1 {
69
+ font-size: 2.5rem;
70
+ margin-bottom: 3rem;
71
+ }
72
+
73
+ .quick-actions {
74
+ width: 130px;
75
+ display: flex;
76
+ flex-direction: column;
77
+ gap: 0.1rem;
78
+ }
79
+
80
+ button {
81
+ color: white;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: flex-start;
85
+ width: 100%;
86
+ text-align: left;
87
+ padding: 0.5rem;
88
+ background: none;
89
+ border: none;
90
+ cursor: pointer;
91
+ transition: color 0.3s ease;
92
+ }
93
+
94
+ button:hover {
95
+ color: #006FF2;
96
+ }
97
+
98
+ button:focus {
99
+ border: none;
100
+ outline: none;
101
+ }
102
+
103
+ button :global(svg) {
104
+ margin-right: 0.5rem;
105
+ fill: white;
106
+ transition: fill 0.3s ease;
107
+ }
108
+
109
+ button:hover :global(svg) {
110
+ fill: #006FF2;
111
+ }
112
+
113
+ .version {
114
+ color: rgba(255, 255, 255, 0.5);
115
+ grid-area: footer;
116
+ text-align: center;
117
+ margin-bottom: 0.5rem;
118
+ }
119
+</style>
\ No newline at end of file