update layout

This commit is contained in:
Matt Parker
2025-08-07 00:56:43 +10:00
parent 1ea10c8cc2
commit 8437d77b2b
2 changed files with 35 additions and 31 deletions

View File

@@ -1,12 +1,17 @@
@using Ardalis.GuardClauses @using Ardalis.GuardClauses
@using SharpIDE.Application.Features.SolutionDiscovery @using SharpIDE.Application.Features.SolutionDiscovery
@using SharpIDE.Photino.Services @using SharpIDE.Photino.Services
@using BlazorMonaco
@using BlazorMonaco.Editor @using BlazorMonaco.Editor
@using BlazorMonaco.Languages
@inject RefreshOpenFileService RefreshOpenFileService @inject RefreshOpenFileService RefreshOpenFileService
<style>
#my-editor-id {
height: calc(100% - 24px);
width: calc(100% - 5px); /* the monaco editor is a pain regarding resizes */
}
</style>
<MudStack Class="ma-0 pa-0" Spacing="0" Style="@(_internalSelectedFile is null ? "visibility: hidden; height: 100%" : "height: 100%")">
<MudText> <MudText>
@_internalSelectedFile?.Name @_internalSelectedFile?.Name
@if (_unsavedEdits) @if (_unsavedEdits)
@@ -14,14 +19,8 @@
<span>*</span> <span>*</span>
} }
</MudText> </MudText>
<style>
#my-editor-id {
height: calc(100vh - 100px);
}
</style>
<div style="@(_internalSelectedFile is null ? "visibility: hidden" : null)">
<StandaloneCodeEditor @ref="_codeEditorRef" Id="my-editor-id" ConstructionOptions="@EditorConstructionOptions" OnDidChangeModelContent="IfDirtyMarkDirty" OnDidBlurEditorText="@SaveFileToDisk" /> <StandaloneCodeEditor @ref="_codeEditorRef" Id="my-editor-id" ConstructionOptions="@EditorConstructionOptions" OnDidChangeModelContent="IfDirtyMarkDirty" OnDidBlurEditorText="@SaveFileToDisk" />
</div> </MudStack>
@code { @code {
[Parameter, EditorRequired] [Parameter, EditorRequired]

View File

@@ -42,16 +42,17 @@
</MudAppBar> </MudAppBar>
<MudMainContent Style="height: 100%"> <MudMainContent Style="height: 100%">
<MudStack Style="height: 100%" Row="true" Spacing="0" StretchItems="StretchItems.Middle"> <MudStack Style="height: 100%; overflow: hidden" Row="true" Spacing="0" StretchItems="StretchItems.Middle">
<MudPaper Elevation="6" Height="100%" Style="background-color: var(--mud-palette-appbar-background); z-index: 1200;"> <MudPaper Elevation="6" Height="100%" Style="background-color: var(--mud-palette-appbar-background); z-index: 1200;">
<MudStack AlignItems="AlignItems.Center" Spacing="1" Style="padding: 4px; height: 100%"> <MudStack AlignItems="AlignItems.Center" Spacing="1" Style="padding: 4px; height: 100%">
<SidebarIconButton Icon="@Icons.Material.Filled.FolderOpen" Text="Explorer" /> <SidebarIconButton Icon="@Icons.Material.Filled.FolderOpen" Text="Explorer" />
<MudSpacer /> <MudSpacer />
<SidebarIconButton Icon="@Icons.Material.Filled.PlayArrow" Text="Run" OnClick="@RunDrawerToggle" /> <SidebarIconButton Icon="@Icons.Material.Filled.PlayArrow" Text="Run" OnClick="@RunDrawerToggle" />
<SidebarIconButton Icon="@Icons.Material.Filled.Terminal" Text="Terminal" /> <SidebarIconButton Icon="@Icons.Material.Filled.Terminal" Text="Build" />
</MudStack> </MudStack>
</MudPaper> </MudPaper>
<MudPaper Height="100%" Style="overflow:hidden; position:relative;"> <div>
<MudPaper Height="@MainContentHeight" Style="overflow:hidden; position:relative;">
<MudDrawerContainer Style="height: 100%" Class="mud-height-full"> <MudDrawerContainer Style="height: 100%" Class="mud-height-full">
<MudDrawer @bind-Open="@_drawerOpen" Style="height: 100%" Width="400px" Fixed="false" Variant="@DrawerVariant.Persistent"> <MudDrawer @bind-Open="@_drawerOpen" Style="height: 100%" Width="400px" Fixed="false" Variant="@DrawerVariant.Persistent">
@if (_solutionFilePath is not null) @if (_solutionFilePath is not null)
@@ -59,9 +60,8 @@
<SolutionExplorer @bind-SelectedFile="@_selectedFile" SolutionModel="@_solutionModel"/> <SolutionExplorer @bind-SelectedFile="@_selectedFile" SolutionModel="@_solutionModel"/>
} }
</MudDrawer> </MudDrawer>
<div class="d-flex justify-center align-center mud-height-full"> <div class="d-flex justify-center align-center mud-height-full" style="flex-direction: row">
<MudContainer MaxWidth="MaxWidth.False" Class="mt-2"> <MudContainer Style="height: 100%" MaxWidth="MaxWidth.False" Class="ma-0 pa-0">
@* @Body *@
@if (_solutionFilePath is not null) @if (_solutionFilePath is not null)
{ {
<CodeViewer SelectedFile="@_selectedFile"/> <CodeViewer SelectedFile="@_selectedFile"/>
@@ -70,6 +70,9 @@
</div> </div>
</MudDrawerContainer> </MudDrawerContainer>
</MudPaper> </MudPaper>
<div>Run</div>
</div>
<div>@* fake for StretchItems.Middle *@</div> <div>@* fake for StretchItems.Middle *@</div>
</MudStack> </MudStack>
</MudMainContent> </MudMainContent>
@@ -94,6 +97,8 @@
private SharpIdeSolutionModel? _solutionModel; private SharpIdeSolutionModel? _solutionModel;
private SharpIdeFile? _selectedFile; private SharpIdeFile? _selectedFile;
private string MainContentHeight => _runDrawerOpen ? "70%" : "100%";
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
await LoadSolutionFromInteractivePicker(AppState.IdeSettings.AutoOpenLastSolution); await LoadSolutionFromInteractivePicker(AppState.IdeSettings.AutoOpenLastSolution);