Improve UI of preview site.

BlazingApple · Jan 31, 2024 · 818a0f8 · 818a0f8
1 parent 55242ed
commit 818a0f8
Show file tree

Hide file tree

Showing 26 changed files with 381 additions and 179 deletions.
diff --git a/...onsumer.Components/BlazingAppleConsumer.Components/BlazingAppleConsumer.Components.csproj b/...onsumer.Components/BlazingAppleConsumer.Components/BlazingAppleConsumer.Components.csproj
@@ -10,8 +10,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.1" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/...ingAppleConsumer.Components/BlazingAppleConsumer.Components/Components/BadgeSection.razor b/...ingAppleConsumer.Components/BlazingAppleConsumer.Components/Components/BadgeSection.razor
@@ -1,8 +1,7 @@
 <h2>Badges</h2>
 
 <div class="d-flex flex-column">
-	<label>Usage</label>
-	<div class="code"><code>@("<Badge Name=\"Senate Bill 133\"/>")</code></div>
+	<CodePreview Code="@("<Badge Name=\"Senate Bill 133\"/>")" />
 </div>
 <div class="d-flex">
 	<Badge Name="Senate Bill 133" />

diff --git a/...ngAppleConsumer.Components/BlazingAppleConsumer.Components/Components/ButtonSection.razor b/...ngAppleConsumer.Components/BlazingAppleConsumer.Components/Components/ButtonSection.razor
@@ -9,27 +9,55 @@
 	{
 		<i class="fas fa-toggle-off"></i>
 	}
-	 
+
 	Buttons
 </h2>
 <div class="row">
 	<div class="col-lg-6">
 		<h3>Toggle Button</h3>
+		<CodePreview Code="@(@"<ToggleButton @bind-Value=""_val"">
+	My value: @_toggleButton
+</ToggleButton>")" />
 		<ToggleButton @bind-Value="_toggleButton" Classes="btn btn-outline-primary">
 			My value: @_toggleButton
 		</ToggleButton>
 	</div>
 	<div class="col-lg-6">
+		<h3>Input Switch</h3>
+		<CodePreview Code="@(@"<InputSwitch @bind-Value=""_val"">
+	My value: @_val
+</InputSwitch>")" />
+
+		<InputSwitch @bind-Value="_toggleButton">
+			My value: @_toggleButton
+		</InputSwitch>
+	</div>
+</div>
+<div class="row my-2">
+	<div class="col-lg-12">
 		<h3>Dropdown Button</h3>
-		<DropDown Label="Sort" @bind-Value="_sortDirection">
-			@foreach (ListSortDirection val in Enum.GetValues<ListSortDirection>())
-			{
-				<DropDownItem Value="val">
-					<div class="d-flex align-items-center">
-						@val.ToString()
-					</div>
-				</DropDownItem>
-			}
-		</DropDown>
+		<div class="row">
+
+			<div class="col-lg-6">
+				<DropDown Label="Sort" @bind-Value="_sortDirection">
+					@foreach (ListSortDirection val in Enum.GetValues<ListSortDirection>())
+					{
+						<DropDownItem Value="val">
+							<div class="d-flex align-items-center">
+								@val.ToString()
+							</div>
+						</DropDownItem>
+					}
+				</DropDown>
+			</div>
+			<div class="col-lg-6 ps-3"
+			<CodePreview Code="@(@"<DropDown Label=""Sort"" @bind-Value=""myVal"">
+	@foreach (MyEnum val in Enum.GetValues<MyEnum>())
+	{
+		<DropDownItem Value=""val"">@val.ToString()</DropDownItem>
+	}
+</DropDown>")" />
+			</div>
+		</div>
 	</div>
 </div>
diff --git a/...AppleConsumer.Components/BlazingAppleConsumer.Components/Components/CalendarSection.razor b/...AppleConsumer.Components/BlazingAppleConsumer.Components/Components/CalendarSection.razor
@@ -6,7 +6,7 @@
 <div class="row">
 	<div class="col-lg-6">
 		<h4>Calendar Icon</h4>
-		<div class="code"><code>@("<CalendarIcon Date=\"@date\" SizeClass=\"medium\" />")</code></div>
+		<CodePreview Code="@("<CalendarIcon Date=\"@date\" SizeClass=\"medium\" />")" />
 		<div style="font-size:1rem;" class="d-flex justify-content-center">
 			<CalendarIcon Date="@calEvent.Start" SizeClass="large" />
 		</div>

diff --git a/...AppleConsumer.Components/BlazingAppleConsumer.Components/Components/CarouselSection.razor b/...AppleConsumer.Components/BlazingAppleConsumer.Components/Components/CarouselSection.razor
@@ -1,5 +1,8 @@
 <h3>Carousel</h3>
