Header rewrite
mellobacon committed
Nov 24, 2022 at 23:39 UTC
dcad43b265671a429c52f16260a9ff9305802f04
1 file changed
+52
-59
src/components/Header/Header.svelte
+52
-59
@@ -1,6 +1,5 @@
1
<script lang="ts">
2
import Menu from "../Menu/Menu.svelte";
3
- import { HeaderNav, HeaderNavMenu, HeaderNavItem } from "carbon-components-svelte";
3
import "../../overrides.css";
4
import { filemenu, editmenu, viewmenu, runmenu, helpmenu} from "../Menu/menu";
5
import { appWindow } from "@tauri-apps/api/window";
@@ -15,27 +14,25 @@
14
<Menu name="Run" options={runmenu}></Menu>
15
<Menu name="Help" options={helpmenu}></Menu>
16
</div>
17
+ <div class="divider"></div>
18
<div id="workspace">
19
- <HeaderNav>
20
- <HeaderNavMenu text={$workspacename}>
21
- <HeaderNavItem text="Open New Workspace..." />
22
- <HeaderNavItem text="Open Recent Workspace" />
23
- <HeaderNavItem text="Close Workspace" />
24
- </HeaderNavMenu>
25
- </HeaderNav>
19
+ {$workspacename}
20
</div>
21
<div id="handle" data-tauri-drag-region></div>
22
<div id="windowcontrols">
23
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
24
<div
25
class="window-button"
26
id="minimize"
27
on:click={() => appWindow.minimize()}
28
/>
29
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
30
<div
31
class="window-button"
32
id="maximize"
33
on:click={async () => { (await appWindow.isMaximized()) ? appWindow.unmaximize() : appWindow.maximize(); }}
34
/>
35
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
36
<div
37
class="window-button"
38
id="close"
@@ -44,15 +41,13 @@
41
</div>
42
</div>
43
47
-<style>
44
+<style lang="scss">
45
#header {
49
- z-index: 8000;
46
width: 100%;
47
display: flex;
48
height: 2rem;
49
align-items: center;
50
border-bottom: 1px solid #393939;
55
- background-color: #161616;
51
}
52
#logo {
53
background-size: 20px;
@@ -70,63 +65,61 @@
65
display: flex;
66
z-index: 10;
67
}
68
+ .divider {
69
+ width: 0.0625rem;
70
+ height: 1.2rem;
71
+ background-color: #393939;
72
+ margin: 0 4px;
73
+ }
74
#workspace {
75
height: 100%;
75
- width: fit-content;
76
- max-width: 200px;
77
- overflow-x: clip;
78
- z-index: 10;
79
- }
80
- :global(#workspace a.bx--header__menu-item) {
81
- flex-direction: row-reverse;
82
- cursor: pointer;
83
- }
84
- :global(#workspace .bx--header__menu-arrow) {
85
- display: none;
86
- }
87
- :global(#workspace .bx--header__menu-title.bx--header__menu) {
88
- width: 100% !important;
76
+ width: fit-content;
77
+ max-width: 200px;
78
+ overflow-x: clip;
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ padding: 0 1rem;
83
}
84
85
#handle {
86
position: absolute;
93
- height: 2rem;
87
width: -webkit-fill-available;
88
z-index: 9;
89
}
90
98
- #windowcontrols {
99
- margin-left: auto;
100
- height: 100%;
101
- display: flex;
102
- z-index: 10;
103
- }
104
- .window-button {
105
- min-width: 47px;
106
- height: 100%;
107
- line-height: 34px;
108
- text-align: center;
109
- padding-right: 5px;
110
- padding-left: 5px;
111
- font-size: 14px;
112
- color: white;
113
- cursor: pointer;
114
- }
115
- #minimize::before {
116
- content: "\2014";
117
- }
118
- #maximize::before {
119
- content: "\eabb";
120
- }
121
- #close::before {
122
- content: "\2715";
123
- line-height: 30px;
124
- }
125
- .window-button:not(#close):hover {
126
- background-color: #262626;
127
- }
128
- #close:hover {
129
- background-color: rgb(255, 49, 49);
130
- }
91
+ #window-controls {
92
+ margin-left: auto;
93
+ height: 100%;
94
+ display: flex;
95
+ z-index: 9999;
96
+ .window-button {
97
+ min-width: 36px;
98
+ height: 100%;
99
+ line-height: 34px;
100
+ text-align: center;
101
+ padding: 0 5px;
102
+ font-size: 14px;
103
+ color: white;
104
+ cursor: pointer;
105
+ &:not(#close):hover {
106
+ background-color: #262626;
107
+ }
108
+ &#close:hover {
109
+ background-color: #ff3131;
110
+ }
111
+ &#minimize::before {
112
+ content: "\2014";
113
+ font-size: 10px;
114
+ }
115
+ &#maximize::before {
116
+ content: "\eabb"; // replace
117
+ }
118
+ &#close::before {
119
+ content: "\2715";
120
+ line-height: 30px;
121
+ }
122
+ }
123
+ }
124
125
</style>
\ No newline at end of file