From e06a8d1c1e5510cb0feaff5d9281e9f1224ae04b Mon Sep 17 00:00:00 2001 From: Cody Mullins Date: Fri, 3 May 2024 09:32:20 -0400 Subject: [PATCH 01/13] Move icons to separate project, clean up theming a bit --- Directory.Packages.props | 1 + .../Pure.Blazor.Components.Icons.csproj | 15 ++++ .../PureIcon.cs | 4 +- .../PureIcons.cs | 2 +- .../IPureTheme.cs | 89 +++++++++++++++++++ .../IStylePrioritizer.cs | 6 ++ .../Pure.Blazor.Components.Primitives.csproj | 15 ++++ .../PureAlign.cs | 8 ++ .../PureAnimate.cs | 4 +- .../PureComponent.cs | 20 +++-- .../PureSize.cs | 10 +++ .../Theme.cs | 8 ++ .../Buttons/ButtonProps.cs | 8 +- .../Buttons/ButtonStyles.cs | 13 +-- .../Buttons/CustomTheme.cs | 4 +- .../Buttons/DropdownMenuItemStyles.cs | 4 +- .../Buttons/DropdownStyles.cs | 8 +- .../Buttons/LinkStyles.cs | 2 +- .../Buttons/PureButtonBase.cs | 8 +- .../Buttons/PureDropdown.razor | 4 +- .../Buttons/PureDropdown.razor.cs | 1 + .../Buttons/PureDropdownItem.razor | 2 +- .../Buttons/PureIconButton.razor.cs | 2 +- .../Buttons/PureTheme.cs | 37 +++++++- src/Pure.Blazor.Components/Common/Accent.cs | 10 --- .../Common/Css/StylePrioritizer.cs | 3 +- .../Common/InteropComponent.cs | 1 + src/Pure.Blazor.Components/Common/PureSize.cs | 17 ---- .../Dialogs/DialogService.cs | 1 + .../Dialogs/PureConfirm.razor | 4 +- .../Dialogs/PureDialog.razor | 4 +- .../Display/BadgeStyles.cs | 4 +- .../Display/BadgeVariant.cs | 8 -- .../Display/PureBadge.razor | 2 +- .../Essentials/PureLink.razor | 10 +-- .../Feedback/AlertService.cs | 1 + .../Feedback/AlertStyles.cs | 6 +- .../Feedback/BannerStyles.cs | 9 +- .../Feedback/IndicatorStyles.cs | 9 +- .../Feedback/PureAlert.razor | 2 +- .../Feedback/PureBanner.razor | 4 +- .../Feedback/PureColorIndicator.razor | 10 +-- .../Forms/PureInput.razor.cs | 1 + .../Layout/PureContainer.cs | 3 +- .../Navigation/LeftNavStyles.cs | 4 +- .../Navigation/PurePaginationItem.razor | 2 +- .../Navigation/PureVertNav.razor | 36 ++++---- .../Pure.Blazor.Components.csproj | 6 ++ src/Pure.Blazor.Components/_Imports.razor | 2 +- src/PureBlazor.Components.sln | 12 +++ 50 files changed, 307 insertions(+), 139 deletions(-) create mode 100644 src/Pure.Blazor.Components.Icons/Pure.Blazor.Components.Icons.csproj rename src/{Pure.Blazor.Components/Icons => Pure.Blazor.Components.Icons}/PureIcon.cs (99%) rename src/{Pure.Blazor.Components/Icons => Pure.Blazor.Components.Icons}/PureIcons.cs (99%) create mode 100644 src/Pure.Blazor.Components.Primitives/IPureTheme.cs create mode 100644 src/Pure.Blazor.Components.Primitives/IStylePrioritizer.cs create mode 100644 src/Pure.Blazor.Components.Primitives/Pure.Blazor.Components.Primitives.csproj create mode 100644 src/Pure.Blazor.Components.Primitives/PureAlign.cs rename src/{Pure.Blazor.Components/Common => Pure.Blazor.Components.Primitives}/PureAnimate.cs (56%) rename src/{Pure.Blazor.Components/Common => Pure.Blazor.Components.Primitives}/PureComponent.cs (75%) create mode 100644 src/Pure.Blazor.Components.Primitives/PureSize.cs create mode 100644 src/Pure.Blazor.Components.Primitives/Theme.cs delete mode 100644 src/Pure.Blazor.Components/Common/Accent.cs delete mode 100644 src/Pure.Blazor.Components/Common/PureSize.cs delete mode 100644 src/Pure.Blazor.Components/Display/BadgeVariant.cs diff --git a/Directory.Packages.props b/Directory.Packages.props index 1ddf323..2045462 100644 --- a/Directory.Packages.props +++ b/Directory.Packages.props @@ -38,6 +38,7 @@ + diff --git a/src/Pure.Blazor.Components.Icons/Pure.Blazor.Components.Icons.csproj b/src/Pure.Blazor.Components.Icons/Pure.Blazor.Components.Icons.csproj new file mode 100644 index 0000000..685d77c --- /dev/null +++ b/src/Pure.Blazor.Components.Icons/Pure.Blazor.Components.Icons.csproj @@ -0,0 +1,15 @@ + + + + net8.0 + preview + enable + enable + Nullable + + + + + + + diff --git a/src/Pure.Blazor.Components/Icons/PureIcon.cs b/src/Pure.Blazor.Components.Icons/PureIcon.cs similarity index 99% rename from src/Pure.Blazor.Components/Icons/PureIcon.cs rename to src/Pure.Blazor.Components.Icons/PureIcon.cs index 4b86c76..fb99d62 100644 --- a/src/Pure.Blazor.Components/Icons/PureIcon.cs +++ b/src/Pure.Blazor.Components.Icons/PureIcon.cs @@ -1,6 +1,6 @@ -using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Rendering; -using Pure.Blazor.Components.Common; +using Pure.Blazor.Components.Primitives; namespace Pure.Blazor.Components.Icons; diff --git a/src/Pure.Blazor.Components/Icons/PureIcons.cs b/src/Pure.Blazor.Components.Icons/PureIcons.cs similarity index 99% rename from src/Pure.Blazor.Components/Icons/PureIcons.cs rename to src/Pure.Blazor.Components.Icons/PureIcons.cs index 54093cb..0d8597c 100644 --- a/src/Pure.Blazor.Components/Icons/PureIcons.cs +++ b/src/Pure.Blazor.Components.Icons/PureIcons.cs @@ -40,4 +40,4 @@ public enum PureIcons IconFile, IconFolder, IconFolderOpen -} +} \ No newline at end of file diff --git a/src/Pure.Blazor.Components.Primitives/IPureTheme.cs b/src/Pure.Blazor.Components.Primitives/IPureTheme.cs new file mode 100644 index 0000000..313d767 --- /dev/null +++ b/src/Pure.Blazor.Components.Primitives/IPureTheme.cs @@ -0,0 +1,89 @@ +namespace Pure.Blazor.Components.Primitives; + +public interface IPureTheme +{ + public IStylePrioritizer StylePrioritizer { get; set; } + public Dictionary Styles { get; set; } + + public ComponentStyle GetStyle(Type type) + { + return GetStyleByName(type.Name); + } + + public ComponentStyle GetStyleByName(string name) + { + // TODO: decide if we want this to be an exceptional event + return Styles.GetValueOrDefault(name) ?? new ComponentStyle("", null, null, null); + } +} + +public enum PureVariant +{ + Default, + Outline, + Subtle +} + +public enum Accent +{ + Default, + Brand, + Success, + Danger, + Warning, +} + +public class ComponentStyle +{ + private readonly IReadOnlyDictionary accents; + private readonly IReadOnlyDictionary> variants; + private readonly IReadOnlyDictionary sizes; + + public ComponentStyle(string baseStyle, + IReadOnlyDictionary? accents, + IReadOnlyDictionary>? variants, + IReadOnlyDictionary? sizes) + { + this.accents = accents ?? new Dictionary(); + this.variants = variants ?? new Dictionary>(); + this.sizes = sizes ?? new Dictionary(); + Base = baseStyle; + } + + /// + /// Basic style applied to the outer container of the component. + /// + public string Base { get; set; } + + /// + /// Optional advanced style for the outer container of the component. + /// Not all components with an outer container have this, only if the outer container requires Accent or Variant + /// modifications. + /// + public ComponentStyle? OuterContainer { get; set; } + + /// + /// Optional advanced style for the inner container of the component. Not all components have an inner container. + /// + public ComponentStyle? InnerContainer { get; set; } + + public string Accent(Accent accent) + { + return accents.TryGetValue(accent, out var value) ? value : string.Empty; + } + + public string Variant(PureVariant variant, Accent accent) + { + if (variants.TryGetValue(variant, out var value) && value.TryGetValue(accent, out var style)) + { + return style; + } + + return string.Empty; // or return a default style + } + + public string Size(PureSize size) + { + return sizes.TryGetValue(size, out var value) ? value : string.Empty; + } +} diff --git a/src/Pure.Blazor.Components.Primitives/IStylePrioritizer.cs b/src/Pure.Blazor.Components.Primitives/IStylePrioritizer.cs new file mode 100644 index 0000000..723058b --- /dev/null +++ b/src/Pure.Blazor.Components.Primitives/IStylePrioritizer.cs @@ -0,0 +1,6 @@ +namespace Pure.Blazor.Components.Primitives; + +public interface IStylePrioritizer +{ + public string PrioritizeStyles(string style1, string style2); +} \ No newline at end of file diff --git a/src/Pure.Blazor.Components.Primitives/Pure.Blazor.Components.Primitives.csproj b/src/Pure.Blazor.Components.Primitives/Pure.Blazor.Components.Primitives.csproj new file mode 100644 index 0000000..06c5596 --- /dev/null +++ b/src/Pure.Blazor.Components.Primitives/Pure.Blazor.Components.Primitives.csproj @@ -0,0 +1,15 @@ + + + + net8.0 + preview + enable + enable + Nullable + + + + + + + diff --git a/src/Pure.Blazor.Components.Primitives/PureAlign.cs b/src/Pure.Blazor.Components.Primitives/PureAlign.cs new file mode 100644 index 0000000..0bdaf81 --- /dev/null +++ b/src/Pure.Blazor.Components.Primitives/PureAlign.cs @@ -0,0 +1,8 @@ +namespace Pure.Blazor.Components.Primitives; + +public enum PureAlign +{ + Start, + Center, + End +} \ No newline at end of file diff --git a/src/Pure.Blazor.Components/Common/PureAnimate.cs b/src/Pure.Blazor.Components.Primitives/PureAnimate.cs similarity index 56% rename from src/Pure.Blazor.Components/Common/PureAnimate.cs rename to src/Pure.Blazor.Components.Primitives/PureAnimate.cs index 887d5ed..ce37a45 100644 --- a/src/Pure.Blazor.Components/Common/PureAnimate.cs +++ b/src/Pure.Blazor.Components.Primitives/PureAnimate.cs @@ -1,8 +1,8 @@ -namespace Pure.Blazor.Components.Common; +namespace Pure.Blazor.Components.Primitives; public enum PureAnimate { None, Default, Spin -} +} \ No newline at end of file diff --git a/src/Pure.Blazor.Components/Common/PureComponent.cs b/src/Pure.Blazor.Components.Primitives/PureComponent.cs similarity index 75% rename from src/Pure.Blazor.Components/Common/PureComponent.cs rename to src/Pure.Blazor.Components.Primitives/PureComponent.cs index 1118d88..99f8229 100644 --- a/src/Pure.Blazor.Components/Common/PureComponent.cs +++ b/src/Pure.Blazor.Components.Primitives/PureComponent.cs @@ -1,7 +1,6 @@ -using Microsoft.AspNetCore.Components; -using Pure.Blazor.Components.Buttons; +using Microsoft.AspNetCore.Components; -namespace Pure.Blazor.Components.Common; +namespace Pure.Blazor.Components.Primitives; public class PureComponent : ComponentBase { @@ -11,8 +10,6 @@ protected override void OnParametersSet() BuildCss(); } - [CascadingParameter] public ThemeProvider? ThemeProvider { get; set; } = new(); - /// /// Add additional css classes to this component /// @@ -29,7 +26,7 @@ protected override void OnParametersSet() /// The current theme styles /// [CascadingParameter] - public PureTheme PureTheme { get; set; } = new(); + public required IPureTheme PureTheme { get; set; } [Parameter] public RenderFragment? ChildContent { get; set; } @@ -45,6 +42,13 @@ protected virtual void BuildCss() { } + /// + /// Gets the component style from the theme for the specific type of component. + /// + protected ComponentStyle Css => PureTheme.GetStyle(GetType()); + + protected ComponentStyle CssStyle(string name) => PureTheme.GetStyleByName(name); + /// /// Applies the style based on the theme settings. /// @@ -65,9 +69,9 @@ protected virtual string ApplyStyle(string? style) return Styles ?? ""; } - if (ThemeProvider?.StylePrioritizer != null && Styles != null) + if (PureTheme?.StylePrioritizer != null && Styles != null) { - return ThemeProvider.StylePrioritizer.PrioritizeStyles(style, Styles); + return PureTheme.StylePrioritizer.PrioritizeStyles(style, Styles); } return $"{style} {Styles}"; diff --git a/src/Pure.Blazor.Components.Primitives/PureSize.cs b/src/Pure.Blazor.Components.Primitives/PureSize.cs new file mode 100644 index 0000000..2effe32 --- /dev/null +++ b/src/Pure.Blazor.Components.Primitives/PureSize.cs @@ -0,0 +1,10 @@ +namespace Pure.Blazor.Components.Primitives; + +public enum PureSize +{ + ExtraSmall, + Small, + Medium, + Large, + ExtraLarge +} \ No newline at end of file diff --git a/src/Pure.Blazor.Components.Primitives/Theme.cs b/src/Pure.Blazor.Components.Primitives/Theme.cs new file mode 100644 index 0000000..4654030 --- /dev/null +++ b/src/Pure.Blazor.Components.Primitives/Theme.cs @@ -0,0 +1,8 @@ +namespace Pure.Blazor.Components.Primitives; + +public enum Theme +{ + Off, + On, + Auto +} \ No newline at end of file diff --git a/src/Pure.Blazor.Components/Buttons/ButtonProps.cs b/src/Pure.Blazor.Components/Buttons/ButtonProps.cs index 010dbce..1aa2e48 100644 --- a/src/Pure.Blazor.Components/Buttons/ButtonProps.cs +++ b/src/Pure.Blazor.Components/Buttons/ButtonProps.cs @@ -1,5 +1,6 @@ using Microsoft.AspNetCore.Components; using Pure.Blazor.Components.Common; +using Pure.Blazor.Components.Primitives; namespace Pure.Blazor.Components.Buttons; @@ -46,13 +47,6 @@ public interface IButtonProps public string Styles { get; set; } } -public enum ButtonVariant -{ - Default, - Outline, - Subtle -} - public enum TabVariant { Default, diff --git a/src/Pure.Blazor.Components/Buttons/ButtonStyles.cs b/src/Pure.Blazor.Components/Buttons/ButtonStyles.cs index 72cac51..bb0571a 100644 --- a/src/Pure.Blazor.Components/Buttons/ButtonStyles.cs +++ b/src/Pure.Blazor.Components/Buttons/ButtonStyles.cs @@ -1,4 +1,5 @@ using Pure.Blazor.Components.Common; +using Pure.Blazor.Components.Primitives; namespace Pure.Blazor.Components.Buttons; @@ -40,7 +41,7 @@ public class ButtonStyles private const string SuccessSubtleButton = "border-transparent bg-transparent hover:bg-green-400/10 text-green-700 font-medium"; - public readonly Dictionary Sizes = new() + public static readonly Dictionary Sizes = new() { { PureSize.Large, LargeButton }, { PureSize.Small, SmallButton }, @@ -48,10 +49,10 @@ public class ButtonStyles { PureSize.ExtraSmall, ExtraSmallButton } }; - public readonly Dictionary> Variants = new() + public static readonly Dictionary> Variants = new() { { - ButtonVariant.Default, + PureVariant.Default, new Dictionary { { Accent.Brand, PrimaryButton }, @@ -62,7 +63,7 @@ public class ButtonStyles } }, { - ButtonVariant.Outline, + PureVariant.Outline, new Dictionary { { Accent.Brand, PrimaryOutlineButton }, @@ -73,7 +74,7 @@ public class ButtonStyles } }, { - ButtonVariant.Subtle, + PureVariant.Subtle, new Dictionary { { Accent.Brand, PrimarySubtleButton }, @@ -85,6 +86,6 @@ public class ButtonStyles } }; - public string Base => + public static string Base => "flex justify-center items-center cursor-pointer gap-1 rounded-sm md:rounded-xs text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-900 border-1"; } diff --git a/src/Pure.Blazor.Components/Buttons/CustomTheme.cs b/src/Pure.Blazor.Components/Buttons/CustomTheme.cs index 196dd88..c6a046e 100644 --- a/src/Pure.Blazor.Components/Buttons/CustomTheme.cs +++ b/src/Pure.Blazor.Components/Buttons/CustomTheme.cs @@ -4,6 +4,6 @@ namespace Pure.Blazor.Components.Buttons; public class CustomTheme : PureTheme { - public CustomTheme() => Button.Variants[ButtonVariant.Default][Accent.Brand] = - "bg-brand-200 hover:bg-brand-300 text-gray-700"; + // public CustomTheme() => Button.Variants[ButtonVariant.Default][Accent.Brand] = + // "bg-brand-200 hover:bg-brand-300 text-gray-700"; } diff --git a/src/Pure.Blazor.Components/Buttons/DropdownMenuItemStyles.cs b/src/Pure.Blazor.Components/Buttons/DropdownMenuItemStyles.cs index b9aa09a..a21ada2 100644 --- a/src/Pure.Blazor.Components/Buttons/DropdownMenuItemStyles.cs +++ b/src/Pure.Blazor.Components/Buttons/DropdownMenuItemStyles.cs @@ -1,4 +1,4 @@ -using Pure.Blazor.Components.Common; +using Pure.Blazor.Components.Primitives; namespace Pure.Blazor.Components.Buttons; @@ -27,4 +27,4 @@ public class DropdownMenuItemStyles { PureSize.Medium, MediumMenuItem }, { PureSize.ExtraSmall, ExtraSmallMenuItem } }; -} \ No newline at end of file +} diff --git a/src/Pure.Blazor.Components/Buttons/DropdownStyles.cs b/src/Pure.Blazor.Components/Buttons/DropdownStyles.cs index 1cba206..53abc58 100644 --- a/src/Pure.Blazor.Components/Buttons/DropdownStyles.cs +++ b/src/Pure.Blazor.Components/Buttons/DropdownStyles.cs @@ -1,4 +1,4 @@ -using Pure.Blazor.Components.Common; +using Pure.Blazor.Components.Primitives; namespace Pure.Blazor.Components.Buttons; @@ -9,13 +9,13 @@ public class DropdownStyles private const string MediumButton = "px-2 py-2 text-sm"; private const string LargeButton = "px-2 py-2 text-sm"; - public string Base { get; set; } = + public static string Base { get; set; } = "inline-flex gap-2 justify-center rounded-md font-semibold text-gray-700 border-1 border-gray-200 hover:border-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300 group-focus-within/dropdown:rounded-b-none"; public DropdownMenuContainerStyles Container { get; set; } = new(); public DropdownMenuItemStyles MenuItem { get; set; } = new(); - public readonly Dictionary Sizes = new() + public static readonly Dictionary Sizes = new() { { PureSize.ExtraLarge, LargeButton }, { PureSize.Large, LargeButton }, @@ -23,4 +23,4 @@ public class DropdownStyles { PureSize.Medium, MediumButton }, { PureSize.ExtraSmall, ExtraSmallButton } }; -} \ No newline at end of file +} diff --git a/src/Pure.Blazor.Components/Buttons/LinkStyles.cs b/src/Pure.Blazor.Components/Buttons/LinkStyles.cs index 59a3ba7..6bfa18d 100644 --- a/src/Pure.Blazor.Components/Buttons/LinkStyles.cs +++ b/src/Pure.Blazor.Components/Buttons/LinkStyles.cs @@ -2,5 +2,5 @@ namespace Pure.Blazor.Components.Buttons; public class LinkStyles { - public string Base => "text-brand-800 hover:underline"; + public static string Base => "text-brand-800 hover:underline"; } diff --git a/src/Pure.Blazor.Components/Buttons/PureButtonBase.cs b/src/Pure.Blazor.Components/Buttons/PureButtonBase.cs index 02004bf..9607999 100644 --- a/src/Pure.Blazor.Components/Buttons/PureButtonBase.cs +++ b/src/Pure.Blazor.Components/Buttons/PureButtonBase.cs @@ -1,7 +1,6 @@ using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; -using Microsoft.Extensions.Logging; -using Pure.Blazor.Components.Common; +using Pure.Blazor.Components.Primitives; namespace Pure.Blazor.Components.Buttons; @@ -9,7 +8,7 @@ public class PureButtonBase : PureComponent { [Parameter] public ButtonType ButtonType { get; set; } [Parameter] public PureSize Size { get; set; } = PureSize.Medium; - [Parameter] public ButtonVariant Variant { get; set; } = ButtonVariant.Default; + [Parameter] public PureVariant Variant { get; set; } = PureVariant.Default; [Parameter] public Accent Accent { get; set; } [Parameter] public string? Title { get; set; } [Parameter] public string? Name { get; set; } @@ -58,7 +57,6 @@ protected void OnClicked(MouseEventArgs e) protected override void BuildCss() { - InternalCss = ApplyStyle( - $"{PureTheme.Button.Base} {PureTheme.Button.Variants[Variant][Accent]} {PureTheme.Button.Sizes[Size]}"); + InternalCss = ApplyStyle($"{Css.Base} {Css.Variant(Variant, Accent)} {Css.Size(Size)}"); } } diff --git a/src/Pure.Blazor.Components/Buttons/PureDropdown.razor b/src/Pure.Blazor.Components/Buttons/PureDropdown.razor index dfd3148..662a9c7 100644 --- a/src/Pure.Blazor.Components/Buttons/PureDropdown.razor +++ b/src/Pure.Blazor.Components/Buttons/PureDropdown.razor @@ -2,14 +2,14 @@
-
-