Skip to content

Commit f158429

Browse files
danielchalmersdanielchalmers
authored
UI Tweaks (#187)
1 parent 75bee78 commit f158429

6 files changed

Lines changed: 103 additions & 68 deletions

File tree

‎src/TryMudBlazor.Client/Components/SaveSnippetPopup.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
<MudPopover Open="@Visible" AnchorOrigin="Origin.TopRight" Class="ml-4 px-4 pt-3 pb-2">
33
<MudStack>
44
<MudText Typo="Typo.h6">Save Public Snippet</MudText>
5-
<div>
6-
<MudText Typo="Typo.body2">Please do <b>NOT</b> include any personal data.</MudText>
7-
<MudText Typo="Typo.body2">Please do <b>NOT</b> include any copyrighted content.</MudText>
8-
</div>
5+
<MudText Typo="Typo.body2">Please do <b>NOT</b> include any personal data or copyrighted content.</MudText>
96
@if (string.IsNullOrEmpty(SnippetLink))
107
{
118
@if (Loading)
@@ -15,15 +12,18 @@
1512
else
1613
{
1714
<div>
18-
<MudButton Color="Color.Primary" Disabled="@Loading" @onclick="SaveAsync" Class="ml-n1">Confirm</MudButton>
15+
<MudButton Color="Color.Primary" Disabled="@Loading" @onclick="SaveAsync" Class="ml-n1">Create shareable link</MudButton>
1916
</div>
2017
}
2118
}
2219
else
2320
{
2421
<MudStack Spacing="1" Row="true" AlignItems="AlignItems.Center">
2522
<MudTextField Variant="Variant.Outlined" Margin="Margin.Dense" @bind-Value="SnippetLink" ReadOnly="true" Class="try-save-snippet-input" />
26-
<MudIconButton Icon="@Icons.Material.Outlined.FileCopy" Size="Size.Small" OnClick="CopyLinkToClipboard" Class="pa-2 mr-n3" />
23+
24+
<MudTooltip Text="Copy link">
25+
<MudIconButton Icon="@Icons.Material.Outlined.FileCopy" Size="Size.Small" OnClick="CopyLinkToClipboard" Class="pa-2 mr-n3" />
26+
</MudTooltip>
2727
</MudStack>
2828
}
2929
</MudStack>

‎src/TryMudBlazor.Client/Pages/Repl.razor‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
width: var(--mud-drawer-width-mini-left) !important;
77
overflow: hidden;
88
}
9+
910
.try-editor {
1011
margin-left: var(--mud-drawer-width-mini-left) !important;
1112
}
13+
1214
.try-avatar {
1315
border-color: var(--try-drawer-text);
1416
color: var(--try-drawer-text);
@@ -17,25 +19,42 @@
1719

1820
<div class="try-layout">
1921
<MudDrawer Open="true" Fixed="false" Elevation="1" Breakpoint="Breakpoint.None" Variant="@DrawerVariant.Persistent" Class="try-drawer mud-drawer-mini">
20-
<MudTooltip Text="Run your code">
21-
<MudIconButton title="Run (Ctrl + S)" OnClick="@CompileAsync" Disabled="@Loading" Icon="@Icons.Material.Rounded.PlayArrow" Color="@(LayoutService.IsDarkMode ? Color.Success : Color.Inherit)" />
22-
</MudTooltip>
23-
<MudTooltip Text="Save or Share" Delay="800" Arrow="true" Placement="Placement.Right" Color="Color.Dark">
24-
<SaveSnippetPopup @bind-Visible="SaveSnippetPopupVisible" CodeFiles="@CodeFiles.Values" UpdateActiveCodeFileContentAction="UpdateActiveCodeFileContent" />
25-
<MudIconButton OnClick="ShowSaveSnippetPopup" Icon="@Icons.Material.Outlined.Save" Color="@(LayoutService.IsDarkMode ? Color.Info : Color.Inherit)" />
26-
</MudTooltip>
27-
<MudTooltip Text="@(LayoutService.IsDarkMode ? "Switch to Light Theme" : "Switch to Dark Theme")" Delay="800" Arrow="true" Placement="Placement.Right" Color="Color.Dark">
28-
<MudIconButton OnClick="@UpdateTheme" Icon="@(LayoutService.IsDarkMode ? @Icons.Material.Rounded.LightMode : @Icons.Material.Outlined.DarkMode)" Color="@(LayoutService.IsDarkMode ? Color.Warning : Color.Inherit)" />
29-
</MudTooltip>
30-
<MudSpacer />
31-
<MudStack Class="mb-12" AlignItems="AlignItems.Center" Justify="Justify.Center">
32-
<div class="d-flex justify-center">
33-
<div class="brand">Try<span class="pt-4 pb-12">MudBlazor</span></div>
22+
<div class="top-buttons">
23+
<MudTooltip Text="Run (Ctrl + S)" Placement="Placement.Bottom">
24+
<MudIconButton OnClick="@CompileAsync"
25+
Disabled="@Loading"
26+
Icon="@(LayoutService.IsDarkMode ? Icons.Material.Outlined.PlayArrow : Icons.Material.Filled.PlayArrow)"
27+
Color="@(LayoutService.IsDarkMode ? Color.Success : Color.Inherit)" />
28+
</MudTooltip>
29+
30+
<MudTooltip Text="Save" Placement="Placement.Right">
31+
<SaveSnippetPopup @bind-Visible="SaveSnippetPopupVisible"
32+
CodeFiles="@CodeFiles.Values"
33+
UpdateActiveCodeFileContentAction="UpdateActiveCodeFileContent" />
34+
<MudIconButton OnClick="ShowSaveSnippetPopup"
35+
Icon="@(LayoutService.IsDarkMode ? Icons.Material.Outlined.Save : Icons.Material.Filled.Save)"
36+
Class="save-button"
37+
Color="@(LayoutService.IsDarkMode ? Color.Info : Color.Inherit)" />
38+
</MudTooltip>
39+
40+
<MudTooltip Text="@(LayoutService.IsDarkMode ? "Light mode" : "Dark mode")" Placement="Placement.Right">
41+
<MudIconButton OnClick="@UpdateTheme"
42+
Icon="@(LayoutService.IsDarkMode ? Icons.Material.Outlined.LightMode : Icons.Material.Filled.DarkMode)"
43+
Class="dark-button"
44+
Color="@(LayoutService.IsDarkMode ? Color.Warning : Color.Inherit)" />
45+
</MudTooltip>
3446
</div>
35-
<MudTooltip Text="Cleanup and Clear Compiler Cache" Delay="800" Arrow Placement="Placement.Right" Color="Color.Dark">
36-
<MudIconButton OnClick="@ClearCache" Icon="@Icons.Material.Filled.CleanHands" Color="@(LayoutService.IsDarkMode ? Color.Info : Color.Inherit)" />
47+
48+
<span class="brand">Try MudBlazor</span>
49+
50+
<div class="bottom-buttons">
51+
<MudTooltip Text="Clear cache" Placement="Placement.Right">
52+
<MudIconButton OnClick="@ClearCache"
53+
Icon="@(LayoutService.IsDarkMode ? Icons.Material.Outlined.Cached : Icons.Material.Filled.Cached)"
54+
Class="cache-button"
55+
Color="@(LayoutService.IsDarkMode ? Color.Default : Color.Inherit)" />
3756
</MudTooltip>
38-
</MudStack>
57+
</div>
3958
</MudDrawer>
4059
<div class="try-editor">
4160
<MudOverlay Visible="Loading" Absolute="true" DarkBackground="true">

‎src/TryMudBlazor.Client/Pages/UserPage.razor‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
@page "/user-page"
2-
3-
<MudContainer Class="mt-8">
4-
<MudAlert Style="width: max-content;padding-right: 30px;" Severity="Severity.Warning">
5-
<MudText>This snippet hasn't been compiled yet.<br/>Run the code on the left to see the result here.</MudText>
6-
</MudAlert>
7-
<MudText Typo="@Typo.h6" Class="mt-12">How to load your own service</MudText>
8-
<MudText Class="mt-3">
9-
To install a service which your snippet can use create a new *.cs file, <br/>
10-
define a <code class="mud-primary-text">class UserStartup</code> with a <code class="mud-primary-text">public static void Configure(WebAssemblyHostBuilder builder)</code>.
11-
</MudText>
12-
<br/>
13-
<MudText>Here is an example. Note the required usings!</MudText>
14-
<pre class="mt-6">
15-
namespace Try.UserComponents
16-
{
17-
using System;
18-
using System.Collections.Generic;
19-
using System.Linq;
20-
using System.Text;
21-
using System.Threading.Tasks;
22-
23-
// required using for UserStartup:
24-
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
25-
using Microsoft.Extensions.DependencyInjection;
26-
27-
public class UserStartup
28-
{
29-
public static void Configure(WebAssemblyHostBuilder builder) {
30-
builder.Services.AddSingleton(new MyService());
31-
}
32-
}
33-
34-
// your service
35-
public class MyService {
36-
public string Hello() => "Hello World from MyService!";
37-
}
38-
1+
@page "/user-page"
2+
3+
<MudContainer Class="mt-8">
4+
<MudAlert Severity="Severity.Normal">
5+
<MudText>This is where the output will be shown after you run the code on the left.</MudText>
6+
</MudAlert>
7+
<MudText Typo="@Typo.h6" Class="mt-12">How to load your own service</MudText>
8+
<MudText Class="mt-3">
9+
To install a service which your snippet can use create a new *.cs file, <br/>
10+
define a <code class="mud-primary-text">class UserStartup</code> with a <code class="mud-primary-text">public static void Configure(WebAssemblyHostBuilder builder)</code>.
11+
</MudText>
12+
<br/>
13+
<MudText>Here is an example. Note the required usings!</MudText>
14+
<pre class="mt-6">
15+
namespace Try.UserComponents
16+
{
17+
using System;
18+
using System.Collections.Generic;
19+
using System.Linq;
20+
using System.Text;
21+
using System.Threading.Tasks;
22+
23+
// required using for UserStartup:
24+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
25+
using Microsoft.Extensions.DependencyInjection;
26+
27+
public class UserStartup
28+
{
29+
public static void Configure(WebAssemblyHostBuilder builder) {
30+
builder.Services.AddSingleton(new MyService());
31+
}
32+
}
33+
34+
// your service
35+
public class MyService {
36+
public string Hello() => "Hello World from MyService!";
37+
}
38+
3939
}
40-
</pre>
41-
</MudContainer>
42-
43-
40+
</pre>
41+
</MudContainer>
42+
43+

‎src/TryMudBlazor.Client/Style/Editor/_page.scss‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,24 @@
2525
}
2626

2727
.try-drawer {
28+
padding-bottom: 24px;
2829
background-color: var(--try-drawer);
2930
color: var(--try-drawer-text);
3031
width: var(--mud-drawer-width-mini-left) !important;
31-
overflow: hidden;
32+
33+
.mud-drawer-content {
34+
gap: 8px;
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: space-between;
38+
align-items: center;
39+
40+
.top-buttons, .bottom-buttons{
41+
gap: 8px;
42+
display: flex;
43+
flex-direction: column;
44+
}
45+
}
3246

3347
& + .mud-icon-button {
3448
padding: 12px;
@@ -54,6 +68,8 @@
5468
font-size: 1.1rem;
5569
font-weight: 300;
5670
letter-spacing: 0.5rem;
71+
user-select: none;
72+
text-wrap-mode: nowrap;
5773
}
5874
}
5975

0 commit comments

Comments
 (0)