Merge branch 'split-phase3-shared' into dev
This commit is contained in:
Daniel Harvey
@@ -1,28 +0,0 @@
|
||||
namespace DeepDrftWeb.Client.Common;
|
||||
|
||||
public static class DDIcons
|
||||
{
|
||||
/// <summary>
|
||||
/// Charleston gas lamp lantern - uses currentColor for theming
|
||||
/// </summary>
|
||||
/// <summary>
|
||||
/// Charleston gas lamp lantern - uses currentColor for theming
|
||||
/// </summary>
|
||||
public const string GasLamp = """
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M11 0h2v2h-2zM5 6l7-4 7 4v2H5zM6 8h12l-1.5 10h-9zM7.7 9l1.2 8h6.2l1.2-8zM9 19h6v1H9zM10 21h4v2h-4z"/>
|
||||
</svg>
|
||||
""";
|
||||
|
||||
/// <summary>
|
||||
/// Charleston gas lamp with lit flame - for dark mode
|
||||
/// </summary>
|
||||
public const string GasLampLit = """
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M11 0h2v2h-2zM5 6l7-4 7 4v2H5zM6 8h12l-1.5 10h-9zM7.7 9l1.2 8h6.2l1.2-8zM9 19h6v1H9zM10 21h4v2h-4z"/>
|
||||
<ellipse cx="12" cy="13" rx="2.5" ry="3.5" fill="#FF9800"/>
|
||||
<ellipse cx="12" cy="12.5" rx="1.5" ry="2.5" fill="#FFCA28"/>
|
||||
<ellipse cx="12" cy="12" rx=".7" ry="1.5" fill="#FFF8E1"/>
|
||||
</svg>
|
||||
""";
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
<MudCard Class="deepdrft-track-card-container"
|
||||
Elevation="4">
|
||||
|
||||
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
|
||||
{
|
||||
<div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudPaper Class="deepdrft-track-card-fallback mud-theme-secondary"
|
||||
Elevation="0">
|
||||
</MudPaper>
|
||||
}
|
||||
|
||||
<MudCardContent Class="deepdrft-track-card-content">
|
||||
|
||||
<div class="deepdrft-track-info-top">
|
||||
<MudText Typo="Typo.subtitle1"
|
||||
Color="Color.Surface"
|
||||
Class="text-truncate mb-1">
|
||||
@TrackModel?.TrackName
|
||||
</MudText>
|
||||
|
||||
<MudText Typo="Typo.caption"
|
||||
Color="Color.Surface"
|
||||
Class="text-truncate mb-2">
|
||||
@TrackModel?.Artist
|
||||
</MudText>
|
||||
</div>
|
||||
|
||||
<div class="deepdrft-track-info-middle">
|
||||
@if (!string.IsNullOrEmpty(TrackModel?.Album))
|
||||
{
|
||||
<MudText Typo="Typo.caption"
|
||||
Color="Color.Surface"
|
||||
Class="text-truncate">
|
||||
@TrackModel.Album
|
||||
</MudText>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrEmpty(TrackModel?.Genre))
|
||||
{
|
||||
<MudChip T="string"
|
||||
Size="Size.Small"
|
||||
Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
Class="deepdrft-genre-chip">
|
||||
@TrackModel.Genre
|
||||
</MudChip>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="deepdrft-track-info-bottom">
|
||||
@if (TrackModel?.ReleaseDate.HasValue == true)
|
||||
{
|
||||
<MudText Typo="Typo.caption"
|
||||
Color="Color.Surface">
|
||||
@TrackModel.ReleaseDate.Value.Year
|
||||
</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div></div>
|
||||
}
|
||||
|
||||
<MudFab Color="Color.Primary"
|
||||
Size="Size.Medium"
|
||||
StartIcon="@PlayPauseIcon"
|
||||
OnClick="@PlayClick"/>
|
||||
</div>
|
||||
|
||||
</MudCardContent>
|
||||
|
||||
</MudCard>
|
||||
@@ -1,23 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using DeepDrftModels.Entities;
|
||||
using DeepDrftWeb.Client.Clients;
|
||||
using MudBlazor;
|
||||
|
||||
namespace DeepDrftWeb.Client.Controls;
|
||||
|
||||
public partial class TrackCard : ComponentBase
|
||||
{
|
||||
[Parameter] public required TrackEntity TrackModel { get; set; }
|
||||
[Parameter] public EventCallback<TrackEntity> OnPlay { get; set; }
|
||||
[Parameter] public bool IsPlaying { get; set; } = false;
|
||||
|
||||
private string PlayPauseIcon => IsPlaying ? Icons.Material.Filled.MusicNote : Icons.Material.Filled.PlayArrow;
|
||||
|
||||
private async Task PlayClick()
|
||||
{
|
||||
if (!IsPlaying && OnPlay.HasDelegate)
|
||||
{
|
||||
await OnPlay.InvokeAsync(TrackModel);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="tracks-gallery-container">
|
||||
<MudGrid Spacing="6" Justify="Justify.Center">
|
||||
@foreach (var track in Tracks)
|
||||
{
|
||||
<MudItem xs="12" sm="6" md="4" lg="3" xl="3">
|
||||
<div class="deepdrft-track-gallery-item-center">
|
||||
<TrackCard TrackModel="@track" IsPlaying="@(track.Id == SelectedTrack?.Id)" OnPlay="@HandlePlayClick"/>
|
||||
</div>
|
||||
</MudItem>
|
||||
}
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
@@ -1,24 +0,0 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using DeepDrftModels.Entities;
|
||||
using DeepDrftWeb.Client.Clients;
|
||||
|
||||
namespace DeepDrftWeb.Client.Controls;
|
||||
|
||||
public partial class TracksGallery : ComponentBase
|
||||
{
|
||||
[Parameter] public IEnumerable<TrackEntity> Tracks { get; set; } = [];
|
||||
[Parameter] public TrackEntity? SelectedTrack { get; set; }
|
||||
[Parameter] public EventCallback<TrackEntity?> SelectedTrackChanged { get; set; }
|
||||
|
||||
private async Task HandlePlayClick(TrackEntity track)
|
||||
{
|
||||
if (SelectedTrack == track) return;
|
||||
SelectedTrack = track;
|
||||
StateHasChanged();
|
||||
|
||||
if (SelectedTrackChanged.HasDelegate)
|
||||
{
|
||||
await SelectedTrackChanged.InvokeAsync(track);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
.tracks-gallery-container {
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -19,6 +19,7 @@
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\DeepDrftModels\DeepDrftModels.csproj" />
|
||||
<ProjectReference Include="..\DeepDrftShared.Client\DeepDrftShared.Client.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
@using DeepDrftWeb.Client.Controls.AudioPlayerBar
|
||||
@using DeepDrftWeb.Client.Services
|
||||
@using DeepDrftWeb.Client.Common
|
||||
@using DeepDrftShared.Client.Common
|
||||
@using Microsoft.AspNetCore.Components
|
||||
@inherits LayoutComponentBase
|
||||
@implements IDisposable
|
||||
@@ -68,70 +69,17 @@
|
||||
// Register to persist state when prerendering completes
|
||||
_persistingSubscription = PersistentState.RegisterOnPersisting(PersistDarkMode);
|
||||
|
||||
// Palettes + typography live in DeepDrftShared.Client.Common.DeepDrftPalettes
|
||||
// so the CMS host can reuse them. We wrap into ThemeManagerTheme to keep
|
||||
// the MudBlazor.ThemeManager integration intact.
|
||||
_themeManager = new ThemeManagerTheme
|
||||
{
|
||||
Theme =
|
||||
{
|
||||
PaletteDark = _darkPalette,
|
||||
PaletteLight = _lightPalette,
|
||||
Typography = new Typography()
|
||||
{
|
||||
Default = new DefaultTypography()
|
||||
{
|
||||
FontFamily = new[] {"DM Sans", "sans-serif"}
|
||||
},
|
||||
H1 = new H1Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
|
||||
},
|
||||
H2 = new H2Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
|
||||
},
|
||||
H3 = new H3Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
|
||||
},
|
||||
H4 = new H4Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
|
||||
},
|
||||
// Extended to H5/H6 beyond spec — keeps heading hierarchy consistent in Cormorant Garamond
|
||||
H5 = new H5Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
|
||||
},
|
||||
H6 = new H6Typography()
|
||||
{
|
||||
FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
|
||||
},
|
||||
Subtitle1 = new Subtitle1Typography()
|
||||
{
|
||||
FontFamily = new[] {"Geist Mono", "monospace"}
|
||||
},
|
||||
Body1 = new Body1Typography()
|
||||
{
|
||||
FontFamily = new[] {"DM Sans", "sans-serif"}
|
||||
},
|
||||
Body2 = new Body2Typography()
|
||||
{
|
||||
FontFamily = new[] {"DM Sans", "sans-serif"}
|
||||
},
|
||||
Caption = new CaptionTypography()
|
||||
{
|
||||
FontFamily = new[] {"Geist Mono", "monospace"}
|
||||
},
|
||||
Button = new ButtonTypography()
|
||||
{
|
||||
FontFamily = new[] {"Geist Mono", "monospace"}
|
||||
}
|
||||
}
|
||||
}
|
||||
Theme = DeepDrftPalettes.Default,
|
||||
};
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
|
||||
private ThemeManagerTheme _themeManager;
|
||||
public bool _themeManagerOpen = false;
|
||||
|
||||
@@ -146,69 +94,6 @@
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
// Wireframe light palette - navy / green / warm off-white
|
||||
private readonly PaletteLight _lightPalette = new()
|
||||
{
|
||||
Primary = "#0D1B2A", // Navy - text, buttons
|
||||
PrimaryDarken = "#162437", // Navy-mid - hover, elevated surfaces
|
||||
Secondary = "#1A3C34", // Deep green - italic emphasis
|
||||
Tertiary = "#3D7A68", // Green-accent - interactive hovers/active/icons
|
||||
Background = "#FAFAF8", // Warm off-white
|
||||
BackgroundGray = "#F0F2F0", // Slight warm gray for contrast
|
||||
Surface = "#FAFAF8",
|
||||
AppbarBackground = "rgba(250,250,248,0.88)",
|
||||
AppbarText = "#0D1B2A",
|
||||
TextPrimary = "#0D1B2A",
|
||||
TextSecondary = "#8A9BB0", // Muted - secondary text, nav at rest
|
||||
TextDisabled = "rgba(13,27,42,0.38)",
|
||||
ActionDefault = "#8A9BB0",
|
||||
ActionDisabled = "rgba(13,27,42,0.26)",
|
||||
ActionDisabledBackground = "rgba(13,27,42,0.12)",
|
||||
Divider = "rgba(13,27,42,0.10)",
|
||||
DividerLight = "rgba(13,27,42,0.06)",
|
||||
TableLines = "rgba(13,27,42,0.10)",
|
||||
LinesDefault = "rgba(13,27,42,0.10)",
|
||||
LinesInputs = "rgba(13,27,42,0.30)",
|
||||
OverlayLight = "rgba(250,250,248,0.5)",
|
||||
OverlayDark = "rgba(13,27,42,0.5)",
|
||||
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
|
||||
};
|
||||
|
||||
// Wireframe dark palette - navy ground / green-accent / off-white
|
||||
// Mirrors the light palette's vocabulary on a dark ground; the coral/lowcountry
|
||||
// identity has been retired. On dark, green-accent (#3D7A68) becomes the primary
|
||||
// interactive colour and off-white (#FAFAF8) becomes the secondary emphasis.
|
||||
private readonly PaletteDark _darkPalette = new()
|
||||
{
|
||||
Primary = "#3D7A68", // Green-accent - interactive colour on dark
|
||||
PrimaryDarken = "#2A5C4F", // Green-light - hover/pressed
|
||||
Secondary = "#FAFAF8", // Off-white - secondary emphasis
|
||||
Tertiary = "#1A3C34", // Deep green - tertiary accent
|
||||
Background = "#0D1B2A", // Navy - the light palette's primary as the dark ground
|
||||
Surface = "#162437", // Navy-mid - elevated cards/panels
|
||||
AppbarBackground = "rgba(13,27,42,0.92)", // Semi-opaque navy
|
||||
AppbarText = "#FAFAF8",
|
||||
DrawerBackground = "#162437", // Navy-mid
|
||||
DrawerText = "#FAFAF8",
|
||||
DrawerIcon = "#8A9BB0", // Muted
|
||||
// TextPrimary (#FAFAF8) on Background (#0D1B2A): contrast ratio ~16.5:1 - passes WCAG AA (≥4.5:1)
|
||||
TextPrimary = "#FAFAF8",
|
||||
// TextSecondary (#8A9BB0) on Background (#0D1B2A): contrast ratio ~6.1:1 - passes WCAG AA for normal text
|
||||
TextSecondary = "#8A9BB0",
|
||||
TextDisabled = "rgba(250,250,248,0.38)",
|
||||
ActionDefault = "#8A9BB0",
|
||||
ActionDisabled = "rgba(250,250,248,0.26)",
|
||||
ActionDisabledBackground = "rgba(250,250,248,0.12)",
|
||||
Divider = "rgba(250,250,248,0.10)",
|
||||
DividerLight = "rgba(250,250,248,0.06)",
|
||||
TableLines = "rgba(250,250,248,0.10)",
|
||||
LinesDefault = "rgba(250,250,248,0.10)",
|
||||
LinesInputs = "rgba(250,250,248,0.30)",
|
||||
OverlayLight = "rgba(13,27,42,0.5)",
|
||||
OverlayDark = "rgba(0,0,0,0.7)",
|
||||
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
|
||||
};
|
||||
|
||||
// Theme wrapper class for CSS targeting
|
||||
private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
@page "/tracks"
|
||||
@rendermode InteractiveAuto
|
||||
@using DeepDrftWeb.Client.Controls
|
||||
|
||||
<PageTitle>DeepDrft Track Gallery</PageTitle>
|
||||
|
||||
|
||||
@@ -10,4 +10,6 @@
|
||||
@using MudBlazor.Services
|
||||
@using MudBlazor.ThemeManager
|
||||
@using DeepDrftWeb.Client.Common
|
||||
@using DeepDrftShared.Client.Common
|
||||
@using DeepDrftShared.Client.Components
|
||||
@layout DeepDrftWeb.Client.Layout.MainLayout
|
||||
Reference in New Issue
Block a user