daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Front End Track Gallery Controls

Browse Source 
- Theming adjustments (still needs a lot of work)
This commit is contained in:
daniel-c-harvey
2025-09-04 14:18:35 -04:00
parent 5050074f4f
commit 27522c1e1c
11 changed files with 224 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb.Client/Controls/TrackPlayer.razor
+83
View File
@@ -0,0 +1,83 @@
<MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
Elevation="4">
@if (!string.IsNullOrEmpty(Track?.ImagePath))
{
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background-image: url('@Track.ImagePath');
background-size: cover;
background-position: center;
filter: brightness(0.7);">
</div>
}
else
{
<MudPaper Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
Class="mud-theme-secondary"
Elevation="0">
</MudPaper>
}
<MudCardContent Style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;">
<div>
<MudText Typo="Typo.h6"
Color="Color.Surface"
Style="margin-bottom: 4px;"
Class="text-truncate">
@Track?.TrackName
</MudText>
<MudText Typo="Typo.subtitle1"
Color="Color.Surface"
Style="margin-bottom: 8px;"
Class="text-truncate">
@Track?.Artist
</MudText>
</div>
<div Style="margin: 8px 0;">
@if (!string.IsNullOrEmpty(Track?.Album))
{
<MudText Typo="Typo.caption"
Color="Color.Surface"
Class="text-truncate">
@Track.Album
</MudText>
}
@if (!string.IsNullOrEmpty(Track?.Genre))
{
<MudChip T="string"
Size="Size.Small"
Variant="Variant.Filled"
Color="Color.Primary"
Style="opacity: 0.9; margin-top: 4px;">
@Track.Genre
</MudChip>
}
</div>
<div Style="display: flex; justify-content: space-between; align-items: center;">
@if (Track?.ReleaseDate.HasValue == true)
{
<MudText Typo="Typo.caption"
Color="Color.Surface">
@Track.ReleaseDate.Value.Year
</MudText>
}
else
{
<div></div>
}
<MudFab Color="Color.Primary"
Size="Size.Medium"
StartIcon="@Icons.Material.Filled.PlayArrow"
OnClick="@HandlePlayClick"
Elevation="4" />
</div>
</MudCardContent>
</MudCard>
DeepDrftWeb.Client/Controls/TrackPlayer.razor.cs
+14
View File
@@ -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
}
}
DeepDrftWeb.Client/Controls/TracksGallery.razor
+12
View File
@@ -0,0 +1,12 @@
<MudContainer MaxWidth="MaxWidth.False" Style="padding: 16px;">
<MudGrid Spacing="3" Justify="Justify.Center">
@foreach (var track in Tracks)
{
<MudItem xs="12" sm="6" md="4" lg="2" xl="2">
<div Style="display: flex; justify-content: center;">
<TrackPlayer Track="@track" />
</div>
</MudItem>
}
</MudGrid>
</MudContainer>
DeepDrftWeb.Client/Controls/TracksGallery.razor.cs
+9
View File
@@ -0,0 +1,9 @@
using Microsoft.AspNetCore.Components;
using DeepDrftModels.Entities;
namespace DeepDrftWeb.Client.Controls;
public partial class TracksGallery : ComponentBase
{
[Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = Enumerable.Empty<TrackEntity>();
}
DeepDrftWeb.Client/Layout/MainLayout.razor
+54 -31
View File
@@ -56,41 +56,64 @@
private readonly PaletteLight _lightPalette = new() private readonly PaletteLight _lightPalette = new()
{ {
Black = "#110e2d", Primary = "#9370DB", // MediumPurple - stronger but still pastel
AppbarText = "#424242", Secondary = "#F4A460", // SandyBrown - warm pastel orange
AppbarBackground = "rgba(255,255,255,0.8)", Tertiary = "#FF1493", // DeepPink - vibrant accent (kept neon)
DrawerBackground = "#ffffff", Info = "#8A2BE2", // BlueViolet - stronger purple info
GrayLight = "#e8e8e8", Success = "#98FB98", // PaleGreen - soft success
GrayLighter = "#f9f9f9", 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() private readonly PaletteDark _darkPalette = new()
{ {
Primary = "#7e6fff", Primary = "#FF69B4", // HotPink - softer magenta for dark mode
Surface = "#1e1e2d", Secondary = "#4B0082", // Indigo - deep purple from logo
Background = "#1a1a27", Tertiary = "#8A2BE2", // BlueViolet - purple accent instead of blue
BackgroundGray = "#151521", Info = "#9370DB", // MediumPurple - purple info instead of blue
AppbarText = "#92929f", Success = "#00FF7F", // SpringGreen - bright success
AppbarBackground = "rgba(26,26,39,0.8)", Warning = "#FFD700", // Gold - warning color
DrawerBackground = "#1a1a27", Error = "#FF6347", // Tomato - error color
ActionDefault = "#74718e", Black = "#000000", // Pure black
ActionDisabled = "#9999994d", White = "#FFFFFF", // Pure white
ActionDisabledBackground = "#605f6d4d", Surface = "#2D1B4E", // Dark purple - surface with purple tint
TextPrimary = "#b2b0bf", Background = "#0D0D0D", // Near black - very dark background
TextSecondary = "#92929f", BackgroundGray = "#1A1A1A", // Very dark gray
TextDisabled = "#ffffff33", AppbarText = "#FFFFFF", // White text on dark appbar
DrawerIcon = "#92929f", AppbarBackground = "rgba(45,27,78,0.95)", // Translucent dark purple
DrawerText = "#92929f", DrawerBackground = "#2D1B4E", // Dark purple drawer
GrayLight = "#2a2833", DrawerIcon = "#E0E0E0", // Light gray icons
GrayLighter = "#1e1e2d", DrawerText = "#E0E0E0", // Light gray drawer text
Info = "#4a86ff", ActionDefault = "#BDBDBD", // Light gray for actions
Success = "#3dcb6c", ActionDisabled = "#757575", // Medium gray for disabled
Warning = "#ffb545", ActionDisabledBackground = "#2F2F2F", // Dark gray background
Error = "#ff3f5f", TextPrimary = "#FFFFFF", // White primary text
LinesDefault = "#33323e", TextSecondary = "#E0E0E0", // Light gray secondary text
TableLines = "#33323e", TextDisabled = "#757575", // Disabled text
Divider = "#292838", GrayLight = "#424242", // Light gray in dark mode
OverlayLight = "#1e1e2d80", 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 public string DarkLightModeButtonIcon => _isDarkMode switch
DeepDrftWeb.Client/Pages/TrackGallery.razor
-40
View File
@@ -1,40 +0,0 @@
@page "/tracks"
@using DeepDrftModels.DTOs
@using DeepDrftModels.Entities
<h3>Track Gallery</h3>
<MudContainer>
@if (ViewModel.Page != null)
{
<MudTable T="TrackEntity" Items="@ViewModel.Page.Items" Hover="true" Breakpoint="Breakpoint.Sm">
<HeaderContent>
<MudTh>Name</MudTh>
<MudTh>Artist</MudTh>
<MudTh>Album</MudTh>
<MudTh>Genre</MudTh>
<MudTh>Released</MudTh>
<MudTh>Actions</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd DataLabel="Name">@context.TrackName</MudTd>
<MudTd DataLabel="Artist">@context.Artist</MudTd>
<MudTd DataLabel="Album">@context.Album</MudTd>
<MudTd DataLabel="Genre">@context.Genre</MudTd>
<MudTd DataLabel="Released">@context.ReleaseDate</MudTd>
<MudTd DataLabel="Actions">
<MudButton Variant="Variant.Text" Color="Color.Primary">View</MudButton>
</MudTd>
</RowTemplate>
</MudTable>
<MudPagination Count="@ViewModel.Page.TotalPages" Selected="@ViewModel.Page.Page" SelectedChanged="i => SetPage(i)" BoundaryCount="2" MiddleCount="3"/>
}
else
{
<MudSkeleton Height="650px" Class="pa-2 ma-2"/>
<MudSkeleton Height="80px"/>
<MudSpacer />
}
</MudContainer>
DeepDrftWeb.Client/Pages/TracksView.razor
+46
View File
@@ -0,0 +1,46 @@
@page "/tracks"
@using DeepDrftModels.DTOs
@using DeepDrftModels.Entities
@using DeepDrftWeb.Client.Controls
<h3>Track Gallery</h3>
@if (ViewModel.Page != null)
{
@* <MudTable T="TrackEntity" Items="@ViewModel.Page.Items" Hover="true" Breakpoint="Breakpoint.Sm"> *@
@* <HeaderContent> *@
@* <MudTh>Name</MudTh> *@
@* <MudTh>Artist</MudTh> *@
@* <MudTh>Album</MudTh> *@
@* <MudTh>Genre</MudTh> *@
@* <MudTh>Released</MudTh> *@
@* <MudTh>Actions</MudTh> *@
@* </HeaderContent> *@
@* <RowTemplate> *@
@* <MudTd DataLabel="Name">@context.TrackName</MudTd> *@
@* <MudTd DataLabel="Artist">@context.Artist</MudTd> *@
@* <MudTd DataLabel="Album">@context.Album</MudTd> *@
@* <MudTd DataLabel="Genre">@context.Genre</MudTd> *@
@* <MudTd DataLabel="Released">@context.ReleaseDate</MudTd> *@
@* <MudTd DataLabel="Actions"> *@
@* <MudButton Variant="Variant.Text" Color="Color.Primary">View</MudButton> *@
@* </MudTd> *@
@* </RowTemplate> *@
@* </MudTable> *@
<TracksGallery Tracks="@ViewModel.Page.Items" />
<MudContainer Class="d-flex justify-center my-4 py-4">
<MudPagination Count="@ViewModel.Page.TotalPages"
Selected="@ViewModel.Page.Page"
SelectedChanged="i => SetPage(i)"
BoundaryCount="2"
MiddleCount="3"/>
</MudContainer>
}
else
{
<MudSkeleton Height="650px" Class="pa-2 ma-2"/>
<MudSkeleton Height="80px"/>
<MudSpacer />
}
DeepDrftWeb.Client/Pages/TrackGallery.razor.cs → DeepDrftWeb.Client/Pages/TracksView.razor.cs
+2 -2
View File
@@ -5,10 +5,10 @@ using Microsoft.AspNetCore.Components;
namespace DeepDrftWeb.Client.Pages; namespace DeepDrftWeb.Client.Pages;
public partial class TrackGallery : ComponentBase public partial class TracksView : ComponentBase
{ {
[Inject] [Inject]
public required TrackGalleryViewModel ViewModel { get; set; } public required TracksViewModel ViewModel { get; set; }
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
DeepDrftWeb.Client/Startup.cs
+1 -1
View File
@@ -11,6 +11,6 @@ public static class Startup
{ {
// Track Client // Track Client
services.AddScoped<TrackClient>(); services.AddScoped<TrackClient>();
services.AddScoped<TrackGalleryViewModel>(); services.AddScoped<TracksViewModel>();
} }
} }
DeepDrftWeb.Client/ViewModels/TrackGalleryViewModel.cs → DeepDrftWeb.Client/ViewModels/TracksViewModel.cs
+2 -2
View File
@@ -4,7 +4,7 @@ using DeepDrftWeb.Client.Clients;
namespace DeepDrftWeb.Client.ViewModels; namespace DeepDrftWeb.Client.ViewModels;
public class TrackGalleryViewModel public class TracksViewModel
{ {
public TrackClient TrackClient { get; } public TrackClient TrackClient { get; }
@@ -27,7 +27,7 @@ public class TrackGalleryViewModel
public bool IsDescending { get; set; } = false; public bool IsDescending { get; set; } = false;
public PagedResult<TrackEntity>? Page { get; set; } = null; public PagedResult<TrackEntity>? Page { get; set; } = null;
public TrackGalleryViewModel(TrackClient trackClient) public TracksViewModel(TrackClient trackClient)
{ {
TrackClient = trackClient; TrackClient = trackClient;
} }
DeepDrftWeb/appsettings.json
+1 -1
View File
@@ -7,6 +7,6 @@
}, },
"AllowedHosts": "*", "AllowedHosts": "*",
"ConnectionStrings": { "ConnectionStrings": {
"DefaultConnection": "Data Source=../deepdrft.db" "DefaultConnection": "Data Source=../Database/deepdrft.db"
} }
} }