-<div class="code"><code>@("")</code></div>
+
+<CodePreview Code="@(@"<Carousel Items=""imageList"" Context=""imageSource"">
+	<MyImageComponent src=""@imageSource""/>
+</Carousel>")" />
 @code {
 	List<string> imageList = new List<string>()
 	{

diff --git a/...zingAppleConsumer.Components/BlazingAppleConsumer.Components/Components/CodePreview.razor b/...zingAppleConsumer.Components/BlazingAppleConsumer.Components/Components/CodePreview.razor
@@ -0,0 +1,22 @@
+@if(Inline)
+{
+	<strong style="font-family: 'Courier New', monospace;">@Code</strong>
+}
+else
+{
+	<div class="small d-flex flex-column mb-2">
+		<label class="" for="@($"code-{_id}")">@Label</label>
+		<div class="code p-2">
+			<div class="d-flex flex-row align-items-start justify-content-lg-between">
+				<div class="pt-1 pb-1">
+					<code id="@($"code-{_id}")" style="white-space: pre;">
+						@Code
+					</code>
+				</div>
+				<div class="ps-3">
+					<CopyToClipboard Text="@Code" TextColor="#5f7c8a" DefaultButtonClass="btn btn-sm btn-light m-0 p-0" />
+				</div>
+			</div>
+		</div>
+	</div>
+}
diff --git a/...gAppleConsumer.Components/BlazingAppleConsumer.Components/Components/CodePreview.razor.cs b/...gAppleConsumer.Components/BlazingAppleConsumer.Components/Components/CodePreview.razor.cs
@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BlazingAppleConsumer.Components.Components;
+public partial class CodePreview : ComponentBase
+{
+	private readonly Guid _id = Guid.NewGuid();
+
+	/// <summary>The code to render.</summary>
+	[Parameter, EditorRequired]
+	public string? Code { get; set; }
+
+	/// <summary>The code to render.</summary>
+	[Parameter]
+	public string Label { get; set; } = "Usage";
+
+	/// <summary>Whether this is just an inline reference to code.</summary>
+	[Parameter]
+	public bool Inline { get; set; }
+}
diff --git a/...nsumer.Components/BlazingAppleConsumer.Components/Components/CopyToClipboardSection.razor b/...nsumer.Components/BlazingAppleConsumer.Components/Components/CopyToClipboardSection.razor
@@ -1,5 +1,5 @@
 
-<h3>Copy to Clipboard</h3>
+<h4>Copy to Clipboard</h4>
 
 <div class="d-flex align-items-center">
 	<EditForm Model="@(new {})">

diff --git a/...sumer.Components/BlazingAppleConsumer.Components/Components/DeviceManagementSection.razor b/...sumer.Components/BlazingAppleConsumer.Components/Components/DeviceManagementSection.razor
@@ -1,5 +1,5 @@
 
-<h3>Device Management</h3>
+<h4>Device Management</h4>
 <div class="row">
 	<div class="col-md-6">
 		<div class="d-flex">

diff --git a/...gAppleConsumer.Components/BlazingAppleConsumer.Components/Components/DueDateSection.razor b/...gAppleConsumer.Components/BlazingAppleConsumer.Components/Components/DueDateSection.razor
@@ -1,5 +1,5 @@
 <h3>Due Date</h3>
-<div class="code"><code>@("<DueDate Date=\"@DateTime.Now.Date.AddDays(5)\"/>")</code></div>
+<CodePreview Code="@("<DueDate Date=\"@DateTime.Now.Date.AddDays(5)\"/>")" />
 
 <table>
 	<colgroup>

diff --git a/...zingAppleConsumer.Components/BlazingAppleConsumer.Components/Components/IconSection.razor b/...zingAppleConsumer.Components/BlazingAppleConsumer.Components/Components/IconSection.razor
@@ -1,27 +1,18 @@
 @using BlazingApple.Components.Services;
 
 <h2>Icons</h2>
-<p>BlazingApple offers an API over FontAwesome's Icons, making it really easy to use them in Blazor. 
+<p>
+	BlazingApple offers an API over FontAwesome's Icons, making it really easy to use them in Blazor. 
 	For applications that allow user's to choose their <em>own</em> icons, use the 
-	<div class="code">
-		<code>
-			IconChooser
-		</code>
-	</div>.
+	<CodePreview Inline="true" Code="IconChooser" /> component.
 </p>
 
 <h3>Composite Icons</h3>
-<p>Icons can also be made as composite icons, where one icon is superimposed over another using the
-	<div class="code">
-		<code>
-			ChildContent
-		</code>
-	</div>
-	 property.</p>
+<p>Icons can also be made as composite icons, where one icon is superimposed over another using the <CodePreview Code="ChildContent" Inline="true" /> property.</p>
 <Icon I="IconType.Like" style="color:deepskyblue;" AltText="Sort of like">
 	<i class="fas fa-exclamation-triangle og-golden-color" style="color:goldenrod;"></i>
 </Icon>
 
 <h2>Icon Chooser</h2>
-<div class="code"><code>@("<IconChooser/>")</code></div>
+<CodePreview Code="@("<IconChooser />")" />.
 <IconChooser />
diff --git a/...ppleConsumer.Components/BlazingAppleConsumer.Components/Components/PaginatorSection.razor b/...ppleConsumer.Components/BlazingAppleConsumer.Components/Components/PaginatorSection.razor
@@ -1,5 +1,5 @@
 <h3>Paginator</h3>
-<div class="code"><code>@("<ListPaginator BatchSize=\"25\" ResultCount=\"126\" @bind-Value=\"_currentPage\"/>")</code></div>
+<CodePreview Code="@("<ListPaginator BatchSize=\"25\" ResultCount=\"126\" @bind-Value=\"_currentPage\"/>")" />.
 
 <div class="row">
 	<div class="col-lg-6">

