From 27522c1e1c6a63bf6c1ab64eefec4f4b23d8b076 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Thu, 4 Sep 2025 14:18:35 -0400 Subject: [PATCH] Front End Track Gallery Controls - Theming adjustments (still needs a lot of work) --- DeepDrftWeb.Client/Controls/TrackPlayer.razor | 83 ++++++++++++++++++ .../Controls/TrackPlayer.razor.cs | 14 +++ .../Controls/TracksGallery.razor | 12 +++ .../Controls/TracksGallery.razor.cs | 9 ++ DeepDrftWeb.Client/Layout/MainLayout.razor | 85 ++++++++++++------- DeepDrftWeb.Client/Pages/TrackGallery.razor | 40 --------- DeepDrftWeb.Client/Pages/TracksView.razor | 46 ++++++++++ ...ckGallery.razor.cs => TracksView.razor.cs} | 4 +- DeepDrftWeb.Client/Startup.cs | 2 +- ...GalleryViewModel.cs => TracksViewModel.cs} | 4 +- DeepDrftWeb/appsettings.json | 2 +- 11 files changed, 224 insertions(+), 77 deletions(-) create mode 100644 DeepDrftWeb.Client/Controls/TrackPlayer.razor create mode 100644 DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs create mode 100644 DeepDrftWeb.Client/Controls/TracksGallery.razor create mode 100644 DeepDrftWeb.Client/Controls/TracksGallery.razor.cs delete mode 100644 DeepDrftWeb.Client/Pages/TrackGallery.razor create mode 100644 DeepDrftWeb.Client/Pages/TracksView.razor rename DeepDrftWeb.Client/Pages/{TrackGallery.razor.cs => TracksView.razor.cs} (85%) rename DeepDrftWeb.Client/ViewModels/{TrackGalleryViewModel.cs => TracksViewModel.cs} (89%) diff --git a/DeepDrftWeb.Client/Controls/TrackPlayer.razor b/DeepDrftWeb.Client/Controls/TrackPlayer.razor new file mode 100644 index 0000000..407d1d7 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/TrackPlayer.razor @@ -0,0 +1,83 @@ + + + @if (!string.IsNullOrEmpty(Track?.ImagePath)) + { +
+
+ } + else + { + + + } + + + +
+ + @Track?.TrackName + + + + @Track?.Artist + +
+ +
+ @if (!string.IsNullOrEmpty(Track?.Album)) + { + + @Track.Album + + } + + @if (!string.IsNullOrEmpty(Track?.Genre)) + { + + @Track.Genre + + } +
+ +
+ @if (Track?.ReleaseDate.HasValue == true) + { + + @Track.ReleaseDate.Value.Year + + } + else + { +
+ } + + +
+ + + + \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs b/DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs new file mode 100644 index 0000000..edb28db --- /dev/null +++ b/DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs @@ -0,0 +1,14 @@ +using Microsoft.AspNetCore.Components; +using DeepDrftModels.Entities; + +namespace DeepDrftWeb.Client.Controls; + +public partial class TrackPlayer : ComponentBase +{ + [Parameter] public TrackEntity? Track { get; set; } + + private void HandlePlayClick() + { + // TODO: Implement play functionality with injected service + } +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/TracksGallery.razor b/DeepDrftWeb.Client/Controls/TracksGallery.razor new file mode 100644 index 0000000..a6d1ba6 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/TracksGallery.razor @@ -0,0 +1,12 @@ + + + @foreach (var track in Tracks) + { + +
+ +
+ + } + + \ No newline at end of file diff --git a/DeepDrftWeb.Client/Controls/TracksGallery.razor.cs b/DeepDrftWeb.Client/Controls/TracksGallery.razor.cs new file mode 100644 index 0000000..4fffc55 --- /dev/null +++ b/DeepDrftWeb.Client/Controls/TracksGallery.razor.cs @@ -0,0 +1,9 @@ +using Microsoft.AspNetCore.Components; +using DeepDrftModels.Entities; + +namespace DeepDrftWeb.Client.Controls; + +public partial class TracksGallery : ComponentBase +{ + [Parameter] public IEnumerable Tracks { get; set; } = Enumerable.Empty(); +} \ No newline at end of file diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor index 119dfac..f82b129 100644 --- a/DeepDrftWeb.Client/Layout/MainLayout.razor +++ b/DeepDrftWeb.Client/Layout/MainLayout.razor @@ -56,41 +56,64 @@ private readonly PaletteLight _lightPalette = new() { - Black = "#110e2d", - AppbarText = "#424242", - AppbarBackground = "rgba(255,255,255,0.8)", - DrawerBackground = "#ffffff", - GrayLight = "#e8e8e8", - GrayLighter = "#f9f9f9", + Primary = "#9370DB", // MediumPurple - stronger but still pastel + Secondary = "#F4A460", // SandyBrown - warm pastel orange + Tertiary = "#FF1493", // DeepPink - vibrant accent (kept neon) + Info = "#8A2BE2", // BlueViolet - stronger purple info + Success = "#98FB98", // PaleGreen - soft success + Warning = "#FFEAA7", // Light peach - soft warning + Error = "#FFB6C1", // LightPink - soft error + Black = "#2F2F2F", // Dark gray for text + White = "#FFFFFF", // Pure white + Surface = "#FFFAF0", // FloralWhite - creamy surface + Background = "#FAF0E6", // Linen - warm cream background + AppbarText = "#2F2F2F", // Dark text on light appbar + AppbarBackground = "rgba(211,180,221,0.90)", // Translucent plum - more presence + DrawerBackground = "#D3B4DD", // Plum drawer - stronger presence + TextPrimary = "#2F2F2F", // Dark primary text + TextSecondary = "#6B6B6B", // Medium gray secondary text + GrayLight = "#E6E6FA", // Lavender - light purple-tinted gray + GrayLighter = "#F8F8FF", // GhostWhite - very light purple-tinted + GrayDefault = "#BC8F8F", // RosyBrown - warm gray + GrayDark = "#8B4513", // SaddleBrown - warm dark gray + Divider = "#E6E6FA", // Lavender - soft purple divider lines + TableLines = "#E6E6FA", // Lavender - soft table lines }; private readonly PaletteDark _darkPalette = new() { - Primary = "#7e6fff", - Surface = "#1e1e2d", - Background = "#1a1a27", - BackgroundGray = "#151521", - AppbarText = "#92929f", - AppbarBackground = "rgba(26,26,39,0.8)", - DrawerBackground = "#1a1a27", - ActionDefault = "#74718e", - ActionDisabled = "#9999994d", - ActionDisabledBackground = "#605f6d4d", - TextPrimary = "#b2b0bf", - TextSecondary = "#92929f", - TextDisabled = "#ffffff33", - DrawerIcon = "#92929f", - DrawerText = "#92929f", - GrayLight = "#2a2833", - GrayLighter = "#1e1e2d", - Info = "#4a86ff", - Success = "#3dcb6c", - Warning = "#ffb545", - Error = "#ff3f5f", - LinesDefault = "#33323e", - TableLines = "#33323e", - Divider = "#292838", - OverlayLight = "#1e1e2d80", + Primary = "#FF69B4", // HotPink - softer magenta for dark mode + Secondary = "#4B0082", // Indigo - deep purple from logo + Tertiary = "#8A2BE2", // BlueViolet - purple accent instead of blue + Info = "#9370DB", // MediumPurple - purple info instead of blue + Success = "#00FF7F", // SpringGreen - bright success + Warning = "#FFD700", // Gold - warning color + Error = "#FF6347", // Tomato - error color + Black = "#000000", // Pure black + White = "#FFFFFF", // Pure white + Surface = "#2D1B4E", // Dark purple - surface with purple tint + Background = "#0D0D0D", // Near black - very dark background + BackgroundGray = "#1A1A1A", // Very dark gray + AppbarText = "#FFFFFF", // White text on dark appbar + AppbarBackground = "rgba(45,27,78,0.95)", // Translucent dark purple + DrawerBackground = "#2D1B4E", // Dark purple drawer + DrawerIcon = "#E0E0E0", // Light gray icons + DrawerText = "#E0E0E0", // Light gray drawer text + ActionDefault = "#BDBDBD", // Light gray for actions + ActionDisabled = "#757575", // Medium gray for disabled + ActionDisabledBackground = "#2F2F2F", // Dark gray background + TextPrimary = "#FFFFFF", // White primary text + TextSecondary = "#E0E0E0", // Light gray secondary text + TextDisabled = "#757575", // Disabled text + GrayLight = "#424242", // Light gray in dark mode + GrayLighter = "#2F2F2F", // Lighter gray in dark mode + GrayDefault = "#757575", // Default gray + GrayDark = "#BDBDBD", // Dark gray (inverted for dark mode) + Divider = "#424242", // Medium gray divider lines + LinesDefault = "#424242", // Default lines + TableLines = "#424242", // Table lines + OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay + OverlayDark = "rgba(255,255,255,0.1)", // Light overlay for dark mode }; public string DarkLightModeButtonIcon => _isDarkMode switch diff --git a/DeepDrftWeb.Client/Pages/TrackGallery.razor b/DeepDrftWeb.Client/Pages/TrackGallery.razor deleted file mode 100644 index 0c2beab..0000000 --- a/DeepDrftWeb.Client/Pages/TrackGallery.razor +++ /dev/null @@ -1,40 +0,0 @@ -@page "/tracks" -@using DeepDrftModels.DTOs -@using DeepDrftModels.Entities - -

Track Gallery

- - - -@if (ViewModel.Page != null) -{ - - - Name - Artist - Album - Genre - Released - Actions - - - @context.TrackName - @context.Artist - @context.Album - @context.Genre - @context.ReleaseDate - - View - - - - - -} -else -{ - - - -} - diff --git a/DeepDrftWeb.Client/Pages/TracksView.razor b/DeepDrftWeb.Client/Pages/TracksView.razor new file mode 100644 index 0000000..16a86c2 --- /dev/null +++ b/DeepDrftWeb.Client/Pages/TracksView.razor @@ -0,0 +1,46 @@ +@page "/tracks" +@using DeepDrftModels.DTOs +@using DeepDrftModels.Entities +@using DeepDrftWeb.Client.Controls + +

Track Gallery

+ +@if (ViewModel.Page != null) +{ + @* *@ + @* *@ + @* Name *@ + @* Artist *@ + @* Album *@ + @* Genre *@ + @* Released *@ + @* Actions *@ + @* *@ + @* *@ + @* @context.TrackName *@ + @* @context.Artist *@ + @* @context.Album *@ + @* @context.Genre *@ + @* @context.ReleaseDate *@ + @* *@ + @* View *@ + @* *@ + @* *@ + @* *@ + + + + + + +} +else +{ + + + +} diff --git a/DeepDrftWeb.Client/Pages/TrackGallery.razor.cs b/DeepDrftWeb.Client/Pages/TracksView.razor.cs similarity index 85% rename from DeepDrftWeb.Client/Pages/TrackGallery.razor.cs rename to DeepDrftWeb.Client/Pages/TracksView.razor.cs index 3367d41..d31eee0 100644 --- a/DeepDrftWeb.Client/Pages/TrackGallery.razor.cs +++ b/DeepDrftWeb.Client/Pages/TracksView.razor.cs @@ -5,10 +5,10 @@ using Microsoft.AspNetCore.Components; namespace DeepDrftWeb.Client.Pages; -public partial class TrackGallery : ComponentBase +public partial class TracksView : ComponentBase { [Inject] - public required TrackGalleryViewModel ViewModel { get; set; } + public required TracksViewModel ViewModel { get; set; } protected override async Task OnInitializedAsync() diff --git a/DeepDrftWeb.Client/Startup.cs b/DeepDrftWeb.Client/Startup.cs index be03d76..d1980a0 100644 --- a/DeepDrftWeb.Client/Startup.cs +++ b/DeepDrftWeb.Client/Startup.cs @@ -11,6 +11,6 @@ public static class Startup { // Track Client services.AddScoped(); - services.AddScoped(); + services.AddScoped(); } } \ No newline at end of file diff --git a/DeepDrftWeb.Client/ViewModels/TrackGalleryViewModel.cs b/DeepDrftWeb.Client/ViewModels/TracksViewModel.cs similarity index 89% rename from DeepDrftWeb.Client/ViewModels/TrackGalleryViewModel.cs rename to DeepDrftWeb.Client/ViewModels/TracksViewModel.cs index 72d07db..7baae2d 100644 --- a/DeepDrftWeb.Client/ViewModels/TrackGalleryViewModel.cs +++ b/DeepDrftWeb.Client/ViewModels/TracksViewModel.cs @@ -4,7 +4,7 @@ using DeepDrftWeb.Client.Clients; namespace DeepDrftWeb.Client.ViewModels; -public class TrackGalleryViewModel +public class TracksViewModel { public TrackClient TrackClient { get; } @@ -27,7 +27,7 @@ public class TrackGalleryViewModel public bool IsDescending { get; set; } = false; public PagedResult? Page { get; set; } = null; - public TrackGalleryViewModel(TrackClient trackClient) + public TracksViewModel(TrackClient trackClient) { TrackClient = trackClient; } diff --git a/DeepDrftWeb/appsettings.json b/DeepDrftWeb/appsettings.json index 1619551..1f05f15 100644 --- a/DeepDrftWeb/appsettings.json +++ b/DeepDrftWeb/appsettings.json @@ -7,6 +7,6 @@ }, "AllowedHosts": "*", "ConnectionStrings": { - "DefaultConnection": "Data Source=../deepdrft.db" + "DefaultConnection": "Data Source=../Database/deepdrft.db" } }