markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-12 11:41:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: update app branding and add menu bar

Browse Source 
Update app name and branding across config, title bar, and HTML.
Add MenuBar component to layout and improve title bar button styles.
This commit is contained in:
Markury
2025-09-30 12:10:39 -04:00
parent c243aedcd7
commit ec11b18d32
7 changed files with 257 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src-tauri/Cargo.lock generated
View File

@@ -2,6 +2,17 @@
# It is not intended for manual editing. # It is not intended for manual editing.
version = 4 version = 4
[[package]]
name = "Shark"
version = "0.1.0"
dependencies = [
"serde",
"serde_json",
"tauri",
"tauri-build",
"tauri-plugin-opener",
]
[[package]] [[package]]
name = "addr2line" name = "addr2line"
version = "0.25.1" version = "0.25.1"
@@ -3307,17 +3318,6 @@ dependencies = [
"digest", "digest",
] ]
[[package]]
name = "shark"
version = "0.1.0"
dependencies = [
"serde",
"serde_json",
"tauri",
"tauri-build",
"tauri-plugin-opener",
]
[[package]] [[package]]
name = "shlex" name = "shlex"
version = "1.3.0" version = "1.3.0"

6
src-tauri/Cargo.toml
View File

@@ -1,8 +1,8 @@
[package] [package]
name = "shark" name = "Shark"
version = "0.1.0" version = "0.1.0"
description = "A Tauri App" description = "powered by tauri and sveltekit"
authors = ["you"] authors = ["markuryy"]
edition = "2021" edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

2
src-tauri/tauri.conf.json
View File

