added header
mellbacon committed
Apr 24, 2023 at 17:33 UTC
1f2a7583cbb832b6449f0b3dd5b6198760070bb5
9 files changed
+360
-38
package.json
+2
-1
@@ -20,6 +20,7 @@
20
"@tauri-apps/cli": "^1.2.3",
21
"@tsconfig/svelte": "^4.0.1",
22
"@types/node": "^18.15.11",
23
+ "carbon-icons-svelte": "^11.4.0",
24
"prettier": "^2.8.7",
25
"svelte": "^3.58.0",
26
"svelte-check": "^3.2.0",
@@ -28,4 +29,4 @@
29
"typescript": "^5.0.4",
30
"vite": "^4.2.2"
31
}
31
-}
\ No newline at end of file
32
+}
src/App.svelte
+3
-1
@@ -1,9 +1,11 @@
1
<script lang="ts">
2
+ import Header from "./lib/Header.svelte";
3
4
</script>
5
6
+<Header />
7
<div id="main">
6
- <h1>TEST</h1>
8
+
9
</div>
10
<style>
11
#main {
src/components/style.scss
deleted
-29
@@ -1,29 +0,0 @@
1
-$window-background-color: #161616;
2
-$header-height: 2rem;
3
-$footer-height: 1.6rem;
4
-$tab-container-height: 2rem;
5
-
6
-#handle, #header {
7
- height: $header-height;
8
-}
9
-
10
-#main {
11
- height: calc(100vh - $header-height - 0.063rem);
12
-}
13
-
14
-#footer {
15
- height: $footer-height;
16
-}
17
-.main {
18
- height: 100%;
19
-}
20
-#container > .splitpanes {
21
- height: calc(100% - $footer-height);
22
-}
23
-#editor-tabs{
24
- background-color: $window-background-color;
25
- min-height: $tab-container-height;
26
-}
27
-#tabview {
28
- padding-top: $tab-container-height;
29
-}
src/global.css
-6
@@ -18,7 +18,6 @@ html {
18
font-weight: 400;
19
20
color: #ffffff;
21
- background-color: #161616;
21
user-select: none;
22
-webkit-user-select: none;
23
@@ -30,7 +29,6 @@ html {
29
}
30
31
body {
33
- padding: 8px;
32
box-sizing: border-box;
33
}
34
@@ -43,10 +41,6 @@ a:hover {
41
text-decoration: underline;
42
}
43
46
-a:visited {
47
- color: rgb(0,80,160);
48
-}
49
-
44
label {
45
display: block;
46
}
src/lib/Header.svelte
new
+190
@@ -0,0 +1,190 @@
1
+<script lang="ts">
2
+ import { appWindow } from "@tauri-apps/api/window";
3
+ import Dropdown from "./utility/Dropdown.svelte";
4
+ import Settings from "carbon-icons-svelte/lib/Settings.svelte";
5
+
6
+ const items = [
7
+ {menuname: "File", children: [
8
+ {name: "New File", shortcut: "Ctrl + N", action: () => {console.log("click")}},
9
+ {name: "Open File...", shortcut: "Ctrl + O", action: () => {console.log("click")}},
10
+ {name: "Save File", shortcut: "Ctrl + S", action: () => {console.log("click")}},
11
+ {name: "Save File As...", shortcut: "Ctrl + Shift + S", action: () => {console.log("click")}},
12
+ {name: "Close Tab", shortcut: "", action: () => {console.log("click")}},
13
+ ]},
14
+ {menuname: "Edit", children: [
15
+ {name: "Undo", shortcut: "Ctrl + Z", action: () => {console.log("click")}},
16
+ {name: "Redo", shortcut: "Ctrl + Shift + Z", action: () => {console.log("click")}},
17
+ {name: "Cut", shortcut: "Ctrl + X", action: () => {console.log("click")}},
18
+ {name: "Copy", shortcut: "Ctrl + C", action: () => {console.log("click")}},
19
+ {name: "Paste", shortcut: "Ctrl + V", action: () => {console.log("click")}},
20
+ {name: "Paste From History...", shortcut: "Ctrl + Shift + V", action: () => {console.log("click")}},
21
+ {name: "Delete", shortcut: "Delete", action: () => {console.log("click")}},
22
+ {name: "Find", shortcut: "Ctrl + F", action: () => {console.log("click")}},
23
+ {name: "Replace", shortcut: "Ctrl + H", action: () => {console.log("click")}},
24
+ ]},
25
+ {menuname: "View", children: [
26
+ {name: "Command Pallete", shortcut: "Ctrl + Shift + P", action: () => {console.log("click")}},
27
+ {name: "Zoom In", shortcut: "Ctrl +", action: () => {console.log("click")}},
28
+ {name: "Zoom Out", shortcut: "Ctrl -", action: () => {console.log("click")}},
29
+ {name: "Reset Zoom", shortcut: "", action: () => {console.log("click")}},
30
+ {name: "Fullscreen", shortcut: "F11", action: () => {console.log("click")}},
31
+ ]},
32
+ {menuname: "Run", children: [
33
+ {name: "Run File", shortcut: "F5", action: () => {console.log("click")}},
34
+ {name: "Debug File", shortcut: "Ctrl + F5", action: () => {console.log("click")}},
35
+ {name: "Stop File", shortcut: "Shift + F5", action: () => {console.log("click")}},
36
+ {name: "Open Configurations", shortcut: "", action: () => {console.log("click")}},
37
+ ]},
38
+ {menuname: "Window", children: [
39
+ {name: "New Window", shortcut: "Ctrl + Shift + N", action: () => {console.log("click")}},
40
+ {name: "Minimize Window", shortcut: "", action: () => {console.log("click")}},
41
+ {name: "Maximize Window", shortcut: "", action: () => {console.log("click")}},
42
+ {name: "Close Window", shortcut: "Alt + F4", action: () => {console.log("click")}},
43
+ ]},
44
+ {menuname: "Help", children: [
45
+ {name: "Send Feedback", shortcut: "", action: () => {console.log("click")}},
46
+ {name: "Contact Support", shortcut: "", action: () => {console.log("click")}},
47
+ {name: "Report Issue", shortcut: "", action: () => {console.log("click")}},
48
+ {name: "Documentation", shortcut: "", action: () => {console.log("click")}},
49
+ {name: "Show Release Notes", shortcut: "", action: () => {console.log("click")}},
50
+ {name: "Check for Updates", shortcut: "", action: () => {console.log("click")}},
51
+ {name: "About", shortcut: "", action: () => {console.log("click")}},
52
+ {name: "Toggle Developer Tools", shortcut: "", action: () => {console.log("click")}},
53
+ ]},
54
+ ];
55
+</script>
56
+<div id="header">
57
+ <div id="logo"></div>
58
+ <div id="menubar">
59
+ {#each items as item}
60
+ <Dropdown menu={item}></Dropdown>
61
+ {/each}
62
+ </div>
63
+ <div class="divider"></div>
64
+ <div id="workspace">
65
+ Nucleus
66
+ </div>
67
+ <div id="handle" data-tauri-drag-region></div>
68
+ <div class="tools">
69
+
70
+ <div class="settings">
71
+ <Dropdown menu={{icon: Settings, children: [{name: "Settings", shortcut: "", action: () => {console.log("click")}}, {name: "Keymap", shortcut: "", action: () => {console.log("click")}}]}} />
72
+ </div>
73
+ </div>
74
+ <div id="window-controls">
75
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
76
+ <div
77
+ class="window-button"
78
+ id="minimize"
79
+ on:click={() => appWindow.minimize()}
80
+ />
81
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
82
+ <div
83
+ class="window-button"
84
+ id="maximize"
85
+ on:click={async () => { (await appWindow.isMaximized()) ? appWindow.unmaximize() : appWindow.maximize(); }}
86
+ />
87
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
88
+ <div
89
+ class="window-button"
90
+ id="close"
91
+ on:click={async () => await appWindow.close()}
92
+ />
93
+ </div>
94
+</div>
95
+
96
+<style lang="scss">
97
+ #header {
98
+ width: 100%;
99
+ display: flex;
100
+ align-items: center;
101
+ }
102
+ #logo {
103
+ background-size: 20px;
104
+ background-repeat: no-repeat;
105
+ height: 100%;
106
+ min-width: 35px;
107
+ position: relative;
108
+ content: '';
109
+ background-image: url("/assets/images/Icon\(1\).png");
110
+ background-position: center;
111
+ z-index: 10;
112
+ }
113
+ #menubar {
114
+ height: 100%;
115
+ display: flex;
116
+ z-index: 10;
117
+ }
118
+ .divider {
119
+ width: 0.0625rem;
120
+ height: 1.2rem;
121
+ margin: 0 4px;
122
+ }
123
+ #workspace {
124
+ height: 100%;
125
+ width: fit-content;
126
+ max-width: 200px;
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ padding: 0 0.5rem;
131
+ font-size: 14px;
132
+ color: #8c8c8c;
133
+ }
134
+
135
+ #handle {
136
+ position: absolute;
137
+ width: -webkit-fill-available;
138
+ z-index: 9;
139
+ }
140
+
141
+ .settings {
142
+ height: 100%;
143
+ display: flex;
144
+ justify-content: center;
145
+ align-items: center;
146
+ z-index: 10;
147
+ }
148
+ .tools {
149
+ width: -webkit-fill-available;
150
+ display: flex;
151
+ justify-content: end;
152
+ padding: 0 5px;
153
+ height: 100%;
154
+ }
155
+
156
+ #window-controls {
157
+ margin-left: auto;
158
+ height: 100%;
159
+ display: flex;
160
+ z-index: 10;
161
+ .window-button {
162
+ min-width: 36px;
163
+ height: 100%;
164
+ line-height: 34px;
165
+ text-align: center;
166
+ padding: 0 5px;
167
+ font-size: 14px;
168
+ color: white;
169
+ cursor: pointer;
170
+ &:not(#close):hover {
171
+ background-color: #262626;
172
+ }
173
+ &#close:hover {
174
+ background-color: #ff3131;
175
+ }
176
+ &#minimize::before {
177
+ content: "\2014";
178
+ font-size: 10px;
179
+ }
180
+ &#maximize::before {
181
+ content: "\eabb"; // replace
182
+ }
183
+ &#close::before {
184
+ content: "\2715";
185
+ line-height: 30px;
186
+ }
187
+ }
188
+ }
189
+
190
+</style>
\ No newline at end of file
src/lib/utility/Dropdown.svelte
new
+94
@@ -0,0 +1,94 @@
1
+<script lang="ts">
2
+ import { afterUpdate } from 'svelte';
3
+ export let menu;
4
+
5
+ let button = null;
6
+ let dropdownList = null;
7
+ let open = false;
8
+
9
+ afterUpdate(() => {
10
+ if (open && dropdownList) {
11
+ const { height , left } = button.getBoundingClientRect();
12
+ dropdownList.style.top = `${height}px`;
13
+ dropdownList.style.left = `${left}px`;
14
+ // TODO: make toggle for showing dropdown on the right of the button
15
+ }
16
+ })
17
+</script>
18
+
19
+<svelte:window on:click={(e) => {
20
+ if (open && !button.contains(e.target)) {
21
+ open = false;
22
+ }
23
+}}></svelte:window>
24
+
25
+{#if menu.menuname}
26
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
27
+ <div bind:this={button} class="dropdown-button" on:click={() => {open = !open}}>
28
+ {menu.menuname}
29
+ </div>
30
+{/if}
31
+{#if menu.icon}
32
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
33
+ <div bind:this={button} class="dropdown-button" on:click={() => {open = !open}}>
34
+ <svelte:component this={menu.icon}></svelte:component>
35
+ </div>
36
+{/if}
37
+
38
+{#if open}
39
+ <div bind:this={dropdownList} class="dropdown-list">
40
+ {#each menu.children as child}
41
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
42
+ <div class="dropdown-item" on:click={child.action}>
43
+ <span class="item-name">
44
+ {child.name}
45
+ </span>
46
+ {#if child.shortcut}
47
+ <span class="shortcut">{child.shortcut}</span>
48
+ {/if}
49
+ </div>
50
+ {/each}
51
+ </div>
52
+{/if}
53
+
54
+<style lang="scss">
55
+ .dropdown-button {
56
+ height: 100%;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ font-size: 14px;
61
+ min-width: 2.2rem;
62
+ padding: 0 5px;
63
+ :global(svg) {
64
+ width: 18px;
65
+ height: 18px;
66
+ }
67
+ }
68
+ .dropdown-list {
69
+ position: absolute;
70
+ display: flex;
71
+ flex-direction: column;
72
+ justify-content: center;
73
+ min-width: 11rem;
74
+ align-items: center;
75
+ padding: 3px 0;
76
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
77
+ }
78
+ .dropdown-item {
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: space-between;
82
+ height: 17px;
83
+ padding: 5px;
84
+ width: 100%;
85
+ font-size: 14px;
86
+ }
87
+ .item-name, .shortcut {
88
+ padding: 0 10px;
89
+ }
90
+ .shortcut {
91
+ color: #8c8c8c;
92
+ margin-left: 20px;
93
+ }
94
+</style>
\ No newline at end of file
src/main.ts
+1
-1
@@ -1,5 +1,5 @@
1
import "./global.css";
2
-import "./components/style.scss";
2
+import "./theme.scss";
3
import App from './App.svelte';
4
5
const app = new App({
src/theme.scss
new
+65
@@ -0,0 +1,65 @@
1
+$foreground: #ffffff;
2
+$window-background-color: #161616;
3
+$header-background-color: #2D2D2D;
4
+
5
+$toolbar-button-hover-color: #414040;
6
+
7
+$dropdown-background-color: $header-background-color;
8
+$dropdownButton-background-color: $header-background-color;
9
+$dropdownButtonText-hover-color: $foreground;
10
+$dropdownItem-hover-color: $window-background-color;
11
+$dropdownItemText-hover-color: $foreground;
12
+
13
+$header-height: 2rem;
14
+$footer-height: 1.6rem;
15
+$tab-container-height: 2rem;
16
+
17
+$border-color: #414040;
18
+
19
+html {
20
+ background-color: $window-background-color;
21
+}
22
+#handle, #header {
23
+ height: $header-height;
24
+}
25
+#header {
26
+ background-color: $header-background-color;
27
+ border-bottom: 1px solid $border-color;
28
+}
29
+.dropdown-button {
30
+ &:hover {
31
+ background-color: $toolbar-button-hover-color;
32
+ }
33
+}
34
+.dropdown-list {
35
+ background-color: $dropdown-background-color;
36
+}
37
+.dropdown-item {
38
+ &:hover {
39
+ background-color: $dropdownItem-hover-color;
40
+ }
41
+}
42
+.divider {
43
+ background-color: $border-color;
44
+}
45
+
46
+#main {
47
+ height: calc(100vh - $header-height - 0.063rem);
48
+}
49
+
50
+#footer {
51
+ height: $footer-height;
52
+}
53
+.main {
54
+ height: 100%;
55
+}
56
+#container > .splitpanes {
57
+ height: calc(100% - $footer-height);
58
+}
59
+#editor-tabs{
60
+ background-color: $window-background-color;
61
+ min-height: $tab-container-height;
62
+}
63
+#tabview {
64
+ padding-top: $tab-container-height;
65
+}
yarn.lock
+5
@@ -291,6 +291,11 @@ callsites@^3.0.0:
291
resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
292
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
293
294
+carbon-icons-svelte@^11.4.0:
295
+ version "11.4.0"
296
+ resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-11.4.0.tgz#1bab38ac0c8f778e0431f8df54324829c81cfd30"
297
+ integrity sha512-p/llZde2kP2BI9SOqM+QFKGfQnYrW+4dVxF1rAYriEADXDsjt9EYlh+KpQ5qf4JpXAq+e2+TB/r/lIG1xdUbAQ==
298
+
299
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
300
version "3.5.3"
301
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"