mirror of
https://github.com/markuryy/shark.git
synced 2025-12-12 11:41:02 +00:00
ui: update app branding and add menu bar
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:
22
src-tauri/Cargo.lock
generated
22
src-tauri/Cargo.lock
generated
@@ -2,6 +2,17 @@
|
||||
# It is not intended for manual editing.
|
||||
version = 4
|
||||
|
||||
[[package]]
|
||||
name = "Shark"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"serde",
|
||||
"serde_json",
|
||||
"tauri",
|
||||
"tauri-build",
|
||||
"tauri-plugin-opener",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "addr2line"
|
||||
version = "0.25.1"
|
||||
@@ -3307,17 +3318,6 @@ dependencies = [
|
||||
"digest",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "shark"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"serde",
|
||||
"serde_json",
|
||||
"tauri",
|
||||
"tauri-build",
|
||||
"tauri-plugin-opener",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "shlex"
|
||||
version = "1.3.0"
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
[package]
|
||||
name = "shark"
|
||||
name = "Shark"
|
||||
version = "0.1.0"
|
||||
description = "A Tauri App"
|
||||
authors = ["you"]
|
||||
description = "powered by tauri and sveltekit"
|
||||
authors = ["markuryy"]
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"app": {
|
||||
"windows": [
|
||||
{
|
||||
"title": "shark",
|
||||
"title": "Shark!",
|
||||
"width": 800,
|
||||
"height": 600,
|
||||
"decorations": false
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="%sveltekit.assets%/app.css" />
|
||||
<title>Tauri + SvelteKit + Typescript App</title>
|
||||
<title>Shark!</title>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
231
src/lib/MenuBar.svelte
Normal file
231
src/lib/MenuBar.svelte
Normal 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>
|
||||
@@ -17,7 +17,7 @@
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<button aria-label="Minimize" on:click={minimize}></button>
|
||||
<button aria-label="Maximize" on:click={toggleMaximize}></button>
|
||||
@@ -30,5 +30,12 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
padding: 4px 3px 4px 4px;
|
||||
}
|
||||
|
||||
.title-bar-controls button {
|
||||
min-height: 16px;
|
||||
min-width: 18px;
|
||||
background-position: center !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,8 @@
|
||||
<script lang="ts">
|
||||
import TitleBar from "$lib/TitleBar.svelte";
|
||||
import MenuBar from "$lib/MenuBar.svelte";
|
||||
</script>
|
||||
|
||||
<TitleBar />
|
||||
<MenuBar />
|
||||
<slot />
|
||||
Reference in New Issue
Block a user