Added modal window style options

src/TagzApp.Blazor.Client/Components/WaterfallModal.razor

@@ -1,5 +1,8 @@
 @using TagzApp.ViewModels.Data
 
+@if (Content is not null)
+{
+
 <div @ref="_OuterModal" class="modal fade @modalClass"
 		 id="contentModal" tabindex="-1"
 		 role="dialog"
@@ -15,7 +18,7 @@
 					<img class="ProfilePicture" src="@Content?.AuthorProfileImageUri" alt="@Content?.AuthorDisplayName" onerror="this.src='/img/user.jpg';" />
 					<div class="author">@Content?.AuthorDisplayName</div>
 					<div class="authorUserName" title="@Content?.AuthorUserName">
-						@if (!Content.AuthorUserName.TrimStart('@').Equals(Content.AuthorDisplayName))
+						@if (!Content?.AuthorUserName.TrimStart('@').Equals(Content.AuthorDisplayName) ?? false)
 						{
 
 									@Content?.AuthorUserName
@@ -52,7 +55,7 @@
 
 			<div class="modal-back modal-content">
 				<div class="modal-back-content">
-					The back of the modal
+
 				</div>
 			</div>
 
@@ -61,6 +64,8 @@
 	</div>
 </div>
 
+}
+
 @if (showBackdrop)
 {
 	<div class="modal-backdrop fade show"></div>
@@ -97,14 +102,19 @@
 		showBackdrop = true;
 		StateHasChanged();
 
-		await Task.Delay(700);
-		_InnerModalCssClass = "flip";
-		StateHasChanged();
+		await DoAnimation();
 
 		await _OuterModal.FocusAsync();
 
 	}
 
+	async Task DoAnimation()
+	{
+		await Task.Delay(700);
+		_InnerModalCssClass = "flip";
+		StateHasChanged();
+	}
+
 	public void Close()
 	{
 		modalDisplay = "none";

src/TagzApp.Blazor/Components/Admin/Pages/ModalCustomization.razor

@@ -0,0 +1,162 @@
+@page "/admin/modalcustomization"
+
+@attribute [Authorize(policy: RolesAndPolicies.Policy.AdminRoleOnly)]
+@using System.ComponentModel.DataAnnotations
+@using Microsoft.AspNetCore.Authorization
+@using System.Drawing
+@layout AdminLayout
+@inject IJSRuntime JSRuntime
+@inject ModalConfiguration Config
+@rendermode InteractiveServer
+
+<div class="row" style="min-height: 300px">
+	<div class="col-md-6">
+<dl>
+
+	<dt><label for="Caption">Text on back of card:</label></dt>
+	<dd><textarea name="Caption" width="30" height="5" @bind="@Config.Caption" @bind:event="oninput" /></dd>
+
+	<dt><label for="FontColor">Font Color on the back of card:</label></dt>
+	<dd>
+		<input type="color" name="FontColor" @bind-value="@Config.FontColor" />
+	</dd>
+
+	<dt><label for="Font">Font on the back of card:</label></dt>
+	<dd>
+		<input name="Font" @bind-value="@Config.Font" />
+	</dd>
+
+	<dt><label for="FontIsBold">Font is Bold on the back of card:</label>
+		<input name="FontIsBold" type="checkbox" @bind-value="@Config.FontIsBold" />
+	</dt>
+
+	<dt><label for="BackColor">Background color of the back of card:</label></dt>
+	<dd>
+		<input type="color" name="BackColor" @bind-value="@Config.BackgroundColor" />
+	</dd>
+
+	<dt><label for="BackgroundImage">Background Image:</label> 
+		@if (!string.IsNullOrWhiteSpace(Config.BackgroundImage))
+				{
+					<button @onclick="RemoveBackgroundImage">
+						@* Bootstrap icon trashcan *@
+						<i class="bi bi-trash"></i>
+
+					</button>
+				}
+			</dt>
+	<dd>
+		<InputFile OnChange="LoadBackgroundImage"></InputFile>
+	</dd>
+
+	<dt><label for="BackgroundSize">Background Image Size:</label></dt>
+	<dd>
+		<select name="BackgroundSize" @bind="@Config.BackgroundImageSize">
+			<option value="cover">Cover</option>
+			<option value="contain">Contain</option>
+			<option value="auto">Auto</option>
+		</select>
+	</dd>
+
+	@* Background image repeat *@
+	<dt><label for="BackgroundRepeat">Background Image Repeat:</label>
+		<input type="checkbox" name="BackgroundRepeat" @bind-value="@Config.BackgroundImageRepeat" />
+	</dt>
+
+	<dt><label for="BackgroundPosition">Background Image Position:</label></dt>
+	<dd>
+		<select name="BackgroundPosition" @bind="@Config.BackgroundImagePosition">
+			<option>Left Top</option>
+			<option>Left Center</option>
+			<option>Left Bottom</option>
+			<option>Right Top</option>
+			<option>Right Center</option>
+			<option>Right Bottom</option>
+			<option>Center Top</option>
+			<option>Center Center</option>
+			<option>Center Bottom</option>
+		</select>
+	</dd>
+
+
+</dl>
+
+		<input type="submit" value="Save Changes" class="btn btn-primary" @onclick="SaveChanges" />
+		@* Cancel changes button *@
+		<input type="button" value="Cancel" class="btn btn-secondary" @onclick="CancelChanges" />
+
+	</div>
+	<div class="col-md-6">
+		<h3>Demo:</h3>
+		<div style="width: 50%; " class="modal-dialog modal-dialog-centered">
+			<div class="modal-inner" style="height: 150px!important;">
+				<div style=" position: relative;" class="modal-back modal-content"><div class="modal-back-content"></div></div>
+			</div>
+		</div>
+
+	</div>
+</div>
+
+<style>
+
+@((MarkupString)Config.GetCssWithBackgroundImage(_BackgroundImage, _BackgroundImageMimeType))
+
+</style>
+
+@code {
+
+	private string _BackgroundImage;
+	private string _BackgroundImageMimeType;
+
+	async Task SaveChanges()
+	{
+
+		Config.BackgroundImage = _BackgroundImage;
+		Config.BackgroundImageMimeType = _BackgroundImageMimeType;
+
+		Console.WriteLine($"Caption: {Config.Caption}");
+		await Config.SaveConfiguration(ConfigureTagzAppFactory.Current);
+
+	}
+
+	async Task LoadBackgroundImage(InputFileChangeEventArgs args)
+	{
+
+		if (!args.File.ContentType.StartsWith("image/"))
+		{
+			Console.WriteLine("Invalid file type");
+			return;
+		}
+
+		_BackgroundImageMimeType = args.File.ContentType;
+
+		var stream = args.File.OpenReadStream();
+
+		byte[] bytes;
+		using (var memoryStream = new MemoryStream())
+		{
+			await stream.CopyToAsync(memoryStream);
+			bytes = memoryStream.ToArray();
+		}
+
+		_BackgroundImage = Convert.ToBase64String(bytes);
+
+	}
+
+	async Task CancelChanges()
+	{
+		Config = await ModalConfiguration.LoadFromConfiguration(ConfigureTagzAppFactory.Current);
+		_BackgroundImage = Config.BackgroundImage;
+		_BackgroundImageMimeType = Config.BackgroundImageMimeType;
+	}
+
+	async Task RemoveBackgroundImage()
+	{
+
+		Console.WriteLine("Removing background image");
+
+		_BackgroundImage = null;
+		_BackgroundImageMimeType = null;
+	}
+
+}

src/TagzApp.Blazor/Components/Admin/Pages/UiCustomization.razor

@@ -7,8 +7,6 @@
 @rendermode InteractiveServer
 
 
-<div asp-validation-summary="ModelOnly" class="text-danger"></div>
-
 <dl>
 
 	<dt><label for="SiteName">Site Name:</label></dt>

src/TagzApp.Blazor/Components/Admin/Shared/AdminNavMenu.razor

@@ -5,6 +5,7 @@
 	<li class="nav-item"><NavLink class="nav-link" href="/Admin/Users">Users</NavLink></li>
 	<li class="nav-item"><NavLink class="nav-link" href="/Admin/Providers">Providers</NavLink></li>
 	<li class="nav-item"><NavLink class="nav-link" href="/Admin/UiCustomization">Customization</NavLink></li>
+	<li class="nav-item"><NavLink class="nav-link" href="/Admin/ModalCustomization">Modal Customization</NavLink></li>
 
 	@* NOTE: Temporary placeholder *@
 	<li class="nav-item"><NavLink class="nav-link" href="/Admin/YouTubeChat">YouTubeChat</NavLink></li>

src/TagzApp.Blazor/Components/Pages/_Waterfall.razor

@@ -4,6 +4,7 @@
 @inject IJSRuntime JSRuntime
 @inject IMessagingService MessagingService
 @inject ApplicationConfiguration AppConfig
+@inject ModalConfiguration ModalConfig
 @layout Layout.WaterfallLayout
 
 <PageTitle>@AppConfig.SiteName - Waterfall Display</PageTitle>
@@ -51,7 +52,11 @@
 {
 	<HeadContent>
 		<style>
+
+			@((MarkupString)ModalConfig.GetCssWithBackgroundImage())
+
 			@WaterfallHeaderCss
+
 		</style>
 </HeadContent>
 }

src/TagzApp.Blazor/Hubs/MessageHub.cs

@@ -64,7 +64,7 @@ public async Task SendMessageToOverlay(string tag, string provider, string provi
 		var formattedTag = Hashtag.ClearFormatting(tag);
 		var message = await _Service.GetContentByIds(provider, providerId);
 
-		System.Console.WriteLine($"SendMessageToOverlay: {tag} {provider} {providerId} {message}");
+		//System.Console.WriteLine($"SendMessageToOverlay: {tag} {provider} {providerId} {message}");
 
 		if (message is null) return;
 

src/TagzApp.Blazor/Program.cs

@@ -56,6 +56,9 @@ private static async Task StartWebsite(string[] args)
 		var appConfig = await ApplicationConfiguration.LoadFromConfiguration(configure);
 		builder.Services.AddSingleton(appConfig);
 
+		var modalConfig = await ModalConfiguration.LoadFromConfiguration(configure);
+		builder.Services.AddSingleton(modalConfig);
+
 		// Add services to the container.
 		builder.Services.AddRazorComponents()
 				.AddInteractiveServerComponents()

src/TagzApp.Blazor/wwwroot/css/site.css

@@ -474,14 +474,6 @@ MOVED TO THE  HeadContent in Overlay.razor
 	z-index: -20;
 }
 
-.modal-back-content {
-	width: 100%;
-	height: 100%;
-	display: none;
-	align-items: center;
-	justify-content: center;
-}
-
 .modal-front {
 	transform: rotateY(180deg);
 }

src/TagzApp.Common/Models/ApplicationConfiguration.cs

@@ -82,5 +82,3 @@ public async Task SaveConfiguration(IConfigureTagzApp configure)
 	}
 
 }
-
-