impl
This commit is contained in:
Michal Vrba
@@ -0,0 +1,118 @@
|
||||
@inherits LayoutComponentBase
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<div class="d-flex flex-column" style="height: 100vh; overflow: hidden; background-color: var(--vscode-bg-editor);">
|
||||
<!-- VS Code Top Title Bar -->
|
||||
<div class="vsc-titlebar font-mono">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span style="color: #007acc; font-weight: 900; font-size: 1rem;">Visual Studio Code</span>
|
||||
<span class="text-muted" style="font-size: 0.72rem;">— SlaySharp [Workspace] — Incident.cs</span>
|
||||
</div>
|
||||
|
||||
<!-- Command Palette Bar -->
|
||||
<div class="vsc-search-palette font-mono">
|
||||
<span>🔍</span>
|
||||
<span>> SlaySharp: Debug Incident (Press F5 / Play to Execute Turn)</span>
|
||||
</div>
|
||||
|
||||
<!-- Window Controls -->
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<button class="btn btn-sm btn-dark p-0 px-2 font-mono d-flex align-items-center gap-1 border-secondary"
|
||||
style="font-size: 0.68rem;"
|
||||
@onclick="ToggleSound"
|
||||
title="Audio Synthesizer Toggle">
|
||||
<span>@(_isMuted ? "🔇" : "🔊")</span>
|
||||
<span>@(_isMuted ? "Muted" : "Sound ON")</span>
|
||||
</button>
|
||||
<div class="d-flex gap-2 text-muted" style="font-size: 0.8rem;">
|
||||
<span>─</span>
|
||||
<span>□</span>
|
||||
<span class="text-danger">✕</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VS Code Body (Activity Bar + Workspace) -->
|
||||
<div class="vsc-shell flex-grow-1">
|
||||
<!-- Left Activity Bar -->
|
||||
<div class="vsc-activitybar">
|
||||
<div class="d-flex flex-column align-items-center w-100">
|
||||
<div class="activity-icon active" title="Explorer (Ctrl+Shift+E)">
|
||||
<span>📁</span>
|
||||
</div>
|
||||
<div class="activity-icon" title="Search (Ctrl+Shift+F)">
|
||||
<span>🔍</span>
|
||||
</div>
|
||||
<div class="activity-icon" title="Source Control (Ctrl+Shift+G)">
|
||||
<span>🌿</span>
|
||||
</div>
|
||||
<div class="activity-icon" title="Run and Debug (Ctrl+Shift+D)">
|
||||
<span style="color: #3794ff;">🐞</span>
|
||||
</div>
|
||||
<div class="activity-icon" title="Extensions & NuGet Marketplace (Ctrl+Shift+X)">
|
||||
<span>🧩</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column align-items-center w-100">
|
||||
<div class="activity-icon" title="Accounts">
|
||||
<span>👤</span>
|
||||
</div>
|
||||
<div class="activity-icon" title="Settings">
|
||||
<span>⚙️</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Editor Workspace -->
|
||||
<main class="flex-grow-1 d-flex flex-column overflow-hidden" style="background-color: var(--vscode-bg-editor);">
|
||||
@Body
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- VS Code Bottom Status Bar -->
|
||||
<div class="vsc-statusbar font-mono">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="statusbar-item" title="Git Branch">
|
||||
<span>🌿 main*</span>
|
||||
</div>
|
||||
<div class="statusbar-item" title="Source Control Synchronize">
|
||||
<span>🔄 0↓ 1↑</span>
|
||||
</div>
|
||||
<div class="statusbar-item" title="Roslyn Diagnostics">
|
||||
<span>⛔ 0</span>
|
||||
<span class="ms-1">⚠️ 2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="statusbar-item">
|
||||
<span>Ln 42, Col 18</span>
|
||||
</div>
|
||||
<div class="statusbar-item">
|
||||
<span>Spaces: 4</span>
|
||||
</div>
|
||||
<div class="statusbar-item">
|
||||
<span>UTF-8</span>
|
||||
</div>
|
||||
<div class="statusbar-item">
|
||||
<span>CRLF</span>
|
||||
</div>
|
||||
<div class="statusbar-item" style="background-color: rgba(255,255,255,0.15);">
|
||||
<span style="color: #4ec9b0; font-weight: 700;">{ } C# (Roslyn JIT)</span>
|
||||
</div>
|
||||
<div class="statusbar-item" title="OmniSharp / C# Dev Kit Server">
|
||||
<span>🔥 .NET 8.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool _isMuted = false;
|
||||
|
||||
private async Task ToggleSound()
|
||||
{
|
||||
_isMuted = await JS.InvokeAsync<bool>("slayAudio.toggleMute");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row:not(.auth) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-row.auth {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">SlaySharp.Web</a>
|
||||
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="bi bi-house-door-fill" aria-hidden="true"></span> Home
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="counter">
|
||||
<span class="bi bi-plus-square-fill" aria-hidden="true"></span> Counter
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="fetchdata">
|
||||
<span class="bi bi-list-nested" aria-hidden="true"></span> Fetch data
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool collapseNavMenu = true;
|
||||
|
||||
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
|
||||
|
||||
private void ToggleNavMenu()
|
||||
{
|
||||
collapseNavMenu = !collapseNavMenu;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.25);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
/* Allow sidebar to scroll for tall menus */
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user