@@ -12,7 +12,7 @@
"app": { "app": {
"windows": [ "windows": [
{ {
"title": "shark", "title": "Shark!",
"width": 800, "width": 800,
"height": 600, "height": 600,
"decorations": false "decorations": false

2
src/app.html
View File

@@ -5,7 +5,7 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="%sveltekit.assets%/app.css" /> <link rel="stylesheet" href="%sveltekit.assets%/app.css" />
<title>Tauri + SvelteKit + Typescript App</title> <title>Shark!</title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

231
src/lib/MenuBar.svelte Normal file
View File

@@ -0,0 +1,231 @@
<script lang="ts">
let activeMenu: string | null = $state(null);
let isAnyMenuOpen = $state(false);
function toggleMenu(menuName: string) {
if (activeMenu === menuName) {
activeMenu = null;
isAnyMenuOpen = false;
} else {
activeMenu = menuName;
isAnyMenuOpen = true;
}
}
function closeMenus() {
activeMenu = null;
isAnyMenuOpen = false;
}
function handleMouseEnter(menuName: string) {
if (isAnyMenuOpen) {
activeMenu = menuName;
}
}
</script>
<svelte:window on:click={closeMenus} />
<nav class="menu-bar">
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "file"}
on:click|stopPropagation={() => toggleMenu("file")}
on:mouseenter={() => handleMouseEnter("file")}
>
<u>F</u>ile
</button>
{#if activeMenu === "file"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>New</button></li>
<li><button disabled>Open...</button></li>
<li><button disabled>Save</button></li>
<li class="separator"></li>
<li><button disabled>Exit</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "edit"}
on:click|stopPropagation={() => toggleMenu("edit")}
on:mouseenter={() => handleMouseEnter("edit")}
>
<u>E</u>dit
</button>
{#if activeMenu === "edit"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Undo</button></li>
<li><button disabled>Redo</button></li>
<li class="separator"></li>
<li><button disabled>Cut</button></li>
<li><button disabled>Copy</button></li>
<li><button disabled>Paste</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "view"}
on:click|stopPropagation={() => toggleMenu("view")}
on:mouseenter={() => handleMouseEnter("view")}
>
<u>V</u>iew
</button>
{#if activeMenu === "view"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Toolbar</button></li>
<li><button disabled>Status Bar</button></li>
<li class="separator"></li>
<li><button disabled>Refresh</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "playback"}
on:click|stopPropagation={() => toggleMenu("playback")}
on:mouseenter={() => handleMouseEnter("playback")}
>
<u>P</u>layback
</button>
{#if activeMenu === "playback"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Play</button></li>
<li><button disabled>Pause</button></li>
<li><button disabled>Stop</button></li>
<li class="separator"></li>
<li><button disabled>Next Track</button></li>
<li><button disabled>Previous Track</button></li>
</ul>
{/if}
</div>
<div class="menu-item">
<button
class="menu-button"
class:active={activeMenu === "help"}
on:click|stopPropagation={() => toggleMenu("help")}
on:mouseenter={() => handleMouseEnter("help")}
>
<u>H</u>elp
</button>
{#if activeMenu === "help"}
<ul class="menu-dropdown" on:click|stopPropagation>
<li><button disabled>Help Topics</button></li>
<li class="separator"></li>
<li><button disabled>About</button></li>
</ul>
{/if}
</div>
</nav>
<style>
.menu-bar {
display: flex;
padding: 2px 4px;
gap: 2px;
user-select: none;
}
.menu-item {
position: relative;
}
.menu-button {
background: transparent;
border: none;
box-shadow: none;
padding: 4px 8px;
min-width: auto;
min-height: auto;
font-family: "Pixelated MS Sans Serif", Arial;
font-size: 11px;
cursor: pointer;
color: light-dark(#222, #ddd);
text-shadow: none;
}
.menu-button:hover,
.menu-button.active {
background: light-dark(silver, #2b2b2b);
box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
inset 1px 1px light-dark(#fff, #525252),
inset -2px -2px light-dark(grey, #232323),
inset 2px 2px light-dark(#dfdfdf, #363636);
}
.menu-button.active {
box-shadow: inset -1px -1px light-dark(#fff, #525252),
inset 1px 1px light-dark(#0a0a0a, #000),
inset -2px -2px light-dark(#dfdfdf, #363636),
inset 2px 2px light-dark(grey, #232323);
}
.menu-dropdown {
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 2px;
list-style: none;
background: light-dark(silver, #2b2b2b);
box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
inset 1px 1px light-dark(#dfdfdf, #363636),
inset -2px -2px light-dark(grey, #232323),
inset 2px 2px light-dark(#fff, #525252);
min-width: 150px;
z-index: 1000;
}
.menu-dropdown li {
margin: 0;
}
.menu-dropdown li.separator {
height: 1px;
background: light-dark(grey, #232323);
margin: 2px 0;
border-top: 1px solid light-dark(#fff, #525252);
}
.menu-dropdown button {
width: 100%;
text-align: left;
background: transparent;
border: none;
box-shadow: none;
padding: 4px 20px;
min-width: auto;
min-height: auto;
font-family: "Pixelated MS Sans Serif", Arial;
font-size: 11px;
cursor: pointer;
color: light-dark(#222, #ddd);
text-shadow: none;
}
.menu-dropdown button:not(:disabled):hover {
background: light-dark(navy, #0b0b0b);
color: #fff;
box-shadow: none;
text-shadow: none;
}
.menu-dropdown button:disabled {
color: light-dark(grey, #232323);
text-shadow: 1px 1px 0 light-dark(#fff, #525252);
cursor: default;
}
u {
text-decoration: underline;
}
</style>

9
src/lib/TitleBar.svelte
View File

@@ -17,7 +17,7 @@
</script> </script>
<div class="title-bar" data-tauri-drag-region> <div class="title-bar" data-tauri-drag-region>
<div class="title-bar-text">shark</div> <div class="title-bar-text">Shark!</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button aria-label="Minimize" on:click={minimize}></button> <button aria-label="Minimize" on:click={minimize}></button>
<button aria-label="Maximize" on:click={toggleMaximize}></button> <button aria-label="Maximize" on:click={toggleMaximize}></button>
@@ -30,5 +30,12 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
padding: 4px 3px 4px 4px;
}
.title-bar-controls button {
min-height: 16px;
min-width: 18px;
background-position: center !important;
} }
</style> </style>

2
src/routes/+layout.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import TitleBar from "$lib/TitleBar.svelte"; import TitleBar from "$lib/TitleBar.svelte";
import MenuBar from "$lib/MenuBar.svelte";
</script> </script>
<TitleBar /> <TitleBar />
<MenuBar />
<slot /> <slot />