Update Drawer (#175)

versile2 · web-flow · commit 03acb6aac7e6 · 2025-03-27T16:32:49.000+01:00
diff --git a/src/TryMudBlazor.Client/Pages/Repl.razor b/src/TryMudBlazor.Client/Pages/Repl.razor
@@ -1,9 +1,25 @@
 ﻿@page "/snippet/{snippetId?}"
 @layout MainLayout
 
+<style>
+    .try-drawer {
+        width: var(--mud-drawer-width-mini-left) !important;
+        overflow: hidden;
+    }
+    .try-editor {
+        margin-left: var(--mud-drawer-width-mini-left) !important;
+    }
+    .try-avatar {
+        border-color: var(--try-drawer-text);
+        color: var(--try-drawer-text);
+    }
+</style>
+
 <div class="try-layout">
-    <MudDrawer Fixed="false" Elevation="1" Variant="@DrawerVariant.Mini" Class="try-drawer">
-        <MudIconButton title="Run (Ctrl + S)" OnClick="@CompileAsync" Disabled="@Loading" Icon="@Icons.Material.Rounded.PlayArrow" Color="@(LayoutService.IsDarkMode ? Color.Success : Color.Inherit)" />
+    <MudDrawer Open="true" Fixed="false" Elevation="1" Variant="@DrawerVariant.Persistent" Class="try-drawer mud-drawer-mini">
+        <MudTooltip Text="Run your code">
+            <MudIconButton title="Run (Ctrl + S)" OnClick="@CompileAsync" Disabled="@Loading" Icon="@Icons.Material.Rounded.PlayArrow" Color="@(LayoutService.IsDarkMode ? Color.Success : Color.Inherit)" />
+        </MudTooltip>        
         <MudTooltip Text="Save or Share" Delay="800" Arrow="true" Placement="Placement.Right" Color="Color.Dark">
             <SaveSnippetPopup @bind-Visible="SaveSnippetPopupVisible" CodeFiles="@CodeFiles.Values" UpdateActiveCodeFileContentAction="UpdateActiveCodeFileContent" />
             <MudIconButton OnClick="ShowSaveSnippetPopup" Icon="@Icons.Material.Outlined.Save" Color="@(LayoutService.IsDarkMode ? Color.Info : Color.Inherit)" />
@@ -12,9 +28,14 @@
             <MudIconButton OnClick="@UpdateTheme" Icon="@(LayoutService.IsDarkMode ? @Icons.Material.Rounded.LightMode : @Icons.Material.Outlined.DarkMode)" Color="@(LayoutService.IsDarkMode ? Color.Warning : Color.Inherit)" />
         </MudTooltip>
         <MudSpacer />
+        <MudStack Class="mb-12" AlignItems="AlignItems.Center" Justify="Justify.Center">
         <div class="d-flex justify-center">
             <div class="brand">Try<span class="pt-4 pb-12">MudBlazor</span></div>
         </div>
+            <MudTooltip Text="Cleanup and Clear Compiler Cache" Delay="800" Arrow Placement="Placement.Right" Color="Color.Dark">
+                <MudIconButton OnClick="@ClearCache" Icon="@Icons.Material.Filled.CleanHands" Color="@(LayoutService.IsDarkMode ? Color.Info : Color.Inherit)" />
+            </MudTooltip>
+        </MudStack>
     </MudDrawer>
     <div class="try-editor">
         <MudOverlay Visible="Loading" Absolute="true" DarkBackground="true">
@@ -26,10 +47,10 @@
             <ErrorList @bind-Show="@ShowDiagnostics" Diagnostics="@Diagnostics" />
         </div>
         <div id="user-page-window-container">
-            <iframe id="user-page-window" src="/user-page"></iframe>
+            <iframe id="user-page-window" src="/user-page" style="height: 98vh;"></iframe>
         </div>
     </div>
-    <MudAppBar Bottom="true" Fixed="false" Color="@GetBottomAppBarColor()" Elevation="0" Class="try-errorlist repl-navbar">
+    <MudAppBar Bottom="true" Fixed="true" Color="@GetBottomAppBarColor()" Elevation="0" Class="try-errorlist repl-navbar">
         <div class="try-errorlist-button d-flex align-center" @onclick="@ToggleDiagnostics">
             <MudIcon Icon="@Icons.Material.Outlined.ErrorOutline" />
             <MudText>@ErrorsCount</MudText>
@@ -45,11 +66,11 @@
         <MudLink Typo="Typo.body2" Class="ml-5 version-info" Color="Color.Inherit" Href="https://github.com/MudBlazor/MudBlazor/releases" Target="_blank">mudblazor @Version</MudLink>
     </MudAppBar>
 </div>
-@code{
+@code {
 
     public Color GetBottomAppBarColor()
     {
-        if(ErrorsCount != 0)
+        if (ErrorsCount != 0)
         {
             return Color.Error;
         }
diff --git a/src/TryMudBlazor.Client/Pages/Repl.razor.cs b/src/TryMudBlazor.Client/Pages/Repl.razor.cs
@@ -37,6 +37,9 @@ public partial class Repl : IDisposable
         [Inject]
         public IJSInProcessRuntime JsRuntime { get; set; }
 
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
         [Parameter]
         public string SnippetId { get; set; }
 
@@ -286,5 +289,11 @@ private async void UpdateTheme()
             await Task.Yield();
             await JsRuntime.InvokeVoidAsync("updateIframeTheme");
         }
+
+        private async Task ClearCache()
+        {
+            await JsRuntime.InvokeVoidAsync("Try.clearCache");
+            NavigationManager.NavigateTo(NavigationManager.BaseUri, true);
+        }
     }
 }
diff --git a/src/TryMudBlazor.Client/Pages/UserPage.razor b/src/TryMudBlazor.Client/Pages/UserPage.razor
@@ -1,8 +1,9 @@
 ﻿@page "/user-page"
 
 <MudContainer Class="mt-8">    
-    <MudText>This snippet hasn't been compiled yet.</MudText>
-    <MudText>Run the code on the left to see the result here.</MudText>
+    <MudAlert Style="width: max-content;padding-right: 30px;" Severity="Severity.Warning">
+    <MudText>This snippet hasn't been compiled yet.<br/>Run the code on the left to see the result here.</MudText>    
+    </MudAlert>    
     <MudText Typo="@Typo.h6" Class="mt-12">How to load your own service</MudText>
     <MudText Class="mt-3">
         To install a service which your snippet can use create a new *.cs file, <br/>
diff --git a/src/TryMudBlazor.Client/Style/Editor/_page.scss b/src/TryMudBlazor.Client/Style/Editor/_page.scss
@@ -1,44 +1,54 @@
 ﻿
-.try-layout{
+.try-layout {
     height: 100%;
     overflow: hidden;
-    .try-editor{
+
+    .try-editor {
         display: flex;
         height: 100%;
         flex-direction: row;
         position: relative;
+        margin-left: var(--mud-drawer-width-mini-left) !important;
+
         .code-editor {
             height: calc(100% - 54px);
             border: none;
         }
-        #user-code-editor-container{
+
+        #user-code-editor-container {
             position: relative;
         }
-        
-        .decorationsOverviewRuler{
+
+        .decorationsOverviewRuler {
             display: none !important;
         }
     }
-    .try-drawer{
+
+    .try-drawer {
         background-color: var(--try-drawer);
         color: var(--try-drawer-text);
-        
-        & + .mud-icon-button{
-            padding:12px;
+        width: var(--mud-drawer-width-mini-left) !important;
+        overflow: hidden;
+
+        & + .mud-icon-button {
+            padding: 12px;
             font-size: 2rem;
-            .mud-icon-size-medium{
+
+            .mud-icon-size-medium {
                 font-size: 2rem;
             }
         }
-        
-        .mud-icon-button{
-            padding:16px;
+
+        .mud-icon-button {
+            padding: 16px;
             border-radius: 0px;
-            &:hover{
+
+            &:hover {
                 background-color: rgba(255, 255, 255, 0.05);
             }
         }
-        .brand{
+
+        .brand {
             writing-mode: vertical-rl;
             text-orientation: upright;
             font-size: 1.1rem;
@@ -47,58 +57,61 @@
         }
     }
 
-    .try-diagnostics{
+    .try-diagnostics {
         position: absolute;
         width: 100%;
         bottom: 32px;
         border-top: 1px solid var(--mud-palette-table-lines);
-        
-        .mud-table{
+
+        .mud-table {
             background-color: var(--try-table);
         }
-        
+
         table {
             width: 100%;
         }
 
         th {
             font-weight: 600;
             padding: 0px 8px;
-            &:last-child{
+
+            &:last-child {
                 padding: 0px;
             }
         }
 
-        td{
+        td {
             padding: 6px 8px;
         }
 
-        th , td {
+        th, td {
             font-family: consolas;
             font-size: 12px;
         }
     }
-    .try-errorlist{
+
+    .try-errorlist {
         height: 24px;
         bottom: 0;
         position: absolute;
 
-        &.mud-theme-inherit{
+        &.mud-theme-inherit {
             background-color: #2c2c2c !important;
             color: #e0e0e0 !important;
         }
 
-        .mud-toolbar{
+        .mud-toolbar {
             height: 24px;
             min-height: unset;
             flex-wrap: nowrap;
             padding-left: 6px;
             padding-right: 6px;
         }
 
-        .try-errorlist-button{
+        .try-errorlist-button {
             padding: 3px 6px;
-            &:hover{
+
+            &:hover {
                 cursor: pointer;
                 background-color: rgba(255, 255, 255, 0.25);
             }
@@ -109,43 +122,51 @@
                 font-size: 18px;
                 line-height: normal;
             }
+
             svg:last-child {
                 margin-right: 6px;
             }
+
             p {
                 font-size: 14px;
                 line-height: normal;
-                &:last-child{
+
+                &:last-child {
                     margin-right: 6px;
                 }
             }
         }
     }
+
     .gutter.gutter-horizontal {
         cursor: ew-resize;
         background-color: var(--try-tabs);
         background-repeat: no-repeat;
         background-position: 50%;
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
 
-        &:active{
+        &:active {
             background-color: #766ae7;
         }
     }
+
     .minimap {
         display: none;
     }
-    .decorationsOverviewRuler{
+
+    .decorationsOverviewRuler {
         width: 8px !important;
     }
-    .invisible.scrollbar.vertical.fade, .visible.scrollbar.vertical{
+
+    .invisible.scrollbar.vertical.fade, .visible.scrollbar.vertical {
         width: 8px !important;
     }
-    .invisible.scrollbar.horizontal.fade, .visible.scrollbar.horizontal{
+
+    .invisible.scrollbar.horizontal.fade, .visible.scrollbar.horizontal {
         height: 8px !important;
     }
 
-    .version-info{
+    .version-info {
         font-family: consolas;
         font-size: 14px;
         text-transform: lowercase;
diff --git a/src/TryMudBlazor.Client/wwwroot/editor/main.js b/src/TryMudBlazor.Client/wwwroot/editor/main.js
@@ -3,6 +3,7 @@ require.config({ paths: { 'vs': 'lib/monaco-editor/min/vs' } });
 let _dotNetInstance;
 
 const throttleLastTimeFuncNameMappings = {};
+const CACHE_NAME = 'dotnet-resources-/';
 
 function registerLangugageProvider(language) {
     monaco.languages.registerCompletionItemProvider(language, {
@@ -98,6 +99,20 @@ window.Try = {
             setTimeout(() => iFrame.src = newSrc);
         }
     },
+    clearCache: async function () {
+        const cacheName = CACHE_NAME;
+        try {
+            const cache = await caches.open(cacheName);
+            const keys = await cache.keys();
+
+            await Promise.all(keys.map(key => {
+                return cache.delete(key);
+            }));
+            console.log(`Cache '${cacheName}' has been cleared.`);
+        } catch (error) {
+            console.error('Error clearing cache:', error);
+        }
+    },
     dispose: function () {
         _dotNetInstance = null;
         window.removeEventListener('keydown', onKeyDown);
@@ -206,7 +221,7 @@ window.Try.CodeExecution = window.Try.CodeExecution || (function () {
 
     return {
         getCompilationDlls: async function (dllNames) {
-            const cache = await caches.open('dotnet-resources-/');
+            const cache = await caches.open(CACHE_NAME);
             const keys = await cache.keys();
             const dllsData = [];
             await Promise.all(dllNames.map(async (dll) => {
@@ -226,7 +241,7 @@ window.Try.CodeExecution = window.Try.CodeExecution || (function () {
                 return;
             }
 
-            const cache = await caches.open('dotnet-resources-/');
+            const cache = await caches.open(CACHE_NAME);
 
             const cacheKeys = await cache.keys();
             // Requires WasmFingerprintAssets to be enabled
diff --git a/src/TryMudBlazor.Server/Program.cs b/src/TryMudBlazor.Server/Program.cs
@@ -1,3 +1,4 @@
+using MudBlazor;
 using MudBlazor.Examples.Data;
 
 namespace TryMudBlazor.Server;
@@ -41,7 +42,10 @@ public static void Main(string[] args)
         app.UseStaticFiles();
 
         app.MapControllers();
-        app.MapFallbackToFile("index.html");
+
+        var v = typeof(MudText).Assembly.GetName().Version;
+        var cacheBusting = $"v{v.Major}.{v.Minor}.{v.Build}";
+        app.MapFallbackToFile("index.html").CacheOutput(policy => policy.SetVaryByQuery("cachebust", cacheBusting));
 
         app.Run();
     }

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,9 @@ public partial class Repl : IDisposable`
`37`	`37`	`[Inject]`
`38`	`38`	`public IJSInProcessRuntime JsRuntime { get; set; }`
`39`	`39`
	`40`	`+ [Inject]`
	`41`	`+ public NavigationManager NavigationManager { get; set; }`
	`42`	`+`
`40`	`43`	`[Parameter]`
`41`	`44`	`public string SnippetId { get; set; }`
`42`	`45`
`@@ -286,5 +289,11 @@ private async void UpdateTheme()`
`286`	`289`	`await Task.Yield();`
`287`	`290`	`await JsRuntime.InvokeVoidAsync("updateIframeTheme");`
`288`	`291`	`}`
	`292`	`+`
	`293`	`+ private async Task ClearCache()`
	`294`	`+ {`
	`295`	`+ await JsRuntime.InvokeVoidAsync("Try.clearCache");`
	`296`	`+ NavigationManager.NavigateTo(NavigationManager.BaseUri, true);`
	`297`	`+ }`
`289`	`298`	`}`
`290`	`299`	`}`