MudFontPicker (#23)

* FontPicker Initialize

* Finalize

Author: mckaragoz

CodeBeam.MudExtensions/Components/FontPicker/MudFontPicker.razor

@@ -0,0 +1,17 @@
+@namespace MudExtensions
+@inherits MudAutocomplete<string>
+
+<MudAutocomplete T="string" Class="@Class" PopoverClass="@PopoverClass" Style="@(StaticInputText ? null : $"font-family:\"{Font}\" !important")" Label="@Label" Value="@Font" Variant="@Variant" Margin="@Margin" Dense="@Dense"
+        Required="@Required" RequiredError="@RequiredError" ValueChanged="@SetFontValue" Placeholder="@Placeholder" MaxItems="@MaxItems" Disabled="@Disabled" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" TextUpdateSuppression="@TextUpdateSuppression" Counter="@Counter" MaxLength="@MaxLength" IconSize="@IconSize" DebounceInterval="@DebounceInterval"
+        AutoFocus="@AutoFocus" Adornment="@Adornment" AdornmentAriaLabel="@AdornmentAriaLabel" AdornmentColor="@AdornmentColor" AdornmentIcon="@AdornmentIcon" AdornmentText="@AdornmentText" OnAdornmentClick="@OnAdornmentClick" SelectOnClick="@SelectOnClick" ResetValueOnEmptyText="@ResetValueOnEmptyText"
+        SearchFunc="@SearchFonts" Clearable="@Clearable" OnClearButtonClick="@ClearFont" Error="@Error" ErrorId="@ErrorId" ErrorText="@ErrorText" CoerceValue="false" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin"
+        DisableUnderLine="@DisableUnderLine" Immediate="@Immediate" For="@For" FullWidth="@FullWidth" MinCharacters="@MinCharacters" SelectValueOnTab="@SelectValueOnTab" Validation="@Validation" OnlyValidateIfDirty="@OnlyValidateIfDirty" ReadOnly="@ReadOnly">
+    <ItemTemplate>
+        <MudText Style="@($"font-family:\"{context}\" !important")">
+            <style>
+                @(ImportFontStyleText(context))
+            </style>
+            @context
+        </MudText>
+    </ItemTemplate>
+</MudAutocomplete>

CodeBeam.MudExtensions/Components/FontPicker/MudFontPicker.razor.cs

@@ -0,0 +1,79 @@
+using CodeBeam.MudExtensions.Utilities;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using MudBlazor;
+using MudBlazor.Utilities;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.InteropServices;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace MudExtensions
+{
+    public partial class MudFontPicker : MudAutocomplete<string>
+    {
+        [Parameter]
+        public string Font { get; set; }
+
+        [Parameter]
+        public List<string> FontCollection { get; set; } = GoogleFonts.FontListLatin;
+
+        /// <summary>
+        /// The css import url for adding custom fonts. Default is google font url. Ex. 'https://font.something.com'
+        /// </summary>
+        [Parameter]
+        public string RootImportUrl { get; set; }
+
+        /// <summary>
+        /// If true, the input's label and text always use the theme font instead of font picker's value.
+        /// </summary>
+        [Parameter]
+        public bool StaticInputText { get; set; }
+
+        [Parameter]
+        public EventCallback<string> FontChanged { get; set; }
+
+        public string ImportFontStyleText(string font)
+        {
+            if (!string.IsNullOrEmpty(RootImportUrl))
+            {
+                return $"@import url('{RootImportUrl}{font.Replace(" ", "+")}')";
+            }
+            else
+            {
+                return $"@import url('https://fonts.googleapis.com/css2?family={font.Replace(" ", "+")}')";
+            }
+        }
+
+        public async Task ClearFont()
+        {
+            Font = null;
+            await SetFontValue(null);
+        }
+
+        protected async Task SetFontValue(string font)
+        {
+            if (font == Font)
+            {
+                return;
+            }
+
+            Font = font;
+            await FontChanged.InvokeAsync(font);
+            StateHasChanged();
+        }
+
+        private async Task<IEnumerable<String>> SearchFonts(string searchText)
+        {
+            if (FontCollection == null)
+            {
+                return null;
+            }
+            await Task.Delay(1);
+            if (String.IsNullOrEmpty(searchText)) return FontCollection;
+            return FontCollection.Where(c => c.ToLowerInvariant().Trim().StartsWith(searchText.ToLower().Trim())).ToList();
+        }
+    }
+}

CodeBeam.MudExtensions/Utilities/GoogleFonts.cs