diff --git a/...leConsumer.Components/BlazingAppleConsumer.Components/Components/ProgressBarSection.razor b/...leConsumer.Components/BlazingAppleConsumer.Components/Components/ProgressBarSection.razor
@@ -1,13 +1,18 @@
-
-@{
+@{
 	object model = new { };
 
 }
 
 <h2>Progress Bars</h2>
 <div class="row">
-	<div class="col-lg-6">
+	<div class="col-lg-12">
 		<h3>Single</h3>
+		<CodePreview Code="@(@"<ProgressBar style=""accent-color: orchid;"" AsOfTime=""@DateTime.Now"" CurrentIndex=""val"" 
+	TotalCount=""denomVal"" Units=""my units"" ShowPercentComplete=""false"" />")" />
+	</div>
+</div>
+<div class="row">
+	<div class="col-lg-6">
 		<EditForm Model="model">
 			<div class="row">
 				<div class="form-group col-md-6">
@@ -37,13 +42,21 @@
 					 Units="units, of some sort"
 					 ShowPercentComplete="_progressSingleShowPercentComplete" />
 	</div>
-	<div class="col-lg-6">
+</div>
+<div class="row mt-2">
+	<div class="col-lg-12">
 		<h3 class="mt-3">Multi</h3>
 		<small class="text-muted">
-			We're only providing controls to modify the <em>first</em> segment, 
+			We're only providing controls to modify the <em>first</em> segment,
 			for this demo's simplicity, but, all can be modified.
 		</small>
 
+		<CodePreview Code="@(@"<ProgressBarMulti Denominator=""@_denomVal"">
+	<ProgressBarSegment Value=""numVal"" style=""background-color: orchid;"">My label</ProgressBarSegment>
+	...
+</ProgressBarMulti>")" />
+	</div>
+	<div class="row">
 		<EditForm Model="model">
 			<div class="row">
 				<div class="form-group col-md-6">
@@ -87,7 +100,7 @@
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-md-12">
+			<div class="col-md-6">
 				<ProgressBarMulti Denominator="@(_passDenominator ? _progressMultiDenominator : null)">
 					<ProgressBarSegment Value="_progressMultiNumerator" Tooltip="My tooltip" style="background-color: orchid;">My label</ProgressBarSegment>
 					<ProgressBarSegment Value="12" Tooltip="My tooltip" style="background-color: peachpuff;"></ProgressBarSegment>

diff --git a/...BlazingAppleConsumer.Components/BlazingAppleConsumer.Components/Pages/EmailSafePage.razor b/...BlazingAppleConsumer.Components/BlazingAppleConsumer.Components/Pages/EmailSafePage.razor
@@ -1,10 +1,12 @@
 @page "/email-safe"
 @using BlazingApple.Components.EmailSafe
+@using BlazingAppleConsumer.Components.Components
 <h3>Email Safe Components</h3>
 <p>All components on this page can be sent in emails, with their styles closely matching those rendered via bootstrap.</p>
 
 <h2>Badges</h2>
-<div class="code"><code>@("<Badge Name=\"Senate Bill 133\"/>")</code></div>
+<CodePreview Code="@("<Badge Name=\"Senate Bill 133\"/>")" />
+
 <BadgeEmailSafe Name="Senate Bill 133" />
 <BadgeEmailSafe UseFullString="true" Name="@("\"133\"")" />
 <BadgeEmailSafe UseFullString="true" Name="@("\"1334\"")" />