Update the designer
This commit is contained in:
Denis Voituron
Родитель
3c933176d9
Коммит
563e12c728
|
|
@ -1,30 +1,54 @@
|
||||||
@using Microsoft.AspNetCore.Components.Forms
|
@using Microsoft.AspNetCore.Components.Forms
|
||||||
|
|
||||||
<div style="@Style">
|
<div style="@Style" class="theme-token-editor">
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Value</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
@foreach (var token in Tokens)
|
|
||||||
{
|
|
||||||
var name = token.Key;
|
|
||||||
var item = token.Value;
|
|
||||||
|
|
||||||
<tr>
|
@foreach (var mainSection in Tokens.Select(i => i.Value.MainSection).Distinct())
|
||||||
<td>
|
{
|
||||||
<strong>@name</strong>
|
<details>
|
||||||
</td>
|
<summary>
|
||||||
<td>
|
@mainSection
|
||||||
<InputText type="@(item.Type == "number" ? "number" : "text")"
|
</summary>
|
||||||
@bind-Value="@item.ValueAsString"
|
|
||||||
@bind-Value:after="@ApplyThemeAsync" />
|
@foreach (var subSection in Tokens.Where(i => i.Value.MainSection == mainSection).Select(i => i.Value.SubSection).Distinct())
|
||||||
</td>
|
{
|
||||||
</tr>
|
<details style="margin-left: 24px;">
|
||||||
|
<summary>
|
||||||
|
@subSection
|
||||||
|
</summary>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
@foreach (var token in Tokens.Where(i => i.Value.MainSection == mainSection && i.Value.SubSection == subSection))
|
||||||
|
{
|
||||||
|
var name = token.Key;
|
||||||
|
var item = token.Value;
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>@name</strong>
|
||||||
|
</td>
|
||||||
|
<td style="display: flex;">
|
||||||
|
@if (GetInputType(item) == "color")
|
||||||
|
{
|
||||||
|
<InputText @bind-Value="@item.ValueAsString"
|
||||||
|
@bind-Value:after="@ApplyThemeAsync" />
|
||||||
|
<InputText type="color"
|
||||||
|
@bind-Value="@item.ValueAsString"
|
||||||
|
@bind-Value:after="@ApplyThemeAsync" />
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<InputText type="@GetInputType(item)"
|
||||||
|
@bind-Value="@item.ValueAsString"
|
||||||
|
@bind-Value:after="@ApplyThemeAsync" />
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</details>
|
||||||
}
|
}
|
||||||
</tbody>
|
</details>
|
||||||
</table>
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -41,18 +41,28 @@ public partial class TokenEditor
|
||||||
{
|
{
|
||||||
var tokensJson = await JSRuntime.InvokeAsync<JsonElement>("Blazor.theme.getAllTokensValues");
|
var tokensJson = await JSRuntime.InvokeAsync<JsonElement>("Blazor.theme.getAllTokensValues");
|
||||||
Tokens = JsonSerializer.Deserialize<Dictionary<string, TokenItem>>(tokensJson.GetRawText(), JsonOptions) ?? [];
|
Tokens = JsonSerializer.Deserialize<Dictionary<string, TokenItem>>(tokensJson.GetRawText(), JsonOptions) ?? [];
|
||||||
|
|
||||||
|
foreach (var token in Tokens)
|
||||||
|
{
|
||||||
|
token.Value.Name = token.Key;
|
||||||
|
}
|
||||||
|
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private class TokenItem
|
private static string GetInputType(TokenItem token)
|
||||||
{
|
{
|
||||||
public string Type { get; set; } = string.Empty;
|
if (token.Type == "number")
|
||||||
public object Value { get; set; }= string.Empty;
|
|
||||||
public string ValueAsString
|
|
||||||
{
|
{
|
||||||
get => Value?.ToString() ?? string.Empty;
|
return "number";
|
||||||
set => Value = value;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (token.MainSection == "color")
|
||||||
|
{
|
||||||
|
return "color";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "text";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
.theme-token-editor ::deep input {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-token-editor ::deep input[type='color'] {
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
// ------------------------------------------------------------------------
|
||||||
|
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
|
||||||
|
// ------------------------------------------------------------------------
|
||||||
|
|
||||||
|
using System.Text.RegularExpressions;
|
||||||
|
|
||||||
|
namespace FluentUI.Demo.Client.Documentation.Theme;
|
||||||
|
|
||||||
|
internal class TokenItem
|
||||||
|
{
|
||||||
|
private string? _mainSection;
|
||||||
|
private string? _subSection;
|
||||||
|
|
||||||
|
public string Name { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
public string Type { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
public object Value { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
public string ValueAsString
|
||||||
|
{
|
||||||
|
get => Value?.ToString() ?? string.Empty;
|
||||||
|
set => Value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
public string MainSection => _mainSection ??= GetMainSectionName(Name);
|
||||||
|
|
||||||
|
public string SubSection => _subSection ??= GetSubSectionName(Name);
|
||||||
|
|
||||||
|
private static string GetMainSectionName(string value)
|
||||||
|
{
|
||||||
|
var pattern = @"^[a-z]+";
|
||||||
|
var match = Regex.Match(value, pattern);
|
||||||
|
|
||||||
|
return match.Success ? match.Value : string.Empty;
|
||||||
|
}
|
||||||
|
|
||||||
|
private static string GetSubSectionName(string value)
|
||||||
|
{
|
||||||
|
var pattern = @"^[a-z]+([A-Z][a-z]+)";
|
||||||
|
var match = Regex.Match(value, pattern);
|
||||||
|
|
||||||
|
return match.Success && match.Groups.Count > 1
|
||||||
|
? match.Groups[1].Value
|
||||||
|
: string.Empty;
|
||||||
|
}
|
||||||
|
}
|
||||||
Загрузка…
Ссылка в новой задаче