@@ -0,0 +1,59 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace CodeBeam.MudExtensions.Utilities
+{
+    public static class GoogleFonts
+    {
+        public static List<string> FontListLatin = new List<string>()
+        {
+        "Abril Fatface", "Akshar", "Albert Sans", "Alegreya", "Alumni Sans", "Amatic SC", "Andada Pro", "Anton", "Antonio", "Anybody", "Archivo", "Archivo Narrow",
+        "Arima", "Arimo", "Arvo", "Asap", "Assistant", "Azeret Mono",
+        
+        "Ballet", "Baloo 2", "Barlow", "Barlow Condensed", "Bebas Neue", "Besley", "Big Shoulders Display", "Big Shoulders Inline Display", "Big Shoulders Inline Text", "Big Shoulders Stencil Display",
+        "Big Shoulders Stencil Text", "Big Shoulders Text", "Bitter", "Bodoni Moda", "Brygada 1918",
+        
+        "Cabin", "Cairo", "Cairo Play", "Catamaran", "Caveat", "Changa", "Cinzel", "Comfortaa", "Commissioner", "Cormorant", "Crimson Pro", "Crimson Text", "Cuprum",
+        "Dancing Script", "Domine", "Dosis", "DynaPuff",
+        
+        "EB Garamond", "Eczar", "Edu NSW ACT Foundation", "Edu QLD Beginner", "Edu SA Beginner", "Edu TAS Beginner", "Edu VIC WA NT Beginner", "El Messiri",
+        "Encode Sans", "Encode Sans SC", "Epilogue", "Exo", "Exo 2", "Expletus Sans",
+        
+        "Familjen Grotesk", "Fasthand", "Faustina", "Figtree", "Finlandica", "Fira Code", "Fraunces", "Fredoka", "Fredoka One", "Fuzzy Bubbles",
+        "Gantari", "Gemunu Libre", "Genos", "Georama", "Glory", "Gluten", "Grandstander", "Grenze Gotisch",
+        "Hahmlet", "Heebo", "Hepta Slab", "Hind", "Hind Siliguri",
+        "Ibarra Real Nova", "Imbue", "Inconsolata", "Indie Flower", "Inter", "Inter Tight",
+        "JetBrains Mono", "Josefin Sans", "Josefin Slab", "Jost", "Jura",
+        "Kanit", "Kantumruy Pro", "Karla", "Kreon", "Kufam", "Kumbh Sans",
+        
+        "Lato", "League Gothic", "League Spartan", "Lemonada", "Lexend", "Lexend Deca", "Lexend Exa", "Lexend Giga", "Lexend Mega",
+        "Lexend Peta", "Lexend Tera", "Lexend Zetta", "Libre Bodoni", "Libre Franklin", "Literata", "Lora",
+        
+        "M PLUS 1", "M PLUS 1 Code", "M PLUS 2", "M PLUS Code Latin", "Manrope", "Manuale", "Markazi Text", "Maven Pro", "Merriweather",
+        "Merriweather Sans", "Mohave", "Montagu Slab", "Montserrat", "Mukta", "Mulish", "Murecho", "MuseoModerno",
+        
+        "Nabla", "Newsreader", "Noto Emoji", "Noto Sans", "Nunito", "Nunito Sans",
+
+        "Open Sans", "Orbitron", "Oswald", "Outfit", "Overpass", "Overpass Mono", "Oxanium", "Oxygen",
+        "Pacifico", "Petrona", "Piazzolla", "Play", "Playfair Display", "Permanent Marker", "Plus Jakarta Sans", "Podkova", "Poppins", "PT Serif", "Public Sans",
+        "Questrial", "Quicksand",
+
+        "Radio Canada", "Raleway", "Rasa", "Readex Pro", "Recursive", "Red Hat Display", "Red Hat Mono", "Red Hat Text", "Red Rose", "Reem Kufi", "Reem Kufi Fun",
+        "Righteous", "Roboto Condensed", "Roboto Flex", "Roboto Mono", "Roboto Serif", "Roboto Slab", "Rokkitt", "Rosario", "Rubik", "Ruda", "Russo One",
+
+        "Saira", "Saira Condensed", "Sansita Swashed", "Sarabun", "Satisfy", "Signika", "Signika Negative", "Smooch Sans", "Sora", "Source Code Pro", "Source Sans 3", "Source Serif 4", "Space Grotesk",
+        "Spline Sans", "Spline Sans Mono", "Stick No Bills", "STIX Two Text", "Syne",
+        
+        "Texturina", "Titilium Web", "Tourney", "Trispace", "Truculenta",
+        
+        "Ubuntu", "Ubuntu Condensed", "Urbanist",
+        "Varta", "Varela Round", "Vazirmatn", "Vollkorn",
+        "Work Sans",
+        "Yaldevi", "Yanone Kaffeesatz", "Yrsa"
+    };
+
+    }
+}

