Skip to content

Commit d3d5598

Browse files
authored
MudFontPicker (#23)
* FontPicker Initialize * Finalize
1 parent b525a00 commit d3d5598

File tree

7 files changed

+242
-29
lines changed

7 files changed

+242
-29
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@namespace MudExtensions
2+
@inherits MudAutocomplete<string>
3+
4+
<MudAutocomplete T="string" Class="@Class" PopoverClass="@PopoverClass" Style="@(StaticInputText ? null : $"font-family:\"{Font}\" !important")" Label="@Label" Value="@Font" Variant="@Variant" Margin="@Margin" Dense="@Dense"
5+
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"
6+
AutoFocus="@AutoFocus" Adornment="@Adornment" AdornmentAriaLabel="@AdornmentAriaLabel" AdornmentColor="@AdornmentColor" AdornmentIcon="@AdornmentIcon" AdornmentText="@AdornmentText" OnAdornmentClick="@OnAdornmentClick" SelectOnClick="@SelectOnClick" ResetValueOnEmptyText="@ResetValueOnEmptyText"
7+
SearchFunc="@SearchFonts" Clearable="@Clearable" OnClearButtonClick="@ClearFont" Error="@Error" ErrorId="@ErrorId" ErrorText="@ErrorText" CoerceValue="false" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin"
8+
DisableUnderLine="@DisableUnderLine" Immediate="@Immediate" For="@For" FullWidth="@FullWidth" MinCharacters="@MinCharacters" SelectValueOnTab="@SelectValueOnTab" Validation="@Validation" OnlyValidateIfDirty="@OnlyValidateIfDirty" ReadOnly="@ReadOnly">
9+
<ItemTemplate>
10+
<MudText Style="@($"font-family:\"{context}\" !important")">
11+
<style>
12+
@(ImportFontStyleText(context))
13+
</style>
14+
@context
15+
</MudText>
16+
</ItemTemplate>
17+
</MudAutocomplete>
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
using CodeBeam.MudExtensions.Utilities;
2+
using Microsoft.AspNetCore.Components;
3+
using Microsoft.AspNetCore.Components.Web;
4+
using MudBlazor;
5+
using MudBlazor.Utilities;
6+
using System;
7+
using System.Collections.Generic;
8+
using System.Linq;
9+
using System.Runtime.InteropServices;
10+
using System.Text;
11+
using System.Threading.Tasks;
12+
13+
namespace MudExtensions
14+
{
15+
public partial class MudFontPicker : MudAutocomplete<string>
16+
{
17+
[Parameter]
18+
public string Font { get; set; }
19+
20+
[Parameter]
21+
public List<string> FontCollection { get; set; } = GoogleFonts.FontListLatin;
22+
23+
/// <summary>
24+
/// The css import url for adding custom fonts. Default is google font url. Ex. 'https://font.something.com'
25+
/// </summary>
26+
[Parameter]
27+
public string RootImportUrl { get; set; }
28+
29+
/// <summary>
30+
/// If true, the input's label and text always use the theme font instead of font picker's value.
31+
/// </summary>
32+
[Parameter]
33+
public bool StaticInputText { get; set; }
34+
35+
[Parameter]
36+
public EventCallback<string> FontChanged { get; set; }
37+
38+
public string ImportFontStyleText(string font)
39+
{
40+
if (!string.IsNullOrEmpty(RootImportUrl))
41+
{
42+
return $"@import url('{RootImportUrl}{font.Replace(" ", "+")}')";
43+
}
44+
else
45+
{
46+
return $"@import url('https://fonts.googleapis.com/css2?family={font.Replace(" ", "+")}')";
47+
}
48+
}
49+
50+
public async Task ClearFont()
51+
{
52+
Font = null;
53+
await SetFontValue(null);
54+
}
55+
56+
protected async Task SetFontValue(string font)
57+
{
58+
if (font == Font)
59+
{
60+
return;
61+
}
62+
63+
Font = font;
64+
await FontChanged.InvokeAsync(font);
65+
StateHasChanged();
66+
}
67+
68+
private async Task<IEnumerable<String>> SearchFonts(string searchText)
69+
{
70+
if (FontCollection == null)
71+
{
72+
return null;
73+
}
74+
await Task.Delay(1);
75+
if (String.IsNullOrEmpty(searchText)) return FontCollection;
76+
return FontCollection.Where(c => c.ToLowerInvariant().Trim().StartsWith(searchText.ToLower().Trim())).ToList();
77+
}
78+
}
79+
}
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace CodeBeam.MudExtensions.Utilities
8+
{
9+
public static class GoogleFonts
10+
{
11+
public static List<string> FontListLatin = new List<string>()
12+
{
13+
"Abril Fatface", "Akshar", "Albert Sans", "Alegreya", "Alumni Sans", "Amatic SC", "Andada Pro", "Anton", "Antonio", "Anybody", "Archivo", "Archivo Narrow",
14+
"Arima", "Arimo", "Arvo", "Asap", "Assistant", "Azeret Mono",
15+
16+
"Ballet", "Baloo 2", "Barlow", "Barlow Condensed", "Bebas Neue", "Besley", "Big Shoulders Display", "Big Shoulders Inline Display", "Big Shoulders Inline Text", "Big Shoulders Stencil Display",
17+
"Big Shoulders Stencil Text", "Big Shoulders Text", "Bitter", "Bodoni Moda", "Brygada 1918",
18+
19+
"Cabin", "Cairo", "Cairo Play", "Catamaran", "Caveat", "Changa", "Cinzel", "Comfortaa", "Commissioner", "Cormorant", "Crimson Pro", "Crimson Text", "Cuprum",
20+
"Dancing Script", "Domine", "Dosis", "DynaPuff",
21+
22+
"EB Garamond", "Eczar", "Edu NSW ACT Foundation", "Edu QLD Beginner", "Edu SA Beginner", "Edu TAS Beginner", "Edu VIC WA NT Beginner", "El Messiri",
23+
"Encode Sans", "Encode Sans SC", "Epilogue", "Exo", "Exo 2", "Expletus Sans",
24+
25+
"Familjen Grotesk", "Fasthand", "Faustina", "Figtree", "Finlandica", "Fira Code", "Fraunces", "Fredoka", "Fredoka One", "Fuzzy Bubbles",
26+
"Gantari", "Gemunu Libre", "Genos", "Georama", "Glory", "Gluten", "Grandstander", "Grenze Gotisch",
27+
"Hahmlet", "Heebo", "Hepta Slab", "Hind", "Hind Siliguri",
28+
"Ibarra Real Nova", "Imbue", "Inconsolata", "Indie Flower", "Inter", "Inter Tight",
29+
"JetBrains Mono", "Josefin Sans", "Josefin Slab", "Jost", "Jura",
30+
"Kanit", "Kantumruy Pro", "Karla", "Kreon", "Kufam", "Kumbh Sans",
31+
32+
"Lato", "League Gothic", "League Spartan", "Lemonada", "Lexend", "Lexend Deca", "Lexend Exa", "Lexend Giga", "Lexend Mega",
33+
"Lexend Peta", "Lexend Tera", "Lexend Zetta", "Libre Bodoni", "Libre Franklin", "Literata", "Lora",
34+
35+
"M PLUS 1", "M PLUS 1 Code", "M PLUS 2", "M PLUS Code Latin", "Manrope", "Manuale", "Markazi Text", "Maven Pro", "Merriweather",
36+
"Merriweather Sans", "Mohave", "Montagu Slab", "Montserrat", "Mukta", "Mulish", "Murecho", "MuseoModerno",
37+
38+
"Nabla", "Newsreader", "Noto Emoji", "Noto Sans", "Nunito", "Nunito Sans",
39+
40+
"Open Sans", "Orbitron", "Oswald", "Outfit", "Overpass", "Overpass Mono", "Oxanium", "Oxygen",
41+
"Pacifico", "Petrona", "Piazzolla", "Play", "Playfair Display", "Permanent Marker", "Plus Jakarta Sans", "Podkova", "Poppins", "PT Serif", "Public Sans",
42+
"Questrial", "Quicksand",
43+
44+
"Radio Canada", "Raleway", "Rasa", "Readex Pro", "Recursive", "Red Hat Display", "Red Hat Mono", "Red Hat Text", "Red Rose", "Reem Kufi", "Reem Kufi Fun",
45+
"Righteous", "Roboto Condensed", "Roboto Flex", "Roboto Mono", "Roboto Serif", "Roboto Slab", "Rokkitt", "Rosario", "Rubik", "Ruda", "Russo One",
46+
47+
"Saira", "Saira Condensed", "Sansita Swashed", "Sarabun", "Satisfy", "Signika", "Signika Negative", "Smooch Sans", "Sora", "Source Code Pro", "Source Sans 3", "Source Serif 4", "Space Grotesk",
48+
"Spline Sans", "Spline Sans Mono", "Stick No Bills", "STIX Two Text", "Syne",
49+
50+
"Texturina", "Titilium Web", "Tourney", "Trispace", "Truculenta",
51+
52+
"Ubuntu", "Ubuntu Condensed", "Urbanist",
53+
"Varta", "Varela Round", "Vazirmatn", "Vollkorn",
54+
"Work Sans",
55+
"Yaldevi", "Yanone Kaffeesatz", "Yrsa"
56+
};
57+
58+
}
59+
}