ComponentViewer/App.razor

@@ -11,16 +11,6 @@
     </NotFound>
 </Router>
 
-<MudThemeProvider Theme="_theme"/>
-<MudDialogProvider/>
-<MudSnackbarProvider/>
 
-@code {
-    MudTheme _theme = new MudTheme()
-        {
-            LayoutProperties = new LayoutProperties()
-            {
-                DefaultBorderRadius = "20px"
-            }
-        };
-}
+
+

ComponentViewer/Pages/_Layout.cshtml

@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-    <link href="css/site.css" rel="stylesheet" />
+    <link href="app.css" rel="stylesheet" />
     <link href="ComponentViewer.styles.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

ComponentViewer/Shared/MainLayout.razor

@@ -1,26 +1,20 @@
 @inherits LayoutComponentBase
 
+<style>
+    @(_fontPicker?.ImportFontStyleText(font))
+</style>
+
 <MudLayout>
-    <MudAppBar Class="appbar-style">
+    <MudAppBar Class="background-gradient-animation mud-width-full" Style="background: linear-gradient(-45deg, var(--mud-palette-info), var(--mud-palette-tertiary), var(--mud-palette-secondary), var(--mud-palette-primary)); background-size: 400% 400%; position: relative; overflow-x: hidden">
         <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="4">
-            <MudIconButton Class="reverse-color" Icon="@Icons.Custom.Brands.MudBlazor" Size="Size.Large" Href="https://mudblazor.com/" Target="_blank" />
-@*            <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
-                <defs>
-                    <style>
-                        .cls-1 {
-                            fill: #fde4e4;
-                        }</style>
-                </defs>
-                <path class="cls-1" d="M116.94,225.41H92.09a5.43,5.43,0,0,1-4.29-2l-41.66-37c-2.33-2-3.58-4.12-3.58-6.44s1.25-4.47,3.58-6.44l41.66-37a5.43,5.43,0,0,1,4.29-2h24.85c1.43,0,2.15.71,2.15,2.32a3.11,3.11,0,0,1-1.08,2.15L71.71,180,118,220.94a3.11,3.11,0,0,1,1.08,2.15C119.09,224.7,118.37,225.41,116.94,225.41Z" />
-                <path class="cls-1" d="M289.82,152.38a27.53,27.53,0,0,0-18.52,7.13L112.4,180l86.5,11.15,16.41-16.4,5.21,5.21-12.38,12.38,63.16,8.15a27.62,27.62,0,1,0,18.52-48.11Z" />
-            </svg>*@
+            <MudIconButton Class="white-text" Icon="@Icons.Custom.Brands.MudBlazor" Size="Size.Large" Href="https://mudblazor.com/" Target="_blank" />
             <MudText>CodeBeam MudExtensions</MudText>
         </MudStack>
     </MudAppBar>
-    <MudDrawer Open="false">
-
-    </MudDrawer>
-    <MudMainContent>
+    <MudMainContent Class="pt-0">
+        <div class="pa-4">
+            <MudFontPicker @ref="@_fontPicker" Label="Font Picker" StaticInputText="true" FontChanged="FontChanged" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" Clearable="true" MaxItems="null" />
+        </div>
         @Body
     </MudMainContent>
 </MudLayout>
@@ -44,3 +38,60 @@
             color: var(--mud-palette-secondary) !important;
         }
 </style>
+
+
+<MudThemeProvider Theme="_theme" />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
+
+@code {
+    MudFontPicker _fontPicker;
+    string font = "Roboto";
+    bool open = false;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+        if (firstRender)
+        {
+            _fontPicker.Font = "Roboto";
+            FontChanged();
+        }
+    }
+
+    MudTheme _theme = new MudTheme()
+        {
+            LayoutProperties = new LayoutProperties()
+            {
+                DefaultBorderRadius = "20px"
+            },
+        };
+
+    private void FontChanged()
+    {
+        font = _fontPicker?.Font;
+
+        if (font != null)
+        {
+            _theme = new MudTheme()
+                {
+                    LayoutProperties = new LayoutProperties()
+                    {
+                        DefaultBorderRadius = "20px"
+                    },
+
+                    Typography = new Typography()
+                    {
+                        Default = new Default()
+                        {
+                            FontFamily = new[] { font, "Roboto", "Poppins", "Helvetica", "sans-serif" }
+                        },
+                    }
+                };
+        }
+
+
+        StateHasChanged();
+    }
+}

ComponentViewer/wwwroot/app.css

@@ -0,0 +1,17 @@
+@keyframes background-gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.background-gradient-animation {
+    animation: background-gradient 24s ease infinite;
+}