ComponentViewer/App.razor

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,6 @@
1111
</NotFound>
1212
</Router>
1313

14-
<MudThemeProvider Theme="_theme"/>
15-
<MudDialogProvider/>
16-
<MudSnackbarProvider/>
1714

18-
@code {
19-
MudTheme _theme = new MudTheme()
20-
{
21-
LayoutProperties = new LayoutProperties()
22-
{
23-
DefaultBorderRadius = "20px"
24-
}
25-
};
26-
}
15+
16+

ComponentViewer/Pages/_Layout.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1010
<base href="~/" />
1111
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
12-
<link href="css/site.css" rel="stylesheet" />
12+
<link href="app.css" rel="stylesheet" />
1313
<link href="ComponentViewer.styles.css" rel="stylesheet" />
1414
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
1515
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
Lines changed: 67 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
11
@inherits LayoutComponentBase
22

3+
<style>
4+
@(_fontPicker?.ImportFontStyleText(font))
5+
</style>
6+
37
<MudLayout>
4-
<MudAppBar Class="appbar-style">
8+
<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">
59
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="4">
6-
<MudIconButton Class="reverse-color" Icon="@Icons.Custom.Brands.MudBlazor" Size="Size.Large" Href="https://mudblazor.com/" Target="_blank" />
7-
@* <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
8-
<defs>
9-
<style>
10-
.cls-1 {
11-
fill: #fde4e4;
12-
}</style>
13-
</defs>
14-
<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" />
15-
<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" />
16-
</svg>*@
10+
<MudIconButton Class="white-text" Icon="@Icons.Custom.Brands.MudBlazor" Size="Size.Large" Href="https://mudblazor.com/" Target="_blank" />
1711
<MudText>CodeBeam MudExtensions</MudText>
1812
</MudStack>
1913
</MudAppBar>
20-
<MudDrawer Open="false">
21-
22-
</MudDrawer>
23-
<MudMainContent>
14+
<MudMainContent Class="pt-0">
15+
<div class="pa-4">
16+
<MudFontPicker @ref="@_fontPicker" Label="Font Picker" StaticInputText="true" FontChanged="FontChanged" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" Clearable="true" MaxItems="null" />
17+
</div>
2418
@Body
2519
</MudMainContent>
2620
</MudLayout>
@@ -44,3 +38,60 @@
4438
color: var(--mud-palette-secondary) !important;
4539
}
4640
</style>
41+
42+
43+
<MudThemeProvider Theme="_theme" />
44+
<MudDialogProvider />
45+
<MudSnackbarProvider />
46+
47+
48+
@code {
49+
MudFontPicker _fontPicker;
50+
string font = "Roboto";
51+
bool open = false;
52+
53+
protected override async Task OnAfterRenderAsync(bool firstRender)
54+
{
55+
await base.OnAfterRenderAsync(firstRender);
56+
if (firstRender)
57+
{
58+
_fontPicker.Font = "Roboto";
59+
FontChanged();
60+
}
61+
}
62+
63+
MudTheme _theme = new MudTheme()
64+
{
65+
LayoutProperties = new LayoutProperties()
66+
{
67+
DefaultBorderRadius = "20px"
68+
},
69+
};
70+
71+
private void FontChanged()
72+
{
73+
font = _fontPicker?.Font;
74+
75+
if (font != null)
76+
{
77+
_theme = new MudTheme()
78+
{
79+
LayoutProperties = new LayoutProperties()
80+
{
81+
DefaultBorderRadius = "20px"
82+
},
83+
84+
Typography = new Typography()
85+
{
86+
Default = new Default()
87+
{
88+
FontFamily = new[] { font, "Roboto", "Poppins", "Helvetica", "sans-serif" }
89+
},
90+
}
91+
};
92+
}
93+
94+
95+
StateHasChanged();
96+
}
97+
}

ComponentViewer/wwwroot/app.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@keyframes background-gradient {
2+
0% {
3+
background-position: 0% 50%;
4+
}
5+
6+
50% {
7+
background-position: 100% 50%;
8+
}
9+
10+
100% {
11+
background-position: 0% 50%;
12+
}
13+
}
14+
15+
.background-gradient-animation {
16+
animation: background-gradient 24s ease infinite;
17+
}

0 commit comments

Comments
 (0)